denoland · thisisjofrank · Jan 28, 2025 · Jan 29, 2025 · Jan 30, 2025 · Jan 30, 2025
diff --git a/_components/Header.tsx b/_components/Header.tsx
@@ -10,8 +10,7 @@ export default function Header({
   const reference = url.startsWith("/api");
   return (
     <header
-      class={`bg-background-primary text-foreground-primary border-b border-foreground-tertiary z-30 ${
-        reference ? "" : "sticky top-0 left-0 right-0"
+      class={`bg-background-primary text-foreground-primary border-b border-foreground-tertiary z-30 sticky top-0 left-0 right-0"
       }`}
     >
       <nav class="p-4 py-3 md:px-6 min-h-16 flex items-center justify-between">
@@ -123,39 +122,6 @@ export default function Header({
           </div>
         </div>
       </nav>
-
-      {reference &&
-        (
-          <nav className="px-4 md:px-6 py-3 text-sm bg-background-primary flex items-center justify-between border-box border-t border-foreground-tertiary z-[1000]">
-            <ul className="flex">
-              <li>
-                <HeaderItem
-                  url={url}
-                  activeOn="/api/deno"
-                  href="/api/deno"
-                  name="Deno APIs"
-                  firstItem={true}
-                />
-              </li>
-              <li>
-                <HeaderItem
-                  url={url}
-                  activeOn="/api/web"
-                  href="/api/web"
-                  name="Web APIs"
-                />
-              </li>
-              <li>
-                <HeaderItem
-                  url={url}
-                  activeOn="/api/node"
-                  href="/api/node"
-                  name="Node APIs"
-                />
-              </li>
-            </ul>
-          </nav>
-        )}
     </header>
   );
 }

diff --git a/_config.ts b/_config.ts
@@ -1,7 +1,6 @@
 import "@std/dotenv/load";
 
 import lume from "lume/mod.ts";
-import checkUrls from "lume/plugins/check_urls.ts";
 import esbuild from "lume/plugins/esbuild.ts";
 import jsx from "lume/plugins/jsx_preact.ts";
 import postcss from "lume/plugins/postcss.ts";
@@ -184,25 +183,6 @@ site.scopedUpdates(
   (path) => path.startsWith("/api/deno/"),
 );
 
-const SKIP_CHECK_URLS = (Deno.env.get("SKIP_CHECK_URLS") || "false")
-  .toLowerCase();
-
-if (SKIP_CHECK_URLS !== "true") {
-  log.info(`${cliNow()} Enabling broken-link checker`);
-
-  site.use(
-    checkUrls({
-      external: false, // Set to true to check external links
-      output: "_broken_links.json",
-      ignore: ["https://www.googletagmanager.com"],
-    }),
-  );
-} else {
-  log.warn(
-    `${cliNow()} <cyan>checkUrls</cyan>: Skipping broken link check for local performance.`,
-  );
-}
-
 site.addEventListener("afterStartServer", () => {
   log.warn(
     `${cliNow()} Server available at <green>http://localhost:3000</green>`,

diff --git a/_includes/layout.tsx b/_includes/layout.tsx
@@ -1,5 +1,3 @@
-import Header from "../_components/Header.tsx";
-
 export default function Layout(props: Lume.Data) {
   const reference = props.url.startsWith("/api");
   const description = props.description ||
@@ -101,7 +99,7 @@ export default function Layout(props: Lume.Data) {
         >
           Skip to main content <span aria-hidden="true">-&gt;</span>
         </a>
-        <Header url={props.url} hasSidebar={!!props.sidebar} />
+        <props.comp.Header url={props.url} hasSidebar={!!props.sidebar} />
         {props.children}
       </body>
     </html>

diff --git a/_includes/reference/allSymbols.tsx b/_includes/reference/allSymbols.tsx
@@ -7,8 +7,8 @@ export default function AllSymbols(
   _helpers: Lume.Helpers,
 ) {
   return (
-    <main>
+    <>
       <comp.SymbolContent symbolContent={data.content} />
-    </main>
+    </>
   );
 }
diff --git a/_includes/reference/base.tsx b/_includes/reference/base.tsx
@@ -7,35 +7,34 @@ export default function Base(
   _helpers: Lume.Helpers,
 ) {
   return (
-    <div className="ddoc">
-      <link rel="stylesheet" href="/reference_styles.css" />
-
-      <comp.CategoryPanel categoryPanel={data.categories_panel} />
-
-      <div>
-        <nav className="top-0 sticky bg-white z-50 py-3 h-14" id="topnav">
-          <div className="h-full">
-            <div>
-              <comp.Breadcrumbs parts={data.breadcrumbs_ctx.parts} />
-            </div>
-          </div>
-        </nav>
-
-        <div id="content">
+    <div className="flex items-stretch">
+      <comp.CategoryPanel
+        categoryPanel={data.categories_panel}
+        url={data.url}
+      />
+      <div className="mx-auto px-4 sm:px-5 md:px-6 pt-4">
+        {data.breadcrumbs_ctx.parts.length > 1 && (
+          <nav>
+            <comp.Breadcrumbs parts={data.breadcrumbs_ctx.parts} />
+          </nav>
+        )}
+        <main id="content" className="markdown-body mt-4 rounded-lg">
+          {(() => {
+            const name = data.breadcrumbs_ctx
+              .parts[data.breadcrumbs_ctx.parts.length - 1].name;
+            return <h1>{name}</h1>;
+          })()}
           {children}
-
-          <div>
-            {"toc_ctx" in data && (
-              <comp.Toc
-                documentNavigation={(data.toc_ctx as ToCCtx)
-                  .document_navigation}
-                documentNavigationStr={(data.toc_ctx as ToCCtx)
-                  .document_navigation_str}
-              />
-            )}
-          </div>
-        </div>
+        </main>
       </div>
+      {"toc_ctx" in data && (
+        <comp.Toc
+          documentNavigation={(data.toc_ctx as ToCCtx)
+            .document_navigation}
+          documentNavigationStr={(data.toc_ctx as ToCCtx)
+            .document_navigation_str}
+        />
+      )}
     </div>
   );
 }
diff --git a/_includes/reference/index.tsx b/_includes/reference/index.tsx
@@ -7,11 +7,11 @@ export default function Index(
   _helpers: Lume.Helpers,
 ) {
   return (
-    <main>
+    <>
       <comp.UsageLarge usages={data.usage} />
       {data.module_doc && <comp.ModuleDoc moduleDoc={data.module_doc} />}
       {data.overview &&
         <comp.SymbolContent symbolContent={data.overview} />}
-    </main>
+    </>
   );
 }
diff --git a/reference/_components/Anchor.tsx b/reference/_components/Anchor.tsx
@@ -2,8 +2,14 @@ import type { AnchorCtx } from "@deno/doc";
 
 export default function ({ comp, anchor }: { comp: any; anchor: AnchorCtx }) {
   return (
-    <a href={`#${anchor.id}`} class="anchor" aria-label="Anchor" tabIndex="-1">
-      <comp.link />
+    <a
+      href={`#${anchor.id.replace(" ", "-").toLowerCase()}`}
+      class="header-anchor"
+      aria-label="Anchor"
+      tabIndex="-1"
+    >
+      <span class="sr-only">Jump to heading</span>
+      <span aria-hidden="true" class="anchor-end">#</span>
     </a>
   );
 }
diff --git a/reference/_components/Breadcrumbs.tsx b/reference/_components/Breadcrumbs.tsx
@@ -1,7 +1,7 @@
 import type { BreadcrumbCtx } from "@deno/doc";
 
 export default function (
-  { comp, parts }: { comp: any; parts: BreadcrumbCtx[] },
+  { parts }: { comp: any; parts: BreadcrumbCtx[] },
 ) {
   const pathParts: BreadcrumbCtx[] = [];
   const symbolParts: BreadcrumbCtx[] = [];
@@ -15,7 +15,7 @@ export default function (
   }
 
   return (
-    <ul class="breadcrumbs">
+    <ul class="flex flex-wrap text-foreground-secondary items-center -ml-3">
       {pathParts.map((part, i) => {
         const isLast =
           !(i !== (pathParts.length - 1) || symbolParts.length > 0);
@@ -24,9 +24,19 @@ export default function (
           <>
             {renderPart(part, isLast)}
             {!isLast && (
-              <span className="text-[#0F172A]">
-                <comp.Arrow />
-              </span>
+              <li>
+                <svg
+                  class="size-4 text-foreground-secondary rotate-90"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
+                  >
+                  </path>
+                </svg>
+              </li>
             )}
           </>
         );
@@ -52,10 +62,15 @@ export default function (
 
 function renderPart(part: BreadcrumbCtx, isLast: boolean) {
   return (
-    <li>
-      {isLast
-        ? part.name
-        : <a href={part.href} className="contextLink">{part.name}</a>}
+    <li className="block px-3 py-1.5 text-sm">
+      {isLast ? part.name : (
+        <a
+          href={part.href}
+          className="py-1.5 underline underline-offset-4 decoration-foreground-tertiary hover:text-foreground-secondary hover:underline-medium hover:bg-foreground-tertiary dark:hover:bg-background-secondary dark:hover:text-foreground-primary rounded transition duration-100 text-sm"
+        >
+          {part.name}
+        </a>
+      )}
     </li>
   );
 }
diff --git a/reference/_components/CategoryPanel.tsx b/reference/_components/CategoryPanel.tsx
@@ -1,33 +1,68 @@
 import type { CategoriesPanelCtx } from "@deno/doc";
 
 export default function (
-  { categoryPanel, comp }: {
+  { categoryPanel, comp, url }: {
     categoryPanel: CategoriesPanelCtx | null;
     comp: any;
+    url: string;
   },
 ) {
   if (!categoryPanel) {
     return null;
   }
 
   return (
-    <div id="categoryPanel">
-      <ul>
+    <div
+      id="categoryPanel"
+      className="w-74 pt-2 h-full shrink-0 grow-0 sticky top-16 hidden xl:block border-r border-foreground-tertiary dark:border-background-tertiary"
+    >
+      <ul class="border-bg-tertiary bg-background-secondary m-2 mt-0 mb-4 py-2 rounded-md border border-background-tertiary">
+        <li className="mx-2">
+          <comp.HeaderItem
+            url="/api/deno"
+            active={url.includes("/api/deno")}
+            href="/api/deno"
+            name="Deno APIs"
+          />
+        </li>
+        <li className="mx-2">
+          <comp.HeaderItem
+            url="/api/web"
+            active={url.includes("/api/web")}
+            href="/api/web"
+            name="Web APIs"
+          />
+        </li>
+        <li className="mx-2">
+          <comp.HeaderItem
+            url="/api/node"
+            active={url.includes("/api/node")}
+            href="/api/node"
+            name="Node APIs"
+          />
+        </li>
+      </ul>
+
+      <ul className="mb-4">
         {categoryPanel.categories.map((category) => (
-          <li key={category} class={category.active ? "active" : ""}>
-            <a href={category.href} title={category.name}>{category.name}</a>
+          <li key={category} class={category.active ? "active mx-2" : "mx-2"}>
+            <a
+              className="block px-3 py-1.5 text-[.8125rem] leading-4 font-normal text-foreground-secondary rounded-md ring-1 ring-transparent hover:ring-background-tertiary hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 current:font-semibold transition-colors duration-200 ease-in-out select-none"
+              href={category.href}
+              title={category.name}
+            >
+              {category.name}
+            </a>
           </li>
         ))}
 
-        <li>
+        <li className="mx-2">
           <a
-            className="!flex items-center gap-0.5"
             href={categoryPanel.all_symbols_href}
+            className="block px-3 py-1.5 text-[.8125rem] leading-4 font-bold text-foreground-secondary rounded-md ring-1 ring-transparent hover:ring-background-tertiary hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 current:font-semibold transition-colors duration-200 ease-in-out select-none"
+            title={`View all ${categoryPanel.total_symbols} symbols`}
           >
-            <span className="leading-none">
-              view all {categoryPanel.total_symbols} symbols
-            </span>
-            <comp.Arrow />
+            View all {categoryPanel.total_symbols} symbols
           </a>
         </li>
       </ul>

diff --git a/reference/_components/DocNodeKindIcon.tsx b/reference/_components/DocNodeKindIcon.tsx
@@ -4,13 +4,13 @@ export default function ({ kinds }: { kinds: DocNodeKindCtx[] }) {
   return (
     <div className="docNodeKindIcon">
       {kinds.map((item, index) => (
-        <div
+        <span
           key={index}
           className={`text-${item.kind} bg-${item.kind}/15`}
           title={item.title}
         >
           {item.char}
-        </div>
+        </span>
       ))}
     </div>
   );

diff --git a/reference/_components/HeaderItem.tsx b/reference/_components/HeaderItem.tsx
@@ -0,0 +1,25 @@
+export default function HeaderItem({
+  active,
+  href,
+  name,
+  hideOnMobile,
+}: {
+  url: string;
+  active: boolean;
+  href: string;
+  name: string;
+  hideOnMobile?: boolean;
+  firstItem?: boolean;
+}) {
+  return (
+    <a
+      className={`relative block py-1.5 px-1.5 text-base text-foreground-primary leading-snug rounded ring-1 ring-transparent hover:ring-background-tertiary hover:bg-background-secondary transition-colors duration-200 ease-in-out select-none current:bg-background-tertiary font-normal 
+      ${hideOnMobile ? "max-xl:!hidden" : ""}
+      ${active ? "current:text-blue-500 current:font-semibold" : ""}`}
+      href={href}
+      aria-current={active ? "page" : undefined}
+    >
+      {name}
+    </a>
+  );
+}