migrate docs from vuepress to vitepress

Author: kyvg

.github/workflows/docs.yml

@@ -1,44 +1,66 @@
-name: docs
+# Sample workflow for building and deploying a VitePress site to GitHub Pages
+#
+name: Deploy VitePress site to Pages
 
 on:
-  # trigger deployment on every push to main branch
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
   push:
     branches: [master]
-  # trigger deployment manually
+
+  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
 jobs:
-  docs:
+  # Build job
+  build:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v4
         with:
-          # fetch all commits to get last updated time or other git log info
-          fetch-depth: 0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      # - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
+      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
+      - name: Setup Node
+        uses: actions/setup-node@v4
         with:
-          # choose node.js version to use
-          node-version: 18
-          # cache deps for pnpm
-          cache: npm
-
-      # run build script
-      - run: npm ci
-      - run: npm run build --if-present
-      - run: npm run docs:build
+          node-version: 20
+          cache: npm # or pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci # or pnpm install / yarn install / bun install
+      - name: Build with VitePress
+        run: |
+          npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
+          touch docs/.vitepress/dist/.nojekyll
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
 
-      # please check out the docs of the workflow for more details
-      # @see https://github.com/crazy-max/ghaction-github-pages
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
       - name: Deploy to GitHub Pages
-        uses: crazy-max/ghaction-github-pages@v2
-        with:
-          # deploy to gh-pages branch
-          target_branch: gh-pages
-          # deploy the default output dir of VuePress
-          build_dir: docs/.vuepress/dist
-        env:
-          # @see https://docs.github.com/en/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -2,11 +2,11 @@
 node_modules/
 npm-debug.log
 yarn-error.log
-demo/dist
 test/unit/coverage
 *.map
 .vscode
 temp/
 dist/src/
 .temp
-.cache
+docs/.vitepress/dist
+docs/.vitepress/cache

docs/.vitepress/config.mts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Vue.js Notification",
+  themeConfig: {
+    nav: [
+      { text: 'Demo', link: '/' },
+      { text: 'Get started', link: '/guide/installation' },
+      { text: "API Reference", link: "/api/" },
+    ],
+    sidebar: {
+      '/guide/': [
+        { text: 'Get started', items: [
+          { text: 'Installation', link: '/guide/installation' },
+          { text: 'Usage', link: '/guide/usage' },
+          { text: 'Customization', link: '/guide/customization' },
+          { text: 'TypeScript Support', link: '/guide/typescript'}
+        ]},
+      ]
+  },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/kyvg/vue3-notification' }
+    ],
+    editLink: {
+      pattern: 'https://github.com/kyvg/vue3-notification/edit/master/docs/:path',
+      text: 'Edit this page on GitHub'
+    }
+  }
+})

docs/.vitepress/theme/index.mts

@@ -0,0 +1,12 @@
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Demo from "../../components/Demo.vue"
+import Notification from "../../../dist/index.es"
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.use(Notification);
+    app.component('Demo', Demo)
+  }
+} satisfies Theme