adding header pages for side nav and making headers links (#934)

Co-authored-by: John Donmoyer <john@deno.com>
denoland · Oct 7, 2024 · ba365a0 · ba365a0
1 parent 540e478
commit ba365a0
Show file tree

Hide file tree

Showing 15 changed files with 293 additions and 107 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -45,15 +45,6 @@ jobs:
           DENO_FUTURE: 1
         run: deno task build
 
-      - name: Run server
-        working-directory: _site
-        run: deno run --no-lock --allow-read=. --allow-net --allow-env server.ts &
-
-      - name: Link checker
-        env:
-          DOCS_ROOT: "http://localhost:8000"
-        run: deno run --no-lock --allow-net --allow-env .github/workflows/link_checker.ts
-
       - name: Upload to Deno Deploy
         uses: denoland/deployctl@v1
         with:

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
@@ -8,7 +8,12 @@ import {
 } from "../types.ts";
 
 export default function Sidebar(
-  props: { sidebar: Sidebar_; search: Searcher; url: string },
+  props: {
+    sidebar: Sidebar_;
+    search: Searcher;
+    url: string;
+    headerPath: string;
+  },
 ) {
   return (
     <nav
@@ -29,25 +34,45 @@ export default function Sidebar(
 }
 
 function SidebarSection(
-  props: { section: SidebarSection_; search: Searcher; url: string },
+  props: {
+    section: SidebarSection_;
+    search: Searcher;
+    url: string;
+    headerPath: string;
+  },
 ) {
   const slugify = (str: string) =>
     str.replaceAll(/[\s_]/g, "-")
       .replaceAll(/[^a-zA-Z0-9-]/g, "")
       .toLowerCase();
   const slug = slugify(props.section.title ?? "");
   const categoryTitle = `sidebar-category-${slug}`;
+  const headingLink = props.section.href;
+
   return (
     <li class="mb-4">
-      {props.section.title &&
-        (
-          <h2
-            id={categoryTitle}
-            class="border-b border-gray-200 pt-2 pb-0.5 mx-3 mt-4 mb-3 text-sm font-semibold text-gray-3"
-          >
-            {props.section.title}
-          </h2>
-        )}
+      {props.section.title && (
+        headingLink
+          ? (
+            <a href={headingLink}>
+              <h2
+                id={categoryTitle}
+                class="border-b border-gray-200 pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-blue-50 current:bg-blue-50 current:text-blue-500 text-gray-3 capitalize"
+                aria-current={props.url === headingLink ? "page" : undefined}
+              >
+                {props.section.title}
+              </h2>
+            </a>
+          )
+          : (
+            <h2
+              id={categoryTitle}
+              class="border-b border-gray-200 pt-2 pb-0.5 -mx-5 px-8 mt-4 mb-3 text-sm font-semibold text-gray-3 capitalize"
+            >
+              {props.section.title}
+            </h2>
+          )
+      )}{" "}
       <ul aria-labelledby={categoryTitle}>
         {props.section.items.map((item) => (
           <li class="mx-2 mt-1">

diff --git a/_includes/doc.tsx b/_includes/doc.tsx
@@ -1,5 +1,9 @@
 import Searcher from "lume/core/searcher.ts";
 import {
+  BreadcrumbItem,
+  isSidebarCategory,
+  isSidebarDoc,
+  isSidebarLink,
   Sidebar as Sidebar_,
   SidebarDoc as SidebarDoc_,
   SidebarItem,
@@ -103,6 +107,7 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
           sidebar={sidebar}
           search={props.search}
           url={props.url}
+          headerPath={props.headerPath!}
         />
       </aside>
       <div
@@ -246,89 +251,137 @@ function NavigationButton(props: {
   );
 }
 
+function generateCrumbs(
+  url: string,
+  title: string,
+  items: SidebarItem[],
+  current: BreadcrumbItem[] = [],
+): BreadcrumbItem[] {
+  for (const item of items) {
+    const foundTargetPage = (typeof item === "string" && item === url) ||
+      (isSidebarDoc(item) && item.id === url) ||
+      (isSidebarLink(item) && item.href === url);
+
+    if (foundTargetPage) {
+      current.push({ label: title });
+      return current;
+    }
+
+    if (isSidebarCategory(item)) {
+      const childItems: BreadcrumbItem[] = [];
+      generateCrumbs(url, title, item.items, childItems);
+
+      if (childItems.length > 0) {
+        current.push({ label: item.label, href: item.href });
+        current.push(...childItems);
+        return current;
+      }
+    }
+  }
+
+  return current;
+}
+
 function Breadcrumbs(props: {
   title: string;
   sidebar: Sidebar_;
   url: string;
   sectionTitle: string;
   sectionHref: string;
 }) {
-  const crumbs = [];
-  outer: for (const section of props.sidebar) {
-    for (const item of section.items) {
-      if (typeof item === "string") {
-        if (item === props.url) break outer;
-      } else if ("items" in item) {
-        crumbs.push(item.label);
-        for (const subitem of item.items) {
-          if (typeof subitem === "string") {
-            if (subitem === props.url) break outer;
-          } else if (subitem.id === props.url) {
-            break outer;
-          }
-        }
-        crumbs.pop();
-      } else if ("id" in item && item.id === props.url) {
-        break outer;
-      }
+  const crumbs: BreadcrumbItem[] = [];
+
+  for (const section of props.sidebar) {
+    if (section.href === props.url) {
+      crumbs.push({ label: props.title });
+      break;
     }
-  }
 
-  crumbs.push(props.title);
+    const rootItem = { label: section.title, href: section.href };
+    const potentialCrumbs = generateCrumbs(
+      props.url,
+      props.title,
+      section.items,
+      [rootItem],
+    );
+
+    if (potentialCrumbs.length > 1) {
+      crumbs.push(...potentialCrumbs);
+      break;
+    }
+  }
 
   return (
     <nav class="mb-4">
       <ul
-        class="flex flex-wrap text-gray-700 items-center"
+        class="flex flex-wrap text-gray-700 items-center -ml-3"
         itemscope
         itemtype="https://schema.org/BreadcrumbList"
       >
         <li
-          class="-ml-3 px-3 py-1.5 underline underline-offset-4 decoration-gray-300 hover:decoration-blue-950 hover:text-blue-950 hover:underline-medium hover:bg-blue-50 rounded transition duration-100"
           itemprop="itemListElement"
           itemscope
           itemtype="https://schema.org/ListItem"
         >
-          <a itemprop="item" href={props.sectionHref}>
+          <a
+            class="block px-3 py-1.5 underline underline-offset-4 decoration-gray-300 hover:decoration-blue-950 hover:text-blue-950 hover:underline-medium hover:bg-blue-50 rounded transition duration-100 text-sm"
+            itemprop="item"
+            href={props.sectionHref}
+          >
             <span itemprop="name">{props.sectionTitle}</span>
           </a>
           <meta itemprop="position" content="1" />
         </li>
-        <svg
-          class="size-4 rotate-90"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-        >
-          <path
-            fill="rgba(0,0,0,0.5)"
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-          />
-        </svg>
+        <li>
+          <svg
+            class="size-4 rotate-90"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="rgba(0,0,0,0.5)"
+              d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
+            />
+          </svg>
+        </li>
         {crumbs.map((crumb, i) => (
           <>
             <li
-              class="px-2.5 py-1.5"
               itemprop="itemListElement"
               itemscope
               itemtype="https://schema.org/ListItem"
             >
-              <span itemprop="item">
-                <span itemprop="name">{crumb}</span>
-                <meta itemprop="position" content={String(i + 2)} />
-              </span>
+              {crumb.href
+                ? (
+                  <a
+                    href={crumb.href}
+                    itemprop="item"
+                    class="block px-3 py-1.5 underline underline-offset-4 decoration-gray-300 hover:decoration-blue-950 hover:text-blue-950 hover:underline-medium hover:bg-blue-50 rounded transition duration-100 text-sm"
+                  >
+                    {crumb.label}
+                  </a>
+                )
+                : (
+                  <span itemprop="name" class="block px-3 py-1.5 text-sm">
+                    {crumb.label}
+                  </span>
+                )}
+              <meta itemprop="position" content={String(i + 2)} />
             </li>
             {i < crumbs.length - 1 && (
-              <svg
-                class="size-4 rotate-90"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="rgba(0,0,0,0.5)"
-                  d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
+              <li>
+                <svg
+                  class="size-4 rotate-90"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
                 >
-                </path>
-              </svg>
+                  <path
+                    fill="rgba(0,0,0,0.5)"
+                    d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
+                  >
+                  </path>
+                </svg>
+              </li>
             )}
           </>
         ))}

diff --git a/deno.lock b/deno.lock
diff --git a/deploy/_data.ts b/deploy/_data.ts
@@ -2,14 +2,14 @@ import { Sidebar } from "../types.ts";
 
 export const sidebar = [
   {
-    title: "Getting Started",
+    title: "Getting started",
     items: [
       {
-        label: "Quick Start",
+        label: "Quick start",
         id: "/deploy/manual/",
       },
       {
-        label: "Deploy Basics",
+        label: "Deploy basics",
         items: [
           "/deploy/manual/use-cases/",
           "/deploy/manual/playgrounds/",
@@ -23,18 +23,18 @@ export const sidebar = [
     ],
   },
   {
-    title: "Deploy Platform",
+    title: "Deploy platform",
     items: [
       {
         label: "Deployments",
         id: "/deploy/manual/deployments/",
       },
       {
-        label: "Custom Domains",
+        label: "Custom domains",
         id: "/deploy/manual/custom-domains/",
       },
       {
-        label: "Environment Variables",
+        label: "Environment variables",
         id: "/deploy/manual/environment-variables/",
       },
       {
@@ -68,13 +68,13 @@ export const sidebar = [
         id: "/deploy/kv/manual/cron/",
       },
       {
-        label: "Edge Cache",
+        label: "Edge cache",
         id: "/deploy/manual/edge-cache/",
       },
     ],
   },
   {
-    title: "Connecting to Databases",
+    title: "Connecting to databases",
     items: [
       {
         label: "Deno KV",

diff --git a/oldurls.json b/oldurls.json
@@ -8,7 +8,5 @@
   "/runtime/manual/advanced/embedding_deno/": "/deploy/manual/",
   "/runtime/manual/advanced/deploying_deno/": "/deploy/manual/",
   "/runtime/reference/tcp_udp_connections/": "/examples/",
-  "/runtime/fundamentals/": "/runtime/",
-  "/runtime/getting_started/": "/runtime/",
-  "/runtime/reference/": "/runtime/"
+  "/runtime/getting_started/": "/runtime/"
 }