fix sizing

docs/.vitepress/ext/vite/vite.ts

@@ -4,8 +4,8 @@ import imgit from "../../imgit/plugin/vite";
 
 export const Vite: UserConfig = {
     plugins: [imgit({
-        ext: ".md",
         enforce: "pre",
+        skip: (_, id) => !id.endsWith(".md"),
         local: "./docs/public/assets",
         cache: "./docs/public/assets/remote/.cache",
         width: 720

docs/.vitepress/imgit/plugin/vite.ts

@@ -1,22 +1,28 @@
-import { Plugin } from "vite";
 import { boot, exit, transform, Options } from "../server";
 
-/** Configures plugin behaviour. */
+/** Configures vite plugin behaviour. */
 export type ViteOptions = Options & {
-    /** Extension of the source files to transform; transforms all files by default. */
-    ext?: string,
     /** Force the plugin to run either before are after other plugins. */
-    enforce?: "pre" | "post"
+    enforce?: "pre" | "post";
+    /** Specify condition when document shouldn't be transformed by the plugin. */
+    skip?: (code: string, id: string, options?: { ssr?: boolean; }) => boolean;
 };
 
+declare interface VitePlugin {
+    name: string;
+    enforce?: "pre" | "post";
+    buildStart?: (options: unknown) => Promise<void> | void;
+    transform?: (code: string, id: string, options?: { ssr?: boolean; }) => Promise<string> | string;
+    buildEnd?: (error?: Error) => void;
+}
+
 /** Creates imgit plugin instance for vite. */
-export default function (options?: ViteOptions): Plugin {
-    boot(options);
-    const skip = (id: string) => options?.ext && !id.endsWith(options.ext);
+export default function (options?: ViteOptions): VitePlugin {
     return {
         name: "imgit",
         enforce: options?.enforce,
-        transform: (code, id) => skip(id) ? code : transform(code),
+        buildStart: _ => boot(options),
+        transform: (code, id, opt) => options?.skip?.(code, id, opt) ? code : transform(code),
         buildEnd: exit
     };
 };

docs/.vitepress/imgit/server/transform/3-probe.ts

@@ -12,18 +12,19 @@ export function probe(assets: DownloadedAsset[]): Promise<ProbedAsset[]> {
 
 async function probeAsset(asset: DownloadedAsset): Promise<ProbedAsset> {
     let size: AssetSize;
+    const url = asset.sourceUrl;
     if (asset.type === AssetType.YouTube) size = { width: 0, height: 0 };
-    else if (cache.size.hasOwnProperty(asset.sourcePath)) size = cache.size[asset.sourcePath];
-    else if (probing.has(asset.sourcePath)) size = await probing.get(asset.sourcePath)!;
-    else size = cache.size[asset.sourcePath] = await probeSize(asset.sourcePath);
+    else if (cache.size.hasOwnProperty(url)) size = cache.size[url];
+    else if (probing.has(url)) size = await probing.get(url)!;
+    else size = cache.size[url] = await probeSize(asset.sourcePath, url);
     return { ...asset, size };
 }
 
-async function probeSize(filepath: string): Promise<AssetSize> {
-    let resolve: (value: (AssetSize)) => void;
-    probing.set(filepath, new Promise<AssetSize>(r => resolve = r));
-    exec(`ffprobe ${config.probe.args} "${filepath}"`, (err, out) => handleProbe(resolve, err, out));
-    return probing.get(filepath)!;
+async function probeSize(path: string, url: string): Promise<AssetSize> {
+    let resolve: (value: (AssetSize)) => void, promise;
+    probing.set(url, promise = new Promise<AssetSize>(r => resolve = r));
+    exec(`ffprobe ${config.probe.args} "${path}"`, (err, out) => handleProbe(resolve, err, out));
+    return promise;
 }
 
 function handleProbe(resolve: (info: AssetSize) => void, error: (ExecException | null), out: string) {

docs/.vitepress/imgit/server/transform/5-build.ts

@@ -19,8 +19,8 @@ async function buildAsset(asset: EncodedAsset): Promise<BuiltAsset> {
 export async function buildImage(asset: EncodedAsset): Promise<string> {
     const src = path.join(config.build.root(asset), path.basename(asset.sourceUrl));
     const alt = asset.title ?? "";
-    const style = buildStyle(asset.size);
-    return `<img class="imgit-image" loading="lazy" decoding="async" src="${src}" alt="${alt}" ${style}/>`;
+    const size = buildSizes(asset.size);
+    return `<img class="imgit-image" loading="lazy" decoding="async" src="${src}" alt="${alt}" ${size}/>`;
 }
 
 export async function buildAnimation(asset: EncodedAsset): Promise<string> {
@@ -29,9 +29,9 @@ export async function buildAnimation(asset: EncodedAsset): Promise<string> {
 
 export async function buildVideo(asset: EncodedAsset): Promise<string> {
     const src = path.join(config.build.root(asset), path.basename(asset.sourceUrl));
-    const style = buildStyle(asset.size);
+    const size = buildSizes(asset.size);
     const source = `<source data-src="${src}" type="video/mp4">`;
-    return `<video class="imgit-video" preload="none" loop autoplay muted playsinline poster="/assets/img/video-poster.svg" ${style}>${source}</video>`;
+    return `<video class="imgit-video" preload="none" loop autoplay muted playsinline poster="/assets/img/video-poster.svg" ${size}>${source}</video>`;
 }
 
 export async function buildYouTube(asset: EncodedAsset): Promise<string> {
@@ -47,8 +47,9 @@ export function buildServeRoot(asset: EncodedAsset): string {
     return path.join(config.serve, config.remote);
 }
 
-function buildStyle(size: AssetSize) {
+function buildSizes(size: AssetSize) {
     const mod = config.width && size.width > config.width ? config.width / size.width : 1;
     const width = Math.floor(size.width * mod);
-    return `style="width: ${width}px; height: 100%"`;
+    const height = Math.floor(size.height * mod);
+    return `width="${width}" height="${height}"`;
 }