From da7e8d53781ad45b4379d1bae2c51d31d15c9d52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= Date: Thu, 19 Jan 2023 15:58:51 +0100 Subject: [PATCH] docs: use `@vite-pwa/vitepress` (#2684) * docs: use `@vite-pwa/vitepress` * chore: update vite-pwa/vitepress version --- .eslintignore | 1 + .gitignore | 2 +- docs/.vitepress/config.ts | 15 ++-- docs/.vitepress/scripts/assets.ts | 79 -------------------- docs/.vitepress/scripts/build-pwa.mjs | 16 ---- docs/.vitepress/scripts/pwa.ts | 87 ++++++++++++++++++++++ docs/.vitepress/scripts/transformHead.ts | 20 +++++ docs/package.json | 7 +- docs/vite.config.ts | 95 ------------------------ pnpm-lock.yaml | 74 +++++++----------- 10 files changed, 148 insertions(+), 248 deletions(-) delete mode 100644 docs/.vitepress/scripts/assets.ts delete mode 100644 docs/.vitepress/scripts/build-pwa.mjs create mode 100644 docs/.vitepress/scripts/pwa.ts create mode 100644 docs/.vitepress/scripts/transformHead.ts diff --git a/.eslintignore b/.eslintignore index ceee5217c471..c21fcfc1e06b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,4 +5,5 @@ node_modules *.d.ts coverage !.vitepress +docs/.vitepress/cache/deps/*.* test/core/src/self diff --git a/.gitignore b/.gitignore index 6a2dabb55510..40b7ba1ce6ee 100644 --- a/.gitignore +++ b/.gitignore @@ -25,4 +25,4 @@ packages/ui/cypress/screenshots docs/public/user-avatars docs/public/sponsors .eslintcache - +docs/.vitepress/cache/ diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index fdb8e7ce6a46..981a5366006b 100644 --- a/docs/.vitepress/config.ts +++ b/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: '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, +})) diff --git a/docs/.vitepress/scripts/assets.ts b/docs/.vitepress/scripts/assets.ts deleted file mode 100644 index 0e5dc07c02cf..000000000000 --- a/docs/.vitepress/scripts/assets.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { promises as fs } from 'fs' -import fg from 'fast-glob' -import { font, preconnectHomeLinks, preconnectLinks } from '../meta' - -const preconnect = ` - ${preconnectLinks.map(l => ``).join('\n')} - ${preconnectLinks.map(l => ``).join('\n')} -` - -const preconnectHome = ` - ${preconnectHomeLinks.map(l => ``).join('\n')} - ${preconnectHomeLinks.map(l => ``).join('\n')} -` - -export const optimizePages = async (pwa: boolean) => { - const names = await fg('./.vitepress/dist/**/*.html', { onlyFiles: true }) - - await Promise.all(names.map(async (i) => { - let html = await fs.readFile(i, 'utf-8') - - let prefetchImg = '\n\t' - - let usePreconnect = preconnect - - if (i.endsWith('/dist/index.html')) { - usePreconnect = preconnectHome - prefetchImg = ` -${prefetchImg} -\t -` - } - - // we need the font on development, so the font entry is added in vitepress head - html = html.replace(``, '') - - html = html.replace( - //g, - ` - ${usePreconnect} - - - - `).trim() - - if (pwa) { - html = html.replace( - '', - ` -\t${prefetchImg} -\t\n`, - ) - } - else { - html = html.replace( - '', - ` -${prefetchImg} -`, - ) - } - - html = html.replace( - /aria-hidden="true"/gi, - 'tabindex="-1" aria-hidden="true"', - ).replace( - / { - const config = await resolveConfig({}, 'build', 'production') - // when `vite-plugin-pwa` is presented, use it to regenerate SW after rendering - const pwaPlugin = config.plugins.find(i => i.name === 'vite-plugin-pwa')?.api - const pwa = pwaPlugin && !pwaPlugin.disabled - const assets = jiti(fileURLToPath(import.meta.url))('./assets.ts') - await assets.optimizePages(pwa) - if (pwa) - await pwaPlugin.generateSW() -} - -rebuildPwa() diff --git a/docs/.vitepress/scripts/pwa.ts b/docs/.vitepress/scripts/pwa.ts new file mode 100644 index 000000000000..232b0fa48ad7 --- /dev/null +++ b/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], + }, + }, + }, + ], + }, +} diff --git a/docs/.vitepress/scripts/transformHead.ts b/docs/.vitepress/scripts/transformHead.ts new file mode 100644 index 000000000000..b0c072bd8541 --- /dev/null +++ b/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 => { + 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 +} diff --git a/docs/package.json b/docs/package.json index ed418ae91091..6c044b353259 100644 --- a/docs/package.json +++ b/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" } diff --git a/docs/vite.config.ts b/docs/vite.config.ts index 4f063480efaf..3c4f66f61c39 100644 --- a/docs/vite.config.ts +++ b/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], - }, - }, - }, - ], - }, - }), ], }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a5baa3bb1faf..02945e424b24 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -94,6 +94,7 @@ importers: specifiers: '@iconify-json/carbon': ^1.1.13 '@unocss/reset': ^0.48.3 + '@vite-pwa/vitepress': ^0.0.4 '@vitejs/plugin-vue': latest '@vueuse/core': ^9.10.0 esno: ^0.16.3 @@ -104,7 +105,7 @@ importers: 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 vue: latest workbox-window: ^6.5.4 @@ -115,6 +116,7 @@ importers: devDependencies: '@iconify-json/carbon': 1.1.13 '@unocss/reset': 0.48.3 + '@vite-pwa/vitepress': 0.0.4_vite-plugin-pwa@0.14.1 '@vitejs/plugin-vue': 4.0.0_vite@4.0.0+vue@3.2.45 esno: 0.16.3 fast-glob: 3.2.12 @@ -2075,13 +2077,6 @@ packages: dependencies: '@babel/types': 7.20.7 - /@babel/parser/7.20.5: - resolution: {integrity: sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==} - engines: {node: '>=6.0.0'} - hasBin: true - dependencies: - '@babel/types': 7.20.7 - /@babel/parser/7.20.7: resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==} engines: {node: '>=6.0.0'} @@ -3614,7 +3609,7 @@ packages: '@babel/helper-module-imports': 7.18.6 '@babel/helper-plugin-utils': 7.20.2 '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.18.13 - '@babel/types': 7.20.5 + '@babel/types': 7.20.7 dev: true /@babel/plugin-transform-react-jsx/7.19.0_@babel+core@7.18.13: @@ -4233,24 +4228,6 @@ packages: transitivePeerDependencies: - supports-color - /@babel/traverse/7.20.5: - resolution: {integrity: sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': 7.18.6 - '@babel/generator': 7.20.7 - '@babel/helper-environment-visitor': 7.18.9 - '@babel/helper-function-name': 7.19.0 - '@babel/helper-hoist-variables': 7.18.6 - '@babel/helper-split-export-declaration': 7.18.6 - '@babel/parser': 7.20.7 - '@babel/types': 7.20.7 - debug: 4.3.4 - globals: 11.12.0 - transitivePeerDependencies: - - supports-color - dev: true - /@babel/types/7.18.13: resolution: {integrity: sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==} engines: {node: '>=6.9.0'} @@ -4259,15 +4236,6 @@ packages: '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 - /@babel/types/7.20.5: - resolution: {integrity: sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-string-parser': 7.19.4 - '@babel/helper-validator-identifier': 7.19.1 - to-fast-properties: 2.0.0 - dev: true - /@babel/types/7.20.7: resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==} engines: {node: '>=6.9.0'} @@ -5678,8 +5646,8 @@ packages: rollup: 2.79.1 dev: true - /@rollup/plugin-replace/5.0.1_rollup@2.79.1: - resolution: {integrity: sha512-Z3MfsJ4CK17BfGrZgvrcp/l6WXoKb0kokULO+zt/7bmcyayokDaQ2K3eDJcRLCTAlp5FPI4/gz9MHAsosz4Rag==} + /@rollup/plugin-replace/5.0.2_rollup@2.79.1: + resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==} engines: {node: '>=14.0.0'} peerDependencies: rollup: ^1.20.0||^2.0.0||^3.0.0 @@ -5688,7 +5656,7 @@ packages: optional: true dependencies: '@rollup/pluginutils': 5.0.2_rollup@2.79.1 - magic-string: 0.26.7 + magic-string: 0.27.0 rollup: 2.79.1 dev: true @@ -8148,6 +8116,14 @@ packages: - rollup dev: true + /@vite-pwa/vitepress/0.0.4_vite-plugin-pwa@0.14.1: + resolution: {integrity: sha512-+uMmxOe8G5X+9zbeP7htVINv0MVn8tuaKEE96jHXmV4dRb5HJX9U8WbgSJ4QD8ezoeYABjPjagGWOV3l0DMrtw==} + peerDependencies: + vite-plugin-pwa: ^0.14.0 + dependencies: + vite-plugin-pwa: 0.14.1_hsd7wmhtxdre4ds2vghqydhvau + dev: true + /@vitejs/plugin-react/1.3.2: resolution: {integrity: sha512-aurBNmMo0kz1O4qRoY+FM4epSA39y3ShWGuqfLRA/3z0oEJAdtoSfgA3aO98/PCCHAqMaduLxIxErWrVKIFzXA==} engines: {node: '>=12.0.0'} @@ -8305,9 +8281,9 @@ packages: dependencies: '@babel/helper-module-imports': 7.18.6 '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.5 - '@babel/template': 7.18.10 - '@babel/traverse': 7.20.5 - '@babel/types': 7.20.5 + '@babel/template': 7.20.7 + '@babel/traverse': 7.20.12 + '@babel/types': 7.20.7 '@vue/babel-helper-vue-transform-on': 1.0.2 camelcase: 6.3.0 html-tags: 3.2.0 @@ -8355,7 +8331,7 @@ packages: /@vue/compiler-sfc/3.2.39: resolution: {integrity: sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==} dependencies: - '@babel/parser': 7.20.5 + '@babel/parser': 7.20.7 '@vue/compiler-core': 3.2.39 '@vue/compiler-dom': 3.2.39 '@vue/compiler-ssr': 3.2.39 @@ -14001,8 +13977,8 @@ packages: postcss: 7.0.39 dev: true - /idb/7.0.2: - resolution: {integrity: sha512-jjKrT1EnyZewQ/gCBb/eyiYrhGzws2FeY92Yx8qT9S9GeQAmo4JFVIiWRIfKW/6Ob9A+UDAOW9j9jn58fy2HIg==} + /idb/7.1.1: + resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==} dev: true /ieee754/1.2.1: @@ -15352,7 +15328,7 @@ packages: dependencies: big.js: 5.2.2 emojis-list: 3.0.0 - json5: 2.2.1 + json5: 2.2.3 dev: true /local-pkg/0.4.2: @@ -20815,7 +20791,7 @@ packages: vite: ^3.1.0 || ^4.0.0 workbox-window: ^6.5.4 dependencies: - '@rollup/plugin-replace': 5.0.1_rollup@2.79.1 + '@rollup/plugin-replace': 5.0.2_rollup@2.79.1 debug: 4.3.4 fast-glob: 3.2.12 pretty-bytes: 6.0.0 @@ -21477,7 +21453,7 @@ packages: /workbox-background-sync/6.5.4: resolution: {integrity: sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==} dependencies: - idb: 7.0.2 + idb: 7.1.1 workbox-core: 6.5.4 dev: true @@ -21546,7 +21522,7 @@ packages: /workbox-expiration/6.5.4: resolution: {integrity: sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==} dependencies: - idb: 7.0.2 + idb: 7.1.1 workbox-core: 6.5.4 dev: true