docs: use @vite-pwa/vitepress (#2684)

* docs: use `@vite-pwa/vitepress`

* chore: update vite-pwa/vitepress version

.eslintignore

@@ -5,4 +5,5 @@ node_modules
 *.d.ts
 coverage
 !.vitepress
+docs/.vitepress/cache/deps/*.*
 test/core/src/self

.gitignore

@@ -25,4 +25,4 @@ packages/ui/cypress/screenshots
 docs/public/user-avatars
 docs/public/sponsors
 .eslintcache
-
+docs/.vitepress/cache/

docs/.vitepress/config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import { withPwa } from '@vite-pwa/vitepress'
 import { version } from '../../package.json'
 import {
   contributing,
@@ -9,12 +10,13 @@ import {
   ogUrl,
   releases,
   twitter,
-  vitestDescription,
-  vitestName,
+  vitestDescription, vitestName,
 } from './meta'
+import { pwa } from './scripts/pwa'
+import { transformHead } from './scripts/transformHead'
 import { teamMembers } from './contributors'
 
-export default defineConfig({
+export default withPwa(defineConfig({
   lang: 'en-US',
   title: vitestName,
   description: vitestDescription,
@@ -32,7 +34,8 @@ export default defineConfig({
     ['meta', { name: 'twitter:description', content: vitestDescription }],
     ['meta', { name: 'twitter:image', content: ogImage }],
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
-    ['link', { href: font, rel: 'stylesheet' }],
+    ['link', { rel: 'preload', as: 'style', onload: 'this.onload=null;this.rel=\'stylesheet\'', href: font }],
+    ['noscript', {}, `<link rel="stylesheet" crossorigin="anonymous" href="${font}" />`],
     ['link', { rel: 'mask-icon', href: '/logo.svg', color: '#ffffff' }],
     ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
   ],
@@ -218,4 +221,6 @@ export default defineConfig({
       ],
     },
   },
-})
+  pwa,
+  transformHead,
+}))

docs/.vitepress/scripts/pwa.ts

@@ -0,0 +1,87 @@
+import {
+  githubusercontentRegex,
+  pwaFontStylesRegex,
+  pwaFontsRegex,
+  vitestDescription,
+  vitestName,
+  vitestShortName,
+} from '../meta'
+
+export const pwa = {
+  outDir: '.vitepress/dist',
+  registerType: 'autoUpdate',
+  // include all static assets under public/
+  manifest: {
+    id: '/',
+    name: vitestName,
+    short_name: vitestShortName,
+    description: vitestDescription,
+    theme_color: '#ffffff',
+    icons: [
+      {
+        src: 'pwa-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: 'pwa-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+      {
+        src: 'logo.svg',
+        sizes: '165x165',
+        type: 'image/svg',
+        purpose: 'any maskable',
+      },
+    ],
+  },
+  workbox: {
+    navigateFallbackDenylist: [/^\/new$/],
+    globPatterns: ['**/*.{css,js,html,png,svg,ico,txt,woff2}'],
+    runtimeCaching: [
+      {
+        urlPattern: pwaFontsRegex,
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'google-fonts-cache',
+          expiration: {
+            maxEntries: 10,
+            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+          },
+          cacheableResponse: {
+            statuses: [0, 200],
+          },
+        },
+      },
+      {
+        urlPattern: pwaFontStylesRegex,
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'gstatic-fonts-cache',
+          expiration: {
+            maxEntries: 10,
+            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+          },
+          cacheableResponse: {
+            statuses: [0, 200],
+          },
+        },
+      },
+      {
+        urlPattern: githubusercontentRegex,
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'githubusercontent-images-cache',
+          expiration: {
+            maxEntries: 10,
+            maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+          },
+          cacheableResponse: {
+            statuses: [0, 200],
+          },
+        },
+      },
+    ],
+  },
+}

docs/.vitepress/scripts/transformHead.ts

@@ -0,0 +1,20 @@
+import type { HeadConfig, TransformContext } from 'vitepress'
+
+import { preconnectHomeLinks, preconnectLinks } from '../meta'
+
+export const transformHead = async ({ pageData }: TransformContext): Promise<HeadConfig[]> => {
+  const head: HeadConfig[] = []
+
+  const home = pageData.relativePath === 'index.md'
+
+  ;(home ? preconnectHomeLinks : preconnectLinks).forEach((link) => {
+    head.push(['link', { rel: 'dns-prefetch', href: link }])
+    head.push(['link', { rel: 'preconnect', href: link }])
+  })
+
+  head.push(['link', { rel: 'prefetch', href: '/logo.svg' }])
+  if (home)
+    head.push(['link', { rel: 'prefetch', href: '/netlify.svg' }])
+
+  return head
+}

docs/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "scripts": {
     "dev": "vitepress --port 3333 --open",
-    "build": "nr prefetch && vitepress build && node .vitepress/scripts/build-pwa.mjs",
-    "build-no-prefetch": "vitepress build && node .vitepress/scripts/build-pwa.mjs",
+    "build": "nr prefetch && vitepress build",
+    "build-no-prefetch": "vitepress build",
     "serve": "vitepress serve",
     "preview-https": "pnpm run build && serve .vitepress/dist",
     "preview-https-no-prefetch": "pnpm run build-no-prefetch && serve .vitepress/dist",
@@ -18,6 +18,7 @@
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.13",
     "@unocss/reset": "^0.48.3",
+    "@vite-pwa/vitepress": "^0.0.4",
     "@vitejs/plugin-vue": "latest",
     "esno": "^0.16.3",
     "fast-glob": "^3.2.12",
@@ -26,7 +27,7 @@
     "unocss": "^0.48.3",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.0.0",
-    "vite-plugin-pwa": "0.14.1",
+    "vite-plugin-pwa": "^0.14.1",
     "vitepress": "1.0.0-alpha.36",
     "workbox-window": "^6.5.4"
   }

docs/vite.config.ts

@@ -5,24 +5,8 @@ import Components from 'unplugin-vue-components/vite'
 import Unocss from 'unocss/vite'
 import { presetAttributify, presetIcons, presetUno } from 'unocss'
 import { resolve } from 'pathe'
-import { VitePWA } from 'vite-plugin-pwa'
-import fg from 'fast-glob'
-import {
-  githubusercontentRegex,
-  pwaFontStylesRegex,
-  pwaFontsRegex,
-  vitestDescription,
-  vitestName,
-  vitestShortName,
-} from './.vitepress/meta'
 
 export default defineConfig({
-  ssr: {
-    format: 'cjs',
-  },
-  legacy: {
-    buildSsrCjsExternalHeuristics: true,
-  },
   optimizeDeps: {
     // vitepress is aliased with replacement `join(DIST_CLIENT_PATH, '/index')`
     // This needs to be excluded from optimization
@@ -50,85 +34,6 @@ export default defineConfig({
       ],
     }) as unknown as Plugin,
     IncludesPlugin(),
-    VitePWA({
-      outDir: '.vitepress/dist',
-      registerType: 'autoUpdate',
-      // include all static assets under public/
-      includeAssets: fg.sync('**/*.{png,svg,ico,txt}', { cwd: resolve(__dirname, 'public') }),
-      manifest: {
-        id: '/',
-        name: vitestName,
-        short_name: vitestShortName,
-        description: vitestDescription,
-        theme_color: '#ffffff',
-        icons: [
-          {
-            src: 'pwa-192x192.png',
-            sizes: '192x192',
-            type: 'image/png',
-          },
-          {
-            src: 'pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-          },
-          {
-            src: 'logo.svg',
-            sizes: '165x165',
-            type: 'image/svg',
-            purpose: 'any maskable',
-          },
-        ],
-      },
-      workbox: {
-        navigateFallbackDenylist: [/^\/new$/],
-        globPatterns: ['**/*.{css,js,html,woff2}'],
-        runtimeCaching: [
-          {
-            urlPattern: pwaFontsRegex,
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'google-fonts-cache',
-              expiration: {
-                maxEntries: 10,
-                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
-              },
-              cacheableResponse: {
-                statuses: [0, 200],
-              },
-            },
-          },
-          {
-            urlPattern: pwaFontStylesRegex,
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'gstatic-fonts-cache',
-              expiration: {
-                maxEntries: 10,
-                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
-              },
-              cacheableResponse: {
-                statuses: [0, 200],
-              },
-            },
-          },
-          {
-            urlPattern: githubusercontentRegex,
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'githubusercontent-images-cache',
-              expiration: {
-                maxEntries: 10,
-                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
-              },
-              cacheableResponse: {
-                statuses: [0, 200],
-              },
-            },
-          },
-        ],
-      },
-    }),
   ],
 })