app/bun.lock

@@ -15,6 +15,7 @@
         "fastify": "^5.3.0",
         "flexsearch": "^0.8.158",
         "js-yaml": "^4.1.0",
+        "nprogress": "^0.2.0",
         "prismjs": "^1.30.0",
         "reading-time-estimator": "^1.14.0",
         "remark-frontmatter": "^5.0.0",
@@ -39,6 +40,7 @@
         "@tailwindcss/vite": "^4.1.3",
         "@types/js-yaml": "^4.0.9",
         "@types/node": "^18.19.86",
+        "@types/nprogress": "^0.2.3",
         "@types/prismjs": "^1.26.5",
         "@types/remark-heading-id": "^1.0.0",
         "cross-env": "^7.0.3",
@@ -393,6 +395,8 @@
 
     "@types/node": ["@types/node@18.19.86", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-fifKayi175wLyKyc5qUfyENhQ1dCNI1UNjp653d8kuYcPQN5JhX3dGuP/XmvPTg/xRBn1VTLpbmi+H/Mr7tLfQ=="],
 
+    "@types/nprogress": ["@types/nprogress@0.2.3", "", {}, "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA=="],
+
     "@types/prismjs": ["@types/prismjs@1.26.5", "", {}, "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ=="],
 
     "@types/remark-heading-id": ["@types/remark-heading-id@1.0.0", "", { "dependencies": { "unified": "^11.0.0" } }, "sha512-V6OgBN2Uv3kaYHOrBI2+j9xIo6N56bMpIFoKVkGltoJtzHr7Vo8pFxDZxNqUXC5NScV991Iq3BYD52BkCFMY+w=="],
@@ -891,6 +895,8 @@
 
     "node-releases": ["node-releases@2.0.19", "", {}, "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="],
 
+    "nprogress": ["nprogress@0.2.0", "", {}, "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="],
+
     "on-exit-leak-free": ["on-exit-leak-free@2.1.2", "", {}, "sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA=="],
 
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],

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-entry.ts",
+		"preview": "cross-env NODE_ENV=production bun ./fastify-server.ts",
 		"production": "bun run build && bun run preview",
 		"lint": "biome lint --write .",
 		"format": "biome format --write ."
@@ -20,6 +20,7 @@
 		"fastify": "^5.3.0",
 		"flexsearch": "^0.8.158",
 		"js-yaml": "^4.1.0",
+		"nprogress": "^0.2.0",
 		"prismjs": "^1.30.0",
 		"reading-time-estimator": "^1.14.0",
 		"remark-frontmatter": "^5.0.0",
@@ -44,6 +45,7 @@
 		"@tailwindcss/vite": "^4.1.3",
 		"@types/js-yaml": "^4.0.9",
 		"@types/node": "^18.19.86",
+		"@types/nprogress": "^0.2.3",
 		"@types/prismjs": "^1.26.5",
 		"@types/remark-heading-id": "^1.0.0",
 		"cross-env": "^7.0.3",

app/pages/+onPageTransitionEnd.ts

@@ -1,6 +1,8 @@
 import type { OnPageTransitionEndAsync } from "vike/types";
 
+import NProgress from "nprogress";
+
 export const onPageTransitionEnd: OnPageTransitionEndAsync = async () => {
-  console.log("Page transition end");
+	NProgress.done();
-  document.querySelector("body")?.classList.remove("page-is-transitioning");
+	NProgress.remove();
 };

app/pages/+onPageTransitionStart.ts

@@ -1,6 +1,7 @@
 import type { OnPageTransitionStartAsync } from "vike/types";
 
+import NProgress from "nprogress";
+
 export const onPageTransitionStart: OnPageTransitionStartAsync = async () => {
-  console.log("Page transition start");
+	NProgress.start();
-  document.querySelector("body")?.classList.add("page-is-transitioning");
 };

app/pages/certifications/+Page.mdx

@@ -13,14 +13,12 @@ Découvre donc de bons conseils pour t'aider à te préparer au mieux !
 ## Certifications couvertes sur le Memento
 
 <QuickLinks>
-
   <QuickLinks.QuickLink
     title="DWWM"
     description="Titre professionnel Développeur Web et Web Mobile"
-  href="/certifications/dwwm"
+    href="./dwwm"
     icon="presets"
   />
-
 </QuickLinks>
 
 ## Certifications en cours de rédaction

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

@@ -4,6 +4,7 @@ description: Découvre le résumé du titre professionnel DWWM (TP-01280m04), qu
 tags: [DWWM]
 ---
 
+import QuickLinks from "@/components/QuickLinks";
 import Callout from "@/components/Callout";
 
 ## Informations administratives
@@ -22,19 +23,83 @@ import Callout from "@/components/Callout";
 
 ## Activités types et compétences professionnelles
 
-## 📚 Activité type 1 - Développer la partie front-end d'une application web ou web mobile sécurisée
+### 📚 Activité type 1 - Développer la partie front-end d'une application web ou web mobile sécurisée
 
-- CP 1 - Installer et configurer son environnement de travail en fonction du projet web ou web mobile
+<QuickLinks.QuickLink
-- CP 2 - Maquetter des interfaces utilisateur web ou web mobile
+  title="Résumé de l'activité type 1"
-- CP 3 - Réaliser des interfaces utilisateur statiques web ou web mobile
+  description="Développer la partie front-end d'une application web ou web mobile sécurisée"
-- CP 4 - Développer la partie dynamique des interfaces utilisateur web ou web mobile
+  href="dwwm/at1"
+  icon="presets"
+/>
 
-## 📚 Activité type 2 - Développer la partie back-end d'une application web ou web mobile sécurisée
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="CP 1"
+    description="Installer et configurer son environnement de travail en fonction du projet web ou web mobile"
+    href="dwwm/at1/cp1"
+    icon="presets"
+  />
 
-- CP 5 - Mettre en place une base de données relationnelle
+  <QuickLinks.QuickLink
-- CP 6 - Développer des composants d'accès aux données SQL et NoSQL
+    title="CP 2"
-- CP 7 - Développer des composants métier coté serveur
+    description="Maquetter des interfaces utilisateur web ou web mobile"
-- CP 8 - Documenter le déploiement d'une application dynamique web ou web mobile
+    href="dwwm/at1/cp2"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 3"
+    description="Réaliser des interfaces utilisateur statiques web ou web mobile"
+    href="dwwm/at1/cp3"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 4"
+    description="Développer la partie dynamique des interfaces utilisateur web ou web mobile"
+    href="dwwm/at1/cp4"
+    icon="presets"
+  />
+</QuickLinks>
+
+### 📚 Activité type 2 - Développer la partie back-end d'une application web ou web mobile sécurisée
+
+<QuickLinks.QuickLink
+  title="Résumé de l'activité type 2"
+  description="Développer la partie front-end d'une application web ou web mobile sécurisée"
+  href="dwwm/at2"
+  icon="presets"
+/>
+
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="CP 5"
+    description="Mettre en place une base de données relationnelle"
+    href="dwwm/at2/cp5"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 6"
+    description="Développer des composants d'accès aux données SQL et NoSQL"
+    href="dwwm/at2/cp6"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 7"
+    description="Développer des composants métier coté serveur"
+    href="dwwm/at2/cp7"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 8"
+    description="Documenter le déploiement d'une application dynamique web ou web mobile"
+    href="dwwm/at2/cp8"
+    icon="presets"
+  />
+</QuickLinks>
 
 ## Compétences transverses
 

app/pages/docs/+Page.mdx

@@ -15,11 +15,7 @@ import QuickLinks from "@/components/QuickLinks";
     href="/docs/react"
     icon="presets"
   />
-</QuickLinks>
   
-## Documentations en cours de rédaction
-
-<QuickLinks>
   <QuickLinks.QuickLink
     title="Merise"
     description="Introduction et synthèse de la méthode Merise"

app/pages/index/+Page.mdx

@@ -4,6 +4,8 @@ description: Plonge toi dans une documentation synthétique et concise, conçue
 tags: []
 ---
 
+import QuickLinks from "@/components/QuickLinks";
+
 Toi qui vient d'arriver sur cette plateforme, sache que si tu cherches un coup de main pour mieux comprendre certaines notions dans le développement, tu es tombé au bon endroit !
 
 En prime, tu trouveras également des synthèses de certains référentiels de titres professionnels ! 🎉
@@ -16,8 +18,21 @@ En prime, tu trouveras également des synthèses de certains référentiels de t
 
 Le contenu de cette plateforme est divisé en plusieurs sections :
 
-- [**Certifications**](/certifications) : Des synthèses de référentiels des certifications de titres professionnels pour t'aider à te préparer aux examens.
+<QuickLinks>
-- [**Documentations**](/docs) : Une documentation synthétique _(mais complète et détaillée)_ sur les différentes technologies du développement web.
+  <QuickLinks.QuickLink
+    href="/certifications"
+    title="Certifications"
+    description="Des synthèses de référentiels des certifications de titres professionnels pour t'aider à te préparer aux examens."
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    href="/docs"
+    title="Documentations"
+    description="Des documentations synthétiques (mais complètes et détaillées) sur les différentes technologies du développement web."
+    icon="presets"
+  />
+</QuickLinks>
 
 Les différents contenus ne sont pas uniquement destinées aux développeurs, mais également aux passionnés de l'information en quête de savoir !  
 Il est donc possible que tu trouves des articles qui ne te concernent pas directement, mais qui pourraient t'intéresser tout de même ! 😊