refactor: Update variable names in Navigation and TableOfContents

app/layouts/LayoutDefault.tsx

@@ -15,14 +15,14 @@ type DefaultLayoutProps = {
 };
 
 export default function DefaultLayout(props: DefaultLayoutProps) {
-	const { urlPathname } = usePageContext();
+	const pageContext = usePageContext();
 
 	return (
 		<>
 			<div class="flex w-full flex-col font-sans">
 				<Header />
 
-				{urlPathname === "/" && <HeroSection />}
+				{pageContext.urlPathname === "/" && <HeroSection />}
 
 				<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
 					<div class="hidden lg:relative lg:block lg:flex-none">

app/package.json

@@ -2,7 +2,7 @@
 	"scripts": {
 		"dev": "bun ./fastify-entry.ts",
 		"build": "cross-env DEBUG=vike:error,vike:log vike build",
-		"preview": "cross-env NODE_ENV=production bun ./fastify-server.ts",
+		"preview": "cross-env NODE_ENV=production bun ./fastify-entry.ts",
 		"production": "bun run build && bun run preview",
 		"lint": "biome lint --write .",
 		"format": "biome format --write ."

app/pages/+config.ts

@@ -25,8 +25,8 @@ export default {
 		class: "flex min-h-full bg-white",
 	},
 
-	prerender: true,
-	prefetchStaticAssets: "hover",
+	// prerender: true,
+	// prefetchStaticAssets: "hover",
 
 	extends: [vikeSolid],
 } satisfies Config;

app/partials/Navigation.tsx

@@ -12,13 +12,15 @@ type NavigationItemProps = {
 };
 
 function NavigationItem(props: NavigationItemProps) {
-	const { urlPathname } = usePageContext();
+	const pageContext = usePageContext();
 
 	const [isOpened, setIsOpened] = createSignal(
 		props.section.links.some(
 			(link) =>
-				link.href === urlPathname ||
-				link.subitems?.some((subitem) => subitem.href === urlPathname),
+				link.href === pageContext.urlPathname ||
+				link.subitems?.some(
+					(subitem) => subitem.href === pageContext.urlPathname,
+				),
 		),
 	);
 
@@ -64,9 +66,9 @@ function NavigationItem(props: NavigationItemProps) {
 									link={link}
 									onLinkClick={props.onLinkClick}
 									isOpened={
-										link.href === urlPathname ||
+										link.href === pageContext.urlPathname ||
 										link.subitems?.some(
-											(subitem) => subitem.href === urlPathname,
+											(subitem) => subitem.href === pageContext.urlPathname,
 										)
 									}
 								/>
@@ -87,14 +89,16 @@ type NavigationSubItemProps = {
 
 function NavigationSubItem(props: NavigationSubItemProps) {
 	const [isOpened, setIsOpened] = createSignal(props.isOpened);
-	const { urlPathname } = usePageContext();
+	const pageContext = usePageContext();
 
 	createEffect(() => {
 		setIsOpened(
-			props.link.href === urlPathname ||
-				props.link.subitems?.some((subitem) => subitem.href === urlPathname),
+			props.link.href === pageContext.urlPathname ||
+				props.link.subitems?.some(
+					(subitem) => subitem.href === pageContext.urlPathname,
+				),
 		);
-	}, [urlPathname, props.link]);
+	}, [pageContext.urlPathname, props.link]);
 
 	return (
 		<>
@@ -131,7 +135,7 @@ function NavigationSubItem(props: NavigationSubItemProps) {
 							"before:top-3 before:-translate-y-1/2 font-semibold":
 								props.link.subitems,
 						},
-						props.link.href !== urlPathname && "before:hidden",
+						props.link.href !== pageContext.urlPathname && "before:hidden",
 						isOpened()
 							? "text-violet-500 before:bg-violet-500"
 							: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block",
@@ -153,7 +157,7 @@ function NavigationSubItem(props: NavigationSubItemProps) {
 									onClick={props.onLinkClick}
 									class={clsx(
 										"block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
-										subitem.href === urlPathname
+										subitem.href === pageContext.urlPathname
 											? "font-semibold text-violet-500 before:bg-violet-500"
 											: "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block",
 									)}

app/partials/TableOfContents.tsx

@@ -7,19 +7,15 @@ import { Link } from "@/components/Link";
 import clsx from "clsx";
 
 export function TableOfContents() {
-	const { sections } = useData<Data>();
-	if (!sections) return null;
+	const data = useData<Data>();
+	if (!data.sections) return null;
 
-	createEffect(() => {
-		for (const [key, value] of Object.entries(sections)) {
-			console.log(`${key}: ${JSON.stringify(value)}`);
-		}
-	});
-
-	const [currentSection, setCurrentSection] = createSignal(sections[0]?.hash);
+	const [currentSection, setCurrentSection] = createSignal(
+		data.sections[0]?.hash,
+	);
 
 	const getHeadings = () => {
-		return sections
+		return data.sections
 			.map((section) => {
 				if (!section.hash) return null;
 
@@ -36,7 +32,7 @@ export function TableOfContents() {
 	};
 
 	createEffect(() => {
-		if (sections.length === 0) return;
+		if (data.sections.length === 0) return;
 		const headings = getHeadings();
 
 		function onScroll() {
@@ -55,7 +51,7 @@ export function TableOfContents() {
 		return () => {
 			window.removeEventListener("scroll", onScroll);
 		};
-	}, [getHeadings, sections]);
+	}, [getHeadings, data.sections]);
 
 	function isActive(section: DocSection) {
 		if (section.hash === currentSection()) return true;
@@ -76,7 +72,7 @@ export function TableOfContents() {
 				</h2>
 
 				<ol class="mt-4 space-y-3 text-sm">
-					<For each={sections}>
+					<For each={data.sections}>
 						{(section) => (
 							<li>
 								<h3>