Add markdown-it-image-size to reduce layout shift

Closes #113

Author: dragomano

docs/.vitepress/config.ts

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
@@ -7,6 +8,7 @@ import {
 } from 'vitepress-plugin-group-icons'
 import llmstxt from 'vitepress-plugin-llms'
 import type { PluginOption } from 'vite'
+import { markdownItImageSize } from 'markdown-it-image-size'
 import { buildEnd } from './buildEnd.config'
 
 const ogDescription = 'Инструментарий для фронтенда нового поколения'
@@ -531,6 +533,9 @@ export default defineConfig({
     languages: ['js', 'jsx', 'ts', 'tsx', 'json'],
     config(md) {
       md.use(groupIconMdPlugin)
+      md.use(markdownItImageSize, {
+        publicDir: path.resolve(import.meta.dirname, '../public'),
+      })
     },
     container: {
       tipLabel: 'СОВЕТ',

docs/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)
 :::
 
 ## Конвенции {#conventions}

package.json

@@ -34,6 +34,7 @@
     "@types/node": "^24.1.0",
     "feed": "^5.1.0",
     "gsap": "^3.13.0",
+    "markdown-it-image-size": "^14.7.0",
     "vite": "^7.0.6",
     "vitepress": "2.0.0-alpha.9",
     "vitepress-plugin-group-icons": "^1.6.1",