Thumbhash images

packages/website/mdsvex.config.js

@@ -240,7 +240,10 @@ function vite_images_rehype(opts) {
 
         // console.log(tree)
         visit(tree, { tagName: "img" }, (node) => {
-            node.properties.src = `{${transformUrl(node.properties.src)}}`
+            let url = node.properties.src;
+            url = (url.includes("?") ? url + "&" : url + "?") + "url";
+            
+            node.properties.src = `{${transformUrl(url)}}`
             // new URL('./img.png', import.meta.url).href
             // vFile.data.headings.push({
             //     level: node.depth,
@@ -248,10 +251,12 @@ function vite_images_rehype(opts) {
             // });
         });
         visit(tree, { tagName: "Components.img" }, (node) => {
-            // let url = node.properties.src;
-            // url.includes("?") ? url = url + "&svex-enhanced" : url + "?svex-enhanced";
+            let url = node.properties.src;
+            let thumb = (url.includes("?") ? url + "&" : url + "?") + "thumb";
+            url = (url.includes("?") ? url + "&" : url + "?") + "url";
 
-            node.properties.src = `{${transformUrl(node.properties.src)}}`
+            node.properties.src = `{${transformUrl(url)}}`
+            node.properties.thumb = `{${transformUrl(thumb)}}`
             // node.properties.src = `{new URL('${url}', import.meta.url)}`
             // new URL('./img.png', import.meta.url).href
             // vFile.data.headings.push({
@@ -261,8 +266,8 @@ function vite_images_rehype(opts) {
         });
 
         let scripts = "";
-        // urls.forEach((x) => (scripts += `import ${x.id} from "${(x.path.includes("?") ? x.path + "&" : x.path + "?") + "url"}";\n`));
-        urls.forEach((x) => (scripts += `const ${x.id} = new URL("${x.path}", import.meta.url);\n`));
+        urls.forEach((x) => (scripts += `import ${x.id} from "./${x.path}";\n`));
+        // urls.forEach((x) => (scripts += `const ${x.id} = new URL("${x.path}", import.meta.url);\n`));
         // console.log(scripts)
         // urls.forEach((x) => {
         //     if (x.meta) {

packages/website/package.json

@@ -50,7 +50,8 @@
     "unist-util-visit": "^5.0.0",
     "vite": "^5.3.1",
     "vite-plugin-dynamic-import": "^1.5.0",
-    "vite-plugin-image-optimizer": "^1.1.8"
+    "vite-plugin-image-optimizer": "^1.1.8",
+    "vite-plugin-thumbhash": "^0.1.6"
   },
   "type": "module",
   "dependencies": {

packages/website/src/lib/htmlComponents/img.svelte

@@ -2,14 +2,23 @@
     export let src;
     export let alt;
     export let title;
-    let className = ""
+    export let thumb;
+    console.log("imgcmp", thumb);
+    let className = "";
     export { className as class };
     // console.log(src)
     // import _PastedImage20240716123726Png from "./Pasted%20image%2020240716123726.png?meta";
 </script>
 
 <figure class={className}>
-    <img {src} {alt} {title} />
+    <img
+        {src}
+        {alt}
+        {title}
+        width={thumb?.originalWidth}
+        height={thumb?.originalHeight}
+        style:background-image="url('{thumb?.thumbSrc}')"
+    />
     {#if title}
         <figcaption>{title}</figcaption>
     {/if}
@@ -18,6 +27,9 @@
 <style>
     img {
         max-height: 60vh;
+        background-size: cover;
+        width: auto;
+        height: auto;
         display: block;
         margin-inline: auto;
     }
@@ -25,8 +37,7 @@
         text-align: center;
     }
     figcaption {
-
         font-size: 0.95em;
-        margin-block: calc(var(--spacing)/2);
+        margin-block: calc(var(--spacing) / 2);
     }
 </style>

packages/website/vite.config.ts

@@ -9,6 +9,7 @@ import { mdsvex } from 'mdsvex';
 import mdsvexConfig from "./mdsvex.config.js";
 import { extname } from 'node:path';
 
+import { thumbHash } from 'vite-plugin-thumbhash'
 // import { imagetools } from 'vite-imagetools'
 
 function mdsvex_transform() {
@@ -25,6 +26,18 @@ function mdsvex_transform() {
         }
     };
 }
+// export const blurRE = /(\?|&)blurhash(?:&|$)/
+// function blurhash_transform() {
+//     return {
+//         name: "blurhash transformer",
+//         async transform(code: string, id: string) {
+//             if (!blurRE.test(id)) return; 
+//             console.log(id.includes("blurhash"), id)
+//             return code;
+//             // return `export default \`${c.replace(/`/g, "\\`").trim()}\`;`;
+//         }
+//     };
+// }
 const fallback: {[key: string]: string} = {
 	'.avif': 'png',
 	'.gif': 'gif',
@@ -43,6 +56,7 @@ export default defineConfig({
         }
     },
     plugins: [
+        // blurhash_transform(),
         typeAsJsonSchemaPlugin(),
         ViteImageOptimizer({
             /* pass your config */
@@ -76,6 +90,7 @@ export default defineConfig({
     }
   }
         }),
+        thumbHash(),
         // dynamicImportVars({
         //   // options
         // })