From 30a2f1a34c1187416dac13845ca6912477cd178c Mon Sep 17 00:00:00 2001
From: Abdellah Hariti <haritiabdellah@gmail.com>
Date: Wed, 9 Oct 2024 17:37:59 +0100
Subject: [PATCH] reuse the sidebar sorter on pageGrid

---
 src/components/pageGrid.tsx | 32 +++++++++++++++++++-------------
 src/docTree.ts              |  2 +-
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/pageGrid.tsx b/src/components/pageGrid.tsx
index 1b1355dfe168d..61c0da460c984 100644
--- a/src/components/pageGrid.tsx
+++ b/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>
   );
diff --git a/src/docTree.ts b/src/docTree.ts
index dbf5ccadbff3c..008b2205a5044 100644
--- a/src/docTree.ts
+++ b/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;