docs: add markdown-it-image-size to reduce layout shift (#2087)

* docs: add `markdown-it-image-size` to reduce layout shift

* fix

Author: jay-es

.vitepress/config.ts

@@ -9,6 +9,7 @@ import {
 } from 'vitepress-plugin-group-icons'
 
 
+import { markdownItImageSize } from 'markdown-it-image-size'
 import { buildEnd } from './buildEnd.config'
 
 const ogDescription = '次世代フロントエンドツール'
@@ -489,6 +490,9 @@ export default defineConfig({
     codeTransformers: [transformerTwoslash()],
     config(md) {
       md.use(groupIconMdPlugin)
+      md.use(markdownItImageSize, {
+        publicDir: path.resolve(import.meta.dirname, '../public'),
+      })
     },
   },
   vite: {

guide/api-plugin.md

@@ -12,7 +12,7 @@ Vite は、確立されたパターンをすぐに提供できるように努め
 
 ::: tip
 プラグインを学んだり、デバッグしたり、作成したりする際には、 [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) をプロジェクトに含めることをお勧めします。これにより、Vite プラグインの中間状態を検査できます。インストール後、`localhost:5173/__inspect/` にアクセスして、プロジェクトのモジュールや変換スタックを検査できます。インストール方法については、[vite-plugin-inspect のドキュメント](https://github.com/antfu/vite-plugin-inspect)をご覧ください。
-![vite-plugin-inspect](/images/vite-plugin-inspect.png)
+![vite-plugin-inspect](../images/vite-plugin-inspect.png)
 :::
 
 ## 規約

package.json

@@ -15,6 +15,7 @@
     "feed": "^5.1.0",
     "gsap": "^3.13.0",
     "lint-staged": "^16.1.2",
+    "markdown-it-image-size": "^14.7.0",
     "textlint": "^13.4.1",
     "textlint-filter-rule-allowlist": "^4.0.0",
     "textlint-filter-rule-comments": "^1.2.2",