feat: Add reading time estimation to pages and frontmatter

app/bun.lock

@@ -14,7 +14,9 @@
         "fastify": "^5.3.0",
         "js-yaml": "^4.1.0",
         "prismjs": "^1.30.0",
+        "reading-time-estimator": "^1.14.0",
         "remark-frontmatter": "^5.0.0",
+        "remark-heading-id": "^1.0.1",
         "solid-heroicons": "^3.2.4",
         "solid-js": "^1.9.5",
         "solid-jsx": "^1.1.4",
@@ -22,6 +24,7 @@
         "solid-toast": "^0.5.0",
         "telefunc": "^0.2.3",
         "terracotta": "^1.0.6",
+        "unist-util-visit": "^5.0.0",
         "vike": "^0.4.228",
         "vike-solid": "^0.7.9",
         "vite-plugin-prismjs": "^0.0.11",
@@ -33,6 +36,7 @@
         "@types/js-yaml": "^4.0.9",
         "@types/node": "^18.19.86",
         "@types/prismjs": "^1.26.5",
+        "@types/remark-heading-id": "^1.0.0",
         "cross-env": "^7.0.3",
         "eslint": "^9.24.0",
         "eslint-config-prettier": "^10.1.2",
@@ -346,6 +350,8 @@
 
     "@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=="],
+
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.30.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.30.1", "@typescript-eslint/type-utils": "8.30.1", "@typescript-eslint/utils": "8.30.1", "@typescript-eslint/visitor-keys": "8.30.1", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-v+VWphxMjn+1t48/jO4t950D6KR8JaJuNXzi33Ve6P8sEmPr5k6CEXjdGwT6+LodVnEa91EQCtwjWNUCPweo+Q=="],
@@ -466,6 +472,8 @@
 
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
+    "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
+
     "depd": ["depd@2.0.0", "", {}, "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="],
 
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
@@ -474,6 +482,14 @@
 
     "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
 
+    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
+
+    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
+
+    "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="],
+
+    "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],
+
     "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
 
     "electron-to-chromium": ["electron-to-chromium@1.5.139", "", {}, "sha512-GGnRYOTdN5LYpwbIr0rwP/ZHOQSvAF6TG0LSzp28uCBb9JiXHJGmaaKw29qjNJc5bGnnp6kXJqRnGMQoELwi5w=="],
@@ -610,6 +626,8 @@
 
     "html-tags": ["html-tags@3.3.1", "", {}, "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ=="],
 
+    "htmlparser2": ["htmlparser2@8.0.2", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.0.1", "entities": "^4.4.0" } }, "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA=="],
+
     "http-errors": ["http-errors@2.0.0", "", { "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", "setprototypeof": "1.2.0", "statuses": "2.0.1", "toidentifier": "1.0.1" } }, "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="],
 
     "iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
@@ -646,6 +664,8 @@
 
     "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
 
+    "is-plain-object": ["is-plain-object@5.0.0", "", {}, "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="],
+
     "is-what": ["is-what@4.1.16", "", {}, "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A=="],
 
     "isbot-fast": ["isbot-fast@1.2.0", "", {}, "sha512-twjuQzy2gKMDVfKGQyQqrx6Uy4opu/fiVUTTpdqtFsd7OQijIp5oXvb27n5EemYXaijh5fomndJt/SPRLsEdSg=="],
@@ -706,6 +726,8 @@
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
     "lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],
 
     "lodash.isplainobject": ["lodash.isplainobject@4.0.6", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],
@@ -836,6 +858,8 @@
 
     "parse-entities": ["parse-entities@4.0.2", "", { "dependencies": { "@types/unist": "^2.0.0", "character-entities-legacy": "^3.0.0", "character-reference-invalid": "^2.0.0", "decode-named-character-reference": "^1.0.0", "is-alphanumerical": "^2.0.0", "is-decimal": "^2.0.0", "is-hexadecimal": "^2.0.0" } }, "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw=="],
 
+    "parse-srcset": ["parse-srcset@1.0.2", "", {}, "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="],
+
     "parse5": ["parse5@7.2.1", "", { "dependencies": { "entities": "^4.5.0" } }, "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ=="],
 
     "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
@@ -882,6 +906,8 @@
 
     "raw-body": ["raw-body@3.0.0", "", { "dependencies": { "bytes": "3.1.2", "http-errors": "2.0.0", "iconv-lite": "0.6.3", "unpipe": "1.0.0" } }, "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g=="],
 
+    "reading-time-estimator": ["reading-time-estimator@1.14.0", "", { "dependencies": { "sanitize-html": "^2.15.0" } }, "sha512-EWLj21Ou07uUvZWE0suAGPvEebhp91ZABl8jhTzZXY/ziBOPXfQ4tZ1eHiUV7moQ1NJ1KJj9krWuFlnoMx0upA=="],
+
     "real-require": ["real-require@0.2.0", "", {}, "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg=="],
 
     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
@@ -898,6 +924,8 @@
 
     "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-heading-id": ["remark-heading-id@1.0.1", "", { "dependencies": { "lodash": "^4.17.21", "unist-util-visit": "^1.4.0" } }, "sha512-GmJjuCeEkYvwFlvn/Skjc/1Qafj71412gbQnrwUmP/tKskmAf1cMRlZRNoovV+aIvsSRkTb2rCmGv2b9RdoJbQ=="],
+
     "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=="],
@@ -926,6 +954,8 @@
 
     "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
 
+    "sanitize-html": ["sanitize-html@2.16.0", "", { "dependencies": { "deepmerge": "^4.2.2", "escape-string-regexp": "^4.0.0", "htmlparser2": "^8.0.0", "is-plain-object": "^5.0.0", "parse-srcset": "^1.0.2", "postcss": "^8.3.11" } }, "sha512-0s4caLuHHaZFVxFTG74oW91+j6vW7gKbGD6CD2+miP73CE6z6YtOBN0ArtLd2UGyi4IC7K47v3ENUbQX4jV3Mg=="],
+
     "secure-json-parse": ["secure-json-parse@4.0.0", "", {}, "sha512-dxtLJO6sc35jWidmLxo7ij+Eg48PM/kleBsxpC8QJE0qJICe+KawkDQmvCMZUr9u7WKVHgMW6vy3fQ7zMiFZMA=="],
 
     "semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
@@ -1152,6 +1182,8 @@
 
     "pino/process-warning": ["process-warning@4.0.1", "", {}, "sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q=="],
 
+    "remark-heading-id/unist-util-visit": ["unist-util-visit@1.4.1", "", { "dependencies": { "unist-util-visit-parents": "^2.0.0" } }, "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw=="],
+
     "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
     "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
@@ -1180,6 +1212,8 @@
 
     "glob/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
 
+    "remark-heading-id/unist-util-visit/unist-util-visit-parents": ["unist-util-visit-parents@2.1.2", "", { "dependencies": { "unist-util-is": "^3.0.0" } }, "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g=="],
+
     "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "vike/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.24.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA=="],
@@ -1235,5 +1269,7 @@
     "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
     "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "remark-heading-id/unist-util-visit/unist-util-visit-parents/unist-util-is": ["unist-util-is@3.0.0", "", {}, "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="],
   }
 }

app/fastify-server.ts

@@ -1,3 +1,5 @@
+import type { readingTime } from "reading-time-estimator";
+
 import { fileURLToPath } from "node:url";
 import { dirname } from "node:path";
 import { config } from "./config";
@@ -10,6 +12,22 @@ const root = __dirname;
 
 const pagesDir = `${root}/dist/client`;
 
+declare global {
+	namespace Vike {
+		interface PageContext {
+			exports: {
+				frontmatter?: Partial<{
+					title: string;
+					description: string;
+					tags: string[];
+				}>;
+				readingTime?: ReturnType<typeof readingTime>;
+				[key: string]: unknown;
+			};
+		}
+	}
+}
+
 async function startServer() {
 	const app = Fastify();
 

app/layouts/DocsLayout.tsx

@@ -3,29 +3,32 @@ 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 { readingTime } from "reading-time-estimator";
 import { collectSections } from "@/libs/sections";
+import { clock } from "solid-heroicons/outline";
 import { navigation } from "@/libs/navigation";
 import { Prose } from "@/components/Prose";
 import { MDXProvider } from "solid-jsx";
+import { createSignal } from "solid-js";
+import { Icon } from "solid-heroicons";
 
 type DocsLayoutProps = {
 	children: JSXElement;
 };
 
-const FrontmatterContext = createContext<DocsLayoutProps | null>(null);
-
 export function DocsLayout(props: DocsLayoutProps) {
-	const pageContext = usePageContext();
+	const {
-	console.log("pageContext", pageContext.exports.frontmatter); // undefined
+		exports: { frontmatter, readingTime },
-	// const tableOfContents = collectSections(nodes);
+	} = usePageContext();
 
 	return (
-		<FrontmatterContext.Provider value={props}>
 		<MDXProvider components={{}}>
 			<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">
 				<article>
-						<DocsHeader />
+					<DocsHeader
+						title={frontmatter?.title}
+						estimatedReadingTime={readingTime?.text}
+					/>
 					<Prose>{props.children}</Prose>
 				</article>
 				<PrevNextLinks />
@@ -33,7 +36,6 @@ export function DocsLayout(props: DocsLayoutProps) {
 
 			{/* <TableOfContents tableOfContents={tableOfContents} /> */}
 		</MDXProvider>
-		</FrontmatterContext.Provider>
 	);
 }
 
@@ -65,11 +67,11 @@ export function DocsHeader(props: DocsHeaderProps) {
 					{props.title}
 				</h1>
 			)}
-			{/* {props.estimatedReadingTime && (
+			{props.estimatedReadingTime && (
 				<p class="text-sm text-slate-500 inline-flex items-center gap-1">
-          <ClockIcon class="w-4" /> {props.estimatedReadingTime}
+					<Icon path={clock} class="w-4" /> {props.estimatedReadingTime}
 				</p>
-      )} */}
+			)}
 		</header>
 	);
 }

app/package.json

@@ -19,7 +19,9 @@
 		"fastify": "^5.3.0",
 		"js-yaml": "^4.1.0",
 		"prismjs": "^1.30.0",
+		"reading-time-estimator": "^1.14.0",
 		"remark-frontmatter": "^5.0.0",
+		"remark-heading-id": "^1.0.1",
 		"solid-heroicons": "^3.2.4",
 		"solid-js": "^1.9.5",
 		"solid-jsx": "^1.1.4",
@@ -27,6 +29,7 @@
 		"solid-toast": "^0.5.0",
 		"telefunc": "^0.2.3",
 		"terracotta": "^1.0.6",
+		"unist-util-visit": "^5.0.0",
 		"vike": "^0.4.228",
 		"vike-solid": "^0.7.9",
 		"vite-plugin-prismjs": "^0.0.11"
@@ -38,6 +41,7 @@
 		"@types/js-yaml": "^4.0.9",
 		"@types/node": "^18.19.86",
 		"@types/prismjs": "^1.26.5",
+		"@types/remark-heading-id": "^1.0.0",
 		"cross-env": "^7.0.3",
 		"eslint": "^9.24.0",
 		"eslint-config-prettier": "^10.1.2",

app/remarkExtractFrontmatter.ts

@@ -3,16 +3,15 @@ import type { Program } from "estree-jsx";
 import type { Plugin } from "unified";
 import type { VFile } from "vfile";
 
+import { readingTime } from "reading-time-estimator";
 import { visit } from "unist-util-visit";
 import yaml from "js-yaml";
 
 // Type pour le frontmatter
 export interface Frontmatter {
-	title?: string;
+	title: string;
-	description?: string;
+	description: string;
-	date?: string;
+	tags: string[];
-	tags?: string[];
-	[key: string]: unknown;
 }
 
 // Interface pour le noeud YAML
@@ -34,6 +33,7 @@ interface MDXJSEsm {
 interface CustomVFile extends VFile {
 	data: {
 		frontmatter?: Frontmatter;
+		readingTime?: ReturnType<typeof readingTime>;
 		[key: string]: unknown;
 	};
 }
@@ -44,13 +44,19 @@ const remarkExtractFrontmatter: Plugin<[], Root> =
 			try {
 				const data = (yaml.load(node.value) as Frontmatter) || {};
 
+				const fileContent = file.toString();
+				const estimatedReadingTime = readingTime(fileContent, 300, "fr");
+
 				// Ajout du frontmatter au fichier virtual de remark
 				file.data.frontmatter = data;
 
+				// Ajout du temps de lecture au fichier virtual de remark
+				file.data.readingTime = estimatedReadingTime;
+
 				// Créer un noeud export pour le frontmatter
 				const exportNode: MDXJSEsm = {
 					type: "mdxjsEsm",
-					value: `export const frontmatter = ${JSON.stringify(data)};`,
+					value: `export const frontmatter = ${JSON.stringify(data)}; export const readingTime = ${JSON.stringify(estimatedReadingTime)};`,
 					data: {
 						estree: {
 							type: "Program",
@@ -88,6 +94,33 @@ const remarkExtractFrontmatter: Plugin<[], Root> =
 													),
 												},
 											},
+											{
+												type: "VariableDeclarator",
+												id: {
+													type: "Identifier",
+													name: "readingTime",
+												},
+												init: {
+													type: "ObjectExpression",
+													properties: Object.entries(estimatedReadingTime).map(
+														([key, value]) => ({
+															type: "Property",
+															key: {
+																type: "Identifier",
+																name: key,
+															},
+															value: {
+																type: "Literal",
+																value: value,
+															},
+															kind: "init",
+															computed: false,
+															method: false,
+															shorthand: false,
+														}),
+													),
+												},
+											},
 										],
 									},
 									specifiers: [],

app/remarkHeadingId.ts

@@ -0,0 +1,71 @@
+import type { Heading, PhrasingContent } from "mdast";
+import type { Plugin } from "unified";
+import type { Root } from "mdast";
+
+import { slugifyWithCounter } from "@sindresorhus/slugify";
+import { visit } from "unist-util-visit";
+
+type PhrasingContentWithParent = PhrasingContent & {
+	children: PhrasingContent[];
+};
+
+const doesHaveChildren = (child: PhrasingContent): boolean => {
+	return ["delete", "emphasis", "strong", "link", "linkReference"].includes(
+		child.type,
+	);
+};
+
+const setNodeId = (node: Heading, id: string) => {
+	if (!node.data) node.data = {};
+	if (!node.data.hProperties) node.data.hProperties = {};
+	node.data.hProperties.id = id;
+};
+
+const extractText = (children: PhrasingContent[]): string => {
+	return children
+		.map((child) => {
+			if (child.type === "text" && child.value.length > 0) {
+				return child.value;
+			}
+
+			if (
+				doesHaveChildren(child) &&
+				(child as PhrasingContentWithParent).children.length > 0
+			) {
+				return extractText((child as PhrasingContentWithParent).children);
+			}
+
+			return "";
+		})
+		.join(" ");
+};
+
+const remarkHeadingId: Plugin<[], Root> = () => (tree: Root) => {
+	const slugify = slugifyWithCounter();
+
+	visit(tree, "heading", (node) => {
+		const lastChild = node.children[node.children.length - 1];
+
+		if (lastChild && lastChild.type === "text") {
+			let string = lastChild.value.replace(/ +$/, "");
+			const matched = string.match(/ {#(.*?)}$/);
+
+			if (matched) {
+				const id = matched[1];
+
+				if (id.length > 0) {
+					setNodeId(node, id);
+
+					string = string.substring(0, matched.index);
+					lastChild.value = string;
+					return;
+				}
+			}
+		}
+
+		const slug = slugify(extractText(node.children));
+		setNodeId(node, slug);
+	});
+};
+
+export default remarkHeadingId;

app/vite.config.ts

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