Reuse the sidebar sorter on pageGrid

src/components/pageGrid.tsx

@@ -1,7 +1,8 @@
 import Link from 'next/link';
 
-import {nodeForPath, sidebarOrderSorter} from 'sentry-docs/docTree';
+import {nodeForPath} from 'sentry-docs/docTree';
 import {serverContext} from 'sentry-docs/serverContext';
+import {sortPages} from 'sentry-docs/utils';
 
 type Props = {
   nextPages: boolean;
@@ -25,18 +26,23 @@ export function PageGrid({header, exclude}: Props) {
     <nav>
       {header && <h2>{header}</h2>}
       <ul>
-        {parentNode.children
-          /* NOTE: temp fix while we figure out the reason why some nodes have empty front matter */
-          .filter(c => c.frontmatter.title && !exclude?.includes(c.slug))
-          .sort((a, b) => sidebarOrderSorter(a.frontmatter, b.frontmatter))
-          .map(n => (
-            <li key={n.path} style={{marginBottom: '1rem'}}>
-              <h4 style={{marginBottom: '0px'}}>
-                <Link href={'/' + n.path}>{n.frontmatter.title}</Link>
-              </h4>
-              {n.frontmatter.description && <p>{n.frontmatter.description}</p>}
-            </li>
-          ))}
+        {sortPages(
+          parentNode.children.filter(
+            c =>
+              !c.frontmatter.sidebar_hidden &&
+              c.frontmatter.title &&
+              !exclude?.includes(c.slug)
+          ),
+          // a hacky adapter to reuse the same sidebar sorter
+          node => ({...node, context: node.frontmatter})
+        ).map(n => (
+          <li key={n.path} style={{marginBottom: '1rem'}}>
+            <h4 style={{marginBottom: '0px'}}>
+              <Link href={'/' + n.path}>{n.frontmatter.title}</Link>
+            </h4>
+            {n.frontmatter.description && <p>{n.frontmatter.description}</p>}
+          </li>
+        ))}
       </ul>
     </nav>
   );

src/docTree.ts

@@ -44,7 +44,7 @@ async function getDocsRootNodeUncached(): Promise<DocNode> {
   );
 }
 
-export const sidebarOrderSorter = (a: FrontMatter, b: FrontMatter) => {
+const sidebarOrderSorter = (a: FrontMatter, b: FrontMatter) => {
   const partDiff = slugWithoutIndex(a.slug).length - slugWithoutIndex(b.slug).length;
   if (partDiff !== 0) {
     return partDiff;