Simplify output of docs pages for navigation

src/components/navigation/MobileNavbar.tsx

@@ -1,9 +1,13 @@
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 import { ScrollArea } from "../ui/scroll-area";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
-import { NavContents, type NavContentsProps } from "./NavContents.tsx";
+import React from "react";
 
-export default function MobileNavbar(props: NavContentsProps) {
+export default function MobileNavbar({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <Sheet>
       <SheetTrigger
@@ -14,9 +18,7 @@ export default function MobileNavbar(props: NavContentsProps) {
       </SheetTrigger>
       <SheetContent side="left" className="p-0">
         <ScrollArea className="h-full">
-          <div className="p-6">
-            <NavContents {...props} />
-          </div>
+          <div className="p-6">{children}</div>
         </ScrollArea>
       </SheetContent>
     </Sheet>

src/components/navigation/NavContents.tsx

@@ -4,22 +4,22 @@ import { cn } from "@/lib/utils.ts";
 import type {
   groupedNavbarParents,
   navbarParents,
-  posts,
+  pages,
 } from "./navigationConfig";
 
 // We have to access these navbar configs via astro props because they are not available on the client side
 export interface NavContentsProps {
   mobile?: boolean;
   groupedNavbarParents: typeof groupedNavbarParents;
   navbarParents: typeof navbarParents;
-  posts: typeof posts;
+  pages: typeof pages;
 }
 
 export function NavContents({
   mobile = false,
   groupedNavbarParents,
   navbarParents,
-  posts,
+  pages,
 }: NavContentsProps) {
   const [expanded, setExpanded] = useState<string | undefined>();
 
@@ -37,8 +37,8 @@ export function NavContents({
           return {
             navbarItem: i,
             title:
-              posts.find((p) => p.params.slug === i.title.toLowerCase())?.props
-                .entry.data.title ?? i.title,
+              pages.find((page) => page.slug === i.title.toLowerCase())
+                ?.title ?? i.title,
           };
         })
         .map(({ navbarItem, title }) => (
@@ -76,10 +76,10 @@ export function NavContents({
                           {groupedNavbarParents[c]?.map((post) => (
                             <a
                               className={cn(linkClass, buttonClass)}
-                              key={post.params.slug}
-                              href={["/docs", post.params.slug].join("/")}
+                              key={post.slug}
+                              href={["/docs", post.slug].join("/")}
                             >
-                              {post.props.entry.data.title}
+                              {post.title}
                             </a>
                           ))}
                         </div>
@@ -88,17 +88,17 @@ export function NavContents({
                   </div>
                 )}
 
-              {groupedNavbarParents[navbarItem.title]?.map((post) => (
+              {groupedNavbarParents[navbarItem.title]?.map((page) => (
                 <a
-                  href={["/docs", post.params.slug].join("/")}
-                  key={post.params.slug}
+                  href={["/docs", page.slug].join("/")}
+                  key={page.slug}
                   className={cn(
                     "text-muted-foreground",
                     linkClass,
                     buttonClass,
                   )}
                 >
-                  {post.props.entry.data.title}
+                  {page.title}
                 </a>
               ))}
             </div>

src/components/navigation/Navbar.astro

@@ -1,17 +1,17 @@
 ---
 import { ScrollArea } from "../ui/scroll-area";
 import { NavContents } from "./NavContents.tsx";
-import { groupedNavbarParents, navbarParents, posts } from "./navigationConfig";
+import { groupedNavbarParents, navbarParents, pages } from "./navigationConfig";
 ---
 
 <ScrollArea client:visible className="pr-6 h-full">
   <div class="py-6">
     <NavContents
       groupedNavbarParents={groupedNavbarParents}
       navbarParents={navbarParents}
-      posts={posts}
-      client:visible
+      pages={pages}
       mobile={false}
+      client:visible
     />
   </div>
 </ScrollArea>

src/components/navigation/Navigation.astro

@@ -4,20 +4,23 @@ import MobileNavbar from "./MobileNavbar";
 import Search from "./Search.astro";
 import ThemeToggle from "./ThemeToggle.astro";
 import { headerNavItems } from "./navigationConfig";
-import { groupedNavbarParents, navbarParents, posts } from "./navigationConfig";
+import { groupedNavbarParents, navbarParents, pages } from "./navigationConfig";
+import { NavContents } from "./NavContents";
 ---
 
 <header
   class="sticky top-0 z-50 w-full border-b border-border/40 g-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 h-16"
 >
   <div class="h-full container flex items-center">
     <div class="md:flex">
-      <MobileNavbar
-        groupedNavbarParents={groupedNavbarParents}
-        navbarParents={navbarParents}
-        posts={posts}
-        client:media="(max-width: 768px)"
-      />
+      <MobileNavbar client:media="(max-width: 768px)">
+        <NavContents
+          groupedNavbarParents={groupedNavbarParents}
+          navbarParents={navbarParents}
+          pages={pages}
+          client:visible
+        />
+      </MobileNavbar>
       <a class="hover:underline mr-6 hidden md:block" href="/">VocaDB Wiki</a>
       <nav class="hidden md:flex items-center gap-6 text-sm">
         {

src/components/navigation/navigationConfig.ts

@@ -1,5 +1,5 @@
 import { groupBy } from "@/lib/utils";
-import { getDocPaths } from "@/utils/get_paths";
+import { getCollection } from "astro:content";
 
 export const navbarParents = [
   {
@@ -29,12 +29,17 @@ export const headerNavItems = [
   { name: "GitHub", href: "//github.com/VocaDB/Wiki" },
 ];
 
-export const posts = await getDocPaths();
+const docsCollection = await getCollection("docs");
 
-export const getParent = (p: { params?: { slug: string }; props: any }) =>
-  p.props.entry.data.parent;
+export const pages = docsCollection.map((entry) => ({
+  slug: entry.slug,
+  title: entry.data.title,
+  parent: entry.data.parent,
+}));
+
+export const getParent = (p: (typeof pages)[number]) => p.parent;
 
 export const groupedNavbarParents = groupBy(
-  posts.filter((p) => getParent(p) !== undefined),
-  (post) => getParent(post)!,
+  pages.filter((p) => getParent(p) !== undefined),
+  (pages) => getParent(pages)!,
 );