app/components/Button.tsx

@@ -27,19 +27,24 @@ type ButtonProps = {
 	| (JSX.IntrinsicElements["a"] & { href: string })
 );
 
-export function Button(props: ButtonProps) {
+export function Button({
-	const className = clsx(
+	variant = "primary",
-		variantStyles[props.variant ?? "primary"],
+	size = "md",
-		sizeStyles[props.size ?? "md"],
+	className,
+	...props
+}: ButtonProps) {
+	className = clsx(
+		variantStyles[variant],
+		sizeStyles[size],
 		"cursor-pointer",
-		props.className,
+		className,
 	);
 
 	return "href" in props && props.href ? (
 		<Link
-			{...(props as JSX.IntrinsicElements["a"])}
 			class={className}
 			href={props.href}
+			{...(props as JSX.IntrinsicElements["a"])}
 		/>
 	) : (
 		<button class={className} {...(props as JSX.IntrinsicElements["button"])} />

app/components/Callout.tsx

@@ -31,20 +31,25 @@ const icons = {
 	),
 };
 
-export default function Callout(props: {
+export default function Callout({
+	title,
+	children,
+	type = "note",
+	collapsible = false,
+}: {
 	title: string;
 	children: JSX.Element;
 	type?: keyof typeof styles;
 	collapsible?: boolean;
 }) {
-	const IconComponent = icons[props.type || "note"];
+	const IconComponent = icons[type];
 
 	return (
 		<div
 			class={clsx(
 				"my-8 flex flex-col rounded-3xl p-6",
-				styles[props.type || "note"].container,
+				styles[type].container,
-				{ "cursor-pointer": props.collapsible },
+				{ "cursor-pointer": collapsible },
 			)}
 		>
 			<div class="flex items-center gap-6">
@@ -52,16 +57,14 @@ export default function Callout(props: {
 				<p
 					class={clsx(
 						"!m-0 font-display text-xl text-balance",
-						styles[props.type || "note"].title,
+						styles[type].title,
 					)}
 				>
-					{props.title}
+					{title}
 				</p>
 			</div>
 			<div class="mt-4 flex-auto">
-				<div class={clsx("prose mt-2.5", styles[props.type || "note"].body)}>
+				<div class={clsx("prose mt-2.5", styles[type].body)}>{children}</div>
-					{props.children}
-				</div>
 			</div>
 		</div>
 	);

app/components/PrevNextLinks.tsx

@@ -63,7 +63,7 @@ function PageLink(props: PageLinkProps) {
 }
 
 export function PrevNextLinks() {
-	const pageContext = usePageContext();
+	const { urlPathname } = usePageContext();
 
 	const allLinks = navigation
 		.flatMap((section) => section.links)
@@ -72,15 +72,13 @@ export function PrevNextLinks() {
 		});
 
 	const getNeighboringLinks = () => {
-		const linkIndex = allLinks.findIndex(
+		const linkIndex = allLinks.findIndex((link) => link.href === urlPathname);
-			(link) => link.href === pageContext.urlPathname,
-		);
 		if (linkIndex === -1) return [null, null];
 
 		const previousPage = allLinks[linkIndex - 1] || null;
 		let nextPage = allLinks[linkIndex + 1] || null;
 
-		if (nextPage?.href === pageContext.urlPathname) {
+		if (nextPage?.href === urlPathname) {
 			nextPage = allLinks[linkIndex + 2] || null;
 		}
 

app/components/Search.tsx

@@ -114,13 +114,13 @@ function SearchInput() {
 	);
 }
 
-function HighlightQuery(props: { text: string; query: string }) {
+function HighlightQuery({ text, query }: { text: string; query: string }) {
 	return (
 		<Highlighter
 			highlightClass="group-aria-selected:underline bg-transparent text-violet-600"
-			searchWords={[props.query]}
+			searchWords={[query]}
 			autoEscape={true}
-			textToHighlight={props.text}
+			textToHighlight={text}
 		/>
 	);
 }

app/layouts/DocsLayout.tsx

@@ -3,6 +3,7 @@ import type { JSXElement } from "solid-js";
 import { TableOfContents } from "@/partials/TableOfContents";
 import { PrevNextLinks } from "@/components/PrevNextLinks";
 import { usePageContext } from "vike-solid/usePageContext";
+import { clientOnly } from "vike-solid/clientOnly";
 import { clock } from "solid-heroicons/outline";
 import { navigation } from "@/libs/navigation";
 import { Prose } from "@/components/Prose";
@@ -12,6 +13,10 @@ type DocsLayoutProps = {
 	children: JSXElement;
 };
 
+// const TableOfContents = clientOnly(() =>
+// 	import("@/partials/TableOfContents").then((m) => m.TableOfContents),
+// );
+
 export function DocsLayout(props: DocsLayoutProps) {
 	const pageContext = usePageContext();
 

app/partials/MobileNavigation.tsx

@@ -25,24 +25,24 @@ function MenuIcon(props: JSX.IntrinsicElements["svg"]) {
 function CloseIcon(props: JSX.IntrinsicElements["svg"]) {
 	return (
 		<svg
-			{...props}
 			aria-hidden="true"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke-width="2"
 			stroke-linecap="round"
+			{...props}
 		>
 			<path d="M5 5l14 14M19 5l-14 14" />
 		</svg>
 	);
 }
 
-function CloseOnNavigation(props: { close: () => void }) {
+function CloseOnNavigation({ close }: { close: () => void }) {
-	const pageContext = usePageContext();
+	const { urlPathname } = usePageContext();
 
 	createEffect(() => {
-		props.close();
+		close();
-	}, [pageContext.urlPathname, props.close]);
+	}, [urlPathname, close]);
 
 	return null;
 }

app/partials/Navigation.tsx

@@ -26,7 +26,7 @@ function NavigationItem(props: NavigationItemProps) {
 
 	return (
 		<>
-			<h3
+			<h2
 				class={clsx(
 					"font-display font-medium cursor-pointer",
 					isOpened() ? "text-violet-600" : "text-slate-900",
@@ -56,9 +56,9 @@ function NavigationItem(props: NavigationItemProps) {
 
 					<span class="text-slate-400"> ({props.section.links.length})</span>
 				</button>
-			</h3>
+			</h2>
 			{isOpened() && (
-				<ul class="!mt-0 ml-2 space-y-1 border-l-2 border-slate-100 lg:mt-4 lg:space-y-2 lg:border-slate-200 mb-2">
+				<ul class="!mt-0 ml-2 space-y-1 border-l-2 border-slate-100 lg:mt-4 lg:space-y-2 lg:border-slate-200">
 					<For each={props.section.links}>
 						{(link) => (
 							<li class="relative">