feat: add functionality for getting previous page

Author: chargome

app/[[...path]]/page.tsx

@@ -14,6 +14,7 @@ import {
   getCurrentPlatformOrGuide,
   getDocsRootNode,
   getNextNode,
+  getPreviousNode,
   nodeForPath,
 } from 'sentry-docs/docTree';
 import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs';
@@ -43,8 +44,8 @@ export const dynamic = 'force-static';
 
 const mdxComponentsWithWrapper = mdxComponents(
   {Include, PlatformContent},
-  ({children, frontMatter, nextPage}) => (
-    <DocPage frontMatter={frontMatter} nextPage={nextPage}>
+  ({children, frontMatter, nextPage, previousPage}) => (
+    <DocPage frontMatter={frontMatter} nextPage={nextPage} previousPage={previousPage}>
       {children}
     </DocPage>
   )
@@ -101,9 +102,13 @@ export default async function Page({params}: {params: {path?: string[]}}) {
 
   const pageNode = nodeForPath(rootNode, params.path);
   const nextNode = pageNode ? getNextNode(pageNode) : undefined;
+  const previousNode = pageNode ? getPreviousNode(pageNode) : undefined;
   const nextPage = nextNode
     ? {path: nextNode.path, title: nextNode.frontmatter.title}
     : undefined;
+  const previousPage = previousNode
+    ? {path: previousNode.path, title: previousNode.frontmatter.title}
+    : undefined;
 
   if (!pageNode) {
     // eslint-disable-next-line no-console
@@ -135,6 +140,7 @@ export default async function Page({params}: {params: {path?: string[]}}) {
       mdxSource={mdxSource}
       frontMatter={{...frontMatter, versions}}
       nextPage={nextPage}
+      previousPage={previousPage}
     />
   );
 }

src/components/sidebar/sidebarLinks.tsx

@@ -11,6 +11,7 @@ import {NavNode} from './types';
 import {docNodeToNavNode, getNavNodes} from './utils';
 
 /** a root of `"some-root"` maps to the `/some-root/` url */
+// we should probably get rid of this
 const productSidebarItems = [
   {
     title: 'Account Settings',

src/docTree.spec.ts

@@ -4,6 +4,7 @@ import {
   DocNode,
   getCurrentPlatformOrGuide,
   getNextNode,
+  getPreviousNode,
   isRootGuidePath,
   isRootPlatformPath,
   nodeForPath,
@@ -211,6 +212,62 @@ describe('docTree', () => {
     });
   });
 
+  describe('getPreviousNode', () => {
+    const root = createRootNode();
+
+    const a = createNode('a', 'A');
+    const a1 = createNode('a1', 'A1');
+    const a2 = createNode('a2', 'A2');
+    a.children = [a1, a2];
+    a.children.forEach(child => {
+      child.parent = a;
+    });
+
+    const b = createNode('b', 'B');
+    const c = createNode('c', 'C');
+    root.children = [a, b, c];
+    root.children.forEach(child => {
+      child.parent = root;
+    });
+
+    test('should return previous child of parent', () => {
+      expect(getPreviousNode(c)).toBe(b);
+    });
+
+    test('should return previous sibling if previous sibling has children', () => {
+      expect(getPreviousNode(b)).toBe(a);
+    });
+
+    test('should return undefined if no children or siblings', () => {
+      expect(getPreviousNode(createNode('d', 'D'))).toBeUndefined();
+    });
+
+    test('should return parent for first child', () => {
+      expect(getPreviousNode(a1)).toBe(a);
+    });
+
+    test('should respect sidebar order for sorting', () => {
+      const xRoot = createRootNode();
+      const xA = createNode('a', 'A', {sidebar_order: 2} as FrontMatter);
+      const xB = createNode('b', 'B', {sidebar_order: 1} as FrontMatter);
+      xRoot.children = [xA, xB];
+      xRoot.children.forEach(child => {
+        child.parent = xRoot;
+      });
+
+      expect(getPreviousNode(xA)).toBe(xB);
+    });
+
+    test('should not return siblings for root platform or guide paths', () => {
+      expect(
+        getPreviousNode(createNode('platforms/javascript', 'JavaScript'))
+      ).toBeUndefined();
+      expect(
+        getPreviousNode(createNode('platforms/javascript/guides/nextjs', 'Next.js'))
+      ).toBeUndefined();
+    });
+  });
+
   describe('isRootPlatformPath', () => {
     test('should return true for root platform path', () => {
       expect(isRootPlatformPath('platforms/javascript')).toBe(true);

src/docTree.ts

@@ -181,6 +181,52 @@ export const getNextNode = (node: DocNode): DocNode | undefined => {
   return undefined;
 };
 
+/**
+ * Returns the previous node in the tree, which is either the last child of the parent,
+ * the previous sibling, or the previous sibling of a parent node.
+ */
+export const getPreviousNode = (node: DocNode): DocNode | undefined => {
+  const previousSibling = getPreviousSiblingNode(node);
+  if (previousSibling) {
+    return previousSibling;
+  }
+  return node.parent;
+};
+
+const getNextSiblingNode = (node: DocNode): DocNode | undefined => {
+  if (!node.parent) {
+    return undefined;
+  }
+
+  const siblings = node.parent.children
+    .sort(sortSiblingsByOrder)
+    .filter(filterVisibleSiblings);
+
+  const index = siblings.indexOf(node);
+  if (index < siblings.length - 1) {
+    return siblings[index + 1];
+  }
+
+  return undefined;
+};
+
+const getPreviousSiblingNode = (node: DocNode): DocNode | undefined => {
+  if (!node.parent) {
+    return undefined;
+  }
+
+  const siblings = node.parent.children
+    .sort(sortSiblingsByOrder)
+    .filter(filterVisibleSiblings);
+
+  const index = siblings.indexOf(node);
+  if (index > 0) {
+    return siblings[index - 1];
+  }
+
+  return undefined;
+};
+
 const sortSiblingsByOrder = (a: DocNode, b: DocNode) =>
   (a.frontmatter.sidebar_order ?? 10) - (b.frontmatter.sidebar_order ?? 10);
 
@@ -190,21 +236,6 @@ const filterVisibleSiblings = (s: DocNode) =>
   !s.frontmatter.draft &&
   s.path;
 
-const getNextSiblingNode = (node: DocNode): DocNode | undefined => {
-  // filter out root platform and guide paths as these siblings do not make sense in navigation
-  if (node.parent) {
-    const siblings = node.parent.children
-      .sort(sortSiblingsByOrder)
-      .filter(filterVisibleSiblings);
-
-    const index = siblings.indexOf(node);
-    if (index < siblings.length - 1) {
-      return siblings[index + 1];
-    }
-  }
-  return undefined;
-};
-
 function nodeToPlatform(n: DocNode): Platform {
   const platformData = platformsData()[n.slug];
   const caseStyle = platformData?.case_style || n.frontmatter.caseStyle;