[docs] override next and prev for intro sections

instantdb · Dec 18, 2024 · af0cb3f · af0cb3f
1 parent 0986390
commit af0cb3f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 8 deletions.
diff --git a/client/www/components/docs/Layout.jsx b/client/www/components/docs/Layout.jsx
@@ -118,14 +118,42 @@ function HiddenLLMHelper({ allLinks }) {
   );
 }
 
+function findLink(allLinks, path) {
+  const idx = allLinks.findIndex((link) => link.href === path);
+  return [allLinks[idx], idx];
+}
+
+function getPreviousPage(allLinks, currentPath) {
+  const [link, idx] = findLink(allLinks, currentPath);
+  if (!link) return null;
+  if (link.hasOwnProperty('prevHref')) {
+    if (!link.prevHref) return null;
+    const [prevLink] = findLink(allLinks, link.prevHref);
+    return prevLink;
+  }
+  return allLinks[idx - 1];
+}
+
+function getNextPage(allLinks, currentPath) {
+  const [link, idx] = findLink(allLinks, currentPath);
+  if (!link) return null;
+  if (link.hasOwnProperty('nextHref')) {
+    if (!link.nextHref) return null;
+    const [nextLink] = findLink(allLinks, link.nextHref);
+    return nextLink;
+  }
+  return allLinks[idx - 1];
+}
+
 export function Layout({ children, title, tableOfContents }) {
   let router = useRouter();
   const scrollContainerRef = useRef();
 
   let allLinks = navigation.flatMap((section) => section.links);
-  let linkIndex = allLinks.findIndex((link) => link.href === router.pathname);
-  let previousPage = allLinks[linkIndex - 1];
-  let nextPage = allLinks[linkIndex + 1];
+
+  let previousPage = getPreviousPage(allLinks, router.pathname);
+  let nextPage = getNextPage(allLinks, router.pathname);
+
   let section = navigation.find((section) =>
     section.links.find((link) => link.href === router.pathname),
   );
@@ -170,7 +198,9 @@ export function Layout({ children, title, tableOfContents }) {
               {(title || section) && (
                 <header className="mb-4 space-y-1">
                   {section && (
-                    <p className="text-sm text-gray-500 font-medium">{section.title}</p>
+                    <p className="text-sm text-gray-500 font-medium">
+                      {section.title}
+                    </p>
                   )}
                   {title && (
                     <h1 className="text-3xl dark:text-white">{title}</h1>

diff --git a/client/www/data/docsNavigation.js b/client/www/data/docsNavigation.js
@@ -2,15 +2,29 @@ module.exports = [
   {
     title: 'Introduction',
     links: [
-      { title: 'Getting started w/ React', href: '/docs' },
-      { title: 'Getting started w/ React Native', href: '/docs/start-rn' },
-      { title: 'Getting started w/ Vanilla JS', href: '/docs/start-vanilla' },
+      {
+        title: 'Getting started w/ React',
+        href: '/docs',
+        nextHref: '/docs/init',
+      },
+      {
+        title: 'Getting started w/ React Native',
+        href: '/docs/start-rn',
+        prevHref: null,
+        nextHref: '/docs/init',
+      },
+      {
+        title: 'Getting started w/ Vanilla JS',
+        href: '/docs/start-vanilla',
+        prevHref: null,
+        nextHref: '/docs/init',
+      },
     ],
   },
   {
     title: 'Working with data',
     links: [
-      { title: 'Init', href: '/docs/init' },
+      { title: 'Init', href: '/docs/init', prevHref: '/docs' },
       { title: 'Modeling data', href: '/docs/modeling-data' },
       { title: 'Writing data', href: '/docs/instaml' },
       { title: 'Reading data', href: '/docs/instaql' },