app/components/PrevNextLinks.tsx

@@ -68,25 +68,6 @@ export function PrevNextLinks() {
 	const pageContext = usePageContext();
 
 	const allLinks = navigation
-		.sort((a, b) => {
-			// positions order (for sorting):
-			// 1. start
-			// 2. auto | undefined
-			// 3. end
-
-			if (a.position === "start" && b.position !== "start") return -1;
-			if (a.position !== "start" && b.position === "start") return 1;
-
-			if (a.position === "end" && b.position !== "end") return 1;
-			if (a.position !== "end" && b.position === "end") return -1;
-
-			if (a.position === "auto" && b.position !== "auto") return -1;
-			if (a.position !== "auto" && b.position === "auto") return 1;
-
-			if (a.position === undefined && b.position !== undefined) return -1;
-			if (a.position !== undefined && b.position === undefined) return 1;
-			return 0;
-		})
 		.flatMap((section) => section.links)
 		.flatMap((link) => {
 			return link.subitems ? [link, ...link.subitems] : link;

app/layouts/DocsLayout.tsx

@@ -44,23 +44,21 @@ type DocsHeaderProps = {
 };
 
 export function DocsHeader(props: DocsHeaderProps) {
-	const pageContext = usePageContext();
+	const { urlPathname } = usePageContext();
 
-	const getSection = () => {
+	const section = navigation.find((section) =>
-		return navigation.find((section) =>
+		section.links.find((link) => link.href === urlPathname),
-			section.links.find((link) => link.href === pageContext.urlPathname),
 	);
-	};
 
-	if (!props.title && !getSection()) {
+	if (!props.title && !section) {
 		return null;
 	}
 
 	return (
 		<header class="mb-9 space-y-1">
-			{getSection() && (
+			{section && (
 				<p class="font-display text-sm font-medium text-violet-500">
-					{getSection()?.title}
+					{section.title}
 				</p>
 			)}
 			{props.title && (

app/layouts/prism.css

@@ -52,6 +52,7 @@
 }
 
 .token.module,
+.token.attr-name,
 .token.keyword,
 .token.rule,
 .token.pseudo-class,
@@ -66,9 +67,6 @@
 }
 
 .token.generic,
-.token.attr-name,
-.token.boolean,
-.token.number,
 .token.class-name {
   color: #C18401;
 }

app/pages/docs/react/jsx/tabs.tsx

@@ -8,12 +8,12 @@ const reactCreateElementSnippets = [
 	},
 	{
 		name: "React sans JSX",
-		codeLanguage: "jsx",
+		codeLanguage: "js",
 		code: `React.createElement("button", { className: "button" }, "Clique moi !");`,
 	},
 	{
 		name: "React avec JSX",
-		codeLanguage: "jsx",
+		codeLanguage: "tsx",
 		code: `<button className="button">Clique moi !</button>`,
 	},
 ];

app/pages/docs/react/premier-composant/tabs.tsx

@@ -18,8 +18,9 @@ const reactUseButtonComponentSnippets = [
 		name: "Utilisation du composant Button",
 		codeLanguage: "jsx",
 		withLineNumbers: true,
-		code: `import { Button } from "./Button";
+		code: `import React from "react";
-import React from "react";
+
+import { Button } from "./Button";
 
 export function App() {
   return (
@@ -65,8 +66,9 @@ const reactUseButtonComponentPropsSnippets = [
 		name: "Ajout de la prop `onClick`",
 		codeLanguage: "jsx",
 		withLineNumbers: true,
-		code: `import { Button } from "./Button";
+		code: `import React from "react";
-import React from "react";
+
+import { Button } from "./Button";
 
 export function App() {
   function handleClick() {

app/partials/Navigation.tsx

@@ -1,5 +1,3 @@
-import type { NavigationLink } from "@/libs/navigation";
-
 import { chevronDown, chevronUp } from "solid-heroicons/solid";
 import { createEffect, createSignal, For } from "solid-js";
 import { usePageContext } from "vike-solid/usePageContext";
@@ -16,32 +14,22 @@ type NavigationItemProps = {
 function NavigationItem(props: NavigationItemProps) {
 	const pageContext = usePageContext();
 
-	const checkIsLinkActive = (link: NavigationLink) => {
+	const [isOpened, setIsOpened] = createSignal(
-		return (
+		props.section.links.some(
+			(link) =>
 				link.href === pageContext.urlPathname ||
-			link.subitems?.some((subitem) => subitem.href === pageContext.urlPathname)
+				link.subitems?.some(
+					(subitem) => subitem.href === pageContext.urlPathname,
+				),
+		),
 	);
-	};
-
-	const checkIsActive = () => {
-		return props.section.links.some((link) => checkIsLinkActive(link));
-	};
-
-	const [isOpened, setIsOpened] = createSignal(checkIsActive());
-
-	createEffect(() => {
-		// If the current URL path is the same as the link's href, set isOpened to true
-		if (!isOpened() && checkIsActive()) {
-			setIsOpened(true);
-		}
-	}, [pageContext.urlPathname]);
 
 	return (
 		<>
 			<h3
 				class={clsx(
 					"font-display font-medium cursor-pointer",
-					checkIsActive() ? "text-violet-600" : "text-slate-900",
+					isOpened() ? "text-violet-600" : "text-slate-900",
 				)}
 			>
 				<button
@@ -77,7 +65,12 @@ function NavigationItem(props: NavigationItemProps) {
 								<NavigationSubItem
 									link={link}
 									onLinkClick={props.onLinkClick}
-									isOpened={checkIsLinkActive(link)}
+									isOpened={
+										link.href === pageContext.urlPathname ||
+										link.subitems?.some(
+											(subitem) => subitem.href === pageContext.urlPathname,
+										)
+									}
 								/>
 							</li>
 						)}
@@ -89,7 +82,7 @@ function NavigationItem(props: NavigationItemProps) {
 }
 
 type NavigationSubItemProps = {
-	link: NavigationLink;
+	link: (typeof navigation)[number]["links"][number];
 	onLinkClick?: (event: MouseEvent) => void;
 	isOpened?: boolean;
 };
@@ -98,15 +91,13 @@ function NavigationSubItem(props: NavigationSubItemProps) {
 	const [isOpened, setIsOpened] = createSignal(props.isOpened);
 	const pageContext = usePageContext();
 
-	const checkIsLinkActive = (link: NavigationLink) => {
-		return (
-			link.href === pageContext.urlPathname ||
-			link.subitems?.some((subitem) => subitem.href === pageContext.urlPathname)
-		);
-	};
-
 	createEffect(() => {
-		setIsOpened(checkIsLinkActive(props.link) || props.isOpened);
+		setIsOpened(
+			props.link.href === pageContext.urlPathname ||
+				props.link.subitems?.some(
+					(subitem) => subitem.href === pageContext.urlPathname,
+				),
+		);
 	}, [pageContext.urlPathname, props.link]);
 
 	return (
@@ -145,7 +136,7 @@ function NavigationSubItem(props: NavigationSubItemProps) {
 								props.link.subitems,
 						},
 						props.link.href !== pageContext.urlPathname && "before:hidden",
-						checkIsLinkActive(props.link)
+						isOpened()
 							? "text-violet-500 before:bg-violet-500"
 							: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block",
 					)}