feat: add reading time for articles

CHANGELOG.md

@@ -8,6 +8,8 @@
 
 - Make comments in articles optional
 
+- Reading time for articles
+
 - Make Numeric Headings a plugin (slightly breaking change)
 
 ## 2.5.0 (2024-07-21)

Layout.vue

@@ -34,7 +34,7 @@ const { site, frontmatter, page, theme } = useData();
         <ArticleHead />
       </div>
       <NotFound v-if="page.isNotFound" />
-      <div v-else :class="frontmatter.pageClass">
+      <div v-else :class="frontmatter.pageClass" id="content">
         <Content />
       </div>
       <template v-if="frontmatter.layout === 'helpful'">

src/layouts/ArticleHead.vue

@@ -45,6 +45,9 @@
             }}<span v-if="index !== frontmatter.author.length - 1">, </span>
           </template>
         </span>
+        <span>
+            &middot; {{ readingTime }} minutes to read
+        </span>
         <span class="tags">
           &middot;
           <span v-for="(tag, index) in frontmatter.tags" :key="index">{{
@@ -63,9 +66,26 @@
 
 <script setup lang="ts">
 import { useData } from "vitepress";
+import { computed, onMounted, ref } from "vue";
+
 const { frontmatter, theme } = useData();
+
+const contentRef = ref<HTMLElement | null>(null);
+const readingTime = ref<string>('');
+
+onMounted(() => {
+  contentRef.value = document.getElementById('content');
+  if (contentRef.value) {
+    const words = contentRef.value.innerText.trim().split(/\s+/).length;
+    const wordsPerMinute = 200; // Average reading speed
+    const time = Math.ceil(words / wordsPerMinute);
+    readingTime.value = time.toString();
+  }
+});
+
 </script>
 
+
 <style lang="scss">
 #article-head {
   padding-top: 2.0938rem;