docs: add vitepress-plugin-group-icons (#1526)

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);
     },
   },
 

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,

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({

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({

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) => {

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';
 

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
    </html>
    ```
 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: [

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() {

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',
 });

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:
 
 <!-- prettier-ignore -->
-```ts
-// wxt.config.ts
+```ts [wxt.config.ts]
 export default defineConfig({
   // Relative to project root
   srcDir: "src",             // default: "."

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: [

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'],
    });

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 ++]

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<string, any> = import.meta.glob('../providers/*', {
   eager: true,
 });
@@ -101,8 +99,7 @@ If you already have `<srcDir>/modules` or `<srcDir>/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: [

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'],

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:*"

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

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