vitepress-plugin-responsive-images 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shisheng Kai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# vitepress-plugin-responsive-images
+
+Automatically convert local Markdown images in VitePress docs into responsive `<picture>` elements with WebP/AVIF sources and JPG/PNG fallbacks.
+
+Write normal Markdown:
+
+```md
+![Dashboard screenshot](./images/dashboard.png)
+```
+
+Build responsive images automatically:
+
+```html
+<picture>
+  <source type="image/webp" srcset="... 480w, ... 720w, ... 1440w">
+  <img src="...png" srcset="... 480w, ... 720w, ... 1440w" sizes="(max-width: 768px) 100vw, 720px" alt="Dashboard screenshot">
+</picture>
+```
+
+## Why
+
+VitePress lets authors write Markdown quickly, but it does not automatically generate responsive image variants for local Markdown images. This plugin keeps the authoring experience simple while improving image delivery for documentation sites.
+
+It is designed for documentation that must remain usable on older enterprise devices: modern browsers can load WebP or AVIF, while older browsers can still use JPG/PNG fallbacks.
+
+## Compatibility
+
+| VitePress version | Status |
+| --- | --- |
+| `1.6.x` | Stable supported |
+| `2.0.x` | Supported and continuously tested; alpha caveats apply while VitePress 2 is not stable |
+
+## Install
+
+```bash
+npm install -D vitepress-plugin-responsive-images
+```
+
+## Usage
+
+```ts
+// docs/.vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { withResponsiveImages } from 'vitepress-plugin-responsive-images'
+
+export default withResponsiveImages(
+  defineConfig({
+    title: 'My Docs'
+  })
+)
+```
+
+With options:
+
+```ts
+export default withResponsiveImages(
+  defineConfig({
+    title: 'My Docs'
+  }),
+  {
+    widths: [480, 720, 960, 1440],
+    formats: ['webp'],
+    sizes: '(max-width: 768px) 100vw, 720px'
+  }
+)
+```
+
+## Defaults
+
+- Processes local Markdown images written as `![]()`.
+- Processes `jpg`, `jpeg`, and `png` by default.
+- Skips remote URLs, data URLs, SVG, GIF, Vue components, theme images, CSS backgrounds, and handwritten HTML images.
+- Generates WebP plus original-format JPG/PNG fallback by default.
+- Avoids upscaling images.
+- Adds `loading="lazy"` and `decoding="async"` by default.
+
+## Configuration
+
+```ts
+interface ResponsiveImagesOptions {
+  widths?: number[]
+  formats?: Array<'webp' | 'avif'>
+  sizes?: string
+  outputDir?: string
+  include?: string[]
+  exclude?: string[]
+  quality?: {
+    webp?: number
+    avif?: number
+    jpeg?: number
+    png?: number
+  }
+  loading?: 'lazy' | 'eager' | false
+  decoding?: 'async' | 'sync' | 'auto' | false
+  failOnError?: boolean
+  debug?: boolean
+}
+```
+
+## Page opt-out
+
+Disable the plugin for a single Markdown page with frontmatter:
+
+```yaml
+---
+responsiveImages: false
+---
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import MarkdownIt from 'markdown-it';
+import { Plugin } from 'vite';
+
+type OutputFormat = 'webp' | 'avif';
+type FallbackFormat = 'original';
+type LoadingValue = 'lazy' | 'eager' | false;
+type DecodingValue = 'async' | 'sync' | 'auto' | false;
+interface FormatQuality {
+    webp: number;
+    avif: number;
+    jpeg: number;
+    png?: number;
+}
+interface ResponsiveImagesOptions {
+    widths?: number[];
+    formats?: OutputFormat[];
+    fallbackFormat?: FallbackFormat;
+    sizes?: string;
+    outputDir?: string;
+    include?: string[];
+    exclude?: string[];
+    quality?: Partial<FormatQuality>;
+    loading?: LoadingValue;
+    decoding?: DecodingValue;
+    skipFormats?: string[];
+    failOnError?: boolean;
+    debug?: boolean;
+    defaultWidth?: number;
+}
+interface NormalizedOptions {
+    widths: number[];
+    formats: OutputFormat[];
+    fallbackFormat: FallbackFormat;
+    sizes: string;
+    outputDir: string;
+    include: string[];
+    exclude: string[];
+    quality: FormatQuality;
+    loading: LoadingValue;
+    decoding: DecodingValue;
+    skipFormats: string[];
+    failOnError: boolean;
+    debug: boolean;
+    defaultWidth: number;
+}
+interface ImageCandidate {
+    width: number;
+    path: string;
+    url: string;
+}
+interface ManifestEntry {
+    key: string;
+    markdownPath: string;
+    source: string;
+    sourcePath: string;
+    alt?: string;
+    sourceWidth: number;
+    sourceHeight: number;
+    displayWidth: number;
+    displayHeight: number;
+    sources: Partial<Record<OutputFormat, ImageCandidate[]>>;
+    fallback: {
+        format: 'jpg' | 'jpeg' | 'png';
+        candidates: ImageCandidate[];
+        src: string;
+    };
+}
+interface RuntimeState {
+    options: NormalizedOptions;
+    root: string;
+    cacheDir: string;
+    outDir: string;
+    base: string;
+    manifest: Map<string, ManifestEntry>;
+    built: boolean;
+}
+
+declare function responsiveImages(options?: ResponsiveImagesOptions): (md: MarkdownIt) => void;
+declare function createResponsiveImagesPlugins(options?: ResponsiveImagesOptions): {
+    runtime: RuntimeState;
+    markdownPlugin: (md: MarkdownIt) => void;
+    vitePlugin: Plugin;
+};
+declare function withResponsiveImages<T>(config: T, options?: ResponsiveImagesOptions): T;
+
+export { type ResponsiveImagesOptions, createResponsiveImagesPlugins, responsiveImages, withResponsiveImages };

package/dist/index.js

@@ -0,0 +1,454 @@
+// src/runtime.ts
+import path from "path";
+
+// src/config.ts
+var defaultOptions = {
+  widths: [480, 720, 960, 1440],
+  formats: ["webp"],
+  fallbackFormat: "original",
+  sizes: "(max-width: 768px) 100vw, 720px",
+  outputDir: "_responsive-images",
+  include: ["**/*.md"],
+  exclude: [],
+  quality: {
+    webp: 80,
+    avif: 50,
+    jpeg: 82
+  },
+  loading: "lazy",
+  decoding: "async",
+  skipFormats: ["svg", "gif"],
+  failOnError: false,
+  debug: false,
+  defaultWidth: 720
+};
+function normalizeOptions(options = {}) {
+  const widths = Array.from(new Set(options.widths ?? defaultOptions.widths)).filter((width) => Number.isInteger(width) && width > 0).sort((a, b) => a - b);
+  if (widths.length === 0) {
+    throw new Error("vitepress-plugin-responsive-images: at least one positive width is required.");
+  }
+  const formats = Array.from(new Set(options.formats ?? defaultOptions.formats));
+  for (const format of formats) {
+    if (format !== "webp" && format !== "avif") {
+      throw new Error(`vitepress-plugin-responsive-images: unsupported output format "${format}".`);
+    }
+  }
+  return {
+    ...defaultOptions,
+    ...options,
+    widths,
+    formats,
+    quality: {
+      ...defaultOptions.quality,
+      ...options.quality
+    },
+    include: options.include ?? defaultOptions.include,
+    exclude: options.exclude ?? defaultOptions.exclude,
+    skipFormats: (options.skipFormats ?? defaultOptions.skipFormats).map((format) => format.toLowerCase()),
+    outputDir: stripSlashes(options.outputDir ?? defaultOptions.outputDir)
+  };
+}
+function stripSlashes(value) {
+  return value.replace(/^\/+|\/+$/g, "");
+}
+
+// src/runtime.ts
+function createRuntime(options = {}) {
+  const root = process.cwd();
+  return {
+    options: normalizeOptions(options),
+    root,
+    cacheDir: path.join(root, ".vitepress", "cache", "responsive-images"),
+    outDir: path.join(root, ".vitepress", "dist"),
+    base: "/",
+    manifest: /* @__PURE__ */ new Map(),
+    built: false
+  };
+}
+
+// src/path.ts
+import path2 from "path";
+import { pathToFileURL } from "url";
+var externalPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i;
+function parseImageSource(source) {
+  const match = source.match(/^([^?#]*)([?#].*)?$/);
+  return {
+    cleanSource: match?.[1] ?? source,
+    suffix: match?.[2] ?? ""
+  };
+}
+function shouldSkipSource(source, skipFormats) {
+  if (!source || source.startsWith("#")) return true;
+  if (source.startsWith("data:") || source.startsWith("blob:")) return true;
+  if (externalPattern.test(source)) return true;
+  const { cleanSource } = parseImageSource(source);
+  const extension = path2.extname(cleanSource).slice(1).toLowerCase();
+  return !extension || skipFormats.includes(extension);
+}
+function resolveImageSource(params) {
+  const { root, source, skipFormats } = params;
+  if (shouldSkipSource(source, skipFormats)) return void 0;
+  const { cleanSource } = parseImageSource(source);
+  const extension = path2.extname(cleanSource).slice(1).toLowerCase();
+  let sourcePath;
+  let markdownPath = params.markdownPath ? normalizePath(params.markdownPath) : "";
+  if (cleanSource.startsWith("/")) {
+    sourcePath = path2.join(root, "public", cleanSource);
+    markdownPath ||= "__public__";
+  } else if (cleanSource.startsWith("@/")) {
+    sourcePath = path2.join(root, cleanSource.slice(2));
+    markdownPath ||= "__src__";
+  } else {
+    if (!markdownPath) return void 0;
+    sourcePath = path2.resolve(path2.dirname(markdownPath), cleanSource);
+  }
+  return {
+    key: createImageKey(markdownPath, source),
+    markdownPath,
+    source,
+    sourcePath,
+    extension
+  };
+}
+function createImageKey(markdownPath, source) {
+  return `${normalizePath(markdownPath)}::${source}`;
+}
+function normalizePath(value) {
+  return value.split(path2.sep).join("/");
+}
+function getMarkdownPathFromEnv(root, env) {
+  if (!env || typeof env !== "object") return void 0;
+  const record = env;
+  const candidates = [record.path, record.filePath, record.filename, record.id, record.relativePath];
+  for (const candidate of candidates) {
+    if (typeof candidate !== "string" || candidate.length === 0) continue;
+    return path2.isAbsolute(candidate) ? normalizePath(candidate) : normalizePath(path2.join(root, candidate));
+  }
+  return void 0;
+}
+function joinUrl(...parts) {
+  const normalized = parts.filter(Boolean).map((part, index) => {
+    if (index === 0) return part.replace(/\/+$/g, "");
+    return part.replace(/^\/+|\/+$/g, "");
+  }).filter(Boolean).join("/");
+  return normalized.startsWith("/") ? normalized : `/${normalized}`;
+}
+
+// src/render.ts
+function renderPicture(entry, options, attrs) {
+  const sources = options.formats.map((format) => {
+    const candidates = entry.sources[format];
+    if (!candidates?.length) return "";
+    return `<source type="image/${format}" srcset="${escapeAttribute(renderSrcset(candidates))}">`;
+  }).filter(Boolean).join("");
+  const title = attrs.title ? ` title="${escapeAttribute(attrs.title)}"` : "";
+  const loading = options.loading ? ` loading="${escapeAttribute(options.loading)}"` : "";
+  const decoding = options.decoding ? ` decoding="${escapeAttribute(options.decoding)}"` : "";
+  return `<picture>${sources}<img src="${escapeAttribute(entry.fallback.src)}" srcset="${escapeAttribute(renderSrcset(entry.fallback.candidates))}" sizes="${escapeAttribute(options.sizes)}" width="${entry.displayWidth}" height="${entry.displayHeight}" alt="${escapeAttribute(attrs.alt)}"${title}${loading}${decoding}></picture>`;
+}
+function renderSrcset(candidates) {
+  return candidates.map((candidate) => `${candidate.url} ${candidate.width}w`).join(", ");
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/markdownPlugin.ts
+function responsiveImagesMarkdownPlugin(runtime) {
+  return (md) => {
+    const defaultRender = md.renderer.rules.image ?? ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
+    md.renderer.rules.image = (tokens, idx, options, env, self) => {
+      const token = tokens[idx];
+      const source = token.attrGet("src");
+      if (!source) return defaultRender(tokens, idx, options, env, self);
+      const markdownPath = getMarkdownPathFromEnv(runtime.root, env);
+      const resolved = resolveImageSource({
+        root: runtime.root,
+        markdownPath,
+        source,
+        skipFormats: runtime.options.skipFormats
+      });
+      const entry = resolved ? runtime.manifest.get(resolved.key) : void 0;
+      if (!entry) return defaultRender(tokens, idx, options, env, self);
+      return renderPicture(entry, runtime.options, {
+        alt: renderAlt(token, options, env, self),
+        title: token.attrGet("title") ?? void 0
+      });
+    };
+  };
+}
+function renderAlt(token, options, env, self) {
+  return self.renderInlineAsText(token.children ?? [], options, env);
+}
+
+// src/vitePlugin.ts
+import fs3 from "fs/promises";
+import path4 from "path";
+
+// src/scan.ts
+import fs2 from "fs/promises";
+import { glob } from "tinyglobby";
+
+// src/generate.ts
+import crypto from "crypto";
+import fs from "fs/promises";
+import path3 from "path";
+import sharp from "sharp";
+async function generateImage(runtime, image) {
+  const sourceBuffer = await fs.readFile(image.sourcePath);
+  const hash = crypto.createHash("sha1").update(sourceBuffer).digest("hex").slice(0, 10);
+  const metadata = await sharp(sourceBuffer).metadata();
+  if (!metadata.width || !metadata.height) {
+    throw new Error("Missing image dimensions.");
+  }
+  await fs.mkdir(runtime.cacheDir, { recursive: true });
+  const fallbackFormat = normalizeFallbackFormat(image.extension);
+  const widths = selectWidths(runtime.options.widths, metadata.width);
+  const baseName = sanitizeBaseName(path3.basename(image.sourcePath, path3.extname(image.sourcePath)));
+  const sources = {};
+  for (const format of runtime.options.formats) {
+    sources[format] = await Promise.all(
+      widths.map((width) => writeVariant(runtime, sourceBuffer, baseName, hash, width, format))
+    );
+  }
+  const fallbackCandidates = await Promise.all(
+    widths.map((width) => writeVariant(runtime, sourceBuffer, baseName, hash, width, fallbackFormat))
+  );
+  const displayWidth = Math.min(metadata.width, runtime.options.defaultWidth);
+  const displayHeight = Math.round(displayWidth / metadata.width * metadata.height);
+  const fallbackSrc = chooseDefaultCandidate(fallbackCandidates, displayWidth).url;
+  return {
+    key: image.key,
+    markdownPath: image.markdownPath,
+    source: image.source,
+    sourcePath: normalizePath(image.sourcePath),
+    sourceWidth: metadata.width,
+    sourceHeight: metadata.height,
+    displayWidth,
+    displayHeight,
+    sources,
+    fallback: {
+      format: fallbackFormat,
+      candidates: fallbackCandidates,
+      src: fallbackSrc
+    }
+  };
+}
+async function writeVariant(runtime, sourceBuffer, baseName, hash, width, format) {
+  const extension = format === "jpeg" ? "jpg" : format;
+  const fileName = `${baseName}-${width}.${hash}.${extension}`;
+  const outputPath = path3.join(runtime.cacheDir, fileName);
+  try {
+    await fs.access(outputPath);
+  } catch {
+    let pipeline = sharp(sourceBuffer).resize({ width, withoutEnlargement: true });
+    if (format === "webp") pipeline = pipeline.webp({ quality: runtime.options.quality.webp });
+    if (format === "avif") pipeline = pipeline.avif({ quality: runtime.options.quality.avif });
+    if (format === "jpg" || format === "jpeg") pipeline = pipeline.jpeg({ quality: runtime.options.quality.jpeg });
+    if (format === "png") pipeline = pipeline.png(runtime.options.quality.png ? { quality: runtime.options.quality.png } : void 0);
+    await pipeline.toFile(outputPath);
+  }
+  return {
+    width,
+    path: normalizePath(outputPath),
+    url: joinUrl(runtime.base, runtime.options.outputDir, fileName)
+  };
+}
+function selectWidths(widths, sourceWidth) {
+  const selected = widths.filter((width) => width <= sourceWidth);
+  return selected.length > 0 ? selected : [sourceWidth];
+}
+function chooseDefaultCandidate(candidates, displayWidth) {
+  return candidates.find((candidate) => candidate.width >= displayWidth) ?? candidates[candidates.length - 1];
+}
+function normalizeFallbackFormat(extension) {
+  if (extension === "jpg" || extension === "jpeg") return "jpg";
+  if (extension === "png") return "png";
+  throw new Error(`Unsupported fallback format "${extension}".`);
+}
+function sanitizeBaseName(value) {
+  return value.toLowerCase().replace(/[^a-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "") || "image";
+}
+
+// src/scan.ts
+var markdownImagePattern = /!\[[^\]]*\]\(([^\s)]+)(?:\s+["'][^"']*["'])?\)/g;
+async function buildManifest(runtime) {
+  runtime.manifest.clear();
+  const files = await glob(runtime.options.include, {
+    cwd: runtime.root,
+    ignore: runtime.options.exclude,
+    absolute: true,
+    onlyFiles: true
+  });
+  for (const file of files) {
+    await scanMarkdownFile(runtime, file);
+  }
+  runtime.built = true;
+}
+async function scanMarkdownFile(runtime, markdownPath) {
+  const content = await fs2.readFile(markdownPath, "utf8");
+  if (hasResponsiveImagesDisabled(content)) return;
+  for (const source of extractMarkdownImageSources(content)) {
+    const resolved = resolveImageSource({
+      root: runtime.root,
+      markdownPath,
+      source,
+      skipFormats: runtime.options.skipFormats
+    });
+    if (!resolved) continue;
+    try {
+      const entry = await generateImage(runtime, resolved);
+      runtime.manifest.set(entry.key, entry);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (runtime.options.failOnError) {
+        throw new Error(`vitepress-plugin-responsive-images: failed to process ${normalizePath(resolved.sourcePath)}. ${message}`);
+      }
+      if (runtime.options.debug) {
+        console.warn(`vitepress-plugin-responsive-images: skipped ${normalizePath(resolved.sourcePath)}. ${message}`);
+      }
+    }
+  }
+}
+function extractMarkdownImageSources(content) {
+  const sources = [];
+  let match;
+  markdownImagePattern.lastIndex = 0;
+  while (match = markdownImagePattern.exec(content)) {
+    const source = match[1]?.trim();
+    if (source) sources.push(source);
+  }
+  return sources;
+}
+function hasResponsiveImagesDisabled(content) {
+  if (!content.startsWith("---")) return false;
+  const end = content.indexOf("\n---", 3);
+  if (end === -1) return false;
+  const frontmatter = content.slice(3, end);
+  return /^responsiveImages:\s*false\s*$/m.test(frontmatter);
+}
+
+// src/vitePlugin.ts
+function responsiveImagesVitePlugin(runtime) {
+  let resolvedConfig;
+  const virtualPrefix = "\0vitepress-responsive-image:";
+  return {
+    name: "vitepress-plugin-responsive-images",
+    async configResolved(config) {
+      resolvedConfig = config;
+      runtime.root = config.root;
+      runtime.base = config.base || "/";
+      runtime.cacheDir = path4.join(config.cacheDir, "responsive-images");
+      runtime.outDir = config.build.outDir;
+    },
+    async buildStart() {
+      await buildManifest(runtime);
+    },
+    resolveId(source) {
+      const fileName = getGeneratedFileName(source, runtime);
+      return fileName ? `${virtualPrefix}${fileName}` : void 0;
+    },
+    load(id) {
+      if (!id.startsWith(virtualPrefix)) return void 0;
+      const fileName = id.slice(virtualPrefix.length);
+      return `export default ${JSON.stringify(joinUrl(runtime.base, runtime.options.outputDir, fileName))}`;
+    },
+    async configureServer(server) {
+      await buildManifest(runtime);
+      installDevMiddleware(server, runtime);
+    },
+    async closeBundle() {
+      if (!resolvedConfig) return;
+      await copyGeneratedImages(runtime);
+    }
+  };
+}
+function getGeneratedFileName(source, runtime) {
+  const normalizedBase = runtime.base === "/" ? "" : runtime.base.replace(/\/+$/g, "");
+  const prefixes = [`/${runtime.options.outputDir}/`];
+  if (normalizedBase) {
+    prefixes.push(`${normalizedBase}/${runtime.options.outputDir}/`);
+  }
+  for (const prefix of prefixes) {
+    if (source.startsWith(prefix)) {
+      return source.slice(prefix.length);
+    }
+  }
+  return void 0;
+}
+function installDevMiddleware(server, runtime) {
+  const mountPath = `/${runtime.options.outputDir}/`;
+  server.middlewares.use(mountPath, async (request, response, next) => {
+    const requestUrl = request.url?.split("?")[0] ?? "";
+    const fileName = decodeURIComponent(requestUrl.replace(/^\/+/, ""));
+    const filePath = path4.join(runtime.cacheDir, fileName);
+    try {
+      const file = await fs3.readFile(filePath);
+      response.statusCode = 200;
+      response.end(file);
+    } catch {
+      next();
+    }
+  });
+}
+async function copyGeneratedImages(runtime) {
+  const targetDir = path4.join(runtime.outDir, runtime.options.outputDir);
+  await fs3.mkdir(targetDir, { recursive: true });
+  try {
+    const files = await fs3.readdir(runtime.cacheDir);
+    await Promise.all(
+      files.map((file) => fs3.copyFile(path4.join(runtime.cacheDir, file), path4.join(targetDir, file)))
+    );
+  } catch (error) {
+    const code = typeof error === "object" && error && "code" in error ? error.code : void 0;
+    if (code !== "ENOENT") throw error;
+  }
+}
+
+// src/index.ts
+function responsiveImages(options = {}) {
+  return responsiveImagesMarkdownPlugin(createRuntime(options));
+}
+function createResponsiveImagesPlugins(options = {}) {
+  const runtime = createRuntime(options);
+  return {
+    runtime,
+    markdownPlugin: responsiveImagesMarkdownPlugin(runtime),
+    vitePlugin: responsiveImagesVitePlugin(runtime)
+  };
+}
+function withResponsiveImages(config, options = {}) {
+  if (typeof config === "function") {
+    return (async (...args) => {
+      const resolved = await config(...args);
+      return withResponsiveImages(resolved, options);
+    });
+  }
+  const plugins = createResponsiveImagesPlugins(options);
+  const userConfig = config ?? {};
+  const vite = { ...userConfig.vite ?? {} };
+  const markdown = { ...userConfig.markdown ?? {} };
+  const previousMarkdownConfig = markdown.config;
+  vite.plugins = [...toArray(vite.plugins), plugins.vitePlugin];
+  markdown.config = (...args) => {
+    if (typeof previousMarkdownConfig === "function") {
+      previousMarkdownConfig(...args);
+    }
+    const md = args[0];
+    md.use(plugins.markdownPlugin);
+  };
+  return {
+    ...userConfig,
+    vite,
+    markdown
+  };
+}
+function toArray(value) {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+}
+export {
+  createResponsiveImagesPlugins,
+  responsiveImages,
+  withResponsiveImages
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "vitepress-plugin-responsive-images",
+  "version": "0.1.0",
+  "description": "Automatically convert local Markdown images in VitePress docs into responsive picture elements.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Shisheng Kai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shishengkai/vitepress-plugin-responsive-images.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shishengkai/vitepress-plugin-responsive-images/issues"
+  },
+  "homepage": "https://github.com/shishengkai/vitepress-plugin-responsive-images#readme",
+  "keywords": [
+    "vitepress",
+    "vitepress-plugin",
+    "responsive-images",
+    "srcset",
+    "picture",
+    "webp",
+    "avif",
+    "sharp",
+    "markdown-it"
+  ],
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:integration": "vitest run tests/integration.test.ts",
+    "prepublishOnly": "npm run typecheck && npm run test && npm run build"
+  },
+  "peerDependencies": {
+    "vitepress": "^1.6.0 || ^2.0.0-alpha || ^2.0.0",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "sharp": "^0.35.1",
+    "tinyglobby": "^0.2.17"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^25.9.3",
+    "markdown-it": "^14.2.0",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.38"
+  }
+}