feat: use adex as the base router and builder

.github/workflows/docs.yml

@@ -2,7 +2,7 @@ name: Docs
 
 on:
   push:
-    branches: ["main"]
+    branches: ["adex"]
   workflow_dispatch:
 
 permissions:
@@ -39,7 +39,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: "./dist"
+          path: "./dist/client"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# adex
+.islands

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "adex": "^0.0.18",
     "preact": "^10.25.3",
     "preact-iso": "^2.8.1"
   },
@@ -19,8 +20,11 @@
     "@preact/preset-vite": "^2.9.3",
     "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.20",
+    "rehype-highlight": "^7.0.2",
+    "rehype-slug": "^6.0.0",
+    "remark-mdx-toc": "^0.3.1",
     "tailwindcss": "^3.4.17",
-    "vite": "^6.0.5",
+    "vite": "^5",
     "vite-plugin-mdx": "^3.6.1"
   }
 }

src/components/Sidebar.jsx

@@ -1,4 +1,5 @@
 import { useLocation } from "preact-iso";
+import { Link } from "./link";
 
 export function Sidebar({ items = [] } = {}) {
   const location = useLocation();
@@ -17,10 +18,10 @@ export function Sidebar({ items = [] } = {}) {
 function SidebarItem({ item, active }) {
   return (
     <li class="w-fit">
-      <a
+      <Link
         href={"/" + item.key}
         class={`group text-zinc-400 hover:text-zinc-600 ${
-          active ? "text-zinc-600"   : ""
+          active ? "text-zinc-600" : ""
         }`}
       >
         {item.label}
@@ -29,7 +30,7 @@ function SidebarItem({ item, active }) {
             active ? "max-w-full !bg-zinc-600" : ""
           }`}
         ></span>
-      </a>
+      </Link>
     </li>
   );
 }

src/components/TableOfContents.jsx

@@ -0,0 +1,16 @@
+export function TableOfContents({ items = [] } = {}) {
+  return (
+    <ul class="w-[150px] text-sm">
+      {items.map((d) => {
+        return (
+          <li>
+            <a href={`#${d.value.toLowerCase().replace(/[- ]/g, "-")}`}>
+              {d.value}
+            </a>
+            {d.children && <TableOfContents items={d.children} />}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

src/components/link.jsx

@@ -0,0 +1,15 @@
+export function Link({ href, children, ...props }) {
+  if (!href.startsWith("/")) throw new Error("Link href should start with /");
+  href =
+    "/" +
+    (import.meta.env.BASE_URL + "/" + href)
+      .split("/")
+      .filter(Boolean)
+      .join("/");
+
+  return (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  );
+}

src/content/data.js

@@ -1,7 +1,9 @@
 const contentMap = {};
 const posts = import.meta.glob("./**/*.mdx", { eager: true });
+
 for (let i in posts) {
   contentMap[i] = "default" in posts[i] ? posts[i].default : posts[i];
+  contentMap[i].toc = "toc" in posts[i] ? posts[i].toc : {};
 }
 
 export const sideBar = {

src/layouts/base.jsx

@@ -1,3 +1,4 @@
+import { Link } from "../components/link";
 import { Sidebar } from "../components/Sidebar";
 
 export default function BaseLayout({ children, sideBarItems = [] }) {
@@ -6,9 +7,9 @@ export default function BaseLayout({ children, sideBarItems = [] }) {
       <div class="min-h-[80vh] mx-auto max-w-4xl p-2">
         <header class="flex flex-col justify-center h-[400px]">
           <h1 class="font-semibold text-2xl">
-            <a href="/" class="hover:underline hover:underline-offset-4">
+            <Link href="/" class="hover:underline hover:underline-offset-4">
               Preact Docs
-            </a>
+            </Link>
           </h1>
           <p>
             <small>Docs template based on preact</small>
@@ -34,12 +35,16 @@ export default function BaseLayout({ children, sideBarItems = [] }) {
             <a
               class="w-full hover:underline hover:underline-offset-4"
               href="https://github.com/barelyhuman"
+              target="_blank"
+              rel="noopener"
             >
               Github
             </a>
           </li>
           <li class="text-xs">
             <a
+              target="_blank"
+              rel="noopener"
               class="w-full hover:underline hover:underline-offset-4"
               href="https://github.com/barelyhuman"
             >

src/pages/$content.jsx

@@ -1,13 +1,24 @@
-import { useRoute } from "preact-iso";
+import { useRoute } from "adex/router";
 import { sideBar } from "../content/data";
 import BaseLayout from "../layouts/base";
+import { TableOfContents } from "../components/TableOfContents";
 
 export default function ContentPage() {
   const route = useRoute();
-  const Content = sideBar[route.params.content]?.source || (() => <></>);
+
+  const contentKey = route.params.content;
+  const Content = sideBar[contentKey]?.source || (() => <></>);
   return (
     <BaseLayout sideBarItems={sideBar}>
-      <Content />
+      <section class="flex gap-4 items-start w-full">
+        <section class="w-full">
+          <Content />{" "}
+        </section>
+        <nav class="sticky top-[50px] hidden md:block">
+          <h6 class="font-semibold">On this page</h6>
+          <TableOfContents items={Content.toc} />
+        </nav>
+      </section>
     </BaseLayout>
   );
 }

src/pages/index.jsx

@@ -1,14 +1,23 @@
+import { TableOfContents } from "../components/TableOfContents";
 import { sideBar } from "../content/data";
 import BaseLayout from "../layouts/base";
 
+const toc = [];
+
 const AllContent = () => {
   const components = [];
+  toc.length = 0;
   let i = -1;
   for (let d in sideBar) {
     i++;
     const Component = sideBar[d].source;
     const classList = i > 0 ? "mt-12 pt-12" : "";
-    components.push(<Component class={classList} />);
+    toc.push(...Component.toc);
+    components.push(
+      <article class={classList}>
+        <Component />
+      </article>
+    );
   }
 
   return components;
@@ -17,7 +26,15 @@ const AllContent = () => {
 export default function HomePage() {
   return (
     <BaseLayout sideBarItems={sideBar}>
-      <AllContent />
+      <section class="flex gap-4 items-start w-full">
+        <section class="w-full">
+          <AllContent />
+        </section>
+        <nav class="sticky top-[50px] hidden md:block">
+          <h6 class="font-semibold">On this page</h6>
+          <TableOfContents items={toc} />
+        </nav>
+      </section>
     </BaseLayout>
   );
 }