Add read time

packages/website/mdsvex.config.js

@@ -15,6 +15,7 @@ import rehypeKatexSvelte from 'rehype-katex-svelte';
 // import github from "remark-github";
 
 import rehypeSlug from 'rehype-slug';
+import remarkReadingTime from "remark-reading-time";
 // import rehypeToc from '@jsdevtools/rehype-toc';
 import { createHighlighter } from "@bitmachina/highlighter";
 
@@ -161,6 +162,14 @@ function add_toc_remark(opts) {
         vFile.data.fm.headings = buildNestedHeadings(vFile.data.flattenedHeadings);
     };
 }
+
+function add_data_to_fm(opts) {
+    return async function transformer(tree, vFile) {
+        if (!vFile.data.fm) vFile.data.fm = {};
+
+        vFile.data.fm.readingTime = vFile.data.readingTime;
+    };
+}
 import { toString as hast_tree_to_string } from 'hast-util-to-string'
 /**
  * Determines whether the given node is an HTML element.
@@ -242,7 +251,7 @@ function vite_images_rehype(opts) {
         visit(tree, { tagName: "img" }, (node) => {
             let url = node.properties.src;
             url = (url.includes("?") ? url + "&" : url + "?") + "url";
-            
+
             node.properties.src = `{${transformUrl(url)}}`
             // new URL('./img.png', import.meta.url).href
             // vFile.data.headings.push({
@@ -359,6 +368,8 @@ const config = {
         // }],
         // [remarkBibliography, { bibliography }],
         // [remarkMermaid, {}]
+        remarkReadingTime,
+        add_data_to_fm,
         [add_toc_remark, { prefix: "h-" }]
     ],
     rehypePlugins: [

packages/website/package.json

@@ -34,6 +34,7 @@
     "remark-gfm": "^4.0.0",
     "remark-github": "^12.0.0",
     "remark-math": "^3.0.1",
+    "remark-reading-time": "^2.0.1",
     "remark-wiki-link": "^2.0.1",
     "rollup": "^4.18.0",
     "rollup-plugin-type-as-json-schema": "^0.2.6",

packages/website/src/routes/blog/[...date]/[slug]/+page.svelte

@@ -34,7 +34,7 @@
     <aside>
         <a class="u-url" href={canonical}>Published on <time class="dt-published" datetime={data.post.date}
             >{new Date(data.post.date).toLocaleDateString()}</time
-        ></a>
+        ></a> · <span>{data.post.readingTime.text}</span>
     </aside>
     <Toc headings={data.post.headings} />
     <!-- {#await GhReleasesDownload}