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."
 ---
 

docs/api/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: API Reference
+sidebar_order: 60
 ---
 
 The Sentry web API is used to access the Sentry platform programmatically. You can use the APIs to manage account-level resources, like organizations and teams, as well as manage and export data.

docs/cli/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Sentry CLI"
-sidebar_order: 4000
+sidebar_order: 50
 keywords:
   [
     "cli",

docs/concepts/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Concepts & Reference
-sidebar_order: 160
+sidebar_order: 80
 description: "Learn the basic concepts of Sentry such as searchable properties and data management settings."
 ---
 

docs/contributing/pages/frontmatter.mdx

@@ -47,3 +47,13 @@ Much of the other functionality for pages is also driven via frontmatter, such a
 
 - [Redirects](../redirects/)
 - [Search](../search/)
+
+`nextPage` (`{ path: 'path/to/page', title: 'Page Title' }`)
+
+Overrides the next page shown in the bottom pagination navigation.
+
+`previousPage` (`{ path: 'path/to/page', title: 'Page Title' }`)
+
+Overrides the previous page shown in the bottom pagination navigation.
+
+

docs/organization/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Organization Settings
-sidebar_order: 400
+sidebar_order: 20
 description: "Learn how to configure your organization's Sentry account, including 2FA authentication, user management, and data storage location."
 ---
 

docs/pricing/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Pricing & Billing
-sidebar_order: 1
+sidebar_order: 40
 description: "Learn about pricing, managing volume, and the different Sentry plans."
 ---
 

docs/product/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Product Walkthroughs
-sidebar_order: 1
+sidebar_order: 30
 description: "Get an overview of how you can use Sentry to not just observe, but debug errors, get to the root of user complaints, and identify performance bottlenecks."
 ---
 

docs/security-legal-pii/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Security, Legal, & PII
-sidebar_order: 1
+sidebar_order: 70
 description: "Learn about Sentry's security and compliance processes and how to scrub sensitive data."
 ---
 

src/components/docPage/index.tsx

@@ -3,6 +3,7 @@ import {ReactNode} from 'react';
 import {getCurrentGuide, getCurrentPlatform, nodeForPath} from 'sentry-docs/docTree';
 import {serverContext} from 'sentry-docs/serverContext';
 import {FrontMatter} from 'sentry-docs/types';
+import {PaginationNavNode} from 'sentry-docs/types/paginationNavNode';
 import {isTruthy} from 'sentry-docs/utils';
 import {getUnversionedPath} from 'sentry-docs/versioning';
 
@@ -12,6 +13,7 @@ import {Breadcrumbs} from '../breadcrumbs';
 import {CodeContextProvider} from '../codeContext';
 import {GitHubCTA} from '../githubCTA';
 import {Header} from '../header';
+import {PaginationNav} from '../paginationNav';
 import {PlatformSdkDetail} from '../platformSdkDetail';
 import {Sidebar} from '../sidebar';
 import {TableOfContents} from '../tableOfContents';
@@ -21,8 +23,10 @@ type Props = {
   frontMatter: Omit<FrontMatter, 'slug'>;
   /** Whether to take all the available width */
   fullWidth?: boolean;
+  nextPage?: PaginationNavNode;
   /** Whether to hide the table of contents & sdk details */
   notoc?: boolean;
+  previousPage?: PaginationNavNode;
   sidebar?: ReactNode;
 };
 
@@ -32,6 +36,8 @@ export function DocPage({
   notoc = false,
   fullWidth = false,
   sidebar,
+  nextPage,
+  previousPage,
 }: Props) {
   const {rootNode, path} = serverContext();
   const currentPlatform = getCurrentPlatform(rootNode, path);
@@ -78,6 +84,16 @@ export function DocPage({
               <div id="main">
                 <CodeContextProvider>{children}</CodeContextProvider>
               </div>
+
+              <div className="grid grid-cols-2 gap-4 not-prose mt-16">
+                <div className="col-span-1">
+                  {previousPage && <PaginationNav node={previousPage} title="Previous" />}
+                </div>
+                <div className="col-span-1">
+                  {nextPage && <PaginationNav node={nextPage} title="Next" />}
+                </div>
+              </div>
+
               {hasGithub && <GitHubCTA />}
             </div>
           </div>

src/components/githubCTA/styles.module.css

@@ -1,6 +1,6 @@
 .cta {
   background: var(--accent-a2);
-  margin-top: 4rem;
+  margin-top: 2rem;
   margin-bottom: 2rem;
   padding: 1rem 1.25rem;
   border-radius: 0.25em;

src/components/paginationNav.tsx

@@ -0,0 +1,34 @@
+import {DoubleArrowLeftIcon, DoubleArrowRightIcon} from '@radix-ui/react-icons';
+
+import {PaginationNavNode} from 'sentry-docs/types/paginationNavNode';
+
+export function PaginationNav({
+  node,
+  title,
+}: {
+  node: PaginationNavNode;
+  title: 'Previous' | 'Next';
+}) {
+  return (
+    <a href={`/${node.path}`} className="no-underline">
+      <div
+        className={`py-3 px-4 border-2 dark:[border-color:var(--gray-4)]  rounded-md transition-colors hover:[border-color:var(--accent)] ${
+          title === 'Previous' ? 'text-left' : 'text-right'
+        }`}
+      >
+        <div className="text-sm [color:var(--foreground)]">{title}</div>
+        <div
+          className={`flex items-center gap-1 font-[500] ${
+            title === 'Previous' ? 'justify-start' : 'justify-end'
+          }`}
+        >
+          {title === 'Previous' && <DoubleArrowLeftIcon />}
+
+          {node.title}
+
+          {title === 'Next' && <DoubleArrowRightIcon />}
+        </div>
+      </div>
+    </a>
+  );
+}

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 */
+// todo: we should probably get rid of this
 const productSidebarItems = [
   {
     title: 'Account Settings',