Partition by section

Author: hasparus

src/components/learn-aggregator/items.tsx …ponents/learn-aggregator/learn-pages.tsxsrc/components/learn-aggregator/items.tsx renamed to src/components/learn-aggregator/learn-pages.tsx src/components/learn-aggregator/items.tsx renamed to src/components/learn-aggregator/learn-pages.tsx

@@ -7,9 +7,13 @@ interface LearnPageItem {
   description: string
   icon: string
   section: "getting-started" | "best-practices"
+  href: string
 }
 
-const _items: Record<LearnPagePath, Omit<LearnPageItem, "title"> | null> = {
+const _items: Record<
+  LearnPagePath,
+  Omit<LearnPageItem, "title" | "href"> | null
+> = {
   introduction: {
     description:
       "Get a high-level overview of GraphQL and how it enables flexible, versionless APIs powered by a strong type system.",
@@ -147,6 +151,12 @@ const _items: Record<LearnPagePath, Omit<LearnPageItem, "title"> | null> = {
 
 export const learnPages = _items as Record<LearnPagePath, LearnPageItem | null>
 
+export const pagesBySection: Record<LearnPageItem["section"], LearnPageItem[]> =
+  {
+    "getting-started": [],
+    "best-practices": [],
+  }
+
 for (const path in learnPages) {
   const page = learnPages[path as LearnPagePath]
   if (page === null) continue
@@ -161,4 +171,8 @@ for (const path in learnPages) {
   } else {
     page.title = path.replace(/-/g, " ").replace(/\b\w/g, c => c.toUpperCase())
   }
+
+  page.href = `/learn/${path}`
+
+  pagesBySection[page.section].push(page)
 }

src/pages/learn/index.mdx

@@ -2,6 +2,7 @@ import { Button } from '@/app/conf/_design-system/button';
 
 import { TocHero, TocHeroContents } from '../../components/toc-hero';
 import { TeaserSection, LearnHeroStripes } from '../../components/learn-aggregator'
+import { pagesBySection } from '../../components/learn-aggregator/learn-pages'
 import { NavbarFixed } from '../../components/navbar/navbar-fixed'
 
 <NavbarFixed />
@@ -36,6 +37,7 @@ import { NavbarFixed } from '../../components/navbar/navbar-fixed'
     </Button>
   }
   firstIconsEager
+  items={pagesBySection["getting-started"]}
 />
 
 <TeaserSection 
@@ -48,4 +50,5 @@ import { NavbarFixed } from '../../components/navbar/navbar-fixed'
       Explore all best practices
     </Button>
   }
+  items={pagesBySection["best-practices"]}
 />