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

* docs: add `vitepress-plugin-group-icons` resolve #1550 vitejs/vite@b529b6f の反映です。 * Update guide/build.md Co-authored-by: Jun Shindo <46585162+jay-es@users.noreply.github.com> --------- Co-authored-by: Jun Shindo <46585162+jay-es@users.noreply.github.com>
vitejs · Sep 22, 2024 · 1a404bb · 1a404bb
1 parent c3e775b
commit 1a404bb
Show file tree

Hide file tree

Showing 17 changed files with 188 additions and 69 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -1,6 +1,10 @@
 import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+import {
+  groupIconMdPlugin,
+  groupIconVitePlugin,
+} from 'vitepress-plugin-group-icons'
 import { buildEnd } from './buildEnd.config'
 
 const ogDescription = '次世代フロントエンドツール'
@@ -401,6 +405,19 @@ export default defineConfig({
   },
   markdown: {
     codeTransformers: [transformerTwoslash()],
+    config(md) {
+      md.use(groupIconMdPlugin)
+    },
+  },
+  vite: {
+    plugins: [
+      groupIconVitePlugin({
+        customIcon: {
+          firebase: 'vscode-icons:file-type-firebase',
+          '.gitlab-ci.yml': 'vscode-icons:file-type-gitlab',
+        },
+      }),
+    ],
   },
   buildEnd,
 })
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -7,6 +7,7 @@ import './styles/vars.css'
 import HomeSponsors from './components/HomeSponsors.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
+import 'virtual:group-icons.css'
 
 export default {
   extends: DefaultTheme,

diff --git a/config/server-options.md b/config/server-options.md
@@ -18,8 +18,7 @@ Vite ではなく他のサーバーがレスポンスを返す場合がありま
 
 [`dns.setDefaultResultOrder('verbatim')`](https://nodejs.org/api/dns.html#dns_dns_setdefaultresultorder_order) を設定することで、この並び替える動作を無効化できます。そうすると、Vite はアドレスを `localhost` と出力します。
 
-```js twoslash
-// vite.config.js
+```js twoslash [vite.config.js]
 import { defineConfig } from 'vite'
 import dns from 'note:dns'
 

diff --git a/guide/api-javascript.md b/guide/api-javascript.md
@@ -209,7 +209,7 @@ async function build(
 
 **使用例:**
 
-```ts twoslash
+```js twoslash [vite.config.js]
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { build } from 'vite'

diff --git a/guide/api-plugin.md b/guide/api-plugin.md
@@ -42,8 +42,7 @@ Vite 専用プラグインの場合
 
 ユーザーはプロジェクトの `devDependencies` にプラグインを追加し、 `plugins` 配列のオプションを使って設定します。
 
-```js
-// vite.config.js
+```js [vite.config.js]
 import vitePlugin from 'vite-plugin-feature'
 import rollupPlugin from 'rollup-plugin-feature'
 
@@ -66,8 +65,7 @@ export default function framework(config) {
 }
 ```
 
-```js
-// vite.config.js
+```js [vite.config.js]
 import { defineConfig } from 'vite'
 import framework from 'vite-plugin-framework'
 
@@ -519,8 +517,7 @@ Rollup プラグインがビルドフェーズでのみ意味を持つ場合は
 
 Vite のみのプロパティで既存の Rollup プラグインを拡張することもできます:
 
-```js
-// vite.config.js
+```js [vite.config.js]
 import example from 'rollup-plugin-example'
 import { defineConfig } from 'vite'
 
@@ -560,8 +557,7 @@ Vite の 2.9 から、プラグインによりクライアントとの通信に
 
 プラグイン側からは `server.ws.send` を使うことでクライアントへイベントを配信できます:
 
-```js
-// vite.config.js
+```js [vite.config.js]
 export default defineConfig({
   plugins: [
     {
@@ -606,8 +602,7 @@ if (import.meta.hot) {
 
 この時、サーバー側では `server.ws.on` を使ってイベントをリッスンします:
 
-```js
-// vite.config.js
+```js [vite.config.js]
 export default defineConfig({
   plugins: [
     {
@@ -632,8 +627,7 @@ export default defineConfig({
 TypeScript の型宣言ファイルを指定する際は `.d.ts` 拡張子を含めてください。そうしなければ、TypeScript はモジュールがどのファイルを拡張しようとしているのかを認識できない可能性があります。
 :::
 
-```ts
-// events.d.ts
+```ts [events.d.ts]
 import 'vite/types/customEvent.d.ts'
 
 declare module 'vite/types/customEvent.d.ts' {

diff --git a/guide/backend-integration.md b/guide/backend-integration.md
@@ -8,10 +8,9 @@
 
 1. Vite の設定ファイルで、エントリーの指定とマニフェストのビルドの有効化を行ってください:
 
-   ```js twoslash
+   ```js twoslash [vite.config.js]
    import { defineConfig } from 'vite'
    // ---cut---
-   // vite.config.js
    export default defineConfig({
      build: {
        // outDir に .vite/manifest.json を出力
@@ -60,7 +59,7 @@
 
 3. 本番環境向け: `vite build` を実行後、他のアセットファイルと共に `.vite/manifest.json` ファイルが生成されます。マニフェストファイルの内容は以下のようになります:
 
-   ```json
+   ```json [.vite/manifest.json]
    {
      "_shared-!~{003}~.js": {
        "file": "assets/shared-ChJ_j-JJ.css",

diff --git a/guide/build.md b/guide/build.md
@@ -33,7 +33,7 @@ JS でインポートされたアセット URL、CSS の `url()` 参照、`.html
 
 ビルドは様々な [build 設定オプション](/config/build-options.md) でカスタマイズできます。特に、基礎となる [Rollup options](https://rollupjs.org/configuration-options/) を `build.rollupOptions` で直接調整することができます:
 
-```js
+```js [vite.config.js]
 export default defineConfig({
   build: {
     rollupOptions: {
@@ -65,8 +65,7 @@ window.addEventListener('vite:preloadError', (event) => {
 
 `vite build --watch` で rollup のウォッチャーを有効にすることができます。 また、`build.watch` を介して基礎となる [`WatcherOptions`](https://rollupjs.org/configuration-options/#watch) を直接調整することもできます:
 
-```js
-// vite.config.js
+```js [vite.config.js]
 export default defineConfig({
   build: {
     watch: {
@@ -96,8 +95,7 @@ export default defineConfig({
 
 ビルド時には、エントリーポイントとして複数の `.html` ファイルを指定するだけです:
 
-```js twoslash
-// vite.config.js
+```js twoslash [vite.config.js]
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 
@@ -123,8 +121,7 @@ HTML ファイルの場合、Vite は `rollupOptions.input` オブジェクト
 
 配布のためにライブラリーをバンドルするときには [`build.lib` 設定オプション](/config/build-options.md#build-lib) を使用します。また、ライブラリーにバンドルしたくない依存関係、例えば `vue` や `react` などは必ず外部化してください:
 
-```js twoslash
-// vite.config.js
+```js twoslash [vite.config.js]
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 
@@ -155,8 +152,7 @@ export default defineConfig({
 
 エントリーファイルには、パッケージのユーザーがインポートできるエクスポートが含まれることになります:
 
-```js
-// lib/main.js
+```js [lib/main.js]
 import Foo from './Foo.vue'
 import Bar from './Bar.vue'
 export { Foo, Bar }
@@ -173,7 +169,7 @@ dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB
 
 ライブラリーに推奨される `package.json`:
 
-```json
+```json [package.json]
 {
   "name": "my-lib",
   "type": "module",
@@ -191,7 +187,7 @@ dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB
 
 あるいは、複数のエントリーポイントを公開する場合:
 
-```json
+```json [package.json]
 {
   "name": "my-lib",
   "type": "module",

diff --git a/guide/dep-pre-bundling.md b/guide/dep-pre-bundling.md
@@ -37,7 +37,7 @@
 
 ただしこの場合、リンクされた依存関係が ESM としてエクスポートされている必要があります。そうでない場合は、[`optimizeDeps.include`](/config/dep-optimization-options.md#optimizedeps-include) と [`build.commonjsOptions.include`](/config/build-options.md#build-commonjsoptions) に依存関係を追加して、設定することができます。
 
-```js twoslash
+```js twoslash [vite.config.js]
 import { defineConfig } from 'vite'
 // ---cut---
 export default defineConfig({

diff --git a/guide/env-and-mode.md b/guide/env-and-mode.md
@@ -38,7 +38,7 @@ Vite は、[環境ディレクトリー](/config/shared-options.md#envdir)にあ
 
 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、`VITE_` から始まる変数のみが Vite で処理されたコードに公開されます。例えば、以下の環境変数だと:
 
-```
+```[.env]
 VITE_SOME_KEY=123
 DB_PASSWORD=foobar
 ```
@@ -59,7 +59,7 @@ console.log(import.meta.env.DB_PASSWORD) // undefined
 
 環境値の中で `$` を使用する場合は、`\` でエスケープする必要があることに注意してください。
 
-```
+```[.env]
 KEY=123
 NEW_KEY1=test$foo   # test
 NEW_KEY2=test\$foo  # test$foo
@@ -81,7 +81,7 @@ NEW_KEY3=test$KEY   # test123
 
 この目的を達するには、`src` ディレクトリーに `vite-env.d.ts` を作成し、以下のように `ImportMetaEnv` を補ってください:
 
-```typescript
+```typescript [vite-env.d.ts]
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
@@ -96,7 +96,7 @@ interface ImportMeta {
 
 コードがブラウザー環境の型、例えば [DOM](https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts) や [WebWorker](https://github.com/microsoft/TypeScript/blob/main/src/lib/webworker.generated.d.ts) に依存している場合は、`tsconfig.json` 内の [lib](https://www.typescriptlang.org/tsconfig#lib) フィールドを更新しましょう。
 
-```json
+```json [tsconfig.json]
 {
   "lib": ["WebWorker"]
 }

diff --git a/guide/features.md b/guide/features.md
@@ -125,7 +125,7 @@ Vite はデフォルトでは Node.js の API を提供します。Vite でク
 
 または、`tsconfig.json` 内の `compilerOptions.types` に `vite/client` を追加することもできます:
 
-```json
+```json [tsconfig.json]
 {
   "compilerOptions": {
     "types": ["vite/client"]
@@ -176,8 +176,7 @@ Vue を使用している人は公式の [@vitejs/plugin-vue-jsx](https://github
 
 React や Vue 以外で JSX を使用している場合は、[`esbuild` オプション](/config/shared-options.md#esbuild) を使用してカスタムの `jsxFactory` および `jsxFragment` を設定できます。例えば、Preact の場合:
 
-```js twoslash
-// vite.config.js
+```js twoslash [vite.config.js]
 import { defineConfig } from 'vite'
 
 export default defineConfig({
@@ -192,8 +191,7 @@ export default defineConfig({
 
 また、`jsxInject`（Vite のみのオプション）を使用して JSX ヘルパーを挿入し、手動インポートを回避できます。
 
-```js twoslash
-// vite.config.js
+```js twoslash [vite.config.js]
 import { defineConfig } from 'vite'
 
 export default defineConfig({
@@ -223,8 +221,7 @@ CSS の圧縮は PostCSS の後に実行され、[`build.cssTarget`](/config/bui
 
 `.module.css` で終わる全ての CSS ファイルは全て [CSS modules file](https://github.com/css-modules/css-modules) とみなされます。このようなファイルをインポートすると、対応するモジュールオブジェクトが返されます:
 
-```css
-/* example.module.css */
+```css [example.module.css]
 .red {
   color: red;
 }

diff --git a/guide/index.md b/guide/index.md
@@ -186,7 +186,7 @@ Vite は複数の `.html` エントリーポイントを持つ[マルチペー
 Vite がインストールされているプロジェクトでは npm スクリプトで `vite` バイナリーを使用したり、`npx vite` で直接実行できます。生成された Vite プロジェクトのデフォルトの npm スクリプトは次のとおりです:
 
 <!-- prettier-ignore -->
-```json
+```json [package.json]
 {
   "scripts": {
     "dev": "vite", // 開発サーバーを起動。エイリアス: `vite dev`, `vite serve`

diff --git a/guide/performance.md b/guide/performance.md
@@ -59,8 +59,7 @@ TypeScript を使用している場合は、`tsconfig.json` の `compilerOptions
 
 バレルファイルは同じディレクトリー内の他のファイルの API を再エクスポートするファイルです。例:
 
-```js
-// src/utils/index.js
+```js [src/utils/index.js]
 export * from './color.js'
 export * from './dom.js'
 export * from './slash.js'
@@ -92,7 +91,7 @@ vite:transform 62.95ms /src/components/BigComponent.vue +1ms
 vite:transform 102.54ms /src/utils/big-utils.js +1ms
 ```
 
-```js
+```js [vite.config.js]
 export default defineConfig({
   server: {
     warmup: {

diff --git a/guide/ssr.md b/guide/ssr.md
@@ -44,7 +44,7 @@ Vite はサーバーサイドレンダリング（SSR）の組み込みサポー
 
 `index.html` は `entry-client.js` を参照し、サーバーサイドでレンダリングされたマークアップを挿入するためにプレースホルダーを含める必要があります。:
 
-```html
+```html [index.html]
 <div id="app"><!--ssr-outlet--></div>
 <script type="module" src="/src/entry-client.js"></script>
 ```
@@ -69,9 +69,7 @@ if (import.meta.env.SSR) {
 
 SSR をビルドする際、メインサーバーを完全に制御し、Vite を本番環境から切り離したいと思うでしょう。したがってミドルウェアモードで Vite を使用することをお勧めします。これは [express](https://expressjs.com/) での例です:
 
-**server.js**
-
-```js{15-18} twoslash
+```js{15-18} twoslash [server.js]
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -113,7 +111,7 @@ createServer()
 
 次のステップはサーバーサイドでレンダリングされた HTML を提供するための `*` ハンドラーの実装です:
 
-```js twoslash
+```js twoslash [server.js]
 // @noErrors
 import fs from 'node:fs'
 import path from 'node:path'
@@ -166,7 +164,7 @@ app.use('*', async (req, res, next) => {
 
 `package.json` の `dev` スクリプトも代わりにサーバースクリプトを使用するように変更する必要があります:
 
-```diff
+```diff [package.json]
   "scripts": {
 -   "dev": "vite"
 +   "dev": "node server"
@@ -182,7 +180,7 @@ SSR プロジェクトを本番環境に適用するには次の作業を行う
 
 `package.json` は次のようになります:
 
-```json
+```json [package.json]
 {
   "scripts": {
     "dev": "node server",
@@ -219,8 +217,7 @@ SSR プロジェクトを本番環境に適用するには次の作業を行う
 
 `@vitejs/plugin-vue` は自動で使用されたコンポーネントモジュール ID を関連する VueSSR コンテキストに登録することを標準でサポートしています:
 
-```js
-// src/entry-server.js
+```js [src/entry-server.js]
 const ctx = {}
 const html = await vueServerRenderer.renderToString(app, ctx)
 // ctx.modules はレンダリング中にしようされたモジュール ID をセットします。