From 803da33f37b6e454139c4a0ffa351f3e1ab0513a Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Sat, 19 Apr 2025 21:24:27 +0200 Subject: [PATCH] feat: Add reading time estimation to pages and frontmatter --- app/bun.lock | 36 +++++++++++++++++ app/fastify-server.ts | 18 +++++++++ app/layouts/DocsLayout.tsx | 48 +++++++++++----------- app/package.json | 4 ++ app/remarkExtractFrontmatter.ts | 45 ++++++++++++++++++--- app/remarkHeadingId.ts | 71 +++++++++++++++++++++++++++++++++ app/vite.config.ts | 7 +++- 7 files changed, 199 insertions(+), 30 deletions(-) create mode 100644 app/remarkHeadingId.ts diff --git a/app/bun.lock b/app/bun.lock index 99284f6..bd78575 100644 --- a/app/bun.lock +++ b/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=="], } } diff --git a/app/fastify-server.ts b/app/fastify-server.ts index 0654742..277ede2 100644 --- a/app/fastify-server.ts +++ b/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; + [key: string]: unknown; + }; + } + } +} + async function startServer() { const app = Fastify(); diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx index 24b3397..54913a0 100644 --- a/app/layouts/DocsLayout.tsx +++ b/app/layouts/DocsLayout.tsx @@ -3,37 +3,39 @@ 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(null); - export function DocsLayout(props: DocsLayoutProps) { - const pageContext = usePageContext(); - console.log("pageContext", pageContext.exports.frontmatter); // undefined - // const tableOfContents = collectSections(nodes); + const { + exports: { frontmatter, readingTime }, + } = usePageContext(); return ( - - -
-
- - {props.children} -
- -
+ +
+
+ + {props.children} +
+ +
- {/* */} - - + {/* */} + ); } @@ -65,11 +67,11 @@ export function DocsHeader(props: DocsHeaderProps) { {props.title} )} - {/* {props.estimatedReadingTime && ( -

- {props.estimatedReadingTime} -

- )} */} + {props.estimatedReadingTime && ( +

+ {props.estimatedReadingTime} +

+ )} ); } diff --git a/app/package.json b/app/package.json index 392b3cc..51a39ed 100755 --- a/app/package.json +++ b/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", diff --git a/app/remarkExtractFrontmatter.ts b/app/remarkExtractFrontmatter.ts index 2dc920e..cc89546 100644 --- a/app/remarkExtractFrontmatter.ts +++ b/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; - description?: string; - date?: string; - tags?: string[]; - [key: string]: unknown; + title: string; + description: string; + tags: string[]; } // Interface pour le noeud YAML @@ -34,6 +33,7 @@ interface MDXJSEsm { interface CustomVFile extends VFile { data: { frontmatter?: Frontmatter; + readingTime?: ReturnType; [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: [], diff --git a/app/remarkHeadingId.ts b/app/remarkHeadingId.ts new file mode 100644 index 0000000..a88d76b --- /dev/null +++ b/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; diff --git a/app/vite.config.ts b/app/vite.config.ts index ed2db5c..02f58a5 100755 --- a/app/vite.config.ts +++ b/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(),