From 860ca9246634e6d24525f9c0f716b67c126d7573 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Sun, 8 Feb 2026 15:31:14 +0700 Subject: [PATCH 1/5] Simplify getDocPaths() output The output of this function has unused data (such as the page body/content) that is included in all pages. Simplifying the output to only included used properties would result in smaller page size. --- src/components/navigation/NavContents.tsx | 6 +++--- src/components/navigation/navigationConfig.ts | 4 ++-- src/utils/get_paths.ts | 8 +++++++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/navigation/NavContents.tsx b/src/components/navigation/NavContents.tsx index c55aa47b..2357d4d9 100644 --- a/src/components/navigation/NavContents.tsx +++ b/src/components/navigation/NavContents.tsx @@ -38,7 +38,7 @@ export function NavContents({ navbarItem: i, title: posts.find((p) => p.params.slug === i.title.toLowerCase())?.props - .entry.data.title ?? i.title, + .entry.title ?? i.title, }; }) .map(({ navbarItem, title }) => ( @@ -79,7 +79,7 @@ export function NavContents({ key={post.params.slug} href={["/docs", post.params.slug].join("/")} > - {post.props.entry.data.title} + {post.props.entry.title} ))} @@ -98,7 +98,7 @@ export function NavContents({ buttonClass, )} > - {post.props.entry.data.title} + {post.props.entry.title} ))} diff --git a/src/components/navigation/navigationConfig.ts b/src/components/navigation/navigationConfig.ts index 6ca15903..ed5de327 100644 --- a/src/components/navigation/navigationConfig.ts +++ b/src/components/navigation/navigationConfig.ts @@ -31,8 +31,8 @@ export const headerNavItems = [ export const posts = await getDocPaths(); -export const getParent = (p: { params?: { slug: string }; props: any }) => - p.props.entry.data.parent; +export const getParent = (p: (typeof posts)[number]) => + p.props.entry.parent; export const groupedNavbarParents = groupBy( posts.filter((p) => getParent(p) !== undefined), diff --git a/src/utils/get_paths.ts b/src/utils/get_paths.ts index d38ccdab..ebd7bf35 100644 --- a/src/utils/get_paths.ts +++ b/src/utils/get_paths.ts @@ -4,6 +4,12 @@ export async function getDocPaths() { const blogEntries = await getCollection("docs"); return blogEntries.map((entry) => ({ params: { slug: entry.slug }, - props: { entry }, + props: { + entry: { + slug: entry.slug, + title: entry.data.title, + parent: entry.data.parent + }, + }, })); } From 29f5247a76df860406acd5cedb402c550b6fc186 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Sun, 8 Feb 2026 18:43:18 +0700 Subject: [PATCH 2/5] Refactor parts regarding docs collection A little bit of renaming from blog terms into docs terms. Also merge function that is used only once. --- src/components/navigation/NavContents.tsx | 8 +++---- src/components/navigation/Navbar.astro | 4 ++-- src/components/navigation/Navigation.astro | 4 ++-- src/components/navigation/navigationConfig.ts | 22 ++++++++++++++----- src/utils/get_paths.ts | 15 ------------- 5 files changed, 24 insertions(+), 29 deletions(-) delete mode 100644 src/utils/get_paths.ts diff --git a/src/components/navigation/NavContents.tsx b/src/components/navigation/NavContents.tsx index 2357d4d9..25edca98 100644 --- a/src/components/navigation/NavContents.tsx +++ b/src/components/navigation/NavContents.tsx @@ -4,7 +4,7 @@ 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 @@ -12,14 +12,14 @@ 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: pages, }: NavContentsProps) { const [expanded, setExpanded] = useState(); @@ -37,7 +37,7 @@ export function NavContents({ return { navbarItem: i, title: - posts.find((p) => p.params.slug === i.title.toLowerCase())?.props + pages.find((p) => p.params.slug === i.title.toLowerCase())?.props .entry.title ?? i.title, }; }) diff --git a/src/components/navigation/Navbar.astro b/src/components/navigation/Navbar.astro index 0ff64bd6..46b59465 100644 --- a/src/components/navigation/Navbar.astro +++ b/src/components/navigation/Navbar.astro @@ -1,7 +1,7 @@ --- import { ScrollArea } from "../ui/scroll-area"; import { NavContents } from "./NavContents.tsx"; -import { groupedNavbarParents, navbarParents, posts } from "./navigationConfig"; +import { groupedNavbarParents, navbarParents, pages } from "./navigationConfig"; --- @@ -9,7 +9,7 @@ import { groupedNavbarParents, navbarParents, posts } from "./navigationConfig"; diff --git a/src/components/navigation/Navigation.astro b/src/components/navigation/Navigation.astro index c5f8c3a6..3731b16e 100644 --- a/src/components/navigation/Navigation.astro +++ b/src/components/navigation/Navigation.astro @@ -4,7 +4,7 @@ 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"; ---
diff --git a/src/components/navigation/navigationConfig.ts b/src/components/navigation/navigationConfig.ts index ed5de327..525b45e6 100644 --- a/src/components/navigation/navigationConfig.ts +++ b/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,22 @@ export const headerNavItems = [ { name: "GitHub", href: "//github.com/VocaDB/Wiki" }, ]; -export const posts = await getDocPaths(); +const docsCollection = await getCollection("docs"); -export const getParent = (p: (typeof posts)[number]) => - p.props.entry.parent; +export const pages = docsCollection.map((entry) => ({ + params: { slug: entry.slug }, + props: { + entry: { + slug: entry.slug, + title: entry.data.title, + parent: entry.data.parent, + }, + }, +})); + +export const getParent = (p: (typeof pages)[number]) => p.props.entry.parent; export const groupedNavbarParents = groupBy( - posts.filter((p) => getParent(p) !== undefined), - (post) => getParent(post)!, + pages.filter((p) => getParent(p) !== undefined), + (pages) => getParent(pages)!, ); diff --git a/src/utils/get_paths.ts b/src/utils/get_paths.ts deleted file mode 100644 index ebd7bf35..00000000 --- a/src/utils/get_paths.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { getCollection } from "astro:content"; - -export async function getDocPaths() { - const blogEntries = await getCollection("docs"); - return blogEntries.map((entry) => ({ - params: { slug: entry.slug }, - props: { - entry: { - slug: entry.slug, - title: entry.data.title, - parent: entry.data.parent - }, - }, - })); -} From c757b14254dce88ba53b7215fe2af59e542a80df Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Sun, 8 Feb 2026 22:53:40 +0700 Subject: [PATCH 3/5] Simplify pages var further --- src/components/navigation/NavContents.tsx | 19 +++++++++---------- src/components/navigation/navigationConfig.ts | 13 ++++--------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/components/navigation/NavContents.tsx b/src/components/navigation/NavContents.tsx index 25edca98..fec4b500 100644 --- a/src/components/navigation/NavContents.tsx +++ b/src/components/navigation/NavContents.tsx @@ -19,7 +19,7 @@ export function NavContents({ mobile = false, groupedNavbarParents, navbarParents, - pages: pages, + pages, }: NavContentsProps) { const [expanded, setExpanded] = useState(); @@ -37,8 +37,7 @@ export function NavContents({ return { navbarItem: i, title: - pages.find((p) => p.params.slug === i.title.toLowerCase())?.props - .entry.title ?? i.title, + pages.find(page => page.slug === i.title.toLowerCase())?.title ?? i.title, }; }) .map(({ navbarItem, title }) => ( @@ -76,10 +75,10 @@ export function NavContents({ {groupedNavbarParents[c]?.map((post) => ( - {post.props.entry.title} + {post.title} ))} @@ -88,17 +87,17 @@ export function NavContents({ )} - {groupedNavbarParents[navbarItem.title]?.map((post) => ( + {groupedNavbarParents[navbarItem.title]?.map((page) => ( - {post.props.entry.title} + {page.title} ))} diff --git a/src/components/navigation/navigationConfig.ts b/src/components/navigation/navigationConfig.ts index 525b45e6..f2fd0a03 100644 --- a/src/components/navigation/navigationConfig.ts +++ b/src/components/navigation/navigationConfig.ts @@ -32,17 +32,12 @@ export const headerNavItems = [ const docsCollection = await getCollection("docs"); export const pages = docsCollection.map((entry) => ({ - params: { slug: entry.slug }, - props: { - entry: { - slug: entry.slug, - title: entry.data.title, - parent: entry.data.parent, - }, - }, + slug: entry.slug, + title: entry.data.title, + parent: entry.data.parent, })); -export const getParent = (p: (typeof pages)[number]) => p.props.entry.parent; +export const getParent = (p: (typeof pages)[number]) => p.parent; export const groupedNavbarParents = groupBy( pages.filter((p) => getParent(p) !== undefined), From 1ee3fe2af9f2303927fdfb45b98cf9fe8ed3b3ce Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Sun, 8 Feb 2026 23:19:48 +0700 Subject: [PATCH 4/5] Defer hydration, use NavContents directly --- src/components/navigation/MobileNavbar.tsx | 6 +++--- src/components/navigation/Navbar.astro | 2 +- src/components/navigation/Navigation.astro | 15 +++++++++------ 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/navigation/MobileNavbar.tsx b/src/components/navigation/MobileNavbar.tsx index d6358fec..59b8dc3c 100644 --- a/src/components/navigation/MobileNavbar.tsx +++ b/src/components/navigation/MobileNavbar.tsx @@ -1,9 +1,9 @@ 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 (
- + { children }
diff --git a/src/components/navigation/Navbar.astro b/src/components/navigation/Navbar.astro index 46b59465..784dbd5a 100644 --- a/src/components/navigation/Navbar.astro +++ b/src/components/navigation/Navbar.astro @@ -10,8 +10,8 @@ import { groupedNavbarParents, navbarParents, pages } from "./navigationConfig"; groupedNavbarParents={groupedNavbarParents} navbarParents={navbarParents} pages={pages} - client:visible mobile={false} + client:visible /> diff --git a/src/components/navigation/Navigation.astro b/src/components/navigation/Navigation.astro index 3731b16e..3316d69d 100644 --- a/src/components/navigation/Navigation.astro +++ b/src/components/navigation/Navigation.astro @@ -5,6 +5,7 @@ import Search from "./Search.astro"; import ThemeToggle from "./ThemeToggle.astro"; import { headerNavItems } from "./navigationConfig"; import { groupedNavbarParents, navbarParents, pages } from "./navigationConfig"; +import { NavContents } from "./NavContents"; ---
- + + +