feat: Add reading time estimation to pages and frontmatter
This commit is contained in:
parent
b5635597a8
commit
803da33f37
36
app/bun.lock
36
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=="],
|
||||
}
|
||||
}
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -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<DocsLayoutProps | null>(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 (
|
||||
<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 />
|
||||
<Prose>{props.children}</Prose>
|
||||
</article>
|
||||
<PrevNextLinks />
|
||||
</div>
|
||||
<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
|
||||
title={frontmatter?.title}
|
||||
estimatedReadingTime={readingTime?.text}
|
||||
/>
|
||||
<Prose>{props.children}</Prose>
|
||||
</article>
|
||||
<PrevNextLinks />
|
||||
</div>
|
||||
|
||||
{/* <TableOfContents tableOfContents={tableOfContents} /> */}
|
||||
</MDXProvider>
|
||||
</FrontmatterContext.Provider>
|
||||
{/* <TableOfContents tableOfContents={tableOfContents} /> */}
|
||||
</MDXProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -65,11 +67,11 @@ export function DocsHeader(props: DocsHeaderProps) {
|
||||
{props.title}
|
||||
</h1>
|
||||
)}
|
||||
{/* {props.estimatedReadingTime && (
|
||||
<p class="text-sm text-slate-500 inline-flex items-center gap-1">
|
||||
<ClockIcon class="w-4" /> {props.estimatedReadingTime}
|
||||
</p>
|
||||
)} */}
|
||||
{props.estimatedReadingTime && (
|
||||
<p class="text-sm text-slate-500 inline-flex items-center gap-1">
|
||||
<Icon path={clock} class="w-4" /> {props.estimatedReadingTime}
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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<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: [],
|
||||
|
||||
71
app/remarkHeadingId.ts
Normal file
71
app/remarkHeadingId.ts
Normal file
@ -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;
|
||||
@ -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(),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user