feat(create-vuepress): use plugin-blog in blog template (#64)

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);
 

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);
 

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:*",

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)

tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue

@@ -1,16 +1,19 @@
 <script setup>
 defineProps({
+  /** Article items */
   items: {
     type: Array,
-    default: () => [],
+    required: true,
   },
+  /** Whether is timeline or not */
   isTimeline: Boolean,
 })
 </script>
 
 <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>

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,
     }),
   ],
 })