feat(post): calculate reading time

.vitepress/theme/components/HomeFeed.vue

@@ -2,7 +2,7 @@
   <div :class="$style.postList">
     <div
       v-for="post in postList"
-      :key="post.src"
+      :key="post.url"
       :class="$style.postItem"
     >
       <a :href="post.url">

.vitepress/theme/components/PostHeader.vue

@@ -1,16 +1,23 @@
 <template>
   <div :class="$style.postHeader">
     <h1 :class="$style.title">
-      {{ frontmatter.title }}
+      {{ post.title }}
     </h1>
     <div :class="$style.elementList">
       <Dot />
       <span :class="$style.elementItem">
-        {{ moment(frontmatter.date).format("LL") }}
+        {{ moment(post.date).format("LL") }}
       </span>
-      <Dot v-if="frontmatter.location" />
+      <Dot />
       <span :class="$style.elementItem">
-        {{ frontmatter.location }}
+        {{ post.readingTime }}
+      </span>
+      <Dot v-if="post.location" />
+      <span
+        v-if="post.location"
+        :class="$style.elementItem"
+      >
+        {{ post.location }}
       </span>
     </div>
   </div>
@@ -20,17 +27,22 @@
 import moment from "moment-timezone";
 import { useData } from "vitepress";
 import Dot from "./Dot.vue";
+import { data as allPosts } from "../posts.data";
 
 const { frontmatter } = useData();
+const post = allPosts.find(
+  p => p.frontmatter.title === frontmatter.value.title
+)?.frontmatter || frontmatter.value;
 </script>
 
 <style module scoped>
 .postHeader {
-  padding-bottom: 2rem;
+  padding-bottom: 1.5rem;
 }
 
 .title {
   padding-bottom: 1rem;
+  margin-top: 1rem;
   margin-bottom: 0.3em;
   font-size: 1.8em;
   font-weight: 600;
@@ -39,7 +51,7 @@ const { frontmatter } = useData();
 
 .elementList {
   color: var(--vp-c-text-3);
-  font-size: 0.9rem;
+  font-size: 0.88rem;
 }
 
 .elementItem {

.vitepress/theme/posts.data.ts

@@ -1,15 +1,17 @@
-// // https://vitepress.dev/guide/data-loading
-import type { ContentData } from "vitepress";
-import { createContentLoader } from "vitepress";
+// https://vitepress.dev/guide/data-loading
+import { createContentLoader, ContentData } from "vitepress";
+import readingTime from "reading-time";
 import extendedConfig from "../config.theme";
 
 declare const data: ContentData[];
 export { data };
 
 export default createContentLoader(extendedConfig.mdfilePatterns, {
+  includeSrc: true,
   transform(rawData) {
     return rawData.map(p => {
       p.frontmatter.datetime = new Date(p.frontmatter.date);
+      p.frontmatter.readingTime = readingTime(p.src || "").text;
       return p;
     }).sort((a, b) => {
       return b.frontmatter.datetime - a.frontmatter.datetime;

package.json

@@ -41,5 +41,8 @@
     "moment-timezone": "^0.5.43",
     "typescript": "^5.2.2",
     "vitepress": "^1.0.0-rc.25"
+  },
+  "dependencies": {
+    "reading-time": "^1.5.0"
   }
 }