From 826fcc8efd80cde7196bfddb4b8d5bcd0610c2ad Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 14 Nov 2023 19:53:23 +0300
Subject: [PATCH] iteration

---
 .../imgit/server/config/defaults.ts           |  8 ++++
 .../.vitepress/imgit/server/config/options.ts | 17 +++++++
 .../imgit/server/transform/5-build.ts         | 45 +++++++++++++++----
 docs/.vitepress/theme/style.css               |  6 +--
 4 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/docs/.vitepress/imgit/server/config/defaults.ts b/docs/.vitepress/imgit/server/config/defaults.ts
index a3fa95572..c96bbba72 100644
--- a/docs/.vitepress/imgit/server/config/defaults.ts
+++ b/docs/.vitepress/imgit/server/config/defaults.ts
@@ -55,5 +55,13 @@ export const defaults: Readonly<Required<Options>> = {
         encode,
         build: builds.build,
         rewrite
+    },
+    style: {
+        className: {
+            image: "imgit-image",
+            animation: "imgit-animation",
+            video: "imgit-video",
+            youtube: "imgit-youtube"
+        }
     }
 };
diff --git a/docs/.vitepress/imgit/server/config/options.ts b/docs/.vitepress/imgit/server/config/options.ts
index 590bf1ec3..4e6dbc89a 100644
--- a/docs/.vitepress/imgit/server/config/options.ts
+++ b/docs/.vitepress/imgit/server/config/options.ts
@@ -49,6 +49,8 @@ export type Options = Record<string, unknown> & {
     build?: BuildOptions;
     /** Configure document transformation process. */
     transform?: TransformOptions;
+    /** Configure generated CSS styles. */
+    style?: StyleOptions;
 };
 
 /** Configures logging behaviour. */
@@ -128,3 +130,18 @@ export type TransformOptions = {
     /** 6th phase: rewrites content of the document with specified assets; returns modified document content. */
     rewrite: (content: string, assets: BuiltAsset[]) => Promise<string>;
 };
+
+/** Configures generated CSS styles. */
+export type StyleOptions = {
+    /** Class names assigned to generated HTML. */
+    className: {
+        /** Class name assigned to generated images HTML; imgit-image by default. */
+        image: string;
+        /** Class name assigned to generated video HTML; imgit-video by default. */
+        video: string;
+        /** Class name assigned to generated animation HTML; imgit-animation by default. */
+        animation: string;
+        /** Class name assigned to generated YouTube HTML; imgit-youtube by default. */
+        youtube: string;
+    }
+}
diff --git a/docs/.vitepress/imgit/server/transform/5-build.ts b/docs/.vitepress/imgit/server/transform/5-build.ts
index 4c739c02c..56a566350 100644
--- a/docs/.vitepress/imgit/server/transform/5-build.ts
+++ b/docs/.vitepress/imgit/server/transform/5-build.ts
@@ -17,30 +17,57 @@ async function buildAsset(asset: EncodedAsset): Promise<BuiltAsset> {
 }
 
 export async function buildImage(asset: EncodedAsset): Promise<string> {
-    const path = platform.path;
-    const src = path.join(buildServeRoot(asset), path.basename(asset.sourceUrl));
+    const { src, encodedSrc } = buildSources(asset);
     const alt = asset.title ?? "";
     const size = buildSizes(asset.sourceInfo);
-    return `<img class="imgit-image" loading="lazy" decoding="async" src="${src}" alt="${alt}" ${size}/>`;
+    const cls = `class="${config.style.className.image}"`;
+    return `
+<picture>
+  ${encodedSrc ? `<source srcset="${encodedSrc}" type="image/avif" ${cls} ${size}/>` : ""}
+  <img loading="lazy" decoding="async" src="${src}" alt="${alt}" ${cls} ${size}/>
+</picture>
+`;
 }
 
 export async function buildAnimation(asset: EncodedAsset): Promise<string> {
-    return buildImage(asset);
+    const { src, encodedSrc } = buildSources(asset);
+    const alt = asset.title ?? "";
+    const size = buildSizes(asset.sourceInfo);
+    const cls = `class="${config.style.className.animation}"`;
+    return `
+<picture>
+  ${encodedSrc ? `<source srcset="${encodedSrc}" type="image/avif" ${cls} ${size}/>` : ""}
+  <img loading="lazy" decoding="async" src="${src}" alt="${alt}" ${cls} ${size}/>
+</picture>
+`;
 }
 
 export async function buildVideo(asset: EncodedAsset): Promise<string> {
-    const path = platform.path;
-    const src = path.join(buildServeRoot(asset), path.basename(asset.sourceUrl));
+    const { src, encodedSrc } = buildSources(asset);
     const size = buildSizes(asset.sourceInfo);
-    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" ${size}>${source}</video>`;
+    const cls = `class="${config.style.className.video}"`;
+    return `
+<video ${cls} preload="none" loop autoplay muted playsinline poster="/assets/img/video-poster.svg" ${size}>
+    ${encodedSrc ? `<source data-src="${encodedSrc}" type="video/mp4; codecs=av01.0.05M.08">` : ""}
+    <source data-src="${src}" type="video/mp4">
+</video>
+`;
 }
 
 export async function buildYouTube(asset: EncodedAsset): Promise<string> {
     const title = asset.title ?? "";
+    const cls = `class="${config.style.className.youtube}"`;
     const id = asset.sourceUrl.split("youtube.com/watch?v=")[1];
     const source = `https://www.youtube-nocookie.com/embed/${id}`;
-    return `<span class="imgit-youtube"><iframe title="${title}" src="${source}" allowfullscreen></iframe></span>`;
+    return `<span ${cls}><iframe title="${title}" src="${source}" allowfullscreen></iframe></span>`;
+}
+
+function buildSources(asset: EncodedAsset) {
+    const path = platform.path;
+    const root = buildServeRoot(asset);
+    const src = path.join(root, path.basename(asset.sourceUrl));
+    const encodedSrc = asset.encodedPath ? path.join(root, path.basename(asset.encodedPath)) : undefined;
+    return { src, encodedSrc };
 }
 
 function buildServeRoot(asset: EncodedAsset): string {
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 21c7e1d68..8528ae6ef 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -312,11 +312,7 @@ table > tfoot:not(:last-child) {
     display: block;
 }
 
-.imgit-image {
-    border-radius: 8px;
-}
-
-.imgit-video {
+.imgit-image, .imgit-animation, .imgit-video {
     border-radius: 8px;
 }