reflect sidebar sorting (based on sidebar_order) on PageGrid component (

#10896)

src/components/pageGrid.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import {nodeForPath} from 'sentry-docs/docTree';
+import {nodeForPath, sidebarOrderSorter} from 'sentry-docs/docTree';
 import {serverContext} from 'sentry-docs/serverContext';
 
 type Props = {
@@ -28,10 +28,7 @@ export function PageGrid({header}: Props) {
         {parentNode.children
           /* NOTE: temp fix while we figure out the reason why some nodes have empty front matter */
           .filter(c => c.frontmatter.title)
-          .sort(
-            (a, b) =>
-              (a.frontmatter.sidebar_order ?? 0) - (b.frontmatter.sidebar_order ?? 0)
-          )
+          .sort((a, b) => sidebarOrderSorter(a.frontmatter, b.frontmatter))
           .map(n => (
             <li key={n.path} style={{marginBottom: '1rem'}}>
               <h4 style={{marginBottom: '0px'}}>

src/docTree.ts

@@ -44,18 +44,20 @@ async function getDocsRootNodeUncached(): Promise<DocNode> {
   );
 }
 
+export const sidebarOrderSorter = (a: FrontMatter, b: FrontMatter) => {
+  const partDiff = slugWithoutIndex(a.slug).length - slugWithoutIndex(b.slug).length;
+  if (partDiff !== 0) {
+    return partDiff;
+  }
+  const orderDiff = (a.sidebar_order || 99999) - (b.sidebar_order || 99999);
+  if (orderDiff !== 0) {
+    return orderDiff;
+  }
+  return (a.title || '').localeCompare(b.title || '');
+};
+
 function frontmatterToTree(frontmatter: FrontMatter[]): DocNode {
-  const sortedDocs = frontmatter.sort((a, b) => {
-    const partDiff = slugWithoutIndex(a.slug).length - slugWithoutIndex(b.slug).length;
-    if (partDiff !== 0) {
-      return partDiff;
-    }
-    const orderDiff = (a.sidebar_order || 99999) - (b.sidebar_order || 99999);
-    if (orderDiff !== 0) {
-      return orderDiff;
-    }
-    return (a.title || '').localeCompare(b.title || '');
-  });
+  const sortedDocs = frontmatter.sort(sidebarOrderSorter);
 
   const rootNode: DocNode = {
     path: '/',