new usage block

Author: crowlKats

build_css.ts

@@ -1,5 +1,5 @@
 import $ from "https://deno.land/x/dax@0.36.0/mod.ts";
-import browserslist from "npm:browserslist@4.22.2";
+import browserslist from "npm:browserslist@4.23.0";
 import { browserslistToTargets, transform } from "npm:lightningcss";
 
 const browsers = browserslist(">= 0.5%, not dead");

src/html/comrak_adapters.rs

@@ -50,7 +50,7 @@ impl HighlightAdapter {
         ));
       }
 
-      highlighter(&mut lines, line)?;
+      highlighter(&mut lines, &html_escape::encode_text(line))?;
 
       if self.show_line_numbers {
         lines.push_str("</span>");

src/html/jsdoc.rs

@@ -295,14 +295,11 @@ pub fn markdown_to_html(
 
   let mut html = {
     let arena = Arena::new();
-    let root = comrak::parse_document(&arena, md, &options);
+    let root = comrak::parse_document(&arena, &md, &options);
 
     walk_node(&arena, root, &options, &plugins);
 
-    let mut bw = std::io::BufWriter::new(Vec::new());
-    comrak::format_html_with_plugins(root, &options, &mut bw, &plugins)
-      .unwrap();
-    String::from_utf8(bw.into_inner().unwrap()).unwrap()
+    render_node(root, &options, &plugins)
   };
 
   #[cfg(feature = "ammonia")]

src/html/mod.rs

@@ -62,9 +62,15 @@ pub type UsageComposer = Rc<
     &RenderContext,
     &[DocNodeWithContext],
     String,
-  ) -> IndexMap<String, String>,
+  ) -> IndexMap<UsageComposerEntry, String>,
 >;
 
+#[derive(Eq, PartialEq, Hash)]
+pub struct UsageComposerEntry {
+  pub name: String,
+  pub icon: Option<std::borrow::Cow<'static, str>>,
+}
+
 #[derive(Clone)]
 pub struct GenerateOptions {
   /// The name that is shown is the top-left corner, eg. "deno_std".

src/html/templates/script.js

@@ -1,5 +1,24 @@
+function findParent(el, find) {
+  do {
+    if (find(el)) {
+      return el;
+    }
+  } while (el = el.parentElement);
+}
+
 document.addEventListener("click", (e) => {
-  if (e.target instanceof HTMLButtonElement && e.target.dataset["copy"]) {
-    return navigator?.clipboard?.writeText(e.target.dataset["copy"]);
+  const target = findParent(e.target, (el) => el instanceof HTMLButtonElement && el.dataset["copy"]);
+  if (target) {
+    navigator?.clipboard?.writeText(target.dataset["copy"]);
   }
 });
+
+window.addEventListener("load", () => {
+  const checkbox = document.getElementById("usageDropdownInput");
+  document.addEventListener("mouseup", (e) => {
+    const label = findParent(e.target, (el) => el instanceof HTMLLabelElement && el.htmlFor === "usageDropdownInput");
+    if(!label) {
+      checkbox.checked = false;
+    }
+  });
+});

src/html/templates/styles.css

@@ -79,7 +79,7 @@ summary::-webkit-details-marker {
 }
 
 .usage pre.highlight {
-  @apply border border-gray-300;
+  @apply border border-gray-300 max-md:border-x-0;
 }
 
 /* markdown */

src/html/templates/styles.gen.css

@@ -1,4 +1,4 @@
-<div class="p-4 mb-4 border-2 rounded-lg bg-stone-50 border-stone-200 usage">
+<div class="px-6 py-5 mb-4 border max-md:border-x-0 md:rounded-lg bg-stone-50 border-stone-200 usage">
   {{~#each usages~}}
     <style scoped>
       {{{~additional_css~}}} {{! css }}
@@ -7,13 +7,40 @@
     <input type="radio" name="usage" id="{{name}}" class="hidden" {{~#if @first~}}checked{{~/if~}} />
   {{~/each~}}
 
-  <nav class="{{~#unless ../show_tabs~}}hidden{{~/unless}} border-b border-gray-300 flex flex-row mb-2">
-    {{~#each usages~}}
-      <label for="{{name}}" class="cursor-pointer select-none md:px-4 px-4 py-1 text-sm md:text-base leading-none rounded-t-md md:hover:bg-gray-100 md:hover:border-b-2">
-        {{name}}
-      </label>
-    {{~/each~}}
-  </nav>
+	{{~#if ../show_tabs~}}
+	  <nav class="flex items-center flex-row gap-2 mb-3 font-semibold">
+		  <span>Usage instructions for</span>
+
+		  <div>
+			  <input type="checkbox" id="usageDropdownInput" class="hidden peer" />
+
+			  <label for="usageDropdownInput" class="flex gap-1 select-none cursor-pointer">
+				  {{~#each usages~}}
+					  <div id="{{name}}_active_dropdown" class="hidden items-center gap-1">
+						  <div class="h-4 *:h-4 *:w-auto">{{{icon}}} {{! icon }}</div>
+						  <div class="leading-none">{{name}}</div>
+					  </div>
+				  {{~/each~}}
+
+				  <div class="rotate-90">
+					  {{~> icons/arrow }}
+				  </div>
+			  </label>
+
+			  <div class="md:relative hidden peer-checked:block" id="usageDropdown">
+				  <div class="absolute max-md:inset-x-0 mt-1.5 p-2 block z-30 md:w-72 bg-white md:rounded border max-md:border-x-0 border-gray-300">
+					  {{~#each usages~}}
+						  <label for="{{name}}" class="flex items-center justify-between cursor-pointer select-none px-2 py-1 leading-normal rounded-sm hover:bg-gray-50">
+							  <div>{{name}}</div>
+
+							  <div class="h-5 *:h-5 *:w-auto">{{{icon}}} {{! icon }}</div>
+						  </label>
+					  {{~/each~}}
+				  </div>
+			  </div>
+		  </div>
+	  </nav>
+	{{~/if}}
 
   <div>
     {{~#each usages~}}

src/html/templates/usages.hbs

@@ -10,13 +10,12 @@ fn render_css_for_usage(name: &str) -> String {
 #{name}:checked ~ *:last-child > :not(#{name}_content) {{
   display: none;
 }}
-#{name}:checked ~ nav:first-of-type > label[for='{name}'] {{
-  border-bottom-width: 2px;
-  cursor: unset;
-  border-color: rgb(17 24 39);
+#{name}:checked ~ nav #{name}_active_dropdown {{
+  display: flex;
 }}
-#{name}:not:checked ~ nav:first-of-type > label[for='{name}'] {{
-  border-color: rgb(209 213 219);
+#{name}:checked ~ nav label[for='{name}'] {{
+  cursor: unset;
+  background-color: #EBF6FF;
 }}
 "#
   )
@@ -112,6 +111,7 @@ pub struct UsagesCtx {
 pub struct UsageCtx {
   name: String,
   content: String,
+  icon: Option<std::borrow::Cow<'static, str>>,
   additional_css: String,
 }
 
@@ -130,9 +130,10 @@ impl UsagesCtx {
 
       let usages = usages
         .into_iter()
-        .map(|(name, content)| UsageCtx {
-          additional_css: render_css_for_usage(&name),
-          name,
+        .map(|(entry, content)| UsageCtx {
+          additional_css: render_css_for_usage(&entry.name),
+          name: entry.name,
+          icon: entry.icon,
           content: crate::html::jsdoc::render_markdown(ctx, &content),
         })
         .collect::<Vec<_>>();
@@ -155,6 +156,7 @@ impl UsagesCtx {
         usages: vec![UsageCtx {
           name: "".to_string(),
           content: rendered_import_statement,
+          icon: None,
           additional_css: "".to_string(),
         }],
       })