From a25014e7c17f905db88e6e39de8f036f67cb860a Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Tue, 6 Feb 2024 20:14:56 +0800
Subject: [PATCH] feat(create-vuepress): use plugin-blog in blog template (#64)

---
 e2e/docs/.vuepress/layouts/Category.vue       |  10 +-
 e2e/docs/.vuepress/layouts/Tag.vue            |  10 +-
 e2e/package.json                              |   1 +
 pnpm-lock.yaml                                |   3 +
 .../src/flow/createPackageJson.ts             |   8 +-
 .../template/blog/.vuepress/blog-plugin.js    | 111 ------------------
 .../blog/.vuepress/components/ArticleList.vue |  11 +-
 .../template/blog/.vuepress/config.js         |  74 ++++++++++--
 .../blog/.vuepress/layouts/Article.vue        |  11 +-
 .../blog/.vuepress/layouts/Category.vue       |  36 ++----
 .../template/blog/.vuepress/layouts/Tag.vue   |  36 ++----
 .../blog/.vuepress/layouts/Timeline.vue       |  12 +-
 12 files changed, 119 insertions(+), 204 deletions(-)
 delete mode 100644 tools/create-vuepress/template/blog/.vuepress/blog-plugin.js

diff --git a/e2e/docs/.vuepress/layouts/Category.vue b/e2e/docs/.vuepress/layouts/Category.vue
index 712ba4515..547499460 100644
--- a/e2e/docs/.vuepress/layouts/Category.vue
+++ b/e2e/docs/.vuepress/layouts/Category.vue
@@ -2,9 +2,10 @@
 <script setup lang="ts">
 import { useBlogCategory } from '@vuepress/plugin-blog/client'
 import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
-import { VPLink } from 'vuepress/client'
+import { RouteLink, useRoute } from 'vuepress/client'
 import ArticleList from '../components/ArticleList.vue'
 
+const route = useRoute()
 const categoryMap = useBlogCategory('category')
 </script>
 
@@ -13,17 +14,18 @@ const categoryMap = useBlogCategory('category')
     <template #page>
       <main class="page">
         <div class="category-wrapper">
-          <VPLink
+          <RouteLink
             v-for="({ items, path }, name) in categoryMap.map"
             :key="name"
             :to="path"
+            :active="route.path === path"
             class="category"
           >
             {{ name }}
             <span class="category-num">
               {{ items.length }}
             </span>
-          </VPLink>
+          </RouteLink>
         </div>
 
         <ArticleList :items="categoryMap.currentItems ?? []" />
@@ -81,7 +83,7 @@ const categoryMap = useBlogCategory('category')
       text-align: center;
     }
 
-    &.router-link-active {
+    &.route-link-active {
       background: var(--c-brand);
       color: var(--c-bg);
 
diff --git a/e2e/docs/.vuepress/layouts/Tag.vue b/e2e/docs/.vuepress/layouts/Tag.vue
index 5aec591e7..b89792bac 100644
--- a/e2e/docs/.vuepress/layouts/Tag.vue
+++ b/e2e/docs/.vuepress/layouts/Tag.vue
@@ -2,9 +2,10 @@
 <script setup lang="ts">
 import { useBlogCategory } from '@vuepress/plugin-blog/client'
 import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
-import { VPLink } from 'vuepress/client'
+import { RouteLink, useRoute } from 'vuepress/client'
 import ArticleList from '../components/ArticleList.vue'
 
+const route = useRoute()
 const tagMap = useBlogCategory('tag')
 </script>
 
@@ -13,17 +14,18 @@ const tagMap = useBlogCategory('tag')
     <template #page>
       <main class="page">
         <div class="tag-wrapper">
-          <VPLink
+          <RouteLink
             v-for="({ items, path }, name) in tagMap.map"
             :key="name"
             :to="path"
+            :active="route.path === path"
             class="tag"
           >
             {{ name }}
             <span class="tag-num">
               {{ items.length }}
             </span>
-          </VPLink>
+          </RouteLink>
         </div>
 
         <ArticleList :items="tagMap.currentItems ?? []" />
@@ -81,7 +83,7 @@ const tagMap = useBlogCategory('tag')
       text-align: center;
     }
 
-    &.router-link-active {
+    &.route-link-active {
       background: var(--c-brand);
       color: var(--c-bg);
 
diff --git a/e2e/package.json b/e2e/package.json
index 9cb7553d0..7b07478c9 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@vuepress/bundler-vite": "2.0.0-rc.6",
     "@vuepress/bundler-webpack": "2.0.0-rc.6",
+    "@vuepress/plugin-blog": "workspace:*",
     "@vuepress/plugin-catalog": "workspace:*",
     "@vuepress/plugin-copyright": "workspace:*",
     "@vuepress/plugin-feed": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f61469346..945f37150 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -155,6 +155,9 @@ importers:
       '@vuepress/bundler-webpack':
         specifier: 2.0.0-rc.6
         version: 2.0.0-rc.6(typescript@5.3.3)
+      '@vuepress/plugin-blog':
+        specifier: workspace:*
+        version: link:../plugins/plugin-blog
       '@vuepress/plugin-catalog':
         specifier: workspace:*
         version: link:../plugins/plugin-catalog
diff --git a/tools/create-vuepress/src/flow/createPackageJson.ts b/tools/create-vuepress/src/flow/createPackageJson.ts
index d0a81ad0d..708c03f9e 100644
--- a/tools/create-vuepress/src/flow/createPackageJson.ts
+++ b/tools/create-vuepress/src/flow/createPackageJson.ts
@@ -36,14 +36,14 @@ export const createPackageJson = async ({
 }: CreatePackageJsonOptions): Promise<void> => {
   const packageJsonPath = join(targetDir, 'package.json')
   const devDependencies = {
-    [`@vuepress/bundler-${bundler}`]: '^2.0.0-rc.2',
-    '@vuepress/theme-default': '^2.0.0-rc.2',
+    [`@vuepress/bundler-${bundler}`]: '^2.0.0-rc.6',
+    '@vuepress/theme-default': '^2.0.0-rc.11',
     'vue': '^3.4.0',
-    'vuepress': '^2.0.0-rc.2',
+    'vuepress': '^2.0.0-rc.6',
   }
 
   if (preset === 'blog') {
-    devDependencies['vue-router'] = '^4.2.5'
+    devDependencies['@vuepress/plugin-blog'] = '^2.0.0-rc.11'
   }
 
   console.log(locale.flow.createPackage)
diff --git a/tools/create-vuepress/template/blog/.vuepress/blog-plugin.js b/tools/create-vuepress/template/blog/.vuepress/blog-plugin.js
deleted file mode 100644
index 8bb07e36b..000000000
--- a/tools/create-vuepress/template/blog/.vuepress/blog-plugin.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import { createPage } from 'vuepress/core'
-
-const slugify = (name) =>
-  name
-    .replace(/[ _]/g, '-')
-    .replace(/[:?*|\\/<>]/g, '')
-    .toLowerCase()
-
-const generateCategory = async (app, name) => {
-  const map = {}
-
-  await app.pages.map(async (page) => {
-    const value = page.frontmatter[name]
-
-    await (Array.isArray(value) ? value : [value]).map(async (item) => {
-      if (item) {
-        if (!map[item]) {
-          const itemPath = `/${name}/${slugify(item)}/`
-
-          map[item] = {
-            path: itemPath,
-            keys: [],
-          }
-
-          app.pages.push(
-            await createPage(app, {
-              path: itemPath,
-              frontmatter: {
-                title: `${name} > ${item}`,
-                key: item,
-                layout: name[0].toUpperCase() + name.slice(1),
-                sidebar: false,
-              },
-            }),
-          )
-        }
-
-        map[item].keys.push(page.key)
-      }
-    })
-  })
-
-  app.pages.push(
-    await createPage(app, {
-      path: `/${name}/`,
-      frontmatter: {
-        title: name,
-        layout: name[0].toUpperCase() + name.slice(1),
-        sidebar: false,
-      },
-    }),
-  )
-
-  await app.writeTemp(
-    `blog/${name}.js`,
-    `\
-export const map = ${JSON.stringify(map)};
-`,
-  )
-}
-
-const generateType = async (
-  app,
-  name,
-  { filter = () => true, sorter = () => 0 },
-) => {
-  app.pages.push(
-    await createPage(app, {
-      path: `/${name}/`,
-      frontmatter: {
-        title: name,
-        layout: name[0].toUpperCase() + name.slice(1),
-        sidebar: false,
-      },
-    }),
-  )
-
-  const keys = app.pages.filter(filter).map(({ key }) => key)
-
-  await app.writeTemp(
-    `blog/${name}.js`,
-    `\
-export const keys = ${JSON.stringify(keys)};
-`,
-  )
-}
-
-export const simpleBlogPlugin = ({
-  filter = () => true,
-  getInfo,
-  category = [],
-  type = [],
-}) => ({
-  name: 'simple-blog-plugin',
-
-  onInitialized: async (app) => {
-    // inject meta information
-    app.pages.filter(filter).forEach((page) => {
-      page.routeMeta = {
-        ...page.routeMeta,
-        ...getInfo(page),
-      }
-    })
-
-    // generate pages and temp files
-    await Promise.all([
-      ...category.map((name) => generateCategory(app, name)),
-      ...type.map(({ key, ...options }) => generateType(app, key, options)),
-    ])
-  },
-})
diff --git a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
index 6f19d76f9..25675533e 100644
--- a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
@@ -1,9 +1,11 @@
 <script setup>
 defineProps({
+  /** Article items */
   items: {
     type: Array,
-    default: () => [],
+    required: true,
   },
+  /** Whether is timeline or not */
   isTimeline: Boolean,
 })
 </script>
@@ -11,6 +13,7 @@ defineProps({
 <template>
   <div class="article-wrapper">
     <div v-if="!items.length">Nothing in here.</div>
+
     <article
       v-for="{ info, path } in items"
       :key="path"
@@ -23,17 +26,23 @@ defineProps({
           info.title
         }}
       </header>
+
       <hr />
+
       <div class="article-info">
         <span v-if="info.author" class="author">Author: {{ info.author }}</span>
+
         <span v-if="info.date && !isTimeline" class="date"
           >Date: {{ new Date(info.date).toLocaleDateString() }}</span
         >
+
         <span v-if="info.category" class="category"
           >Category: {{ info.category.join(', ') }}</span
         >
+
         <span v-if="info.tag" class="tag">Tag: {{ info.tag.join(', ') }}</span>
       </div>
+
       <div v-if="info.excerpt" class="excerpt" v-html="info.excerpt" />
     </article>
   </div>
diff --git a/tools/create-vuepress/template/blog/.vuepress/config.js b/tools/create-vuepress/template/blog/.vuepress/config.js
index 4d5a30719..1dbc67db1 100644
--- a/tools/create-vuepress/template/blog/.vuepress/config.js
+++ b/tools/create-vuepress/template/blog/.vuepress/config.js
@@ -1,6 +1,6 @@
+import { blogPlugin } from '@vuepress/plugin-blog'
 import { defaultTheme } from '@vuepress/theme-default'
-import { defineUserConfig } from 'vuepress/cli'
-import { simpleBlogPlugin } from './blog-plugin.js'
+import { defineUserConfig } from 'vuepress'
 
 export default defineUserConfig({
   lang: 'en-US',
@@ -33,29 +33,73 @@ export default defineUserConfig({
   }),
 
   plugins: [
-    simpleBlogPlugin({
-      // only files under posts are articles
+    blogPlugin({
+      // Only files under posts are articles
       filter: ({ filePathRelative }) =>
         filePathRelative ? filePathRelative.startsWith('posts/') : false,
 
-      // getting article info
-      getInfo: ({ frontmatter, title }) => ({
+      // Getting article info
+      getInfo: ({ frontmatter, title, data }) => ({
         title,
         author: frontmatter.author || '',
         date: frontmatter.date || null,
         category: frontmatter.category || [],
         tag: frontmatter.tag || [],
-        excerpt: frontmatter.excerpt || '',
+        excerpt:
+          // Support manually set excerpt through frontmatter
+          typeof frontmatter.excerpt === 'string'
+            ? frontmatter.excerpt
+            : data?.excerpt || '',
       }),
 
-      category: ['category', 'tag'],
+      // Generate excerpt for all pages excerpt those users choose to disable
+      excerptFilter: ({ frontmatter }) =>
+        !frontmatter.home &&
+        frontmatter.excerpt !== false &&
+        typeof frontmatter.excerpt !== 'string',
+
+      category: [
+        {
+          key: 'category',
+          getter: (page) => page.frontmatter.category || [],
+          layout: 'Category',
+          itemLayout: 'Category',
+          frontmatter: () => ({
+            title: 'Categories',
+            sidebar: false,
+          }),
+          itemFrontmatter: (name) => ({
+            title: `Category ${name}`,
+            sidebar: false,
+          }),
+        },
+        {
+          key: 'tag',
+          getter: (page) => page.frontmatter.tag || [],
+          layout: 'Tag',
+          itemLayout: 'Tag',
+          frontmatter: () => ({
+            title: 'Tags',
+            sidebar: false,
+          }),
+          itemFrontmatter: (name) => ({
+            title: `Tag ${name}`,
+            sidebar: false,
+          }),
+        },
+      ],
 
       type: [
         {
           key: 'article',
-          // remove archive articles
+          // Remove archive articles
           filter: (page) => !page.frontmatter.archive,
-
+          layout: 'Article',
+          frontmatter: () => ({
+            title: 'Articles',
+            sidebar: false,
+          }),
+          // Sort pages with time and sticky
           sorter: (pageA, pageB) => {
             if (pageA.frontmatter.sticky && pageB.frontmatter.sticky)
               return pageB.frontmatter.sticky - pageA.frontmatter.sticky
@@ -75,14 +119,20 @@ export default defineUserConfig({
         },
         {
           key: 'timeline',
-          // only article with date should be added to timeline
+          // Only article with date should be added to timeline
           filter: (page) => page.frontmatter.date instanceof Date,
-          // sort pages with time
+          // Sort pages with time
           sorter: (pageA, pageB) =>
             new Date(pageB.frontmatter.date).getTime() -
             new Date(pageA.frontmatter.date).getTime(),
+          layout: 'Timeline',
+          frontmatter: () => ({
+            title: 'Timeline',
+            sidebar: false,
+          }),
         },
       ],
+      hotReload: true,
     }),
   ],
 })
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Article.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Article.vue
index 6ca19a4a8..47a9fff84 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Article.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Article.vue
@@ -1,21 +1,16 @@
 <script setup>
-import { keys } from '@temp/blog/article.js'
+import { useBlogType } from '@vuepress/plugin-blog/client'
 import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
-import { useRouter } from 'vue-router'
 import ArticleList from '../components/ArticleList.vue'
 
-const routes = useRouter().getRoutes()
-
-const articles = keys
-  .map((key) => routes.find(({ name }) => name === key))
-  .map(({ path, meta }) => ({ path, info: meta }))
+const articles = useBlogType('article')
 </script>
 
 <template>
   <ParentLayout>
     <template #page>
       <main class="page">
-        <ArticleList :items="articles" />
+        <ArticleList :items="articles.items" />
       </main>
     </template>
   </ParentLayout>
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
index bc6367c3d..2270137a3 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
@@ -1,29 +1,11 @@
 <script setup>
-import { map } from '@temp/blog/category.js'
+import { useBlogCategory } from '@vuepress/plugin-blog/client'
 import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { RouteLink, usePageFrontmatter } from 'vuepress/client'
+import { RouteLink, useRoute } from 'vuepress/client'
 import ArticleList from '../components/ArticleList.vue'
 
-const routes = useRouter().getRoutes()
-const frontmatter = usePageFrontmatter()
-
-const categories = Object.entries(map).map(([name, { path, keys }]) => ({
-  name,
-  path,
-  keys,
-}))
-
-const currentCategory = computed(() => frontmatter.value.key)
-
-const items = computed(() =>
-  currentCategory.value
-    ? map[currentCategory.value].keys
-        .map((key) => routes.find(({ name }) => name === key))
-        .map(({ path, meta }) => ({ path, info: meta }))
-    : [],
-)
+const route = useRoute()
+const categoryMap = useBlogCategory('category')
 </script>
 
 <template>
@@ -32,18 +14,20 @@ const items = computed(() =>
       <main class="page">
         <div class="category-wrapper">
           <RouteLink
-            v-for="{ name, path, keys } in categories"
+            v-for="({ items, path }, name) in categoryMap.map"
             :key="name"
             :to="path"
+            :active="route.path === path"
             class="category"
           >
             {{ name }}
             <span class="category-num">
-              {{ keys.length }}
+              {{ items.length }}
             </span>
           </RouteLink>
         </div>
-        <ArticleList :items="items" />
+
+        <ArticleList :items="categoryMap.currentItems ?? []" />
       </main>
     </template>
   </ParentLayout>
@@ -98,7 +82,7 @@ const items = computed(() =>
       text-align: center;
     }
 
-    &.router-link-active {
+    &.route-link-active {
       background: var(--c-brand);
       color: var(--c-bg);
 
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
index e87dcc3ee..25b4af06a 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
@@ -1,29 +1,11 @@
 <script setup>
-import { map } from '@temp/blog/tag.js'
+import { useBlogCategory } from '@vuepress/plugin-blog/client'
 import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { RouteLink, usePageFrontmatter } from 'vuepress/client'
+import { RouteLink, useRoute } from 'vuepress/client'
 import ArticleList from '../components/ArticleList.vue'
 
-const routes = useRouter().getRoutes()
-const frontmatter = usePageFrontmatter()
-
-const tags = Object.entries(map).map(([name, { path, keys }]) => ({
-  name,
-  path,
-  keys,
-}))
-
-const currentTag = computed(() => frontmatter.value.key)
-
-const items = computed(() =>
-  currentTag.value
-    ? map[currentTag.value].keys
-        .map((key) => routes.find(({ name }) => name === key))
-        .map(({ path, meta }) => ({ path, info: meta }))
-    : [],
-)
+const route = useRoute()
+const tagMap = useBlogCategory('tag')
 </script>
 
 <template>
@@ -32,18 +14,20 @@ const items = computed(() =>
       <main class="page">
         <div class="tag-wrapper">
           <RouteLink
-            v-for="{ name, path, keys } in tags"
+            v-for="({ items, path }, name) in tagMap.map"
             :key="name"
             :to="path"
+            :active="route.path === path"
             class="tag"
           >
             {{ name }}
             <span class="tag-num">
-              {{ keys.length }}
+              {{ items.length }}
             </span>
           </RouteLink>
         </div>
-        <ArticleList :items="items" />
+
+        <ArticleList :items="tagMap.currentItems ?? []" />
       </main>
     </template>
   </ParentLayout>
@@ -98,7 +82,7 @@ const items = computed(() =>
       text-align: center;
     }
 
-    &.router-link-active {
+    &.route-link-active {
       background: var(--c-brand);
       color: var(--c-bg);
 
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Timeline.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Timeline.vue
index b93bd27ea..f42273101 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Timeline.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Timeline.vue
@@ -1,14 +1,9 @@
 <script setup>
-import { keys } from '@temp/blog/timeline.js'
+import { useBlogType } from '@vuepress/plugin-blog/client'
 import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
-import { useRouter } from 'vue-router'
 import ArticleList from '../components/ArticleList.vue'
 
-const routes = useRouter().getRoutes()
-
-const timelines = keys
-  .map((key) => routes.find(({ name }) => name === key))
-  .map(({ path, meta }) => ({ path, info: meta }))
+const timelines = useBlogType('timeline')
 </script>
 
 <template>
@@ -16,7 +11,8 @@ const timelines = keys
     <template #page>
       <main class="page">
         <h1 class="timeline-title">Timeline</h1>
-        <ArticleList :items="timelines" is-timeline />
+
+        <ArticleList :items="timelines.items" is-timeline />
       </main>
     </template>
   </ParentLayout>