upgrade vitepress

.eslintignore

@@ -1,3 +1,4 @@
 dist
 posts
-public
+public
+.vitepress/cache

.eslintrc.js → .eslintrc.cjs

@@ -7,16 +7,21 @@ module.exports = {
     node: true
   },
   extends: [
-    'plugin:vue-libs/recommended',
-    'plugin:vue/vue3-recommended'
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'prettier'
   ],
+  plugins: ['@typescript-eslint'],
   parser: 'vue-eslint-parser',
   parserOptions: {
+    parser: '@typescript-eslint/parser',
     sourceType: 'module'
   },
   rules: {
     'object-curly-spacing': 'off',
     'vue/no-v-html': 'off',
+    'vue/multi-word-component-names': 'off',
     'vue/require-v-for-key': 'off'
   }
 }

.githooks/pre-commit

@@ -0,0 +1,2 @@
+#!/bin/sh
+npx --no-install lint-staged

.github/workflows/test.yml

@@ -13,28 +13,26 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
-        node: [12, 14]
+        os: [ubuntu-latest]
+        node: [18, 20]
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v2
+        uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Setup node
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          cache: 'pnpm'
+
       - name: Install
-        run: yarn install
+        run: pnpm install --no-frozen-lockfile
+
       - name: Test
-        run: yarn build --all -t
+        run: pnpm build
+
       - name: Test
-        run: yarn test
+        run: pnpm test

.gitignore

@@ -1,4 +1,5 @@
 dist
+.vitepress/cache
 node_modules
 .DS_Store
 .idea

.prettierignore

@@ -1,2 +1,2 @@
 dist
-.eslintrc.js
+.eslintrc.cjs

.vitepress/config.js → .vitepress/config.ts

@@ -1,10 +1,9 @@
-// @ts-check
-const { getPosts } = require('./getPosts')
+import { defineConfig } from 'vitepress'
+import { genFeed } from './genFeed.ts'
 
-/**
- * @type {import('vitepress').UserConfig['head']}
- */
-const head = [
+import type { HeadConfig } from 'vitepress'
+
+const head: HeadConfig[] = [
   ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
   ['meta', { name: 'twitter:site', content: '@intlify' }],
   ['meta', { name: 'twitter:url', content: 'https://blog.intlify.dev' }],
@@ -61,14 +60,12 @@ if (process.env.NODE_ENV === 'production') {
   ])
 }
 
-/**
- * @type {import('vitepress').UserConfig}
- */
-module.exports = {
+export default defineConfig({
+  // appearance: 'force-dark',
+  srcExclude: ['**/README.md'],
   title: 'The Intlify World',
   description: 'The offical blog for the Intlify project',
   head,
-  customData: {
-    posts: getPosts()
-  }
-}
+  cleanUrls: true,
+  buildEnd: genFeed
+})

.vitepress/genFeed.ts

@@ -0,0 +1,54 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { Feed } from 'feed'
+import { createContentLoader } from 'vitepress'
+
+import type { SiteConfig } from 'vitepress'
+
+const baseUrl = `https://blog.intlify.dev`
+
+export async function genFeed(config: SiteConfig) {
+  const feed = new Feed({
+    title: 'The Intlify World',
+    description: 'The offical blog for the Intlify project',
+    id: baseUrl,
+    link: baseUrl,
+    language: 'en',
+    image: `${baseUrl}/logo.png`,
+    favicon: `${baseUrl}/favicon.ico`,
+    copyright:
+      'Copyright (c) 2021-present, Kazuya Kawaguchi and blog contributors'
+  })
+
+  const posts = await createContentLoader('posts/*.md', {
+    excerpt: true,
+    render: true
+  }).load()
+
+  posts.sort(
+    (a, b) =>
+      +new Date(b.frontmatter.date as string) -
+      +new Date(a.frontmatter.date as string)
+  )
+
+  for (const { url, excerpt, frontmatter, html } of posts) {
+    feed.addItem({
+      title: frontmatter.title,
+      id: `${baseUrl}${url}`,
+      link: `${baseUrl}${url}`,
+      description: excerpt,
+      content: html,
+      author: [
+        {
+          name: frontmatter.author,
+          link: frontmatter.twitter
+            ? `https://x.com/${frontmatter.twitter}`
+            : undefined
+        }
+      ],
+      date: frontmatter.date
+    })
+  }
+
+  fs.writeFileSync(path.join(config.outDir, 'feed.rss'), feed.rss2())
+}

.vitepress/theme/Article.vue

@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useData } from 'vitepress'
+import Date from './Date.vue'
+import Author from './Author.vue'
+import { data as posts } from './posts.data.js'
+
+const { frontmatter: data } = useData()
+const route = useRoute()
+
+function findCurrentIndex() {
+  return posts.findIndex(p => p.url === route.path)
+}
+
+// use the customData date which contains pre-resolved date info
+const date = computed(() => posts[findCurrentIndex()].date)
+const nextPost = computed(() => posts[findCurrentIndex() - 1])
+const prevPost = computed(() => posts[findCurrentIndex() + 1])
+</script>
+
 <template>
   <article class="xl:divide-y xl:divide-gray-200">
     <header class="pt-6 xl:pb-10 space-y-1 text-center">
@@ -11,7 +31,7 @@
 
     <div
       class="divide-y xl:divide-y-0 divide-gray-200 xl:grid xl:grid-cols-4 xl:gap-x-6 pb-16 xl:pb-20"
-      style="grid-template-rows: auto 1fr;"
+      style="grid-template-rows: auto 1fr"
     >
       <Author />
       <div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2">
@@ -21,58 +41,30 @@
       <footer
         class="text-sm font-medium leading-5 divide-y divide-gray-200 xl:col-start-1 xl:row-start-2"
       >
-        <div
-          v-if="nextPost"
-          class="py-8"
-        >
-          <h2 class="text-xs tracking-wide uppercase text-gray-500 dark:text-gray-200">
+        <div v-if="nextPost" class="py-8">
+          <h2
+            class="text-xs tracking-wide uppercase text-gray-500 dark:text-gray-200"
+          >
             Next Article
           </h2>
           <div class="link">
-            <a :href="nextPost.href">{{ nextPost.title }}</a>
+            <a :href="nextPost.url">{{ nextPost.title }}</a>
           </div>
         </div>
-        <div
-          v-if="prevPost"
-          class="py-8"
-        >
-          <h2 class="text-xs tracking-wide uppercase text-gray-500 dark:text-gray-200">
+        <div v-if="prevPost" class="py-8">
+          <h2
+            class="text-xs tracking-wide uppercase text-gray-500 dark:text-gray-200"
+          >
             Previous Article
           </h2>
           <div class="link">
-            <a :href="prevPost.href">{{ prevPost.title }}</a>
+            <a :href="prevPost.url">{{ prevPost.title }}</a>
           </div>
         </div>
         <div class="pt-8">
-          <a
-            class="link"
-            href="/"
-          >← Back to the blog</a>
+          <a class="link" href="/">← Back to the blog</a>
         </div>
       </footer>
     </div>
   </article>
 </template>
-
-<script setup>
-/* eslint-disable no-unused-vars */
-import Date from './Date.vue'
-import Author from './Author.vue'
-
-import { computed } from 'vue'
-import { useFrontmatter, useSiteData, useRoute } from 'vitepress'
-
-const data = useFrontmatter()
-const route = useRoute()
-const posts = useSiteData().value.customData.posts
-
-function findCurrentIndex () {
-  return posts.findIndex(p => p.href === route.path)
-}
-
-// use the customData date which contains pre-resolved date info
-const date = computed(() => posts[findCurrentIndex()].date)
-const nextPost = computed(() => posts[findCurrentIndex() - 1])
-const prevPost = computed(() => posts[findCurrentIndex() + 1])
-/* eslint-enable no-unused-vars */
-</script>