docs: add certifications page with exam tips and support

app/data/certifications/index/page.md

@@ -0,0 +1,24 @@
+---
+title: Certifications Memento Dev
+description: Tu te prépares à passer un examen de certification, comme DWWM, CDA ou encore CDUI ? Découvre donc de bons conseils pour t'aider à te préparer au mieux !
+tags: []
+---
+
+Tu te prépares à passer un examen de certification, comme DWWM, CDA ou encore CDUI ?  
+Découvre donc de bons conseils pour t'aider à te préparer au mieux !
+
+## Certifications couvertes sur le Memento
+
+- **DWWM** : Développeur Web et Web Mobile
+- **CDA** : Concepteur Développeur d'Applications
+- **CDUI** : Concepteur Développeur d'Interfaces Utilisateurs
+
+## Besoin d'un accompagnement ?
+
+{% callout type="note" title="Accompagnement" %}
+En qualité de jury habilité sur les titres professionnels **DWWM**, **CDA** et **CDUI**, je peux t'accompagner dans ta préparation à l'examen.
+
+Qu'il s'agisse d'une aide à la **compréhension des référentiels**, d'une **préparation à l'oral** ou d'un **accompagnement sur un projet**, je suis là pour t'aider à réussir !
+
+Tu peux me contacter par [email _(gauthier@gauthierdaniels.fr)_](mailto:gauthier@gauthierdaniels?subject=Demande%20d'accompagnement%20pour%20le%20titre%20professionnel%20X) pour bénéficier d'un accompagnement personnalisé et de conseils adaptés à tes besoins.
+{% /callout %}

app/data/docs/documentations/page.md

@@ -0,0 +1,27 @@
+---
+title: Documentations du Memento
+description: Plonge toi dans une documentation synthétique et concise, conçue pour les développeurs ou passionnés de l'information en quête de savoir !
+tags: []
+---
+
+## Documentations rédigées
+
+- [React](/docs/react)
+
+## Documentations en cours de rédaction
+
+- [Merise](/docs/merise)
+
+## Documentations à venir
+
+- HTML
+- CSS
+- JavaScript
+- PHP
+- SQL
+- Node.js
+- Express.js
+- UML
+- Maquettage
+
+Et bien d'autres encore ! 😄

app/data/docs/index/page.md

@@ -1,5 +1,5 @@
 ---
-title: Documentation Memento Dev
+title: Synthèses et ressources pour développeurs
 description: Plonge toi dans une documentation synthétique et concise, conçue pour les développeurs ou passionnés de l'information en quête de savoir !
 tags: []
 ---

app/lib/navigation.ts

@@ -1,10 +1,16 @@
 export const navigation = [
   {
     title: "Préambule",
-    links: [{ title: "Memento Dev", href: "/docs" }],
+    type: "global",
+    links: [
+      { title: "Memento Dev", href: "/" },
+      { title: "Certifications", href: "/certifications" },
+      { title: "Documentations", href: "/docs" },
+    ],
   },
   {
     title: "React",
+    type: "documentation",
     links: [
       { title: "Introduction", href: "/docs/react" },
       { title: "Initialisation", href: "/docs/react/initialisation" },
@@ -18,6 +24,7 @@ export const navigation = [
   },
   {
     title: "Merise",
+    type: "documentation",
     links: [
       { title: "Introduction", href: "/docs/merise" },
       { title: "Dictionnaire de données", href: "/docs/merise/dictionnaire-de-donnees" },
@@ -26,6 +33,7 @@ export const navigation = [
   },
   {
     title: "Communauté",
+    type: "global",
     links: [
       { title: "Influenceurs", href: "/docs/communaute/influenceurs" },
       { title: "Partages et réutilisations", href: "/docs/communaute/partages" },

app/pages/+Head.tsx

@@ -1,6 +1,3 @@
-// https://vike.dev/Head
-
-import React from "react";
 import logoUrl from "../assets/logo.svg";
 
 export default function HeadDefault() {

app/pages/+config.ts

@@ -1,6 +1,7 @@
-import vikeReact from "vike-react/config";
 import type { Config } from "vike/types";
-import Layout from "../layouts/LayoutDefault.js";
+
+import Layout from "@/layouts/LayoutDefault";
+import vikeReact from "vike-react/config";
 
 // Default config (can be overridden by pages)
 // https://vike.dev/config
@@ -13,7 +14,7 @@ export default {
 
   // https://vike.dev/head-tags
   title: "Memento Dev",
-  description: "Demo showcasing Vike",
+  description: "Découvrez des synthèses et ressources open-source dans le développement informatique.",
 
   htmlAttributes: {
     class: "h-full antialiased",

app/pages/certifications/+Page.tsx

@@ -0,0 +1,16 @@
+import type { Data } from "./+data";
+
+import { useData } from "vike-react/useData";
+import Markdoc from "@markdoc/markdoc";
+import nodes from "@/markdoc/nodes";
+import tags from "@/markdoc/tags";
+import React from "react";
+
+export default function Page() {
+  const { doc, estimatedReadingTime } = useData<Data>();
+
+  const parsedDoc = Markdoc.parse(doc.content);
+  const transformedDoc = Markdoc.transform(parsedDoc, { nodes, tags, variables: { estimatedReadingTime } });
+
+  return Markdoc.renderers.react(transformedDoc, React);
+}

app/pages/certifications/+data.ts

@@ -0,0 +1,38 @@
+import type { PageContext } from "vike/types";
+
+import { snippetsService } from "@/services/SnippetsService";
+import { docsService } from "@/services/DocsService";
+import { readingTime } from "reading-time-estimator";
+import { useConfig } from "vike-react/useConfig";
+import buildTitle from "@/pages/buildTitle";
+import { render } from "vike/abort";
+
+export type Data = Awaited<ReturnType<typeof data>>;
+
+export async function data(pageContext: PageContext) {
+  const config = useConfig();
+
+  const { key } = pageContext.routeParams;
+
+  const doc = await docsService.getDoc("certifications", key);
+
+  if (!doc) {
+    throw render(404);
+  }
+
+  const readingTimeObject = readingTime(doc.content, 300, "fr");
+
+  config({
+    title: buildTitle(doc.title),
+    description: doc.description,
+  });
+
+  docsService.transform(doc);
+
+  const snippets = Array.from(doc.snippets).map((snippetPath) => ({
+    path: snippetPath,
+    content: snippetsService.getFromCache(snippetPath),
+  }));
+
+  return { doc, estimatedReadingTime: readingTimeObject.text, snippets };
+}

app/pages/certifications/+route.ts

@@ -0,0 +1,16 @@
+import type { PageContext } from "vike/types";
+
+const routeRegex = /^\/certifications\/(.*)$/;
+
+export function route(pageContext: PageContext) {
+  if (pageContext.urlPathname === "/certifications") {
+    return { routeParams: { key: "index" } };
+  }
+
+  const match = pageContext.urlPathname.match(routeRegex);
+  if (!match) return false;
+
+  const [, key] = match;
+
+  return { routeParams: { key } };
+}

app/pages/docs/+route.ts

@@ -4,7 +4,7 @@ const routeRegex = /^\/docs\/(.*)$/;
 
 export function route(pageContext: PageContext) {
   if (pageContext.urlPathname === "/docs") {
-    return { routeParams: { key: "index" } };
+    return { routeParams: { key: "documentations" } };
   }
 
   const match = pageContext.urlPathname.match(routeRegex);

app/pages/index/+Page.tsx

@@ -1,7 +1,16 @@
+import type { Data } from "./+data";
+
+import { useData } from "vike-react/useData";
+import Markdoc from "@markdoc/markdoc";
+import nodes from "@/markdoc/nodes";
+import tags from "@/markdoc/tags";
+import React from "react";
+
 export default function Page() {
-  return (
+  const { doc, estimatedReadingTime } = useData<Data>();
-    <main className="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16">
+
-      <h1 className={"font-bold text-3xl pb-4"}>My Vike app</h1>
+  const parsedDoc = Markdoc.parse(doc.content);
-    </main>
+  const transformedDoc = Markdoc.transform(parsedDoc, { nodes, tags, variables: { estimatedReadingTime } });
-  );
+
+  return Markdoc.renderers.react(transformedDoc, React);
 }

app/pages/index/+data.ts

@@ -0,0 +1,36 @@
+import type { PageContext } from "vike/types";
+
+import { snippetsService } from "@/services/SnippetsService";
+import { docsService } from "@/services/DocsService";
+import { readingTime } from "reading-time-estimator";
+import { useConfig } from "vike-react/useConfig";
+import buildTitle from "@/pages/buildTitle";
+import { render } from "vike/abort";
+
+export type Data = Awaited<ReturnType<typeof data>>;
+
+export async function data(pageContext: PageContext) {
+  const config = useConfig();
+
+  const doc = await docsService.getDoc("docs", "index");
+
+  if (!doc) {
+    throw render(404);
+  }
+
+  const readingTimeObject = readingTime(doc.content, 300, "fr");
+
+  config({
+    title: buildTitle(doc.title),
+    description: doc.description,
+  });
+
+  docsService.transform(doc);
+
+  const snippets = Array.from(doc.snippets).map((snippetPath) => ({
+    path: snippetPath,
+    content: snippetsService.getFromCache(snippetPath),
+  }));
+
+  return { doc, estimatedReadingTime: readingTimeObject.text, snippets };
+}

app/pages/index/Counter.tsx

@@ -1,17 +0,0 @@
-import React, { useState } from "react";
-
-export function Counter() {
-  const [count, setCount] = useState(0);
-
-  return (
-    <button
-      type="button"
-      className={
-        "inline-block border border-black rounded bg-gray-200 px-2 py-1 text-xs font-medium uppercase leading-normal"
-      }
-      onClick={() => setCount((count) => count + 1)}
-    >
-      Counter {count}
-    </button>
-  );
-}

app/services/DocsService.ts

@@ -152,6 +152,7 @@ class DocsService {
   public async getDoc(namespace: "docs" | "certifications", key: string) {
     try {
       await this.fetchDocs();
+      console.log(this.cache.keys());
       const doc = this.getFromCache(`/${namespace}/${key}`);
 
       if (!doc) {