Merge pull request #6 from milan-codes/develop

Remark plugin for displaying reading time

Author: milan-codes

astro.config.mjs

@@ -8,6 +8,7 @@ import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 import partytown from "@astrojs/partytown";
+import { remarkReadingTime } from "./remark-reading-time.mjs";
 
 // https://astro.build/config
 export default defineConfig({
@@ -21,7 +22,7 @@ export default defineConfig({
     }),
   ],
   markdown: {
-    remarkPlugins: ["remark-math"],
+    remarkPlugins: ["remark-math", remarkReadingTime],
     rehypePlugins: ["rehype-katex"],
   },
 });

package.json

@@ -15,6 +15,8 @@
     "@astrojs/svelte": "^2.0.1",
     "@astrojs/tailwind": "^3.0.1",
     "astro": "^2.0.4",
+    "mdast-util-to-string": "^4.0.0",
+    "reading-time": "^1.5.0",
     "svelte": "^3.54.0",
     "tailwindcss": "^3.0.24"
   },

remark-reading-time.mjs

@@ -0,0 +1,10 @@
+import getReadingTime from "reading-time";
+import { toString } from "mdast-util-to-string";
+
+export function remarkReadingTime() {
+  return function (tree, { data }) {
+    const textOnPage = toString(tree);
+    const readingTime = getReadingTime(textOnPage);
+    data.astro.frontmatter.minutesRead = readingTime.text;
+  };
+}

src/components/BlogPost.svelte

@@ -8,6 +8,7 @@
     <h1 class="text-sm text-gray-400 dark:text-gray-600 mt-8">{formattedPublishDate(frontmatter.pubDate)}</h1>
     <h1 class="text-xl text-gray-900 dark:text-gray-100 tracking-wider">{frontmatter.title}</h1>
     <h1 class="text-gray-600 dark:text-gray-400">{frontmatter.description}</h1>
+    <h1 class="mt-1 text-sm text-gray-400 dark:text-gray-600">{frontmatter.minutesRead}</h1>
     <div class="prose dark:prose-invert text-gray-600 dark:text-gray-400 my-8">
         <slot />
     </div>

src/components/BlogPostCard.svelte

@@ -18,7 +18,7 @@
         </a>
     <p class="text-gray-600 dark:text-gray-400">{post.frontmatter.description}</p>
     <ul class="flex flex-wrap">
-        <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm">{post.readingTime} min read</li>
+        <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm">{post.frontmatter.minutesRead}</li>
         {#each post.frontmatter.tags as tag}
             <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm font-medium hover:underline"><a href={`/tags/${tag}`}>{`#${tag}`}</a></li>
         {/each}

src/pages/blog/index.astro

@@ -9,17 +9,9 @@ const orderedPosts = nonDraftPosts.sort((a, b) => {
   const bDate = new Date(b.frontmatter.pubDate);
   return bDate.valueOf() - aDate.valueOf();
 });
-const postsWithReadingTime = orderedPosts.map((post) => {
-  const wordCount = post.rawContent().split(" ").length;
-  const readingTime = Math.ceil(wordCount / 200);
-  return {
-    ...post,
-    readingTime,
-  };
-});
 ---
 
 <BaseLayout title="Milán Herke - Blog">
   <Navbar />
-  {postsWithReadingTime.map((post) => <BlogPostCard post={post} />)}
+  {orderedPosts.map((post) => <BlogPostCard post={post} />)}
 </BaseLayout>

yarn.lock

@@ -647,6 +647,13 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/mdast@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.0.tgz#9f9462d4584a8b3e3711ea8bb4a94c485559ab90"
+  integrity sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/ms@*":
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
@@ -2192,6 +2199,13 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
   dependencies:
     "@types/mdast" "^3.0.0"
 
+mdast-util-to-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz#7a5121475556a04e7eddeb67b264aae79d312814"
+  integrity sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -2919,6 +2933,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+reading-time@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/reading-time/-/reading-time-1.5.0.tgz#d2a7f1b6057cb2e169beaf87113cc3411b5bc5bb"
+  integrity sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==
+
 rehype-katex@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/rehype-katex/-/rehype-katex-6.0.3.tgz#83e5b929b0967978e9491c02117f55be3594d7e1"