docs: support PWA (vexip-ui#469)

* docs: add pwa support

* chore: commit lock file and deploy file

* chore: update

---------

Co-authored-by: qmhc <[email protected]>

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 dist
+dev-dist
 temp
 .dev
 coverage

docs/.vitepress/config/constant.ts

@@ -0,0 +1,6 @@
+export const SITE_NAME = 'Vexip UI'
+export const SITE_DESC =
+  'A Vue 3 UI library, highly customizability, full TypeScript, performance pretty good.'
+export const SITE_TITLE = 'Vexip UI - Make interesting in development'
+export const SITE_DESC_ZH = '一个 Vue 3 组件库，高度可定制化，全量 TypeScript，性能很不错。'
+export const SITE_TITLE_ZH = 'Vexip UI - 创造有趣的开发体验'

docs/.vitepress/config/head.ts

@@ -1,6 +1,6 @@
 import type { HeadConfig } from 'vitepress'
 
-const HOST_CHECK = 'if (!location.host.includes(\'vexipui\')) return;'
+const HOST_CHECK = "if (!location.host.includes('vexipui')) return;"
 
 const LANG_SCRIPT = `
 (() => {
@@ -42,11 +42,13 @@ window._hmt = window._hmt || [];
 export function getHeadConfig(): HeadConfig[] {
   return [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/vexip-ui.svg' }],
+    ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }],
 
     ['meta', { 'http-equiv': 'Expires', content: '0' }],
     ['meta', { 'http-equiv': 'Pragma', content: 'no-cache' }],
     ['meta', { 'http-equiv': 'Cache', content: 'no-cache' }],
     ['meta', { 'http-equiv': 'Cache-control', content: 'no-store,no-cache,must-revalidate' }],
+    ['meta', { name: 'theme-color', content: '#ffffff' }],
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:site_name', content: 'Vexip UI' }],
     ['meta', { property: 'og:url', content: 'https://www.vexipui.com/' }],

docs/.vitepress/config/index.ts

@@ -1,138 +1,139 @@
 import * as compiler from '@vue/compiler-sfc'
 
+import { withPwa } from '@vite-pwa/vitepress'
+
 import { defineConfigWithTheme } from 'vitepress'
 import { getPackageInfoSync, resolveModule } from 'local-pkg'
 import { compare } from 'compare-versions'
+import { toKebabCase } from '@vexip-ui/utils'
 import { highlight } from '../build/highlight'
 import { markdownItSetup } from '../build/markdown'
 import { getComponentConfig } from './component'
+import { SITE_DESC, SITE_DESC_ZH, SITE_NAME, SITE_TITLE, SITE_TITLE_ZH } from './constant'
 import { getGuideConfig } from './guide'
 import { getHeadConfig } from './head'
 import { getUpdatedFiles } from './updated'
-import { toKebabCase } from '@vexip-ui/utils'
+import { getPwaConfig } from './pwa'
 
 import type { AsideMenuTag, ThemeConfig } from '../theme/types'
 
 compiler.parseCache.max = 10000
 
-const SITE_DESC =
-  'A Vue 3 UI library, highly customizability, full TypeScript, performance pretty good.'
-const SITE_TITLE = 'Vexip UI - Make interesting in development'
-const SITE_DESC_ZH = '一个 Vue 3 组件库，高度可定制化，全量 TypeScript，性能很不错。'
-const SITE_TITLE_ZH = 'Vexip UI - 创造有趣的开发体验'
-
 export default async () => {
   const updated = await getUpdatedFiles()
 
-  return defineConfigWithTheme<ThemeConfig>({
-    titleTemplate: 'Vexip UI',
-    lastUpdated: true,
-    head: getHeadConfig(),
-    markdown: {
-      highlight,
-      config: markdownItSetup
-    },
-    vue: {
-      compiler: compiler as any,
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => tag === 'iconify-icon'
-        }
-      }
-    },
-    themeConfig: {
-      asideMenus: {},
-      nav: [
-        { key: 'guides', i18n: 'common.guides', link: '/guide/vexip-ui', activeMatch: '/guide/' },
-        {
-          key: 'components',
-          i18n: 'common.components',
-          link: '/component/button',
-          activeMatch: '/component/'
-        },
-        { key: 'playground', i18n: 'common.playground', link: 'https://playground.vexipui.com' },
-        {
-          key: 'ecosystem',
-          i18n: 'common.ecosystem',
-          items: [
-            {
-              key: 'official',
-              i18n: 'common.official',
-              items: [
-                {
-                  key: 'create-vexip',
-                  text: 'Create Vexip',
-                  link: 'https://github.com/vexip-ui/create-vexip'
-                },
-                {
-                  key: 'nuxt-module',
-                  text: 'Vexip Nuxt Module',
-                  link: 'https://github.com/vexip-ui/nuxt'
-                },
-                {
-                  key: 'lint-config',
-                  text: 'Vexip Lint Config',
-                  link: 'https://github.com/vexip-ui/lint-config'
-                }
-              ]
-            },
-            {
-              key: 'partnership',
-              i18n: 'common.partnership',
-              items: [
-                {
-                  key: 'fantastic-admin',
-                  text: 'Fantastic-admin',
-                  link: 'https://fantastic-admin.gitee.io/'
-                },
-                {
-                  key: 'become-partner',
-                  i18n: 'common.becomePartner',
-                  link: 'mailto:[email protected]'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      outline: {
-        '/guide/': 2,
-        '/component/': 3
+  return withPwa(
+    defineConfigWithTheme<ThemeConfig>({
+      titleTemplate: SITE_NAME,
+      lastUpdated: true,
+      head: getHeadConfig(),
+      markdown: {
+        highlight,
+        config: markdownItSetup
       },
-      editLink: {
-        pattern: 'https://github.com/vexip-ui/vexip-ui/edit/main/docs/:path'
-      },
-      footerLinks: []
-    },
-    locales: {
-      'en-US': {
-        label: 'English',
-        lang: 'en-US',
-        description: SITE_DESC,
-        head: [
-          ['meta', { property: 'og:description', content: SITE_DESC }],
-          ['meta', { property: 'og:title', content: SITE_TITLE }]
-        ],
-        themeConfig: {
-          asideMenus: getAsideMenus(updated['en-US']),
-          footerLinks: getFooterLinks('en-US')
+      vue: {
+        compiler: compiler as any,
+        template: {
+          compilerOptions: {
+            isCustomElement: tag => tag === 'iconify-icon'
+          }
         }
       },
-      'zh-CN': {
-        label: '中文',
-        lang: 'zh-CN',
-        description: SITE_DESC_ZH,
-        head: [
-          ['meta', { property: 'og:description', content: SITE_DESC_ZH }],
-          ['meta', { property: 'og:title', content: SITE_TITLE_ZH }]
+      themeConfig: {
+        asideMenus: {},
+        nav: [
+          { key: 'guides', i18n: 'common.guides', link: '/guide/vexip-ui', activeMatch: '/guide/' },
+          {
+            key: 'components',
+            i18n: 'common.components',
+            link: '/component/button',
+            activeMatch: '/component/'
+          },
+          { key: 'playground', i18n: 'common.playground', link: 'https://playground.vexipui.com' },
+          {
+            key: 'ecosystem',
+            i18n: 'common.ecosystem',
+            items: [
+              {
+                key: 'official',
+                i18n: 'common.official',
+                items: [
+                  {
+                    key: 'create-vexip',
+                    text: 'Create Vexip',
+                    link: 'https://github.com/vexip-ui/create-vexip'
+                  },
+                  {
+                    key: 'nuxt-module',
+                    text: 'Vexip Nuxt Module',
+                    link: 'https://github.com/vexip-ui/nuxt'
+                  },
+                  {
+                    key: 'lint-config',
+                    text: 'Vexip Lint Config',
+                    link: 'https://github.com/vexip-ui/lint-config'
+                  }
+                ]
+              },
+              {
+                key: 'partnership',
+                i18n: 'common.partnership',
+                items: [
+                  {
+                    key: 'fantastic-admin',
+                    text: 'Fantastic-admin',
+                    link: 'https://fantastic-admin.gitee.io/'
+                  },
+                  {
+                    key: 'become-partner',
+                    i18n: 'common.becomePartner',
+                    link: 'mailto:[email protected]'
+                  }
+                ]
+              }
+            ]
+          }
         ],
-        themeConfig: {
-          asideMenus: getAsideMenus(updated['zh-CN']),
-          footerLinks: getFooterLinks('zh-CN')
+        outline: {
+          '/guide/': 2,
+          '/component/': 3
+        },
+        editLink: {
+          pattern: 'https://github.com/vexip-ui/vexip-ui/edit/main/docs/:path'
+        },
+        footerLinks: []
+      },
+      locales: {
+        'en-US': {
+          label: 'English',
+          lang: 'en-US',
+          description: SITE_DESC,
+          head: [
+            ['meta', { property: 'og:description', content: SITE_DESC }],
+            ['meta', { property: 'og:title', content: SITE_TITLE }]
+          ],
+          themeConfig: {
+            asideMenus: getAsideMenus(updated['en-US']),
+            footerLinks: getFooterLinks('en-US')
+          }
+        },
+        'zh-CN': {
+          label: '中文',
+          lang: 'zh-CN',
+          description: SITE_DESC_ZH,
+          head: [
+            ['meta', { property: 'og:description', content: SITE_DESC_ZH }],
+            ['meta', { property: 'og:title', content: SITE_TITLE_ZH }]
+          ],
+          themeConfig: {
+            asideMenus: getAsideMenus(updated['zh-CN']),
+            footerLinks: getFooterLinks('zh-CN')
+          }
         }
-      }
-    }
-  })
+      },
+      pwa: getPwaConfig
+    })
+  )
 }
 
 let version: string | undefined

docs/.vitepress/config/pwa.ts

@@ -0,0 +1,54 @@
+import minimist from 'minimist'
+import { SITE_DESC, SITE_NAME } from './constant'
+
+import type { PwaOptions } from '@vite-pwa/vitepress'
+
+const args = minimist<{ pwa?: boolean }>(process.argv.slice(2))
+const devPaw = args._[0] === 'dev' && args.pwa
+
+export const getPwaConfig: Partial<PwaOptions> = {
+  outDir: '.vitepress/dist',
+  registerType: 'prompt',
+  base: '/',
+  scope: '/',
+  manifest: {
+    id: '/',
+    start_url: '/',
+    name: SITE_NAME,
+    short_name: SITE_NAME,
+    description: SITE_DESC,
+    theme_color: '#ffffff',
+    icons: [
+      {
+        src: 'pwa-64x64.png',
+        sizes: '64x64',
+        type: 'image/png'
+      },
+      {
+        src: 'pwa-192x192.png',
+        sizes: '192x192',
+        type: 'image/png'
+      },
+      {
+        src: 'pwa-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'any'
+      },
+      {
+        src: 'maskable-icon.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'maskable'
+      }
+    ]
+  },
+  workbox: {
+    globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}']
+  },
+  devOptions: {
+    enabled: devPaw,
+    suppressWarnings: true,
+    navigateFallback: '/'
+  }
+}

docs/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "vitepress build",
     "preview": "vitepress preview",
-    "serve": "NODE_ENV=development vitepress dev"
+    "serve": "NODE_ENV=development vitepress dev --test"
   },
   "private": true,
   "dependencies": {
@@ -29,6 +29,7 @@
     "@types/markdown-it-container": "^2.0.10",
     "@types/node": "^20.12.5",
     "@types/prismjs": "^1.26.3",
+    "@vite-pwa/vitepress": "^0.4.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/compiler-sfc": "3.3.4",

netlify.toml

@@ -3,3 +3,12 @@
 [build]
   publish = "docs/.vitepress/dist"
   command = "pnpm run build:common && pnpm run build:scripts && pnpm run build && pnpm run build:meta && pnpm run build:docs"
+[[headers]]
+  for = "/manifest.webmanifest"
+  [headers.values]
+    Content-Type = "application/manifest+json"
+
+[[headers]]
+  for = "/vite-plugin-pwa.excalidraw"
+  [headers.values]
+    Content-Type = "application/json; charset=UTF-8"