feat(platform): Navigation buttons (#11639)

Author: chargome

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

@@ -11,8 +11,11 @@ import {Home} from 'sentry-docs/components/home';
 import {Include} from 'sentry-docs/components/include';
 import {PlatformContent} from 'sentry-docs/components/platformContent';
 import {
+  DocNode,
   getCurrentPlatformOrGuide,
   getDocsRootNode,
+  getNextNode,
+  getPreviousNode,
   nodeForPath,
 } from 'sentry-docs/docTree';
 import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs';
@@ -24,6 +27,7 @@ import {
 } from 'sentry-docs/mdx';
 import {mdxComponents} from 'sentry-docs/mdxComponents';
 import {setServerContext} from 'sentry-docs/serverContext';
+import {PaginationNavNode} from 'sentry-docs/types/paginationNavNode';
 import {stripVersion} from 'sentry-docs/versioning';
 
 export async function generateStaticParams() {
@@ -42,7 +46,11 @@ export const dynamic = 'force-static';
 
 const mdxComponentsWithWrapper = mdxComponents(
   {Include, PlatformContent},
-  ({children, frontMatter}) => <DocPage frontMatter={frontMatter}>{children}</DocPage>
+  ({children, frontMatter, nextPage, previousPage}) => (
+    <DocPage frontMatter={frontMatter} nextPage={nextPage} previousPage={previousPage}>
+      {children}
+    </DocPage>
+  )
 );
 
 function MDXLayoutRenderer({mdxSource, ...rest}) {
@@ -59,6 +67,42 @@ export default async function Page({params}: {params: {path?: string[]}}) {
     path: params.path ?? [],
   });
 
+  if (!params.path && !isDeveloperDocs) {
+    return <Home />;
+  }
+
+  const pageNode = nodeForPath(rootNode, params.path ?? '');
+
+  if (!pageNode) {
+    // eslint-disable-next-line no-console
+    console.warn('no page node', params.path);
+    return notFound();
+  }
+
+  // gather previous and next page that will be displayed in the bottom pagination
+  const getPaginationDetails = (
+    getNode: (node: DocNode) => DocNode | undefined | 'root',
+    page: PaginationNavNode | undefined
+  ) => {
+    if (page && 'path' in page && 'title' in page) {
+      return page;
+    }
+
+    const node = getNode(pageNode);
+
+    if (node === 'root') {
+      return {path: '', title: 'Welcome to Sentry'};
+    }
+
+    return node ? {path: node.path, title: node.frontmatter.title} : undefined;
+  };
+
+  const previousPage = getPaginationDetails(
+    getPreviousNode,
+    pageNode?.frontmatter?.previousPage
+  );
+  const nextPage = getPaginationDetails(getNextNode, pageNode?.frontmatter?.nextPage);
+
   if (isDeveloperDocs) {
     // get the MDX for the current doc and render it
     let doc: Awaited<ReturnType<typeof getFileBySlug>> | null = null;
@@ -74,13 +118,17 @@ export default async function Page({params}: {params: {path?: string[]}}) {
     }
     const {mdxSource, frontMatter} = doc;
     // pass frontmatter tree into sidebar, rendered page + fm into middle, headers into toc
-    return <MDXLayoutRenderer mdxSource={mdxSource} frontMatter={frontMatter} />;
-  }
-  if (!params.path) {
-    return <Home />;
+    return (
+      <MDXLayoutRenderer
+        mdxSource={mdxSource}
+        frontMatter={frontMatter}
+        nextPage={nextPage}
+        previousPage={previousPage}
+      />
+    );
   }
 
-  if (params.path[0] === 'api' && params.path.length > 1) {
+  if (params.path?.[0] === 'api' && params.path.length > 1) {
     const categories = await apiCategories();
     const category = categories.find(c => c.slug === params?.path?.[1]);
     if (category) {
@@ -94,14 +142,6 @@ export default async function Page({params}: {params: {path?: string[]}}) {
     }
   }
 
-  const pageNode = nodeForPath(rootNode, params.path);
-
-  if (!pageNode) {
-    // eslint-disable-next-line no-console
-    console.warn('no page node', params.path);
-    return notFound();
-  }
-
   // get the MDX for the current doc and render it
   let doc: Awaited<ReturnType<typeof getFileBySlug>> | null = null;
   try {
@@ -122,7 +162,12 @@ export default async function Page({params}: {params: {path?: string[]}}) {
 
   // pass frontmatter tree into sidebar, rendered page + fm into middle, headers into toc.
   return (
-    <MDXLayoutRenderer mdxSource={mdxSource} frontMatter={{...frontMatter, versions}} />
+    <MDXLayoutRenderer
+      mdxSource={mdxSource}
+      frontMatter={{...frontMatter, versions}}
+      nextPage={nextPage}
+      previousPage={previousPage}
+    />
   );
 }
 

develop-docs/application/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: Application
+sidebar_order: 30
 ---
 
 <PageGrid />

develop-docs/development/environment/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: Environment
 description: This guide steps you through configuring a local development environment for the Sentry server on macOS and Linux.
-sidebar_order: 1
+sidebar_order: 2
 ---
 
 If you're using

develop-docs/integrations/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Developing Integrations
-sidebar_order: 80
+sidebar_order: 90
 ---
 
 <PageGrid />

develop-docs/relay/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Relay Development
-sidebar_order: 60
+sidebar_order: 70
 ---
 
 Relay is a service for event filtering, rate-limiting and processing. It can act as:

develop-docs/sdk/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: SDK Development
-sidebar_order: 70
+sidebar_order: 60
 ---
 
 The following is a guide for implementing a Sentry SDK.

develop-docs/self-hosted/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Self-Hosted Sentry
-sidebar_order: 30
+sidebar_order: 100
 ---
 
 In addition to making its source code available publicly, Sentry offers and maintains a minimal setup that works out-of-the-box for simple use cases. This version comes with no guarantees or dedicated support. Sentry engineers will do their best to answer questions and are dedicated to making sure self-hosted is running, but that's where our involvement ends. For anything else, we expect users to rely on the [Sentry Self-Hosted community](https://discord.gg/sentry) on Discord. The self-hosted repository should serve as a blueprint for how various Sentry services connect for a complete setup. This will be useful for folks willing to maintain larger installations with custom infrastructure.

develop-docs/self-hosted/releases.mdx

@@ -1,7 +1,7 @@
 ---
 title: Self-Hosted Releases & Upgrading
 sidebar_title: Releases & Upgrading
-sidebar_order: 10
+sidebar_order: 1
 ---
 
 Sentry cuts regular releases for self-hosting to keep it as close to [sentry.io](https://sentry.io) as possible. We decided to follow a monthly release schedule using the [CalVer](https://calver.org/#scheme) versioning scheme, with a primary release on the [15th of each month](https://github.com/getsentry/self-hosted/blob/704e4c3b5b7360080f79bcfbe26583e5a95ae675/.github/workflows/release.yml#L20-L24). We don't patch old versions, but if a bug is bad enough we may cut an out-of-cycle point release, which, like our regular monthly releases, is a snapshot of the latest versions of all of our components. You can find the [latest release](https://github.com/getsentry/self-hosted/releases/latest) over at the [releases section of our self-hosted repository](https://github.com/getsentry/self-hosted/releases/).

develop-docs/services/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Services
-sidebar_order: 60
+sidebar_order: 80
 ---
 
 <PageGrid />

docs/account/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Account Settings
-sidebar_order: 400
+sidebar_order: 10
 description: "Learn about Sentry's user settings and auth tokens."
 ---