app/bun.lock

@@ -12,7 +12,9 @@
         "@universal-middleware/fastify": "^0.5.16",
         "clsx": "^2.1.1",
         "fastify": "^5.3.0",
+        "js-yaml": "^4.1.0",
         "prismjs": "^1.30.0",
+        "remark-frontmatter": "^5.0.0",
         "solid-heroicons": "^3.2.4",
         "solid-js": "^1.9.5",
         "solid-jsx": "^1.1.4",
@@ -28,6 +30,7 @@
         "@biomejs/biome": "1.9.4",
         "@eslint/js": "^9.24.0",
         "@tailwindcss/vite": "^4.1.3",
+        "@types/js-yaml": "^4.0.9",
         "@types/node": "^18.19.86",
         "@types/prismjs": "^1.26.5",
         "cross-env": "^7.0.3",
@@ -329,6 +332,8 @@
 
     "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
+    "@types/js-yaml": ["@types/js-yaml@4.0.9", "", {}, "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg=="],
+
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
 
     "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
@@ -559,6 +564,8 @@
 
     "fastq": ["fastq@1.19.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ=="],
 
+    "fault": ["fault@2.0.1", "", { "dependencies": { "format": "^0.2.0" } }, "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ=="],
+
     "fdir": ["fdir@6.4.4", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg=="],
 
     "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
@@ -575,6 +582,8 @@
 
     "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
 
+    "format": ["format@0.2.2", "", {}, "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
@@ -713,6 +722,8 @@
 
     "mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA=="],
 
+    "mdast-util-frontmatter": ["mdast-util-frontmatter@2.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "escape-string-regexp": "^5.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0", "micromark-extension-frontmatter": "^2.0.0" } }, "sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA=="],
+
     "mdast-util-mdx": ["mdast-util-mdx@3.0.0", "", { "dependencies": { "mdast-util-from-markdown": "^2.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w=="],
 
     "mdast-util-mdx-expression": ["mdast-util-mdx-expression@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ=="],
@@ -737,6 +748,8 @@
 
     "micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg=="],
 
+    "micromark-extension-frontmatter": ["micromark-extension-frontmatter@2.0.0", "", { "dependencies": { "fault": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg=="],
+
     "micromark-extension-mdx-expression": ["micromark-extension-mdx-expression@3.0.1", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-mdx-expression": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q=="],
 
     "micromark-extension-mdx-jsx": ["micromark-extension-mdx-jsx@3.0.2", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "micromark-factory-mdx-expression": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ=="],
@@ -883,6 +896,8 @@
 
     "rehype-recma": ["rehype-recma@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "hast-util-to-estree": "^3.0.0" } }, "sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw=="],
 
+    "remark-frontmatter": ["remark-frontmatter@5.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-frontmatter": "^2.0.0", "micromark-extension-frontmatter": "^2.0.0", "unified": "^11.0.0" } }, "sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ=="],
+
     "remark-mdx": ["remark-mdx@3.1.0", "", { "dependencies": { "mdast-util-mdx": "^3.0.0", "micromark-extension-mdxjs": "^3.0.0" } }, "sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA=="],
 
     "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA=="],
@@ -1129,6 +1144,8 @@
 
     "light-my-request/process-warning": ["process-warning@4.0.1", "", {}, "sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q=="],
 
+    "mdast-util-frontmatter/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
+
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],

app/layouts/DocsLayout.tsx

@@ -3,36 +3,37 @@ import type { JSXElement } from "solid-js";
 import { TableOfContents } from "@/partials/TableOfContents";
 import { PrevNextLinks } from "@/components/PrevNextLinks";
 import { usePageContext } from "vike-solid/usePageContext";
+import { createContext, useContext } from "solid-js";
 import { collectSections } from "@/libs/sections";
 import { navigation } from "@/libs/navigation";
 import { Prose } from "@/components/Prose";
+import { MDXProvider } from "solid-jsx";
 
 type DocsLayoutProps = {
 	children: JSXElement;
-	title?: string;
-	// frontmatter: { title?: string };
-	estimatedReadingTime?: string;
-	// nodes: Array<Node>;
 };
 
+const FrontmatterContext = createContext<DocsLayoutProps | null>(null);
+
 export function DocsLayout(props: DocsLayoutProps) {
+	const pageContext = usePageContext();
+	console.log("pageContext", pageContext.exports.frontmatter); // undefined
 	// const tableOfContents = collectSections(nodes);
 
 	return (
-		<>
+		<FrontmatterContext.Provider value={props}>
-			<div class="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 grow">
+			<MDXProvider components={{}}>
-				<article>
+				<div class="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 grow">
-					<DocsHeader
+					<article>
-						title={props.title}
+						<DocsHeader />
-						estimatedReadingTime={props.estimatedReadingTime}
+						<Prose>{props.children}</Prose>
-					/>
+					</article>
-					<Prose>{props.children}</Prose>
+					<PrevNextLinks />
-				</article>
+				</div>
-				<PrevNextLinks />
-			</div>
 
-			{/* <TableOfContents tableOfContents={tableOfContents} /> */}
+				{/* <TableOfContents tableOfContents={tableOfContents} /> */}
-		</>
+			</MDXProvider>
+		</FrontmatterContext.Provider>
 	);
 }
 

app/layouts/LayoutDefault.tsx

@@ -3,21 +3,17 @@ import type { JSX, JSXElement } from "solid-js";
 // import { CookiesContainer } from "@/components/common/Cookies";
 import { MobileNavigation } from "@/partials/MobileNavigation";
 import { usePageContext } from "vike-solid/usePageContext";
-// import { ThemeProvider } from "@/providers/ThemeProvider";
 // import { clientOnly } from "vike-react/clientOnly";
 import { createEffect, createSignal } from "solid-js";
 import { HeroSection } from "@/partials/HeroSection";
 import { Navigation } from "@/partials/Navigation";
+import { DocsLayout } from "./DocsLayout";
 import { Link } from "@/components/Link";
 import { Logo } from "@/components/Logo";
 import { Toaster } from "solid-toast";
 import clsx from "clsx";
 
-// import "./style.css";
 import "./tailwind.css";
-import { DocsLayout } from "./DocsLayout";
-// import "./prism.css";
-// import "unfonts.css";
 
 // const Search = clientOnly(() => import("@/components/Search").then((module) => module.Search));
 

app/package.json

@@ -17,7 +17,9 @@
 		"@universal-middleware/fastify": "^0.5.16",
 		"clsx": "^2.1.1",
 		"fastify": "^5.3.0",
+		"js-yaml": "^4.1.0",
 		"prismjs": "^1.30.0",
+		"remark-frontmatter": "^5.0.0",
 		"solid-heroicons": "^3.2.4",
 		"solid-js": "^1.9.5",
 		"solid-jsx": "^1.1.4",
@@ -33,6 +35,7 @@
 		"@biomejs/biome": "1.9.4",
 		"@eslint/js": "^9.24.0",
 		"@tailwindcss/vite": "^4.1.3",
+		"@types/js-yaml": "^4.0.9",
 		"@types/node": "^18.19.86",
 		"@types/prismjs": "^1.26.5",
 		"cross-env": "^7.0.3",

app/pages/index/+Page.mdx

@@ -0,0 +1,25 @@
+---
+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: []
+---
+
+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 :
+
+- [**Certifications**](/certifications) : Des synthèses de référentiels des certifications de titres professionnels pour t'aider à te préparer aux examens.
+- [**Documentations**](/docs) : Une documentation synthétique _(mais complète et détaillée)_ sur les différentes technologies du développement web.
+
+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/pages/index/+Page.tsx

@@ -1,11 +0,0 @@
-export default function Page() {
-	return (
-		<>
-			<h1>My Vike app</h1>
-			This page is:
-			<ul>
-				<li>Rendered to HTMLs.</li>
-			</ul>
-		</>
-	);
-}

app/pages/index/Counter.tsx

@@ -1,19 +0,0 @@
-import { createSignal } from "solid-js";
-
-export { Counter };
-
-function Counter() {
-  const [count, setCount] = createSignal(0);
-
-  return (
-    <button
-      type="button"
-      class={
-        "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/temp/+Page.tsx

@@ -1,11 +0,0 @@
-export default function Page() {
-	return (
-		<>
-			<h1 class={"font-bold text-3xl pb-4"}>Temp</h1>
-			This page is:
-			<ul>
-				<li>Rendered to HTML.</li>
-			</ul>
-		</>
-	);
-}

app/remarkExtractFrontmatter.ts

@@ -0,0 +1,109 @@
+import type { Root, Literal } from "mdast";
+import type { Program } from "estree-jsx";
+import type { Plugin } from "unified";
+import type { VFile } from "vfile";
+
+import { visit } from "unist-util-visit";
+import yaml from "js-yaml";
+
+// Type pour le frontmatter
+export interface Frontmatter {
+	title?: string;
+	description?: string;
+	date?: string;
+	tags?: string[];
+	[key: string]: unknown;
+}
+
+// Interface pour le noeud YAML
+interface YamlNode extends Literal {
+	type: "yaml";
+	value: string;
+}
+
+// Interface pour le noeud MDX ESM
+interface MDXJSEsm {
+	type: "mdxjsEsm";
+	value: string;
+	data?: {
+		estree?: Program;
+	};
+}
+
+// Type pour la VFile avec données personnalisées
+interface CustomVFile extends VFile {
+	data: {
+		frontmatter?: Frontmatter;
+		[key: string]: unknown;
+	};
+}
+
+const remarkExtractFrontmatter: Plugin<[], Root> =
+	() => (tree: Root, file: CustomVFile) => {
+		visit(tree, "yaml", (node: YamlNode) => {
+			try {
+				const data = (yaml.load(node.value) as Frontmatter) || {};
+
+				// Ajout du frontmatter au fichier virtual de remark
+				file.data.frontmatter = data;
+
+				// Créer un noeud export pour le frontmatter
+				const exportNode: MDXJSEsm = {
+					type: "mdxjsEsm",
+					value: `export const frontmatter = ${JSON.stringify(data)};`,
+					data: {
+						estree: {
+							type: "Program",
+							body: [
+								{
+									type: "ExportNamedDeclaration",
+									declaration: {
+										type: "VariableDeclaration",
+										kind: "const",
+										declarations: [
+											{
+												type: "VariableDeclarator",
+												id: {
+													type: "Identifier",
+													name: "frontmatter",
+												},
+												init: {
+													type: "ObjectExpression",
+													properties: Object.entries(data).map(
+														([key, value]) => ({
+															type: "Property",
+															key: {
+																type: "Identifier",
+																name: key,
+															},
+															value: {
+																type: "Literal",
+																value: value,
+															},
+															kind: "init",
+															computed: false,
+															method: false,
+															shorthand: false,
+														}),
+													),
+												},
+											},
+										],
+									},
+									specifiers: [],
+									source: null,
+								},
+							],
+							sourceType: "module",
+						} as unknown as Program,
+					},
+				};
+
+				tree.children.push(exportNode);
+			} catch (e) {
+				console.error("Error parsing frontmatter:", e);
+			}
+		});
+	};
+
+export default remarkExtractFrontmatter;

app/vite.config.ts

@@ -1,4 +1,6 @@
+import remarkExtractFrontmatter from "./remarkExtractFrontmatter";
 import prismjsVitePlugin from "vite-plugin-prismjs";
+import remarkFrontmatter from "remark-frontmatter";
 import tailwindcss from "@tailwindcss/vite";
 import { telefunc } from "telefunc/vite";
 import vikeSolid from "vike-solid/vite";
@@ -25,7 +27,11 @@ export default defineConfig({
 		}),
 		vike(),
 		vikeSolid(),
-		mdx({ jsxImportSource: "solid-jsx", providerImportSource: "solid-mdx" }),
+		mdx({
+			jsxImportSource: "solid-jsx",
+			providerImportSource: "solid-mdx",
+			remarkPlugins: [remarkFrontmatter, remarkExtractFrontmatter],
+		}),
 		tailwindcss(),
 		telefunc(),
 	],