From 259cec9ea8c18886249f5613fa42756071eb7206 Mon Sep 17 00:00:00 2001 From: Leo <38490578+yuyinws@users.noreply.github.com> Date: Fri, 21 Mar 2025 22:20:25 +0800 Subject: [PATCH] docs: add `vitepress-plugin-group-icons` (#1526) --- docs/.vitepress/config.ts | 16 +++++++++ docs/.vitepress/theme/index.ts | 1 + docs/guide/essentials/assets.md | 9 ++--- .../essentials/config/entrypoint-loaders.md | 3 +- docs/guide/essentials/config/hooks.md | 3 +- docs/guide/essentials/config/vite.md | 9 ++--- docs/guide/essentials/content-scripts.md | 6 ++-- docs/guide/essentials/entrypoints.md | 3 +- docs/guide/essentials/extension-apis.md | 3 +- docs/guide/essentials/project-structure.md | 6 ++-- docs/guide/essentials/publishing.md | 6 ++-- docs/guide/essentials/wxt-modules.md | 3 +- docs/guide/installation.md | 2 +- docs/guide/resources/upgrading.md | 12 +++---- docs/storage.md | 3 +- package.json | 1 + pnpm-lock.yaml | 35 +++++++++++++++++++ pnpm-workspace.yaml | 1 + 18 files changed, 77 insertions(+), 45 deletions(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 5cce266e..a70a5082 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -16,6 +16,11 @@ import { version as unocssVersion } from '../../packages/unocss/package.json'; import { version as storageVersion } from '../../packages/storage/package.json'; import { version as analyticsVersion } from '../../packages/analytics/package.json'; import knowledge from 'vitepress-knowledge'; +import { + groupIconMdPlugin, + groupIconVitePlugin, + localIconLoader, +} from 'vitepress-plugin-group-icons'; const title = 'Next-gen Web Extension Framework'; const titleSuffix = ' – WXT'; @@ -51,6 +56,16 @@ export default defineConfig({ description, vite: { clearScreen: false, + plugins: [ + groupIconVitePlugin({ + customIcon: { + 'wxt.config.ts': localIconLoader( + import.meta.url, + '../public/logo.svg', + ), + }, + }), + ], }, lastUpdated: true, sitemap: { @@ -73,6 +88,7 @@ export default defineConfig({ markdown: { config: (md) => { md.use(footnote); + md.use(groupIconMdPlugin); }, }, diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 883b411a..b5711598 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -4,6 +4,7 @@ import EntrypointPatterns from '../components/EntrypointPatterns.vue'; import UsingWxtSection from '../components/UsingWxtSection.vue'; import ExampleSearch from '../components/ExampleSearch.vue'; import './custom.css'; +import 'virtual:group-icons.css'; export default { extends: DefaultTheme, diff --git a/docs/guide/essentials/assets.md b/docs/guide/essentials/assets.md index 00f87b06..98e60936 100644 --- a/docs/guide/essentials/assets.md +++ b/docs/guide/essentials/assets.md @@ -89,8 +89,7 @@ But, inside content scripts, the hostname is whatever the tab is set to. So if y To fix this, you need to convert the image to a full URL using `browser.runtime.getURL`: -```ts -// entrypoints/content.ts +```ts [entrypoints/content.ts] import iconUrl from '/icon/128.png'; export default defineContentScript({ @@ -135,8 +134,7 @@ Run `wxt build`, and you should see the WASM file copied into your `.output/chro Next, since this is in a content script and we'll be fetching the WASM file over the network to load it, we need to add the file to the `web_accessible_resources`: -```ts -// wxt.config.ts +```ts [wxt.config.ts] export default defineConfig({ manifest: { web_accessible_resources: [ @@ -153,8 +151,7 @@ export default defineConfig({ And finally, we need to load and initialize the `.wasm` file inside the content script to use it: -```ts -// entrypoints/content.ts +```ts [entrypoints/content.ts] import initWasm, { parseSync } from '@oxc-parser/wasm'; export default defineContentScript({ diff --git a/docs/guide/essentials/config/entrypoint-loaders.md b/docs/guide/essentials/config/entrypoint-loaders.md index a61708b4..8fecc877 100644 --- a/docs/guide/essentials/config/entrypoint-loaders.md +++ b/docs/guide/essentials/config/entrypoint-loaders.md @@ -41,8 +41,7 @@ This is the original method WXT used to import TS files. However, because it doe That means you cannot use imported variables outside the `main` function in JS entrypoints, like for content script `matches` or other options: -```ts -// entrypoints/content.ts +```ts [entrypoints/content.ts] import { GOOGLE_MATCHES } from '~/utils/match-patterns'; export default defineContentScript({ diff --git a/docs/guide/essentials/config/hooks.md b/docs/guide/essentials/config/hooks.md index 2885ef28..f66beafc 100644 --- a/docs/guide/essentials/config/hooks.md +++ b/docs/guide/essentials/config/hooks.md @@ -6,8 +6,7 @@ WXT includes a system that lets you hook into the build process and make changes The easiest way to add a hook is via the `wxt.config.ts`. Here's an example hook that modifies the `manifest.json` file before it is written to the output directory: -```ts -// wxt.config.ts +```ts [wxt.config.ts] export default defineConfig({ hooks: { 'build:manifestGenerated': (wxt, manifest) => { diff --git a/docs/guide/essentials/config/vite.md b/docs/guide/essentials/config/vite.md index 47bb8eff..d200c690 100644 --- a/docs/guide/essentials/config/vite.md +++ b/docs/guide/essentials/config/vite.md @@ -12,8 +12,7 @@ In most cases, you shouldn't change Vite's build settings. WXT provides sensible You can change Vite's config via the `wxt.config.ts` file: -```ts -// wxt.config.ts +```ts [wxt.config.ts] import { defineConfig } from 'wxt'; export default defineConfig({ @@ -28,8 +27,7 @@ export default defineConfig({ To add a plugin, install the NPM package and add it to the Vite config: -```ts -// wxt.config.ts +```ts [wxt.config.ts] import { defineConfig } from 'wxt'; import VueRouter from 'unplugin-vue-router/vite'; @@ -47,8 +45,7 @@ export default defineConfig({ :::warning Due to the way WXT orchestrates Vite builds, some plugins may not work as expected. For example, `vite-plugin-remove-console` normally only runs when you build for production (`vite build`). However, WXT uses a combination of dev server and builds during development, so you need to manually tell it when to run: -```ts -// wxt.config.ts +```ts [wxt.config.ts] import { defineConfig } from 'wxt'; import removeConsole from 'vite-plugin-remove-console'; diff --git a/docs/guide/essentials/content-scripts.md b/docs/guide/essentials/content-scripts.md index e389b1fa..f007e558 100644 --- a/docs/guide/essentials/content-scripts.md +++ b/docs/guide/essentials/content-scripts.md @@ -76,8 +76,7 @@ To create a standalone content script that only includes a CSS file: 1. Create the CSS file: `entrypoints/example.content.css` 2. Use the `build:manifestGenerated` hook to add the content script to the manifest: - ```ts - // wxt.config.ts + ```ts [wxt.config.ts] export default defineConfig({ hooks: { 'build:manifestGenerated': (wxt, manifest) => { @@ -475,8 +474,7 @@ WXT provides a helper function, [`createIframeUi`](/api/reference/wxt/client/fun ``` 1. Add the page to the manifest's `web_accessible_resources`: - ```ts - // wxt.config.ts + ```ts [wxt.config.ts] export default defineConfig({ manifest: { web_accessible_resources: [ diff --git a/docs/guide/essentials/entrypoints.md b/docs/guide/essentials/entrypoints.md index bc06c209..0902d75c 100644 --- a/docs/guide/essentials/entrypoints.md +++ b/docs/guide/essentials/entrypoints.md @@ -76,8 +76,7 @@ Most listed entrypoints have options that need to be added to the `manifest.json For example, here's how to define `matches` for content scripts: -```ts -// entrypoints/content.ts +```ts [entrypoints/content.ts] export default defineContentScript({ matches: ['*://*.wxt.dev/*'], main() { diff --git a/docs/guide/essentials/extension-apis.md b/docs/guide/essentials/extension-apis.md index 529558d8..3a561b3e 100644 --- a/docs/guide/essentials/extension-apis.md +++ b/docs/guide/essentials/extension-apis.md @@ -38,8 +38,7 @@ After the release of MV3 and Chrome's official deprecation of MV2 in June 2024, You can disable it with a single line: -```ts -// wxt.config.ts +```ts [wxt.config.ts] export default defineConfig({ extensionApi: 'chrome', }); diff --git a/docs/guide/essentials/project-structure.md b/docs/guide/essentials/project-structure.md index f9e2fdac..d5634106 100644 --- a/docs/guide/essentials/project-structure.md +++ b/docs/guide/essentials/project-structure.md @@ -47,8 +47,7 @@ Here's a brief summary of each of these files and directories: Many developers like having a `src/` directory to separate source code from configuration files. You can enable it inside the `wxt.config.ts` file: -```ts -// wxt.config.ts +```ts [wxt.config.ts] export default defineConfig({ srcDir: 'src', }); @@ -84,8 +83,7 @@ After enabling it, your project structure should look like this: You can configure the following directories: -```ts -// wxt.config.ts +```ts [wxt.config.ts] export default defineConfig({ // Relative to project root srcDir: "src", // default: "." diff --git a/docs/guide/essentials/publishing.md b/docs/guide/essentials/publishing.md index a7ae7b20..d2cbe638 100644 --- a/docs/guide/essentials/publishing.md +++ b/docs/guide/essentials/publishing.md @@ -133,8 +133,7 @@ When running `wxt zip -b firefox`, WXT will zip both your extension and sources. To customize which files are zipped, add the `zip` option to your config file. -```ts -// wxt.config.ts +```ts [wxt.config.ts] import { defineConfig } from 'wxt'; export default defineConfig({ @@ -184,8 +183,7 @@ See Issue [#377](https://github.com/wxt-dev/wxt/issues/377) for more details. If you use private packages and you don't want to provide your auth token to the Firefox team during the review process, you can use `zip.downloadPackages` to download any private packages and include them in the zip. -```ts -// wxt.config.ts +```ts [wxt.config.ts] export default defineConfig({ zip: { downloadPackages: [ diff --git a/docs/guide/essentials/wxt-modules.md b/docs/guide/essentials/wxt-modules.md index bc46561c..cb60cfcc 100644 --- a/docs/guide/essentials/wxt-modules.md +++ b/docs/guide/essentials/wxt-modules.md @@ -9,8 +9,7 @@ WXT provides a "module system" that let's you run code at different steps in the There are two ways to add a module to your project: 1. **NPM**: install an NPM package, like [`@wxt-dev/auto-icons`](https://www.npmjs.com/package/@wxt-dev/auto-icons) and add it to your config: - ```ts - // wxt.config.ts + ```ts [wxt.config.ts] export default defineConfig({ modules: ['@wxt-dev/auto-icons'], }); diff --git a/docs/guide/installation.md b/docs/guide/installation.md index d90110b5..edd8d549 100644 --- a/docs/guide/installation.md +++ b/docs/guide/installation.md @@ -86,7 +86,7 @@ Once you've run the `dev` command, continue to [Next Steps](#next-steps)! ``` ::: 4. Add scripts to your `package.json`: - ```json + ```json [package.json] { "scripts": { "dev": "wxt", // [!code ++] diff --git a/docs/guide/resources/upgrading.md b/docs/guide/resources/upgrading.md index 55e37a92..d4fccf46 100644 --- a/docs/guide/resources/upgrading.md +++ b/docs/guide/resources/upgrading.md @@ -35,8 +35,7 @@ export default defineConfig({ Importing variables and using them in the entrypoint options: -```ts -// entrypoints/content.ts +```ts [entrypoints/content.ts] import { GOOGLE_MATCHES } from '~/utils/constants' export default defineContentScript({ @@ -47,8 +46,7 @@ export default defineContentScript({ Using Vite-specific APIs like `import.meta.glob` to define entrypoint options: -```ts -// entrypoints/content.ts +```ts [entrypoints/content.ts] const providers: Record = import.meta.glob('../providers/*', { eager: true, }); @@ -101,8 +99,7 @@ If you already have `/modules` or `/Modules` directory, `wxt pre You have two options: 1. [Recommended] Keep your files where they are and tell WXT to look in a different folder: - ```ts - // wxt.config.ts + ```ts [wxt.config.ts] export default defineConfig({ modulesDir: 'wxt-modules', // defaults to "modules" }); @@ -175,8 +172,7 @@ JS entrypoints in the output directory have been moved. Unless you're doing some ### Renamed `zip.ignoredSources` to `zip.excludeSources` -```ts -// wxt.config.ts +```ts [wxt.config.ts] export default defineConfig({ zip: { ignoredSources: [ diff --git a/docs/storage.md b/docs/storage.md index 8e03045b..f427990e 100644 --- a/docs/storage.md +++ b/docs/storage.md @@ -39,8 +39,7 @@ import { storage } from '@wxt-dev/storage'; To use the `wxt/storage` API, the `"storage"` permission must be added to the manifest: -```ts -// wxt.config.ts +```ts [wxt.config.ts] export default defineConfig({ manifest: { permissions: ['storage'], diff --git a/package.json b/package.json index 0fe87782..58e92881 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "typescript": "catalog:", "vitepress": "catalog:", "vitepress-knowledge": "catalog:", + "vitepress-plugin-group-icons": "catalog:", "vitest-mock-extended": "catalog:", "vue": "catalog:", "wxt": "workspace:*" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index deff9447..2462e0b9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -279,6 +279,9 @@ catalogs: vitepress-knowledge: specifier: ^0.4.0 version: 0.4.0 + vitepress-plugin-group-icons: + specifier: ^1.3.8 + version: 1.3.8 vitest: specifier: ^3.0.7 version: 3.0.7 @@ -376,6 +379,9 @@ importers: vitepress-knowledge: specifier: 'catalog:' version: 0.4.0(vitepress@1.6.3(@algolia/client-search@5.20.3)(@types/node@20.17.6)(@types/react@18.3.12)(postcss@8.5.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.80.7)(search-insights@2.15.0)(typescript@5.6.3)) + vitepress-plugin-group-icons: + specifier: 'catalog:' + version: 1.3.8 vitest-mock-extended: specifier: 'catalog:' version: 3.0.1(typescript@5.6.3)(vitest@3.0.7(@types/node@20.17.6)(happy-dom@17.1.8)(jiti@2.4.2)(sass@1.80.7)(tsx@4.19.3)(yaml@2.7.0)) @@ -1604,10 +1610,17 @@ packages: '@faker-js/faker@9.2.0': resolution: {integrity: sha512-ulqQu4KMr1/sTFIYvqSdegHT8NIkt66tFAkugGnHA+1WAfEn6hMzNR+svjXGFRVLnapxvej67Z/LwchFrnLBUg==} engines: {node: '>=18.0.0', npm: '>=9.0.0'} + deprecated: Please update to a newer version + + '@iconify-json/logos@1.2.4': + resolution: {integrity: sha512-XC4If5D/hbaZvUkTV8iaZuGlQCyG6CNOlaAaJaGa13V5QMYwYjgtKk3vPP8wz3wtTVNVEVk3LRx1fOJz+YnSMw==} '@iconify-json/simple-icons@1.2.27': resolution: {integrity: sha512-FtZwp/H7ih5rY9FPfDR+k6toOo/cuwpHWY8faNhxLs5O5uW6Q8TeqdNWfjVfgFtrs5tUUzWysjqNGL234v8EMA==} + '@iconify-json/vscode-icons@1.2.16': + resolution: {integrity: sha512-hstc2yVq2UJ6v6FrgjftzXRvphGZBsKxvSeXoFLP1Hgx89TPZKrGE5SV6vqsoeIlLYaQ7OZbXmAoVGroTfGmVQ==} + '@iconify/types@2.0.0': resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} @@ -3387,6 +3400,7 @@ packages: glob@6.0.4: resolution: {integrity: sha512-MKZeRNyYZAVVVG1oZeLaWie1uweH40m9AZwIwxyPbTSX4hHrVYSzLg0Ro5Z5R7XKkIX+Cc6oD1rqeDJnwsB8/A==} + deprecated: Glob versions prior to v9 are no longer supported glob@8.1.0: resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} @@ -3517,6 +3531,7 @@ packages: inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} + deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} @@ -4620,6 +4635,7 @@ packages: rimraf@2.4.5: resolution: {integrity: sha512-J5xnxTyqaiw06JjMftq7L9ouA448dw/E7dKghkP9WpKNuwmARNNg+Gk8/u5ryb9N/Yo2+z3MCwuqFK/+qPOPfQ==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rollup-plugin-dts@6.1.1: @@ -5232,6 +5248,9 @@ packages: peerDependencies: vitepress: ^1.0.0 + vitepress-plugin-group-icons@1.3.8: + resolution: {integrity: sha512-BIx1HgXEvbDeJX8NqVvthWHQqEW2slj1SkAWLMNoUR5IJq1dq6LmrURYCyznMJCB3/0g+YY89ifvQp3in1fX3g==} + vitepress@1.6.3: resolution: {integrity: sha512-fCkfdOk8yRZT8GD9BFqusW3+GggWYZ/rYncOfmgcDtP3ualNHCAg+Robxp2/6xfH1WwPHtGpPwv7mbA3qomtBw==} hasBin: true @@ -6029,10 +6048,18 @@ snapshots: '@faker-js/faker@9.2.0': {} + '@iconify-json/logos@1.2.4': + dependencies: + '@iconify/types': 2.0.0 + '@iconify-json/simple-icons@1.2.27': dependencies: '@iconify/types': 2.0.0 + '@iconify-json/vscode-icons@1.2.16': + dependencies: + '@iconify/types': 2.0.0 + '@iconify/types@2.0.0': {} '@iconify/utils@2.3.0': @@ -9863,6 +9890,14 @@ snapshots: vitepress: 1.6.3(@algolia/client-search@5.20.3)(@types/node@20.17.6)(@types/react@18.3.12)(postcss@8.5.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.80.7)(search-insights@2.15.0)(typescript@5.6.3) yaml: 2.7.0 + vitepress-plugin-group-icons@1.3.8: + dependencies: + '@iconify-json/logos': 1.2.4 + '@iconify-json/vscode-icons': 1.2.16 + '@iconify/utils': 2.3.0 + transitivePeerDependencies: + - supports-color + vitepress@1.6.3(@algolia/client-search@5.20.3)(@types/node@20.17.6)(@types/react@18.3.12)(postcss@8.5.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.80.7)(search-insights@2.15.0)(typescript@5.6.3): dependencies: '@docsearch/css': 3.8.2 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 37fdc8db..3197cb0d 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -100,6 +100,7 @@ catalog: vite-plugin-solid: ^2.11.6 vitepress: ^1.6.3 vitepress-knowledge: ^0.4.0 + vitepress-plugin-group-icons: ^1.3.8 vitest: ^3.0.7 vitest-mock-extended: ^3.0.1 vitest-plugin-random-seed: ^1.1.1