docs: switch to local search (#3594)

Author: userquin

Diff for: .vitepress/components.d.ts

@@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     Contributors: typeof import('./components/Contributors.vue')['default']
     CourseLink: typeof import('./components/CourseLink.vue')['default']

Diff for: .vitepress/config.ts

@@ -24,18 +24,18 @@ export default withPwa(defineConfig({
   locales: {
     root: {
       label: 'English',
-      lang: 'en',
+      lang: 'en-US',
     },
-    en: {
+    zh: {
       label: '简体中文',
       lang: 'zh',
       link: 'https://cn.vitest.dev/',
     },
   },
   head: [
     ['meta', { name: 'theme-color', content: '#729b1a' }],
+    ['link', { rel: 'icon', href: '/favicon.ico', sizes: 'any' }],
     ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
-    ['link', { rel: 'alternate icon', href: '/favicon.ico', type: 'image/png', sizes: '16x16' }],
     ['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${vitestName} contributors` }],
     ['meta', { name: 'keywords', content: 'vitest, vite, test, coverage, snapshot, react, vue, preact, svelte, solid, lit, ruby, cypress, puppeteer, jsdom, happy-dom, test-runner, jest, typescript, esm, tinypool, tinyspy, c8, node' }],
     ['meta', { property: 'og:title', content: vitestName }],
@@ -66,20 +66,17 @@ export default withPwa(defineConfig({
       text: 'Suggest changes to this page',
     },
 
-    algolia: {
-      appId: 'ZTF29HGJ69',
-      apiKey: '9c3ced6fed60d2670bb36ab7e8bed8bc',
-      indexName: 'vitest',
-      // searchParameters: {
-      //   facetFilters: ['tags:en'],
-      // },
-    },
-
-    localeLinks: {
-      text: 'English',
-      items: [
-        { text: '简体中文', link: 'https://cn.vitest.dev' },
-      ],
+    search: {
+      provider: 'local',
+      /* provider: 'algolia',
+      options: {
+        appId: 'ZTF29HGJ69',
+        apiKey: '9c3ced6fed60d2670bb36ab7e8bed8bc',
+        indexName: 'vitest',
+        // searchParameters: {
+        //   facetFilters: ['tags:en'],
+        // },
+      }, */
     },
 
     socialLinks: [

Diff for: .vitepress/scripts/fetch-avatars.ts

@@ -1,8 +1,9 @@
-import { join, resolve } from 'pathe'
+import { fileURLToPath } from 'node:url'
+import { dirname, join, resolve } from 'pathe'
 import fs from 'fs-extra'
 import { $fetch } from 'ohmyfetch'
 
-const docsDir = resolve(__dirname, '../..')
+const docsDir = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
 const pathContributors = resolve(docsDir, '.vitepress/contributor-names.json')
 const dirAvatars = resolve(docsDir, 'public/user-avatars/')
 const dirSponsors = resolve(docsDir, 'public/sponsors/')

Diff for: .vitepress/scripts/pwa.ts

@@ -1,4 +1,4 @@
-import type { VitePWAOptions } from 'vite-plugin-pwa'
+import type { PwaOptions } from '@vite-pwa/vitepress'
 import {
   githubusercontentRegex,
   pwaFontStylesRegex,
@@ -8,7 +8,7 @@ import {
   vitestShortName,
 } from '../meta'
 
-export const pwa: Partial<VitePWAOptions> = {
+export const pwa: PwaOptions = {
   outDir: '.vitepress/dist',
   registerType: 'autoUpdate',
   // include all static assets under public/
@@ -18,7 +18,19 @@ export const pwa: Partial<VitePWAOptions> = {
     short_name: vitestShortName,
     description: vitestDescription,
     theme_color: '#ffffff',
+    start_url: '/',
+    lang: 'en-US',
+    dir: 'ltr',
+    orientation: 'natural',
+    display: 'standalone',
+    display_override: ['window-controls-overlay'],
+    categories: ['development', 'developer tools'],
     icons: [
+      {
+        src: 'pwa-64x64.png',
+        sizes: '64x64',
+        type: 'image/png',
+      },
       {
         src: 'pwa-192x192.png',
         sizes: '192x192',
@@ -28,14 +40,28 @@ export const pwa: Partial<VitePWAOptions> = {
         src: 'pwa-512x512.png',
         sizes: '512x512',
         type: 'image/png',
+        purpose: 'any',
       },
       {
-        src: 'logo.svg',
-        sizes: '165x165',
-        type: 'image/svg',
-        purpose: 'any maskable',
+        src: 'maskable-icon.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'maskable',
       },
     ],
+    screenshots: [{
+      src: 'og.png',
+      sizes: '2258x1185',
+      type: 'image/png',
+      label: `Screenshot of ${vitestName}`,
+    }],
+    handle_links: 'preferred',
+    launch_handler: {
+      client_mode: ['navigate-existing', 'auto'],
+    },
+    edge_side_panel: {
+      preferred_width: 480,
+    },
   },
   workbox: {
     navigateFallbackDenylist: [/^\/new$/],

Diff for: .vitepress/scripts/transformHead.ts

@@ -13,8 +13,13 @@ export async function transformHead({ pageData }: TransformContext): Promise<Hea
   })
 
   head.push(['link', { rel: 'prefetch', href: '/logo.svg' }])
-  if (home)
+  if (home) {
+    head.push(['link', { rel: 'prefetch', href: '/logo-shadow.svg' }])
+    head.push(['link', { rel: 'prefetch', href: '/sponsors/antfu.svg' }])
+    head.push(['link', { rel: 'prefetch', href: '/sponsors/sheremet-va.svg' }])
+    head.push(['link', { rel: 'prefetch', href: '/sponsors/patak-dev.svg' }])
     head.push(['link', { rel: 'prefetch', href: '/netlify.svg' }])
+  }
 
   return head
 }

Diff for: .vitepress/style/main.css

@@ -74,5 +74,3 @@ img.resizable-img {
     min-height: unset;
   }
 }
-
-

Diff for: .vitepress/style/vars.css

@@ -19,13 +19,9 @@
   --vp-c-text-light-2: rgba(56 56 56 / 70%);
   /* fix contrast: lang name on gray code block */
   --vp-c-text-dark-3: rgba(180, 180, 180, 0.7);
-  --vp-code-tab-divider: var(--vp-c-divider);
   --vp-code-copy-code-bg: rgba(125,125,125,0.1);
   --vp-code-copy-code-hover-bg: rgba(125,125,125,0.2);
   --vp-c-disabled-bg: rgba(125,125,125,0.2);
-  --vp-code-tab-text-color: var(--vp-c-text-2);
-  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
-  --vp-code-copy-code-active-text: var(--vp-c-text-2);
 }
 
 .dark {
@@ -39,10 +35,6 @@
   --vp-c-text-dark-2: rgba(235, 235, 235, 0.60);
   /* fix lang name: check the same above (this is the default) */
   --vp-c-text-dark-3: rgba(235, 235, 235, 0.38);
-  --vp-code-tab-text-color: var(--vp-c-text-dark-2);
-  --vp-code-tab-active-text-color: var(--vp-c-text-dark-1);
-  --vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);
-  --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
 }
 
 /**
@@ -59,9 +51,6 @@
   --vp-button-brand-active-border: var(--vp-c-brand-light);
   --vp-button-brand-active-text: var(--vp-c-text-dark-1);
   --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-  --vp-code-tab-active-text-color: var(--vp-c-brand);
-  --vp-code-tab-active-bar-color: var(--vp-c-brand-darker);
-  --vp-code-tab-divider: var(--vp-c-brand);
 }
 
 /**

Diff for: guide/index.md

@@ -18,18 +18,17 @@ You can try Vitest online on [StackBlitz](https://vitest.new). It runs Vitest di
 
 <CourseLink href="https://vueschool.io/lessons/how-to-install-vitest?friend=vueuse">Learn how to install by Video</CourseLink>
 
-With npm
-```bash
-npm install -D vitest
-```
-or with yarn
-```bash
-yarn add -D vitest
-```
-or with pnpm
-```bash
-pnpm add -D vitest
-```
+::: code-group
+  ```bash [npm]
+  npm install -D vitest
+  ```
+  ```bash [yarn]
+  yarn add -D vitest
+  ```
+  ```bash [pnpm]
+  pnpm add -D vitest
+  ```
+:::
 
 :::tip
 Vitest requires Vite >=v3.0.0 and Node >=v14.18

Diff for: package.json

@@ -1,5 +1,6 @@
 {
   "name": "docs",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "vitepress --port 3333 --open",
@@ -8,7 +9,8 @@
     "serve": "vitepress serve",
     "preview-https": "pnpm run build && serve .vitepress/dist",
     "preview-https-no-prefetch": "pnpm run build-no-prefetch && serve .vitepress/dist",
-    "prefetch": "esno .vitepress/scripts/fetch-avatars.ts"
+    "prefetch": "esno .vitepress/scripts/fetch-avatars.ts",
+    "generate-pwa-icons": "pwa-assets-generator"
   },
   "dependencies": {
     "@vueuse/core": "^10.2.0",
@@ -18,6 +20,7 @@
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.18",
     "@unocss/reset": "^0.53.1",
+    "@vite-pwa/assets-generator": "^0.0.3",
     "@vite-pwa/vitepress": "^0.2.0",
     "@vitejs/plugin-vue": "latest",
     "esno": "^0.16.3",
@@ -30,5 +33,12 @@
     "vite-plugin-pwa": "^0.16.4",
     "vitepress": "1.0.0-beta.3",
     "workbox-window": "^7.0.0"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search"
+      ]
+    }
   }
 }

Diff for: public/apple-touch-icon.png

@@ -0,0 +1,21 @@
+import {
+  defineConfig,
+  minimalPreset as preset,
+} from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+  preset: {
+    ...preset,
+    assetName(type, size) {
+      switch (type) {
+        case 'transparent':
+          return `pwa-${size.width}x${size.height}.png`
+        case 'maskable':
+          return 'maskable-icon.png'
+        case 'apple':
+          return 'apple-touch-icon.png'
+      }
+    },
+  },
+  images: ['public/logo.svg'],
+})

Diff for: public/favicon.ico

@@ -10,10 +10,14 @@ export default defineConfig({
   optimizeDeps: {
     // vitepress is aliased with replacement `join(DIST_CLIENT_PATH, '/index')`
     // This needs to be excluded from optimization
-    exclude: ['vitepress'],
+    exclude: ['@vueuse/core', 'vitepress'],
+  },
+  server: {
+    hmr: {
+      overlay: false,
+    },
   },
   plugins: [
-    // TODO remove cast when moved to Vite 3
     Components({
       include: [/\.vue/, /\.md/],
       dirs: '.vitepress/components',
@@ -32,7 +36,7 @@ export default defineConfig({
           scale: 1.2,
         }),
       ],
-    }) as unknown as Plugin,
+    }),
     IncludesPlugin(),
   ],
 })