feat: support reading time

theme/package.json

@@ -73,10 +73,11 @@
     "ts-debounce": "^4.0.0",
     "vue": "^3.3.13",
     "vue-router": "4.2.5",
-    "vuepress-plugin-comment2": "2.0.0-rc.5",
-    "vuepress-plugin-md-enhance": "2.0.0-rc.5",
-    "vuepress-plugin-seo2": "2.0.0-rc.5",
-    "vuepress-plugin-sitemap2": "2.0.0-rc.5"
+    "vuepress-plugin-comment2": "2.0.0-rc.6",
+    "vuepress-plugin-md-enhance": "2.0.0-rc.6",
+    "vuepress-plugin-reading-time2": "2.0.0-rc.6",
+    "vuepress-plugin-seo2": "2.0.0-rc.6",
+    "vuepress-plugin-sitemap2": "2.0.0-rc.6"
   },
   "devDependencies": {
     "@types/lodash.merge": "^4.6.9"

theme/src/client/components/PageMeta.vue

@@ -5,11 +5,14 @@ import type {
   PlumeThemePageData,
   PlumeThemePostFrontmatter,
 } from '../../shared/index.js'
+import { useReadingTime } from '../composables/index.js'
+import IconBooks from './icons/IconBooks.vue'
 import IconClock from './icons/IconClock.vue'
 import IconTag from './icons/IconTag.vue'
 
 const page = usePageData<PlumeThemePageData>()
 const matter = usePageFrontmatter<PlumeThemePostFrontmatter>()
+const readingTime = useReadingTime()
 
 const createTime = computed(() => {
   if (matter.value.createTime) {
@@ -48,13 +51,19 @@ const hasMeta = computed(() => tags.value.length || createTime.value)
     {{ page.title }}
   </h2>
   <div v-if="hasMeta" class="page-meta-wrapper">
+    <p v-if="readingTime.times" class="reading-time">
+      <IconBooks class="icon" />
+      <span>{{ readingTime.words }}</span>
+      <span>{{ readingTime.times }}</span>
+    </p>
     <p v-if="tags.length > 0">
       <IconTag class="icon" />
-      <span v-for="tag in tags" :key="tag" class="tag">
+      <span v-for="(tag, index) in tags" :key="tag" class="tag">
         {{ tag }}
+        <template v-if="index < tags.length - 1">,</template>
       </span>
     </p>
-    <p v-if="createTime">
+    <p v-if="createTime" class="create-time">
       <IconClock class="icon" /><span>{{ createTime }}</span>
     </p>
   </div>
@@ -95,7 +104,8 @@ const hasMeta = computed(() => tags.value.length || createTime.value)
 .page-meta-wrapper {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  flex-wrap: wrap;
   padding: 1rem 0 0.5rem;
   margin-bottom: 2rem;
   color: var(--vp-c-text-3);
@@ -118,8 +128,7 @@ const hasMeta = computed(() => tags.value.length || createTime.value)
 .page-meta-wrapper .tag {
   display: inline-block;
   line-height: 1;
-  margin-right: 0.3rem;
-  padding: 3px 6px;
+  padding: 3px 3px;
   color: var(--vp-c-text-2);
   background-color: var(--vp-c-mute);
   border-radius: 4px;
@@ -128,4 +137,20 @@ const hasMeta = computed(() => tags.value.length || createTime.value)
 .page-meta-wrapper .tag:last-of-type {
   margin-right: 0;
 }
+
+.page-meta-wrapper .reading-time span {
+  margin-right: 0.5rem;
+}
+
+.page-meta-wrapper .reading-time span:last-of-type {
+  margin-right: 0;
+}
+
+.page-meta-wrapper .create-time {
+  flex: 1;
+  min-width: 110px;
+  justify-content: right;
+  text-align: right;
+  margin-right: 0;
+}
 </style>

theme/src/client/components/icons/IconBooks.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 160c16-63.16 76.43-95.41 208-96a15.94 15.94 0 0 1 16 16v288a16 16 0 0 1-16 16c-128 0-177.45 25.81-208 64c-30.37-38-80-64-208-64c-9.88 0-16-8.05-16-17.93V80a15.94 15.94 0 0 1 16-16c131.57.59 192 32.84 208 96m0 0v288"/></svg>
+</template>

theme/src/client/composables/index.ts

@@ -5,3 +5,4 @@ export * from './useResolveRouteWithRedirect.js'
 export * from './sidebar.js'
 export * from './aside.js'
 export * from './page.js'
+export * from './readingTime.js'