From 1b35d006e5df302c38dac4f7bda153f9e6f0f74c Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Fri, 29 Nov 2024 11:42:25 +0000
Subject: [PATCH 01/18] initial commit, adding header links to sidebar on
 mobile

---
 _components/Sidebar.tsx       | 11 +++++++++++
 _components/SidebarTopNav.tsx | 11 +++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 _components/SidebarTopNav.tsx

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index 5488cc574..cf4c97a41 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -1,4 +1,5 @@
 import Searcher from "lume/core/searcher.ts";
+import SidebarTopNav from "./SidebarTopNav.tsx";
 import {
   Sidebar as Sidebar_,
   SidebarCategory as SidebarCategory_,
@@ -20,6 +21,16 @@ export default function Sidebar(
       class="p-2 pt-0 pr-0 overflow-y-auto overflow-x-hidden"
       style={{ scrollbarGutter: "stable", scrollbarWidth: "thin" }}
     >
+      {props.url !== "/" &&
+        (
+          <ul className="md:hidden">
+            <SidebarTopNav name="Runtime" url="/runtime/" />
+            <SidebarTopNav name="Examples" url="/examples/" />
+            <SidebarTopNav name="API reference" url="/api/deno" />
+            <SidebarTopNav name="Deploy" url="/deploy/" />
+            <SidebarTopNav name="Subhosting" url="/subhosting/" />
+          </ul>
+        )}
       <ul>
         {props.sidebar.map((section) => (
           <SidebarSection
diff --git a/_components/SidebarTopNav.tsx b/_components/SidebarTopNav.tsx
new file mode 100644
index 000000000..cf879aa27
--- /dev/null
+++ b/_components/SidebarTopNav.tsx
@@ -0,0 +1,11 @@
+export default function SidebarTopNav(props: { name: string; url: string }) {
+  return (
+    <li>
+      <a href={props.url}>
+        <h2 class="border-b border-foreground-tertiary pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 text-foreground-primary capitalize">
+          {props.name}
+        </h2>
+      </a>
+    </li>
+  );
+}

From 4f8fff83629bd85d81d2a1d044bb9bcf68f7a5a3 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Fri, 29 Nov 2024 11:59:09 +0000
Subject: [PATCH 02/18] make it happen at tablet too

---
 _components/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index cf4c97a41..8169353e4 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -23,7 +23,7 @@ export default function Sidebar(
     >
       {props.url !== "/" &&
         (
-          <ul className="md:hidden">
+          <ul className="xl:hidden">
             <SidebarTopNav name="Runtime" url="/runtime/" />
             <SidebarTopNav name="Examples" url="/examples/" />
             <SidebarTopNav name="API reference" url="/api/deno" />

From 99753fd9a6f1da72f926946717e732679185f7b9 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Fri, 29 Nov 2024 13:47:58 +0000
Subject: [PATCH 03/18] style like homepage sidenav

---
 _components/SidebarTopNav.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/_components/SidebarTopNav.tsx b/_components/SidebarTopNav.tsx
index cf879aa27..c83ef8703 100644
--- a/_components/SidebarTopNav.tsx
+++ b/_components/SidebarTopNav.tsx
@@ -1,10 +1,11 @@
 export default function SidebarTopNav(props: { name: string; url: string }) {
   return (
-    <li>
-      <a href={props.url}>
-        <h2 class="border-b border-foreground-tertiary pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 text-foreground-primary capitalize">
-          {props.name}
-        </h2>
+    <li class="mx-2">
+      <a
+        class="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={props.url}
+      >
+        {props.name}
       </a>
     </li>
   );

From ff0df6db8b03bf30a1cd4e1834f13815e67bef2c Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 11 Dec 2024 11:13:26 +0000
Subject: [PATCH 04/18] update sidebar order

---
 _components/Sidebar.tsx | 21 ++++++++++++++++++---
 examples/index.tsx      | 27 +--------------------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index 1caed3db4..06cb07eef 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -25,8 +25,8 @@ export default function Sidebar(
         (
           <ul className="xl:hidden">
             <SidebarTopNav name="Runtime" url="/runtime/" />
-            <SidebarTopNav name="Examples" url="/examples/" />
             <SidebarTopNav name="API reference" url="/api/deno" />
+            <SidebarTopNav name="Examples" url="/examples/" />
             <SidebarTopNav name="Deploy" url="/deploy/" />
             <SidebarTopNav name="Subhosting" url="/subhosting/" />
           </ul>
@@ -37,6 +37,7 @@ export default function Sidebar(
             section={section}
             search={props.search}
             url={props.url}
+            headerPath={props.headerPath}
           />
         ))}
       </ul>
@@ -156,7 +157,7 @@ function SidebarCategory(props: {
     if (typeof item === "string") {
       return item === props.url;
     }
-    return item.id === props.url;
+    return typeof item === "object" && "id" in item && item.id === props.url;
   });
 
   return (
@@ -187,7 +188,21 @@ function SidebarCategory(props: {
         data-accordion-content
       >
         {props.item.items.map((item) => (
-          <SidebarItem item={item} search={props.search} url={props.url} />
+          typeof item === "object" && "items" in item
+            ? (
+              <SidebarCategory
+                item={item}
+                url={props.url}
+                search={props.search}
+              />
+            )
+            : (
+              <SidebarItem
+                item={item}
+                search={props.search}
+                url={props.url}
+              />
+            )
         ))}
       </ul>
     </>
diff --git a/examples/index.tsx b/examples/index.tsx
index bb59202e9..fd66b9d89 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -1,32 +1,7 @@
 import LandingPage from "./_pages/LandingPage.tsx";
 
 export const layout = "raw.tsx";
-export const sidebar = [
-  {
-    items: [
-      {
-        label: "Runtime",
-        id: "/runtime/",
-      },
-      {
-        label: "API Reference",
-        id: "/api/deno/",
-      },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
-      {
-        label: "Deploy",
-        id: "/deploy/",
-      },
-      {
-        label: "Subhosting",
-        id: "/subhosting/",
-      },
-    ],
-  },
-];
+export const sidebar = [];
 
 export const toc = [];
 

From 57e98f0a2ee9d7b2016525609fb56277d94066be Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 11 Dec 2024 13:03:34 +0000
Subject: [PATCH 05/18] add sidear to api ref

---
 _includes/raw.tsx  | 10 +---------
 reference.page.jsx |  3 +++
 sidebar.client.ts  |  2 ++
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/_includes/raw.tsx b/_includes/raw.tsx
index 77b709df7..04aa82dee 100644
--- a/_includes/raw.tsx
+++ b/_includes/raw.tsx
@@ -3,14 +3,6 @@ export const layout = "layout.tsx";
 export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
   const reference = props.url.startsWith("/api");
 
-  if (reference) {
-    return (
-      <div>
-        {props.children}
-      </div>
-    );
-  }
-
   return (
     <>
       {props.sidebar && (
@@ -68,7 +60,7 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
         style={{ scrollbarGutter: "stable" }}
       >
         {props.children}
-        <props.comp.Footer />
+        {!reference && <props.comp.Footer />}
       </div>
     </>
   );
diff --git a/reference.page.jsx b/reference.page.jsx
index af39ee101..9fc2edd3e 100644
--- a/reference.page.jsx
+++ b/reference.page.jsx
@@ -4,6 +4,9 @@ import entityList from "@std/html/named-entity-list.json" with { type: "json" };
 
 export const layout = "raw.tsx";
 
+export const sidebar = [];
+
+
 const resetRegexp =
   /<link id="ddocResetStylesheet" rel="stylesheet" href=".*?reset\.css">\s*/;
 const titleRegexp = /<title>(.+?)<\/title>\s*/s;
diff --git a/sidebar.client.ts b/sidebar.client.ts
index 1eb4984e1..2f142322b 100644
--- a/sidebar.client.ts
+++ b/sidebar.client.ts
@@ -18,6 +18,8 @@ for (const el of document.querySelectorAll("[data-accordion-trigger]")) {
 }
 
 const sidebar = document.getElementById("sidebar");
+console.log(sidebar);
+
 if (sidebar) {
   const sidebarNav = sidebar.querySelector("nav")!;
   const sidebarOpen = document.getElementById("sidebar-open");

From 24b7dd03ba47f0671c2201842948bd381235ae4c Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 11 Dec 2024 13:05:50 +0000
Subject: [PATCH 06/18] fmt

---
 reference.page.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/reference.page.jsx b/reference.page.jsx
index 9fc2edd3e..a3ec17169 100644
--- a/reference.page.jsx
+++ b/reference.page.jsx
@@ -6,7 +6,6 @@ export const layout = "raw.tsx";
 
 export const sidebar = [];
 
-
 const resetRegexp =
   /<link id="ddocResetStylesheet" rel="stylesheet" href=".*?reset\.css">\s*/;
 const titleRegexp = /<title>(.+?)<\/title>\s*/s;

From de58f2f7ed481a37830eb23be69de21804d1a918 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 11 Dec 2024 15:57:43 +0000
Subject: [PATCH 07/18] add scroll to top

---
 _components/Sidebar.tsx |  4 ++--
 _includes/raw.tsx       | 12 ++----------
 overrides.css           | 32 ++++++++++++++++++++++++++++++--
 reference.page.jsx      | 19 ++++++++++++++++++-
 styles.css              |  4 ++++
 5 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index 06cb07eef..658eda8e7 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -57,8 +57,8 @@ function SidebarSection(
     str.replaceAll(/[\s_]/g, "-")
       .replaceAll(/[^a-zA-Z0-9-]/g, "")
       .toLowerCase();
-  const slug = slugify(props.section.title ?? "");
-  const categoryTitle = `sidebar-category-${slug}`;
+  const slug = "-" + slugify(props.section.title ?? "");
+  const categoryTitle = `sidebar-category${slug}`;
   const headingLink = props.section.href;
 
   return (
diff --git a/_includes/raw.tsx b/_includes/raw.tsx
index 04aa82dee..032e83423 100644
--- a/_includes/raw.tsx
+++ b/_includes/raw.tsx
@@ -47,19 +47,11 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
               url={props.url}
             />
           </aside>
-          <div
-            class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
-            id="sidebar-cover"
-            data-open="false"
-          >
-          </div>
         </>
       )}
-      <div
-        class="absolute top-16 bottom-0 left-0 right-0 overflow-y-auto"
-        style={{ scrollbarGutter: "stable" }}
-      >
+      <div style={{ scrollbarGutter: "stable" }} >
         {props.children}
+        {reference && <props.comp.ToTop />}
         {!reference && <props.comp.Footer />}
       </div>
     </>
diff --git a/overrides.css b/overrides.css
index 3b3d539f6..751c3cfef 100644
--- a/overrides.css
+++ b/overrides.css
@@ -63,8 +63,8 @@ that are generated by deno_doc, the tool that powers the API reference documenta
   @apply ml-1 !important;
 }
 
-.doc .toc :not(.documentNavigation) > a {
-  @apply text-xl !important;
+.ddoc .z-50 {
+  z-index: 49 !important;
 }
 
 .ddoc .usageContent {
@@ -115,3 +115,31 @@ that are generated by deno_doc, the tool that powers the API reference documenta
 .ddoc .space-y-7 > .section .markdown-body {
   @apply mb-6 !important;
 }
+
+.top {
+  @apply text-xs flex flex-col items-center;
+  color: white;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  animation-name: showToTop;
+  animation-duration: 1ms; /* Firefox requires this to apply the animation */
+  animation-timeline: --showScrollTop;
+}
+
+html {
+  scroll-timeline: --showScrollTop y;
+  /* Firefox supports the older "vertical" syntax */
+  scroll-timeline: --showScrollTop vertical;
+}
+
+
+@keyframes showToTop {
+  0% {
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+}
diff --git a/reference.page.jsx b/reference.page.jsx
index a3ec17169..f32129e01 100644
--- a/reference.page.jsx
+++ b/reference.page.jsx
@@ -4,7 +4,24 @@ import entityList from "@std/html/named-entity-list.json" with { type: "json" };
 
 export const layout = "raw.tsx";
 
-export const sidebar = [];
+export const sidebar = [
+  {
+    items: [
+      {
+        label: "Deno APIs",
+        id: "/api/deno/",
+      },
+      {
+        label: "Web APIs",
+        id: "/api/web/",
+      },
+      {
+        label: "Node APIs",
+        id: "/api/node/",
+      }
+    ],
+  },
+];
 
 const resetRegexp =
   /<link id="ddocResetStylesheet" rel="stylesheet" href=".*?reset\.css">\s*/;
diff --git a/styles.css b/styles.css
index f62d9c182..2e162cf15 100644
--- a/styles.css
+++ b/styles.css
@@ -53,6 +53,10 @@
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* Scrollbar colors that look good on light and dark theme */
 * {
   scrollbar-color: hsla(0deg, 0%, 50%, 0.5) hsla(0deg, 0%, 50%, 0.1) !important;

From 45d04151b036e73a68db24c251035939795463d8 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 11 Dec 2024 15:58:39 +0000
Subject: [PATCH 08/18] fmt

---
 _includes/raw.tsx  | 2 +-
 overrides.css      | 1 -
 reference.page.jsx | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/_includes/raw.tsx b/_includes/raw.tsx
index 032e83423..be16d7afb 100644
--- a/_includes/raw.tsx
+++ b/_includes/raw.tsx
@@ -49,7 +49,7 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
           </aside>
         </>
       )}
-      <div style={{ scrollbarGutter: "stable" }} >
+      <div style={{ scrollbarGutter: "stable" }}>
         {props.children}
         {reference && <props.comp.ToTop />}
         {!reference && <props.comp.Footer />}
diff --git a/overrides.css b/overrides.css
index 751c3cfef..bb0f3de1a 100644
--- a/overrides.css
+++ b/overrides.css
@@ -133,7 +133,6 @@ html {
   scroll-timeline: --showScrollTop vertical;
 }
 
-
 @keyframes showToTop {
   0% {
     opacity: 0;
diff --git a/reference.page.jsx b/reference.page.jsx
index f32129e01..f707ecf62 100644
--- a/reference.page.jsx
+++ b/reference.page.jsx
@@ -18,7 +18,7 @@ export const sidebar = [
       {
         label: "Node APIs",
         id: "/api/node/",
-      }
+      },
     ],
   },
 ];

From a300383babf10c3379802460016646b40fae7fa3 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 11 Dec 2024 16:02:23 +0000
Subject: [PATCH 09/18] remove colour

---
 overrides.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/overrides.css b/overrides.css
index bb0f3de1a..e82342bd6 100644
--- a/overrides.css
+++ b/overrides.css
@@ -118,7 +118,6 @@ that are generated by deno_doc, the tool that powers the API reference documenta
 
 .top {
   @apply text-xs flex flex-col items-center;
-  color: white;
   position: fixed;
   bottom: 1rem;
   right: 1rem;

From a51593589716060ff19d1dac5189fb4b2e0b1032 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Wed, 11 Dec 2024 16:07:36 +0000
Subject: [PATCH 10/18] add totop

---
 _components/ToTop.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 _components/ToTop.tsx

diff --git a/_components/ToTop.tsx b/_components/ToTop.tsx
new file mode 100644
index 000000000..18675fa81
--- /dev/null
+++ b/_components/ToTop.tsx
@@ -0,0 +1,12 @@
+export default function ToTop() {
+  return (
+    <a href="#" className="top docs-cta runtime-cta">
+      <span>
+        &#8679;
+      </span>
+      <span>
+        To top
+      </span>
+    </a>
+  );
+}

From 81e8add2449f443ae43cbcffdd311c7871e99af9 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Wed, 11 Dec 2024 16:52:06 -0600
Subject: [PATCH 11/18] Style section switcher

---
 _components/Sidebar.tsx       | 62 ++++++++++++++++++++++++++++-------
 _components/SidebarTopNav.tsx | 12 -------
 _includes/doc.tsx             | 10 +++---
 3 files changed, 55 insertions(+), 29 deletions(-)
 delete mode 100644 _components/SidebarTopNav.tsx

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index 658eda8e7..8651698fd 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -1,5 +1,4 @@
 import Searcher from "lume/core/searcher.ts";
-import SidebarTopNav from "./SidebarTopNav.tsx";
 import {
   Sidebar as Sidebar_,
   SidebarCategory as SidebarCategory_,
@@ -18,21 +17,41 @@ export default function Sidebar(
 ) {
   return (
     <nav
-      class="p-2 pt-0 pr-0 overflow-y-auto overflow-x-hidden"
+      class="overflow-y-auto overflow-x-hidden"
       style={{ scrollbarGutter: "stable", scrollbarWidth: "thin" }}
     >
       {props.url !== "/" &&
         (
-          <ul className="xl:hidden">
-            <SidebarTopNav name="Runtime" url="/runtime/" />
-            <SidebarTopNav name="API reference" url="/api/deno" />
-            <SidebarTopNav name="Examples" url="/examples/" />
-            <SidebarTopNav name="Deploy" url="/deploy/" />
-            <SidebarTopNav name="Subhosting" url="/subhosting/" />
+          <ul className="xl:hidden border-bg-tertiary relative bg-background-secondary m-2 mt-0 mb-4 py-2 rounded-md border border-background-tertiary">
+            <SidebarTopNav
+              name="Runtime"
+              url="/runtime/"
+              currentPath={props.url}
+            />
+            <SidebarTopNav
+              name="API reference"
+              url="/api/deno/"
+              currentPath={props.url}
+            />
+            <SidebarTopNav
+              name="Examples"
+              url="/examples/"
+              currentPath={props.url}
+            />
+            <SidebarTopNav
+              name="Deploy"
+              url="/deploy/"
+              currentPath={props.url}
+            />
+            <SidebarTopNav
+              name="Subhosting"
+              url="/subhosting/"
+              currentPath={props.url}
+            />
           </ul>
         )}
       <ul>
-        {props.sidebar.map((section) => (
+        {props.sidebar.map((section, idx) => (
           <SidebarSection
             section={section}
             search={props.search}
@@ -69,7 +88,7 @@ function SidebarSection(
             <a href={headingLink}>
               <h2
                 id={categoryTitle}
-                class="border-b border-foreground-tertiary pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 text-foreground-primary capitalize"
+                class="border-b border-foreground-tertiary pt-2 pb-1.5 -mx-5 px-8 mb-2 text-sm font-semibold hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 text-foreground-primary capitalize"
                 aria-current={props.url === headingLink ? "page" : undefined}
               >
                 {props.section.title}
@@ -79,13 +98,13 @@ function SidebarSection(
           : (
             <h2
               id={categoryTitle}
-              class="border-b border-foreground-tertiary pt-2 pb-0.5 -mx-5 px-8 mt-4 mb-3 text-sm font-semibold text-foreground-primary capitalize"
+              class="border-b border-foreground-tertiary pt-2 pb-0.5 -mx-5 px-8 mb-3 text-sm font-semibold text-foreground-primary capitalize"
             >
               {props.section.title}
             </h2>
           )
       )}{" "}
-      <ul aria-labelledby={categoryTitle}>
+      <ul aria-labelledby={categoryTitle} class="mb-4">
         {props.section.items.map((item) => (
           <li class="mx-2">
             {typeof item === "object" && "items" in item
@@ -208,3 +227,22 @@ function SidebarCategory(props: {
     </>
   );
 }
+
+function SidebarTopNav(
+  props: { name: string; url: string; currentPath: string },
+) {
+  const isCurrentlyActivePath = props.currentPath.startsWith(props.url);
+  return (
+    <li class="mx-2">
+      <a
+        class={`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:text-blue-500 current:bg-background-tertiary ${
+          isCurrentlyActivePath ? "font-semibold" : "font-normal"
+        }`}
+        href={props.url}
+        aria-current={props.currentPath === props.url ? "page" : undefined}
+      >
+        {props.name}
+      </a>
+    </li>
+  );
+}
diff --git a/_components/SidebarTopNav.tsx b/_components/SidebarTopNav.tsx
deleted file mode 100644
index c83ef8703..000000000
--- a/_components/SidebarTopNav.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export default function SidebarTopNav(props: { name: string; url: string }) {
-  return (
-    <li class="mx-2">
-      <a
-        class="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={props.url}
-      >
-        {props.name}
-      </a>
-    </li>
-  );
-}
diff --git a/_includes/doc.tsx b/_includes/doc.tsx
index 2028783f1..77cef97ad 100644
--- a/_includes/doc.tsx
+++ b/_includes/doc.tsx
@@ -1,13 +1,13 @@
+import { Breadcrumbs } from "../_components/Breadcrumbs.tsx";
 import Logo from "../_components/Logo.tsx";
+import { NavigationButton } from "../_components/NavigationButton.tsx";
+import { TableOfContentsItem } from "../_components/TableOfContentsItem.tsx";
+import { TableOfContentsItemMobile } from "../_components/TableOfContentsItemMobile.tsx";
 import {
   Sidebar as Sidebar_,
   SidebarItem,
   TableOfContentsItem as TableOfContentsItem_,
 } from "../types.ts";
-import { Breadcrumbs } from "../_components/Breadcrumbs.tsx";
-import { NavigationButton } from "../_components/NavigationButton.tsx";
-import { TableOfContentsItem } from "../_components/TableOfContentsItem.tsx";
-import { TableOfContentsItemMobile } from "../_components/TableOfContentsItemMobile.tsx";
 import renderCommand from "./renderCommand.tsx";
 
 export const layout = "layout.tsx";
@@ -73,7 +73,7 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
         id="sidebar"
         data-open="false"
       >
-        <div class="xl:hidden p-4 shadow-sm flex justify-between h-16">
+        <div class="xl:hidden p-4 flex justify-between h-16">
           <a class="flex items-center gap-3 mr-6" href="/">
             <Logo />
           </a>

From 2b017ffb40f387e64f29b688e62ab42f86e98a17 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Thu, 12 Dec 2024 10:21:20 +0000
Subject: [PATCH 12/18] update header on homepage, update back to top styles

---
 _components/Sidebar.tsx | 57 +++++++++++++++++++----------------------
 _components/ToTop.tsx   |  9 ++-----
 index.page.tsx          | 20 ---------------
 overrides.css           | 18 ++++++++++---
 4 files changed, 43 insertions(+), 61 deletions(-)

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index 8651698fd..51200195f 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -20,36 +20,33 @@ export default function Sidebar(
       class="overflow-y-auto overflow-x-hidden"
       style={{ scrollbarGutter: "stable", scrollbarWidth: "thin" }}
     >
-      {props.url !== "/" &&
-        (
-          <ul className="xl:hidden border-bg-tertiary relative bg-background-secondary m-2 mt-0 mb-4 py-2 rounded-md border border-background-tertiary">
-            <SidebarTopNav
-              name="Runtime"
-              url="/runtime/"
-              currentPath={props.url}
-            />
-            <SidebarTopNav
-              name="API reference"
-              url="/api/deno/"
-              currentPath={props.url}
-            />
-            <SidebarTopNav
-              name="Examples"
-              url="/examples/"
-              currentPath={props.url}
-            />
-            <SidebarTopNav
-              name="Deploy"
-              url="/deploy/"
-              currentPath={props.url}
-            />
-            <SidebarTopNav
-              name="Subhosting"
-              url="/subhosting/"
-              currentPath={props.url}
-            />
-          </ul>
-        )}
+      <ul className="xl:hidden border-bg-tertiary relative bg-background-secondary m-2 mt-0 mb-4 py-2 rounded-md border border-background-tertiary">
+        <SidebarTopNav
+          name="Runtime"
+          url="/runtime/"
+          currentPath={props.url}
+        />
+        <SidebarTopNav
+          name="API reference"
+          url="/api/deno/"
+          currentPath={props.url}
+        />
+        <SidebarTopNav
+          name="Examples"
+          url="/examples/"
+          currentPath={props.url}
+        />
+        <SidebarTopNav
+          name="Deploy"
+          url="/deploy/"
+          currentPath={props.url}
+        />
+        <SidebarTopNav
+          name="Subhosting"
+          url="/subhosting/"
+          currentPath={props.url}
+        />
+      </ul>
       <ul>
         {props.sidebar.map((section, idx) => (
           <SidebarSection
diff --git a/_components/ToTop.tsx b/_components/ToTop.tsx
index 18675fa81..d421161fd 100644
--- a/_components/ToTop.tsx
+++ b/_components/ToTop.tsx
@@ -1,12 +1,7 @@
 export default function ToTop() {
   return (
-    <a href="#" className="top docs-cta runtime-cta">
-      <span>
-        &#8679;
-      </span>
-      <span>
-        To top
-      </span>
+    <a href="#" className="top docs-cta runtime-cta text-[0px]">
+        Back to top
     </a>
   );
 }
diff --git a/index.page.tsx b/index.page.tsx
index a9f7f9651..2cc442df5 100644
--- a/index.page.tsx
+++ b/index.page.tsx
@@ -4,26 +4,6 @@ export const url = "/";
 export const sidebar = [
   {
     items: [
-      {
-        label: "Runtime Manual",
-        id: "/runtime/",
-      },
-      {
-        label: "API reference",
-        id: "/api/deno",
-      },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
-      {
-        label: "Deploy",
-        id: "/deploy/manual/",
-      },
-      {
-        label: "Subhosting",
-        id: "/subhosting/manual/",
-      },
       {
         label: "deno.com",
         id: "https://deno.com",
diff --git a/overrides.css b/overrides.css
index e82342bd6..c741ea111 100644
--- a/overrides.css
+++ b/overrides.css
@@ -117,18 +117,28 @@ that are generated by deno_doc, the tool that powers the API reference documenta
 }
 
 .top {
-  @apply text-xs flex flex-col items-center;
-  position: fixed;
+  @apply block fixed p-4;
+  color: transparent;
   bottom: 1rem;
   right: 1rem;
   animation-name: showToTop;
-  animation-duration: 1ms; /* Firefox requires this to apply the animation */
+  animation-duration: 1ms; 
   animation-timeline: --showScrollTop;
 }
 
+.top::after {
+  content: "";
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border: 3px solid white;
+  border-left: 0;
+  border-top: 0;
+  transform: translate(0, 25%) rotate(225deg);
+}
+
 html {
   scroll-timeline: --showScrollTop y;
-  /* Firefox supports the older "vertical" syntax */
   scroll-timeline: --showScrollTop vertical;
 }
 

From 971031f18d1bd59194577aa7704506377b48541f Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Thu, 12 Dec 2024 10:24:21 +0000
Subject: [PATCH 13/18] fmt

---
 _components/ToTop.tsx | 2 +-
 overrides.css         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/_components/ToTop.tsx b/_components/ToTop.tsx
index d421161fd..1cba84ac6 100644
--- a/_components/ToTop.tsx
+++ b/_components/ToTop.tsx
@@ -1,7 +1,7 @@
 export default function ToTop() {
   return (
     <a href="#" className="top docs-cta runtime-cta text-[0px]">
-        Back to top
+      Back to top
     </a>
   );
 }
diff --git a/overrides.css b/overrides.css
index c741ea111..5d124a3ab 100644
--- a/overrides.css
+++ b/overrides.css
@@ -122,7 +122,7 @@ that are generated by deno_doc, the tool that powers the API reference documenta
   bottom: 1rem;
   right: 1rem;
   animation-name: showToTop;
-  animation-duration: 1ms; 
+  animation-duration: 1ms;
   animation-timeline: --showScrollTop;
 }
 

From 665c2b2430096f632dade8c6d759d96ea5bfea7a Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Thu, 12 Dec 2024 13:22:33 +0000
Subject: [PATCH 14/18] styles button

---
 _components/ToTop.tsx | 2 +-
 overrides.css         | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/_components/ToTop.tsx b/_components/ToTop.tsx
index 1cba84ac6..559c8b82b 100644
--- a/_components/ToTop.tsx
+++ b/_components/ToTop.tsx
@@ -1,6 +1,6 @@
 export default function ToTop() {
   return (
-    <a href="#" className="top docs-cta runtime-cta text-[0px]">
+    <a href="#" className="totop">
       Back to top
     </a>
   );
diff --git a/overrides.css b/overrides.css
index 5d124a3ab..40cbabd33 100644
--- a/overrides.css
+++ b/overrides.css
@@ -116,8 +116,8 @@ that are generated by deno_doc, the tool that powers the API reference documenta
   @apply mb-6 !important;
 }
 
-.top {
-  @apply block fixed p-4;
+.totop {
+  @apply block fixed p-3 bg-background-secondary rounded-md border border-background-tertiary text-[0px];
   color: transparent;
   bottom: 1rem;
   right: 1rem;
@@ -126,12 +126,13 @@ that are generated by deno_doc, the tool that powers the API reference documenta
   animation-timeline: --showScrollTop;
 }
 
-.top::after {
+.totop::after {
+  @apply text-primary light:text-black;
   content: "";
   display: block;
   width: 1rem;
   height: 1rem;
-  border: 3px solid white;
+  border-width: 2px;
   border-left: 0;
   border-top: 0;
   transform: translate(0, 25%) rotate(225deg);

From d6f5015c62445dadf9e85db39be2279037a5f649 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Thu, 12 Dec 2024 13:29:59 +0000
Subject: [PATCH 15/18] styles button

---
 overrides.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/overrides.css b/overrides.css
index 40cbabd33..607083c1c 100644
--- a/overrides.css
+++ b/overrides.css
@@ -127,12 +127,12 @@ that are generated by deno_doc, the tool that powers the API reference documenta
 }
 
 .totop::after {
-  @apply text-primary light:text-black;
   content: "";
   display: block;
   width: 1rem;
   height: 1rem;
   border-width: 2px;
+  border-color: hsla(var(--primary));
   border-left: 0;
   border-top: 0;
   transform: translate(0, 25%) rotate(225deg);

From 3100786ee05518753078948bd7bcf15854e27ad4 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Thu, 12 Dec 2024 13:32:22 +0000
Subject: [PATCH 16/18] styles button

---
 overrides.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/overrides.css b/overrides.css
index 607083c1c..b7926125d 100644
--- a/overrides.css
+++ b/overrides.css
@@ -117,7 +117,8 @@ that are generated by deno_doc, the tool that powers the API reference documenta
 }
 
 .totop {
-  @apply block fixed p-3 bg-background-secondary rounded-md border border-background-tertiary text-[0px];
+  @apply block fixed p-3 bg-background-secondary rounded-md border
+    border-background-tertiary text-[0px];
   color: transparent;
   bottom: 1rem;
   right: 1rem;

From 73dc575cd43bb15b17cdcbea628e29ff5c40f889 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Thu, 12 Dec 2024 08:42:20 -0600
Subject: [PATCH 17/18] Minor styling updates; add  aliases

---
 _components/Sidebar.tsx |  2 +-
 _components/ToTop.tsx   |  4 +++-
 _includes/raw.tsx       |  2 +-
 deno.json               |  4 +++-
 overrides.css           | 18 +++++-------------
 5 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index 51200195f..1439973a9 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -232,7 +232,7 @@ function SidebarTopNav(
   return (
     <li class="mx-2">
       <a
-        class={`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:text-blue-500 current:bg-background-tertiary ${
+        class={`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 ${
           isCurrentlyActivePath ? "font-semibold" : "font-normal"
         }`}
         href={props.url}
diff --git a/_components/ToTop.tsx b/_components/ToTop.tsx
index 559c8b82b..f1d2fe8b8 100644
--- a/_components/ToTop.tsx
+++ b/_components/ToTop.tsx
@@ -1,7 +1,9 @@
 export default function ToTop() {
   return (
     <a href="#" className="totop">
-      Back to top
+      <span className="sr-only">
+        Back to top
+      </span>
     </a>
   );
 }
diff --git a/_includes/raw.tsx b/_includes/raw.tsx
index be16d7afb..deb2d588f 100644
--- a/_includes/raw.tsx
+++ b/_includes/raw.tsx
@@ -12,7 +12,7 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
             id="sidebar"
             data-open="false"
           >
-            <div class="p-4 shadow-sm flex justify-between h-16">
+            <div class="p-4 flex justify-between h-16">
               <a class="flex items-center gap-3 mr-6" href="/">
                 <img
                   src="/img/logo.svg"
diff --git a/deno.json b/deno.json
index 92da67130..dd1f5d4da 100644
--- a/deno.json
+++ b/deno.json
@@ -13,8 +13,10 @@
     "tailwindcss": "npm:tailwindcss@^3.4.9"
   },
   "tasks": {
-    "build": "deno run -A lume.ts",
     "serve": "deno run -A lume.ts -s",
+    "start": "deno task serve",
+    "dev": "deno task serve",
+    "build": "deno run -A lume.ts",
     "debug": "deno task build && deno task prod",
     "prod": "cd _site && deno run --allow-read --allow-env --allow-net server.ts",
     "reference": "cd reference_gen && deno task types && deno task doc",
diff --git a/overrides.css b/overrides.css
index b7926125d..9ffb99cf6 100644
--- a/overrides.css
+++ b/overrides.css
@@ -1,4 +1,4 @@
-/* This file exists to provide CSS overrides to styles that exist on the pages 
+/* This file exists to provide CSS overrides to styles that exist on the pages
 that are generated by deno_doc, the tool that powers the API reference documentation */
 
 #content > main > section + div {
@@ -118,24 +118,15 @@ that are generated by deno_doc, the tool that powers the API reference documenta
 
 .totop {
   @apply block fixed p-3 bg-background-secondary rounded-md border
-    border-background-tertiary text-[0px];
-  color: transparent;
-  bottom: 1rem;
-  right: 1rem;
+    border-background-tertiary bottom-4 right-4 text-transparent;
   animation-name: showToTop;
   animation-duration: 1ms;
   animation-timeline: --showScrollTop;
 }
 
 .totop::after {
+  @apply block w-4 h-4 border-2 border-primary border-l-0 border-t-0;
   content: "";
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  border-width: 2px;
-  border-color: hsla(var(--primary));
-  border-left: 0;
-  border-top: 0;
   transform: translate(0, 25%) rotate(225deg);
 }
 
@@ -147,9 +138,10 @@ html {
 @keyframes showToTop {
   0% {
     opacity: 0;
+    transform: translateY(300%);
   }
-
   10% {
     opacity: 1;
+    transform: translateY(0%);
   }
 }

From a9126087fc1e9cfc19da7c8ec2a5332e60c80372 Mon Sep 17 00:00:00 2001
From: Jo Franchetti <jofranchetti@gmail.com>
Date: Thu, 12 Dec 2024 14:47:29 +0000
Subject: [PATCH 18/18] fix styles for active deploy and subhosting

---
 _components/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index 51200195f..453f4ac0d 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -236,7 +236,7 @@ function SidebarTopNav(
           isCurrentlyActivePath ? "font-semibold" : "font-normal"
         }`}
         href={props.url}
-        aria-current={props.currentPath === props.url ? "page" : undefined}
+        aria-current={isCurrentlyActivePath ? "page" : undefined}
       >
         {props.name}
       </a>