Add a JS copy button to the HTML

.prettierignore

@@ -1,2 +1,3 @@
 conformance
 pnpm-lock.yaml
+tsconfig.json

build.rs

@@ -3,7 +3,7 @@ use std::{
     env,
     fs::{self, File},
     io::Write,
-    path::PathBuf,
+    path::{Path, PathBuf},
 };
 
 fn main() {
@@ -24,19 +24,12 @@ fn capture_html_assets() {
 
     let entry = fs::read_to_string(&asset_index).expect("Could not read the UI entrypoint");
 
-    let find_css =
-        Regex::new(r#"href="/assets/(ui.[a-zA-Z0-9]+.css)""#).expect("Invalid CSS regex");
-    let (_, [css_name]) = find_css
-        .captures(&entry)
-        .expect("Could not find CSS")
-        .extract();
-
-    let css = asset_root.join(css_name);
-    let css_map = {
-        let mut c = css.clone();
-        c.as_mut_os_string().push(".map");
-        c
-    };
+    let (css_name, css, css_map) = extract_asset(&entry, &asset_root, {
+        r#"href="/assets/(ui.[a-zA-Z0-9]+.css)""#
+    });
+    let (js_name, js, js_map) = extract_asset(&entry, &asset_root, {
+        r#"src="/assets/(ui.[a-zA-Z0-9]+.js)""#
+    });
 
     let out_path = env::var("OUT_DIR").expect("`OUT_DIR` must be set");
     let mut out_path = PathBuf::from(out_path);
@@ -65,11 +58,18 @@ fn capture_html_assets() {
         pub const CSS_NAME: &str = "{css_name}";
         pub const CSS: &str = include_str!("{css}");
         pub const CSS_MAP: &str = include_str!("{css_map}");
+
+        pub const JS_NAME: &str = "{js_name}";
+        pub const JS: &str = include_str!("{js}");
+        pub const JS_MAP: &str = include_str!("{js_map}");
         "##,
         asset_index = asset_index.display(),
         css_name = css_name.escape_default(),
         css = css.display(),
         css_map = css_map.display(),
+        js_name = js_name.escape_default(),
+        js = js.display(),
+        js_map = js_map.display(),
     )
     .expect("Could not write HTML assets file");
 
@@ -79,3 +79,20 @@ fn capture_html_assets() {
         asset_index = asset_index.display(),
     );
 }
+
+fn extract_asset<'a>(entry: &'a str, asset_root: &Path, re: &str) -> (&'a str, PathBuf, PathBuf) {
+    let find_asset = Regex::new(re).expect("Invalid asset regex");
+    let (_, [asset_name]) = find_asset
+        .captures(entry)
+        .expect("Could not find asset")
+        .extract();
+
+    let asset = asset_root.join(asset_name);
+    let asset_map = {
+        let mut a = asset.clone();
+        a.as_mut_os_string().push(".map");
+        a
+    };
+
+    (asset_name, asset, asset_map)
+}

package.json

@@ -18,11 +18,13 @@
     "parcel": "^2.12.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5"
   },
   "scripts": {
     "watch": "parcel watch",
     "build": "parcel build",
+    "check": "tsc --noEmit",
     "fmt": "prettier . --write",
     "fmt:check": "prettier . --check"
   }

src/html.rs

@@ -20,11 +20,7 @@ pub fn write(registry: &Registry) -> Result<(), Error> {
     let assets_dir = registry.path.join("assets");
     fs::create_dir_all(&assets_dir).context(AssetDirSnafu { path: &assets_dir })?;
 
-    let css_path = {
-        let mut css_path = assets_dir;
-        css_path.push(assets::CSS_NAME);
-        css_path
-    };
+    let css_path = assets_dir.join(assets::CSS_NAME);
     fs::write(&css_path, assets::CSS).context(CssSnafu { path: &css_path })?;
 
     let css_map_path = {
@@ -36,6 +32,16 @@ pub fn write(registry: &Registry) -> Result<(), Error> {
         path: &css_map_path,
     })?;
 
+    let js_path = assets_dir.join(assets::JS_NAME);
+    fs::write(&js_path, assets::JS).context(JsSnafu { path: &js_path })?;
+
+    let js_map_path = {
+        let mut js_map_path = js_path;
+        js_map_path.as_mut_os_string().push(".map");
+        js_map_path
+    };
+    fs::write(&js_map_path, assets::JS_MAP).context(JsMapSnafu { path: &js_map_path })?;
+
     Ok(())
 }
 
@@ -53,6 +59,12 @@ pub enum Error {
 
     #[snafu(display("Could not write the CSS sourcemap file to {}", path.display()))]
     CssMap { source: io::Error, path: PathBuf },
+
+    #[snafu(display("Could not write the JS file to {}", path.display()))]
+    Js { source: io::Error, path: PathBuf },
+
+    #[snafu(display("Could not write the JS sourcemap file to {}", path.display()))]
+    JsMap { source: io::Error, path: PathBuf },
 }
 
 const CARGO_DOCS: &str =
@@ -89,9 +101,17 @@ fn index(config: &ConfigV1, crates: &ListAll) -> Markup {
     fn code_block(content: impl AsRef<str>) -> Markup {
         let content = content.as_ref();
 
+        let span_class = "col-start-1 row-start-1 leading-none p-1";
+
         html! {
-            pre class="border border-black bg-theme-rose-light m-1 p-1 overflow-x-auto" {
-                code { (content) }
+            mg-copy {
+                pre class="relative border border-black bg-theme-rose-light m-1 p-1 overflow-x-auto" {
+                    button class="hidden absolute top-0 right-0 grid" data-target="copy" {
+                        span class=(span_class) data-target="state0" { "Copy" }
+                        span class={(span_class) " invisible"} data-target="state1" { "Copied" }
+                    }
+                    code data-target="content" { (content) }
+                }
             }
         }
     }

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/html.rs"],
+  content: ["./src/html.rs", "./ui/*.{html,ts}"],
   theme: {
     extend: {
       colors: {