From 130f022aa4ba225bad5b339ae572be6297a3d278 Mon Sep 17 00:00:00 2001
From: Kevin Wolf <hi@kevinwolf.cr>
Date: Wed, 6 Sep 2023 01:57:01 -0600
Subject: [PATCH] feat: add prev and next links for doc pages

---
 .../docs-nav/docs-nav.component.tsx           |  8 ++---
 src/app/docs/[project]/[[...slug]]/page.tsx   | 26 ++++++++++++++
 src/components/mdx/mdx.component.tsx          |  2 +-
 src/data/docs/docs.data.ts                    | 35 +++++++++++++------
 4 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/src/app/docs/[project]/[[...slug]]/_components/docs-nav/docs-nav.component.tsx b/src/app/docs/[project]/[[...slug]]/_components/docs-nav/docs-nav.component.tsx
index 8909c1b..9dd1f12 100644
--- a/src/app/docs/[project]/[[...slug]]/_components/docs-nav/docs-nav.component.tsx
+++ b/src/app/docs/[project]/[[...slug]]/_components/docs-nav/docs-nav.component.tsx
@@ -40,16 +40,14 @@ export function DocsNav({ title, repo, slug, menus }: DocsNavProps) {
     >
       {({ setIsExpanded }) =>
         menus.map((menu) => (
-          <div key={menu.href} className="w-full flex flex-col mb-3">
+          <div key={menu.label} className="w-full flex flex-col mb-3">
             <h4 className="mb-1 typography-2 font-medium">{menu.label}</h4>
             {menu.items.map((item) => {
-              const href = menu.href.concat(item.href)
-
               return (
                 <Link
                   key={item.href}
-                  href={href}
-                  aria-current={href === slug ? "page" : undefined}
+                  href={item.href}
+                  aria-current={item.href === slug ? "page" : undefined}
                   aria-label={item.label}
                   className="border-l border-base-6 aria-[current=page]:border-accent-8 typography-2 text-dimmed hover:text-base aria-[current=page]:text-base aria-[current=page]:font-medium py-1 pl-3 transition-colors"
                   onClick={() => setIsExpanded(false)}
diff --git a/src/app/docs/[project]/[[...slug]]/page.tsx b/src/app/docs/[project]/[[...slug]]/page.tsx
index 22f5864..48425b9 100644
--- a/src/app/docs/[project]/[[...slug]]/page.tsx
+++ b/src/app/docs/[project]/[[...slug]]/page.tsx
@@ -1,3 +1,5 @@
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"
+import Link from "next/link"
 import { notFound } from "next/navigation"
 import { Fragment } from "react"
 
@@ -6,6 +8,7 @@ import { Main } from "@/components/main"
 import { MDX } from "@/components/mdx"
 import { getDocsConfig, getDocsPage, getDocsParams } from "@/data/docs"
 import { mergeMetadata, siteUrl } from "@/utils/seo"
+import { cn } from "@/utils/ui"
 
 import { DocsNav } from "./_components/docs-nav"
 
@@ -71,7 +74,30 @@ export default async function DocsPage({ params: { project, slug = [] } }: DocsP
           imgAlt={page.meta.imgAlt}
         />
         <MDX source={page.content} />
+        <hr className="my-6 border-base-6" />
+        <div className="flex justify-between">
+          {page.prev ? <PageLink direction="prev" {...page.prev} /> : <div />}
+          {page.next ? <PageLink direction="next" {...page.next} /> : <div />}
+        </div>
       </Main>
     </Fragment>
   )
 }
+
+function PageLink({ direction, href, label }: { direction: "prev" | "next"; href: string; label: string }) {
+  return (
+    <Link
+      href={href}
+      className={cn("flex flex-col group relative justify-center", direction === "prev" ? "text-left" : "text-right")}
+    >
+      {direction === "prev" ? (
+        <IconChevronLeft className="absolute hidden lg:block -translate-x-full group-hover:-translate-x-[150%] text-extradimmed opacity-0 group-hover:opacity-100 transition-all will-change-transform" />
+      ) : null}
+      <span className="typography-2 text-dimmed">{direction === "prev" ? "Previous" : "Next"}</span>
+      <span className="text-base group-hover:text-accent transition-colors">{label}</span>
+      {direction === "next" ? (
+        <IconChevronRight className="absolute right-0 hidden lg:block translate-x-full group-hover:translate-x-[150%] text-extradimmed opacity-0 group-hover:opacity-100 transition-all will-change-transform" />
+      ) : null}
+    </Link>
+  )
+}
diff --git a/src/components/mdx/mdx.component.tsx b/src/components/mdx/mdx.component.tsx
index 746f60b..b64476c 100644
--- a/src/components/mdx/mdx.component.tsx
+++ b/src/components/mdx/mdx.component.tsx
@@ -28,7 +28,7 @@ export function MDX({ className, components, ...props }: MDXProps) {
             </h1>
           ),
           h2: ({ children, ...props }) => (
-            <h2 className="mt-7 border-b border-base-6 pb-2 typography-7 text-base font-semibold" {...props}>
+            <h2 className="mt-7 typography-7 text-base font-semibold" {...props}>
               {children}
             </h2>
           ),
diff --git a/src/data/docs/docs.data.ts b/src/data/docs/docs.data.ts
index 477f8e7..8ce63b3 100644
--- a/src/data/docs/docs.data.ts
+++ b/src/data/docs/docs.data.ts
@@ -5,7 +5,7 @@ const projects = [{ id: "devtools", repo: "kevinwolfcr/devtools" }]
 
 async function getFile(url: URL) {
   try {
-    const request = await fetch(url, { next: { revalidate: 60 } })
+    const request = await fetch(url, { next: { revalidate: process.env.NODE_ENV === "development" ? 0 : 60 } })
     return await request.text()
   } catch (err) {
     throw new Error(`Error fetching ${url.toString()}: ${err instanceof Error ? err.message : "Unknown error"}`)
@@ -27,7 +27,6 @@ export async function getDocsConfig(projectId: string) {
     description: z.string(),
     menus: z.array(
       z.object({
-        href: z.string(),
         label: z.string(),
         items: z.array(z.object({ href: z.string(), label: z.string(), file: z.string() })),
       }),
@@ -35,11 +34,23 @@ export async function getDocsConfig(projectId: string) {
   })
 
   const config = projectConfigSchema.parse(JSON.parse(await getFile(new URL("./config.json", baseUrl))))
-  const pages: Record<string, URL> = {}
 
-  for (const menu of config.menus) {
-    for (const item of menu.items) {
-      pages[menu.href.concat(item.href).replace(/^\//, "")] = new URL(item.file, baseUrl)
+  const pages: Record<
+    string,
+    {
+      url: URL
+      prev: z.infer<typeof projectConfigSchema>["menus"][number]["items"][number] | null
+      next: z.infer<typeof projectConfigSchema>["menus"][number]["items"][number] | null
+    }
+  > = {}
+
+  for (const [menuIndex, menu] of config.menus.entries()) {
+    for (const [itemIndex, item] of menu.items.entries()) {
+      pages[item.href] = {
+        url: new URL(item.file, baseUrl),
+        prev: menu.items[itemIndex - 1] || config.menus[menuIndex - 1]?.items.findLast(Boolean) || null,
+        next: menu.items[itemIndex + 1] || config.menus[menuIndex + 1]?.items[0] || null,
+      }
     }
   }
 
@@ -57,7 +68,7 @@ export async function getDocsParams() {
   for (const project of projects) {
     for (const menu of (await getDocsConfig(project.id))?.menus || []) {
       for (const item of menu.items) {
-        params.push({ project: project.id, slug: menu.href.concat(item.href).replace(/^\//, "").split("/") })
+        params.push({ project: project.id, slug: item.href.split("/").filter(Boolean) })
       }
     }
   }
@@ -70,10 +81,10 @@ export async function getDocsPage(projectId: string, slug: string[]) {
   const config = await getDocsConfig(projectId)
   if (!config) return null
 
-  const url = config.pages[slug.join("/")]
-  if (!url) return null
+  const page = config.pages[`/${slug.join("/")}`]
+  if (!page) return null
 
-  const { data, content } = matter(await getFile(url))
+  const { data, content } = matter(await getFile(page.url))
 
   const pageMetaSchema = z.object({
     title: z.string().optional(),
@@ -83,8 +94,10 @@ export async function getDocsPage(projectId: string, slug: string[]) {
   })
 
   return {
-    url,
+    url: page.url,
     meta: pageMetaSchema.parse(data),
     content,
+    prev: page.prev,
+    next: page.next,
   }
 }