style: Improve code formatting for better readability

app/components/PrevNextLinks.tsx

@@ -25,17 +25,13 @@ function PageLink(props: PageLinkProps) {
   const getPageCategory = () =>
     navigation.find((section) => {
       return section.links.some(
-				(link) =>
+        (link) => link.href === props.href || link.subitems.some((subitem) => subitem.href === props.href),
-					link.href === props.href ||
-					link.subitems.some((subitem) => subitem.href === props.href),
       );
     });
 
   return (
     <div {...cleanProps(props, "dir", "title", "href", "subitems")}>
-			<dt class="font-display text-sm font-medium text-slate-900">
+      <dt class="font-display text-sm font-medium text-slate-900">{props.dir === "next" ? "Suivant" : "Précédent"}</dt>
-				{props.dir === "next" ? "Suivant" : "Précédent"}
-			</dt>
       <dd class="mt-1">
         <Link
           href={props.href}
@@ -46,18 +42,11 @@ function PageLink(props: PageLinkProps) {
         >
           <p class="flex flex-col gap-0">
             {getPageCategory() && (
-							<span class="text-violet-600 text-sm mb-1 leading-3">
+              <span class="text-violet-600 text-sm mb-1 leading-3">{getPageCategory()?.title}</span>
-								{getPageCategory()?.title}
-							</span>
             )}
             <span class="leading-4">{props.title}</span>
           </p>
-					<ArrowIcon
+          <ArrowIcon class={clsx("h-6 w-6 flex-none fill-current", props.dir === "previous" && "-scale-x-100")} />
-						class={clsx(
-							"h-6 w-6 flex-none fill-current",
-							props.dir === "previous" && "-scale-x-100",
-						)}
-					/>
         </Link>
       </dd>
     </div>
@@ -93,9 +82,7 @@ export function PrevNextLinks() {
     });
 
   const getNeighboringLinks = () => {
-		const linkIndex = allLinks.findIndex(
+    const linkIndex = allLinks.findIndex((link) => link.href === pageContext.urlPathname);
-			(link) => link.href === pageContext.urlPathname,
-		);
     if (linkIndex === -1) return [null, null];
 
     const previousPage = allLinks[linkIndex - 1] || null;
@@ -112,18 +99,10 @@ export function PrevNextLinks() {
 
   return (
     <dl class="mt-12 mx-4 lg:mr-0 flex gap-4 border-t border-slate-200 pt-6">
-			{getNeighboringLinks()[0] && (
+      {getNeighboringLinks()[0] && <PageLink dir="previous" {...(getNeighboringLinks()[0] as NavigationSubItem)} />}
-				<PageLink
-					dir="previous"
-					{...(getNeighboringLinks()[0] as NavigationSubItem)}
-				/>
-			)}
 
       {getNeighboringLinks()[1] && (
-				<PageLink
+        <PageLink class="ml-auto text-right" dir="next" {...(getNeighboringLinks()[1] as NavigationSubItem)} />
-					class="ml-auto text-right"
-					{...(getNeighboringLinks()[1] as NavigationSubItem)}
-				/>
       )}
     </dl>
   );

app/components/Search.tsx

@@ -1,13 +1,7 @@
 import type { SearchResult } from "@/services/FlexSearchService";
 import type { JSX, Accessor, Setter } from "solid-js";
 
-import {
+import { createContext, useContext, For, createEffect, createSignal } from "solid-js";
-	createContext,
-	useContext,
-	For,
-	createEffect,
-	createSignal,
-} from "solid-js";
 
 import { Highlighter } from "solid-highlight-words";
 import { useDebounce } from "@/hooks/useDebounce";
@@ -53,21 +47,9 @@ function LoadingIcon(props: JSX.IntrinsicElements["svg"]) {
   return (
     <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
       <circle cx="10" cy="10" r="5.5" stroke-linejoin="round" />
-			<path
+      <path stroke={`url(#${id})`} stroke-linecap="round" stroke-linejoin="round" d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5" />
-				stroke={`url(#${id})`}
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5"
-			/>
       <defs>
-				<linearGradient
+        <linearGradient id={id} x1="13" x2="9.5" y1="9" y2="15" gradientUnits="userSpaceOnUse">
-					id={id}
-					x1="13"
-					x2="9.5"
-					y1="9"
-					y2="15"
-					gradientUnits="userSpaceOnUse"
-				>
           <stop stop-color="currentColor" />
           <stop offset="1" stop-color="currentColor" stop-opacity="0" />
         </linearGradient>
@@ -131,14 +113,15 @@ function SearchResultItem(props: { result: SearchResult; query: string }) {
 
   const getHierarchy = (): string[] => {
     const sectionTitle = navigation.find((section) => {
-			return section.links.find(
+      return section.links.find((link) => link.href === props.result.url.split("#")[0]);
-				(link) => link.href === props.result.url.split("#")[0],
-			);
     })?.title;
 
-		return [sectionTitle, props.result.pageTitle].filter(
+    return [sectionTitle, props.result.pageTitle].filter((x): x is string => typeof x === "string");
-			(x): x is string => typeof x === "string",
+  };
-		);
+
+  const handleNavigate = (url: string) => {
+    navigate(`/${url}`.replace(/\/+/g, "/"));
+    close();
   };
 
   return (
@@ -147,21 +130,11 @@ function SearchResultItem(props: { result: SearchResult; query: string }) {
       aria-labelledby={`${id}-hierarchy ${id}-title`}
       tab-index={0}
       onKeyDown={(event) => {
-				if (event.key === "Enter") {
+        if (event.key === "Enter") handleNavigate(props.result.url);
-					navigate(props.result.url);
-					close();
-				}
-			}}
-			onClick={() => {
-				navigate(props.result.url);
-				close();
       }}
+      onClick={() => handleNavigate(props.result.url)}
     >
-			<div
+      <div id={`${id}-title`} aria-hidden="true" class="text-sm text-slate-700 group-aria-selected:text-violet-600">
-				id={`${id}-title`}
-				aria-hidden="true"
-				class="text-sm text-slate-700 group-aria-selected:text-violet-600"
-			>
         <HighlightQuery text={props.result.title} query={props.query} />
       </div>
       {getHierarchy().length > 0 && (
@@ -176,9 +149,7 @@ function SearchResultItem(props: { result: SearchResult; query: string }) {
                 <HighlightQuery text={item} query={props.query} />
                 <span
                   class={
-										itemIndex() === getHierarchy().length - 1
+                    itemIndex() === getHierarchy().length - 1 ? "sr-only" : "mx-2 text-slate-300 dark:text-slate-700"
-											? "sr-only"
-											: "mx-2 text-slate-300 dark:text-slate-700"
                   }
                 >
                   /
@@ -248,11 +219,7 @@ function SearchDialog(props: { class?: string }) {
 
   return (
     <>
-			<Dialog
+      <Dialog isOpen={isOpened()} onClose={close} class={clsx("fixed inset-0 z-50", props.class)}>
-				isOpen={isOpened()}
-				onClose={close}
-				class={clsx("fixed inset-0 z-50", props.class)}
-			>
         <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm" />
 
         <div
@@ -335,9 +302,7 @@ export function Search() {
         onClick={() => setIsOpened(true)}
       >
         <SearchIcon class="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 md:group-hover:fill-slate-400" />
-				<span class="sr-only md:not-sr-only md:ml-2 md:text-slate-500">
+        <span class="sr-only md:not-sr-only md:ml-2 md:text-slate-500">Rechercher...</span>
-					Rechercher...
-				</span>
         {modifierKey && (
           <kbd class="ml-auto hidden font-medium text-slate-400 md:block">
             <kbd class="font-sans">{modifierKey()}</kbd>

app/pages/certifications/dwwm/at2/cp7/+Page.mdx

@@ -30,13 +30,13 @@ Le design pattern MVC est un modèle d'architecture logicielle qui sépare les d
 - **Contrôleur** : fait le lien entre le modèle et la vue. Il contient la logique métier de l'application.
 
 <Callout type="warning" title="Les schémas disponibles en ligne">
-  Il existe de nombreux schémas qui expliquent le design pattern MVC mais ils ne sont pas tous corrects.  
+  Il existe de nombreux schémas qui expliquent le design pattern MVC mais ils ne sont pas tous corrects. Enfin, si, ils
-  Enfin, si, ils sont corrects... mais certains ne s'appliquent pas à tous les frameworks et architectures.
+  sont corrects... mais certains ne s'appliquent pas à tous les frameworks et architectures.
 </Callout>
 
 Pour t'aider à mieux te représenter un schéma MVC avec les ordres de flux de données et de contrôle :
 
-<Image alt="Schéma MVC pour une application web basique" src="/patterns/mvc.webp" class="max-h-96 mx-auto" />
+<Image alt="Schéma MVC pour une application web basique" src="/images/patterns/mvc.webp" class="max-h-96 mx-auto" />
 
 <Callout type="question" title="Pourquoi la Vue ne retourne pas directement au client ?">
   La vue ne retourne pas directement au client car elle doit passer par le contrôleur.  
@@ -44,13 +44,16 @@ Pour t'aider à mieux te représenter un schéma MVC avec les ordres de flux de
 
 Une fois le HTML généré, le contrôleur s'occupe de l'envoyer dans la réponse HTTP au client.  
  C'est ce qui permet de garder une séparation entre la logique métier et l'interface utilisateur.
+
 </Callout>
 
 Le concept est simple : chaque partie de l'application a un **rôle bien défini** et ne doit pas empiéter sur le rôle des autres.
 
 <Callout type="question" title="Et si j'ai des middlewares ?">
-  Dans la majorité des cas, les middlewares s'exécutent avant le contrôleur même si on peut en avoir à différents moments de la circulation de la donnée.  
+  Dans la majorité des cas, les middlewares s'exécutent avant le contrôleur même si on peut en avoir à différents
-  Si tu as déjà utilisé Express, tu as probablement déjà utilisé un middleware pour vérifier si l'utilisateur est connecté avant de lui afficher une page qui est réservée aux utilisateurs connectés.
+  moments de la circulation de la donnée. Si tu as déjà utilisé Express, tu as probablement déjà utilisé un middleware
+  pour vérifier si l'utilisateur est connecté avant de lui afficher une page qui est réservée aux utilisateurs
+  connectés.
 </Callout>
 
 <Callout type="note" title="Le cas de React (ou Vue, Angular, Solid, etc.)">
@@ -63,6 +66,7 @@ Le concept est simple : chaque partie de l'application a un **rôle bien défini
 On va donc faire simple : on parlera plutôt d'une architecture "client-serveur" avec React côté client et notre API côté serveur.  
  Mais ça n'empêche pas que ton API puisse être une API REST _(ou GraphQL)_ qui respecte le design pattern MVC !  
  Tout dépendra de si tu demandes dans ton serveur back-end de retourner une vue _(HTML)_ au navigateur.
+
 </Callout>
 
 ## 🧑‍⚖️ Règles et conventions de nommage
@@ -74,14 +78,14 @@ Si tu fais un projet personnel, tu peux définir les tiennes, du moment que tu e
   Pense à être cohérent en ce qui concerne la langue utilisée.
 
 <Callout type="warning" title="Pas de franglais !">
-    Évite de mélanger plusieurs langues dans tes nommages.  
+  Évite de mélanger plusieurs langues dans tes nommages. Si tu choisis de travailler en français, reste en français. Si
-    Si tu choisis de travailler en français, reste en français.  
+  tu choisis de travailler en anglais, reste en anglais.
-    Si tu choisis de travailler en anglais, reste en anglais.
 </Callout>
 
 D'ailleurs, je te recommande chaudement de travailler en anglais ne serait-ce que pour te familiariser avec la langue de Shakespeare qui est, on le rappelle, la langue la plus répandue dans le monde de l'informatique.
 
 Tu as évidemment le droit d'utiliser des traducteurs en ligne pour t'aider à trouver le bon mot _(ou la bonne expression)_, on ne te demande pas d'être bilingue !
+
 </Callout>
 
 Au delà de la langue utilisée, on va également parler de la syntaxe des noms de fichiers, dossiers, classes, méthodes, variables, etc.  
@@ -120,6 +124,7 @@ Si on prend l'exemple d'un formulaire d'inscription où nous vérifions que l'ut
 Bingo ! 🎉
 
 Utiliser un client HTTP comme Bruno, Postman ou Insomnia te permettra de tester facilement les routes de ton API, et de vérifier que les données que tu envoies sont bien traitées par ton serveur.
+
 </Callout>
 
 ### 🧪 Les tests unitaires