denoland · crowlKats · Apr 21, 2025 · Apr 21, 2025 · Apr 21, 2025 · Apr 21, 2025
diff --git a/src/html/comrak.rs b/src/html/comrak.rs
@@ -229,7 +229,7 @@ impl SyntaxHighlighterAdapter for ComrakHighlightWrapperAdapter {
     write!(output, "</code>")?;
     write!(
       output,
-      r#"<button class="context_button" data-copy="{}">{}{}</button>"#,
+      r#"<button class="copyButton" data-copy="{}">{}{}</button>"#,
       html_escape::encode_double_quoted_attribute(code),
       include_str!("./templates/icons/copy.svg"),
       include_str!("./templates/icons/check.svg"),

diff --git a/src/html/templates/comrak.css b/src/html/templates/comrak.css
@@ -16,7 +16,9 @@
   @apply inline text-stone-600 dark:text-stone-400;
 
   p {
-    @apply inline-block line-clamp-4;
+    max-width: 100%;
+
+    @apply inline-block line-clamp-4 leading-normal;
   }
 
   :not(pre) > code {
@@ -25,10 +27,7 @@
   }
 }
 
-.context_button {
-  @apply absolute top-3 right-4 opacity-60 hover:opacity-100 active:opacity-100
-    transition duration-75;
-
+.copyButton {
   svg.check {
     @apply hidden;
   }
@@ -45,7 +44,7 @@
 }
 
 .markdown {
-  @apply space-y-3 shrink min-w-0 max-w-[40ch] sm:max-w-screen-sm
+  @apply space-y-3 shrink min-w-0 max-w-prose sm:max-w-screen-sm
     md:max-w-screen-md lg:max-w-[75ch];
 
   h1 {
@@ -195,13 +194,17 @@
       @apply text-red-600 stroke-red-600 dark:text-red-600 dark:stroke-red-600;
     }
   }
-}
 
-.markdown .highlight {
-  @apply relative text-black bg-gray-50 dark:bg-gray-800 dark:text-white;
+  code {
+    @apply w-full;
+  }
+
+  .highlight {
+    @apply relative text-black bg-gray-50 dark:bg-gray-800 dark:text-white;
 
-  .lineNumbers {
-    @apply border-r-2 border-gray-300 pr-1 text-right flex-none
-      dark:border-gray-600;
+    .lineNumbers {
+      @apply border-r-2 border-gray-300 pr-1 text-right flex-none
+        dark:border-gray-600;
+    }
   }
 }
diff --git a/src/html/templates/comrak.gen.css b/src/html/templates/comrak.gen.css
diff --git a/src/html/templates/pages/darkmode_toggle.js b/src/html/templates/pages/darkmode_toggle.js
@@ -21,6 +21,7 @@ function setTheme(theme, themeToggle) {
 
 window.addEventListener("load", () => {
   const themeToggle = document.getElementById("theme-toggle");
+  themeToggle.removeAttribute("style");
 
   const storedTheme = localStorage.getItem("theme");
   const systemPrefersDark =
@@ -40,8 +41,6 @@ window.addEventListener("load", () => {
   }
 });
 
-document.getElementById("theme-toggle").removeAttribute("style");
-
 // prevent flash
 const theme = localStorage.getItem("theme") ||
   (window.matchMedia("(prefers-color-scheme: dark)").matches

diff --git a/src/html/templates/pages/search.js b/src/html/templates/pages/search.js
@@ -117,7 +117,7 @@ function renderResults(results) {
 
   for (const result of results) {
     const kind = result.kind.map((kind) => {
-      return `<div class="text-${kind.kind} bg-${kind.kind}/15 text-${kind.kind}Dark bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
+      return `<div class="text-${kind.kind} bg-${kind.kind}/15 dark:text-${kind.kind}Dark dark:bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
     }).join("");
 
     html += `<li class="block">

diff --git a/src/html/templates/source_button.hbs b/src/html/templates/source_button.hbs
@@ -1,5 +1,5 @@
 <a
-  class="context_button relative mr-2"
+  class="sourceButton"
   href="{{this}}">
   {{~> icons/source ~}}
 </a>
diff --git a/src/html/templates/styles.css b/src/html/templates/styles.css
@@ -15,6 +15,11 @@ a {
   --ddoc-selection-selected-border-color: #2564eb;
   --ddoc-selection-selected-bg: #056cf00c;
   --ddoc-selection-padding: 9px 15px;
+  --ddoc-usage-active-bg: #ebf6ff;
+
+  &:is(.dark *) {
+    --ddoc-usage-active-bg: theme("colors.stone.800");
+  }
 }
 
 .link {
@@ -63,6 +68,10 @@ a {
 .docEntry {
   @apply mb-4 space-y-2;
 
+  &:hover .sourceButton {
+    @apply flex;
+  }
+
   .docEntryHeader {
     @apply flex justify-between items-start md:text-base;
 
@@ -79,7 +88,7 @@ a {
     @apply space-y-2;
 
     > h2 {
-      @apply text-xl leading-6 font-semibold py-1 mb-0;
+      @apply text-xl leading-6 font-semibold py-1 mb-4;
     }
 
     /* markdown */
@@ -90,7 +99,7 @@ a {
 }
 
 .namespaceSection {
-  @apply space-y-4 mt-4 max-w-prose;
+  @apply space-y-3 mt-4 max-w-prose;
 
   .namespaceItem {
     @apply flex gap-x-2.5 md:min-h-[4rem] lg:pr-4 min-h-0;
@@ -112,12 +121,12 @@ a {
     }
 
     .namespaceItemContent {
-      > a, .namespaceItemContentSubItems a {
-        @apply underline decoration-stone-300 dark:decoration-stone-500;
+      flex: 1;
+      width: 0;
 
-        &:hover {
-          @apply no-underline;
-        }
+      > a, .namespaceItemContentSubItems a {
+        @apply underline decoration-stone-300 dark:decoration-stone-500
+          hover:no-underline;
       }
 
       > a {
@@ -146,9 +155,13 @@ a {
   article {
     @apply space-y-5;
 
-    > div:first-child {
+    .symbolTitle {
       @apply flex justify-between items-start;
 
+      &:hover .sourceButton {
+        @apply flex;
+      }
+
       > div:first-child {
         @apply font-medium space-y-1;
       }
@@ -160,7 +173,7 @@ a {
   @apply inline-flex justify-end shrink-0;
 
   div {
-    @apply rounded-full size-5 font-medium text-xs leading-5 text-center
+    @apply rounded-full size-4 font-medium text-xs leading-4 text-center
       align-middle shrink-0 select-none font-mono;
   }
 
@@ -295,20 +308,30 @@ a {
       dark:border-gray-600 dark:bg-gray-800;
 
     > code:first-child {
-      @apply py-2 px-3;
+      @apply pt-2 pr-10 pb-2 pl-2;
       scrollbar-width: thin;
     }
 
-    .context_button {
-      @apply top-1 right-2 opacity-0 hidden;
+    .copyButton {
+      @apply top-1 right-2 opacity-0;
     }
 
-    &:hover .context_button {
-      @apply opacity-100 block;
+    &:hover .copyButton {
+      @apply opacity-100;
     }
   }
 }
 
+pre.highlight {
+  .copyButton {
+    @apply absolute opacity-0 top-3 right-4;
+  }
+
+  &:hover .copyButton {
+    @apply opacity-60 hover:opacity-100;
+  }
+}
+
 #categoryPanel {
   @apply pt-3 text-sm;
 
@@ -346,15 +369,25 @@ a {
   }
 }
 
-.context_button {
-  @apply z-10 rounded p-1.5 cursor-pointer border bg-inherit hover:bg-stone-200
-    leading-[0] dark:bg-inherit dark:hover:bg-stone-800;
-}
-
 .see {
   @apply list-disc list-inside;
 
   > li * {
     display: inline-block;
   }
 }
+
+.sourceButton, .copyButton {
+  @apply z-10 rounded no-underline p-1.5 cursor-pointer bg-inherit
+    hover:bg-stone-200 leading-[0] dark:hover:bg-stone-800 transition
+    duration-75;
+}
+
+.sourceButton {
+  @apply flex-row gap-2 items-center relative mr-2 hidden;
+
+  &:before {
+    content: "View code";
+    @apply hidden md:block text-xs leading-none;
+  }
+}
diff --git a/src/html/templates/styles.gen.css b/src/html/templates/styles.gen.css
diff --git a/src/html/templates/symbol_group.hbs b/src/html/templates/symbol_group.hbs
@@ -1,7 +1,7 @@
 <main class="symbolGroup" id="symbol_{{name}}">
   {{~#each symbols~}}
     <article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-{{this.kind.kind}}">{{this.kind.title_lowercase}}</span>&nbsp;<span class="font-bold">{{../name}}</span>

diff --git a/src/html/usage.rs b/src/html/usage.rs
@@ -35,7 +35,7 @@ fn render_css_for_usage(name: &str) -> String {
 }}
 #{name}:checked ~ nav label[for='{name}'] {{
   cursor: unset;
-  background-color: #EBF6FF;
+  background-color: var(--ddoc-usage-active-bg);
 }}
 "#
   )

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -45,6 +45,7 @@ export default {
   safelist: [
     {
       pattern: new RegExp(`^text-(${Object.keys(extraColors).join("|")})$`),
+      variants: ["dark"],
     },
     {
       pattern: new RegExp(
@@ -55,7 +56,7 @@ export default {
       pattern: new RegExp(
         `^bg-(${Object.keys(extraColors).join("|")})\/(?:5|15)$`,
       ),
-      variants: ["hover"],
+      variants: ["hover", "dark"],
     },
   ],
   theme: {

diff --git a/tests/snapshots/html_test__html_doc_dts-10.snap b/tests/snapshots/html_test__html_doc_dts-10.snap
@@ -25,6 +25,7 @@ function setTheme(theme, themeToggle) {
 
 window.addEventListener("load", () => {
   const themeToggle = document.getElementById("theme-toggle");
+  themeToggle.removeAttribute("style");
 
   const storedTheme = localStorage.getItem("theme");
   const systemPrefersDark =
@@ -44,8 +45,6 @@ window.addEventListener("load", () => {
   }
 });
 
-document.getElementById("theme-toggle").removeAttribute("style");
-
 // prevent flash
 const theme = localStorage.getItem("theme") ||
   (window.matchMedia("(prefers-color-scheme: dark)").matches

diff --git a/tests/snapshots/html_test__html_doc_dts-13.snap b/tests/snapshots/html_test__html_doc_dts-13.snap
@@ -121,7 +121,7 @@ function renderResults(results) {
 
   for (const result of results) {
     const kind = result.kind.map((kind) => {
-      return `<div class="text-${kind.kind} bg-${kind.kind}/15 text-${kind.kind}Dark bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
+      return `<div class="text-${kind.kind} bg-${kind.kind}/15 dark:text-${kind.kind}Dark dark:bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
     }).join("");
 
     html += `<li class="block">

diff --git a/tests/snapshots/html_test__html_doc_dts-3.snap b/tests/snapshots/html_test__html_doc_dts-3.snap
@@ -74,7 +74,7 @@ expression: files.get(file_name).unwrap()
   </div>
 </nav>
 <div id="searchResults"></div><div id="content"><main class="symbolGroup" id="symbol_ResponseInit"><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Interface">interface</span>&nbsp;<span class="font-bold">ResponseInit</span>

diff --git a/tests/snapshots/html_test__html_doc_dts-4.snap b/tests/snapshots/html_test__html_doc_dts-4.snap
@@ -74,7 +74,7 @@ expression: files.get(file_name).unwrap()
   </div>
 </nav>
 <div id="searchResults"></div><div id="content"><main class="symbolGroup" id="symbol_ResponseInit.status"><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Property">property</span>&nbsp;<span class="font-bold">ResponseInit.status</span>

diff --git a/tests/snapshots/html_test__html_doc_dts-5.snap b/tests/snapshots/html_test__html_doc_dts-5.snap
@@ -74,7 +74,7 @@ expression: files.get(file_name).unwrap()
   </div>
 </nav>
 <div id="searchResults"></div><div id="content"><main class="symbolGroup" id="symbol_ResponseInit.statusText"><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Property">property</span>&nbsp;<span class="font-bold">ResponseInit.statusText</span>

diff --git a/tests/snapshots/html_test__html_doc_dts-6.snap b/tests/snapshots/html_test__html_doc_dts-6.snap
@@ -74,7 +74,7 @@ expression: files.get(file_name).unwrap()
   </div>
 </nav>
 <div id="searchResults"></div><div id="content"><main class="symbolGroup" id="symbol_WebSocket.OPEN"><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Property">property</span>&nbsp;<span class="font-bold">WebSocket.OPEN</span>

diff --git a/tests/snapshots/html_test__html_doc_dts-7.snap b/tests/snapshots/html_test__html_doc_dts-7.snap
@@ -74,7 +74,7 @@ expression: files.get(file_name).unwrap()
   </div>
 </nav>
 <div id="searchResults"></div><div id="content"><main class="symbolGroup" id="symbol_WebSocket.bufferedAmount"><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Property">property</span>&nbsp;<span class="font-bold">WebSocket.bufferedAmount</span>

diff --git a/tests/snapshots/html_test__html_doc_dts-8.snap b/tests/snapshots/html_test__html_doc_dts-8.snap
@@ -74,7 +74,7 @@ expression: files.get(file_name).unwrap()
   </div>
 </nav>
 <div id="searchResults"></div><div id="content"><main class="symbolGroup" id="symbol_WebSocket"><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Interface">interface</span>&nbsp;<span class="font-bold">WebSocket</span>
@@ -134,7 +134,7 @@ Properties</h2></div><div class="space-y-8"><div class="anchorable docEntry" id=
 </div>
 </div>
     </article><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Variable">variable</span>&nbsp;<span class="font-bold">WebSocket</span>

diff --git a/tests/snapshots/html_test__html_doc_dts-9.snap b/tests/snapshots/html_test__html_doc_dts-9.snap
@@ -74,7 +74,7 @@ expression: files.get(file_name).unwrap()
   </div>
 </nav>
 <div id="searchResults"></div><div id="content"><main class="symbolGroup" id="symbol_WebSocket.prototype"><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Property">property</span>&nbsp;<span class="font-bold">WebSocket.prototype</span>

diff --git a/tests/snapshots/html_test__html_doc_files_multiple-10.snap b/tests/snapshots/html_test__html_doc_files_multiple-10.snap
@@ -59,7 +59,7 @@ expression: files.get(file_name).unwrap()
   </div>
 </nav>
 <div id="searchResults"></div><div id="content"><main class="symbolGroup" id="symbol_B"><article>
-      <div>
+      <div class="symbolTitle">
         <div>
           <div class="text-2xl leading-none break-all">
             <span class="text-Class">class</span>&nbsp;<span class="font-bold">B</span>
@@ -70,7 +70,7 @@ expression: files.get(file_name).unwrap()
 <div class="toc">
     <div><div class="usageContent">
     <h3>Usage</h3><div class="markdown"><pre class="highlight"><code class="language-typescript">import { B } from &quot;.&quot;;
-</code><button class="context_button" data-copy="import { B } from &quot;.&quot;;
+</code><button class="copyButton" data-copy="import { B } from &quot;.&quot;;
 "><svg class="copy" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="2" y="2" width="7" height="7" fill="none"/>
 <rect x="6" y="6" width="7" height="7" fill="none"/>