feat: Add certification and documentation pages

app/data/certifications/page.md

@@ -0,0 +1,25 @@
+---
+title: Documentation Memento Dev
+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: []
+---
+
+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 ! 🎉
+
+## Pourquoi cette plateforme ?
+
+À l'instar du [MDN Web Docs](https://developer.mozilla.org/fr/) et feu **Le Site du Zéro**, cette plateforme a pour objectif de te fournir des ressources de qualité pour t'aider à te perfectionner dans le développement.
+
+## Contenu du Memento
+
+Le contenu de cette plateforme est divisé en plusieurs sections :
+
+- **Documentation** : Une documentation synthétique _(mais complète et détaillée)_ sur les différentes technologies du développement web.
+- **Référentiels** : Des synthèses de référentiels de titres professionnels pour t'aider à te préparer aux examens.
+
+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 ! 😊
+
+Par contre je te préviens : certains concepts peuvent être un peu techniques et nécessiter un peu de temps pour être compris.

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: "/tp" },
+      { 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/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 (
-    <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>
-    </main>
-  );
+  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/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/pages/tp/+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/tp/+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/tp/+route.ts

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

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) {