diff --git a/packages/website/mdsvex.config.js b/packages/website/mdsvex.config.js index bcadeaf1..db975a47 100644 --- a/packages/website/mdsvex.config.js +++ b/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) { diff --git a/packages/website/package.json b/packages/website/package.json index 3fe075a1..46c60463 100644 --- a/packages/website/package.json +++ b/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": { diff --git a/packages/website/src/lib/htmlComponents/img.svelte b/packages/website/src/lib/htmlComponents/img.svelte index bd8dbd5e..def7f2b2 100644 --- a/packages/website/src/lib/htmlComponents/img.svelte +++ b/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";
- + {#if title}
{title}
{/if} @@ -18,6 +27,9 @@ diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts index 9a7b99b6..70d440ad 100644 --- a/packages/website/vite.config.ts +++ b/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 // }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3cd1ab9b..503642c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -203,6 +203,9 @@ importers: vite-plugin-image-optimizer: specifier: ^1.1.8 version: 1.1.8(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1)) + vite-plugin-thumbhash: + specifier: ^0.1.6 + version: 0.1.6(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1)) packages: @@ -550,6 +553,64 @@ packages: '@lezer/lr@1.4.1': resolution: {integrity: sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==} + '@napi-rs/canvas-android-arm64@0.1.53': + resolution: {integrity: sha512-2YhxfVsZguATlRWE0fZdTx35SE9+r5D7HV5GPNDataZOKmHf+zZ5//dspuuBSbOriQdoicaFrgXKCUqI0pK3WQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [android] + + '@napi-rs/canvas-darwin-arm64@0.1.53': + resolution: {integrity: sha512-ls+CWLMusf4RAGo5BvIIzA6dNcc0elwVp6LKjHfQECHA8KKmvdB58YuE5BQcTlb2rzk0SEKtBC/Th3NI2oNdfg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + + '@napi-rs/canvas-darwin-x64@0.1.53': + resolution: {integrity: sha512-ZAgcoCH5+5OKS2P8Lxx+jbkAPKkyLD2x6OvSrHg1U6ppdxmLA+CkJlRl8w45HCXwuyIiP7OeymECRtiNYTwznQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + + '@napi-rs/canvas-linux-arm-gnueabihf@0.1.53': + resolution: {integrity: sha512-p9km/3C/loDxu3AvA8/vtpIS1BGMd/Ehkl2Iu/v/Gw8N/KUIt3HUvTS7AKApyVE28bxTfq96wJQjtcT8jzDncw==} + engines: {node: '>= 10'} + cpu: [arm] + os: [linux] + + '@napi-rs/canvas-linux-arm64-gnu@0.1.53': + resolution: {integrity: sha512-QKK+sykEiYwjwd+ogyLcpcnH38DNZ8KViBlnfEpoGA2Wa+21/cWQKfMxnbgb/rbvm5tazJinZcihFvH577WQ5g==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + + '@napi-rs/canvas-linux-arm64-musl@0.1.53': + resolution: {integrity: sha512-2N41U0X8RnrTKzpTtPv1ozlYkJtPsUdbfF3uP/KEd/BsULGd8Y8ghkGMS6CM+821au4ex0dPrWOOdT9wC1rSqQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + + '@napi-rs/canvas-linux-x64-gnu@0.1.53': + resolution: {integrity: sha512-7XjuTvDKCODtf/vMwF43VGDrjfgwYKgS91ggdcX3UrJaBYWyWu/+eqNvNj+zdXSe/0x+YOjf5jG4m8xIXdBMQA==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + + '@napi-rs/canvas-linux-x64-musl@0.1.53': + resolution: {integrity: sha512-970WEvB8vmj+uxvgdBZ+AGFV7uq9GJhXrqG5PGQ5lWciHX0P0d/OhS2F7TITgFR0LsKDQZ7XQgzMxsYOfwZ0FQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + + '@napi-rs/canvas-win32-x64-msvc@0.1.53': + resolution: {integrity: sha512-rLFQCSJaWg/sv54Aap9nAhaodi4Vyb4un50EgW+PNkk8icMziU6KLRKirGBdQr9ZdxnshAPeQXD1g2ArStujKA==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + + '@napi-rs/canvas@0.1.53': + resolution: {integrity: sha512-XsEZi97+kKykmAiPpY+IpZoHxJY1srqFZp8jDt1/RySzC0kB0iZYt/VMIFqQKpLCARZjD7SOAz2AULtwYlesCA==} + engines: {node: '>= 10'} + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2142,6 +2203,88 @@ packages: engines: {node: '>=10'} hasBin: true + thumbhash-node-android-arm-eabi@0.1.3: + resolution: {integrity: sha512-xiT17jBTetB+TWMhJDDAVBQPQUVvpdQm39Eg1JCq9guY6/Mzt+GgSUzAveGF1pAt7Jif/zc1Ipcm6sfOWBZwIQ==} + engines: {node: '>= 10'} + cpu: [arm] + os: [android] + + thumbhash-node-android-arm64@0.1.3: + resolution: {integrity: sha512-rpeWM7Z3EGnhTEI+mXOEP8cxpkqXZSPhV83T1Joa/UsZgXraQ/247rUxPVPzpEC/fwHmInvmxg5Lic+6lBFiyg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [android] + + thumbhash-node-darwin-arm64@0.1.3: + resolution: {integrity: sha512-McVwFidx7VbmkYbjpD3VR6v1kyEt+nNPnbH1KUYOeDf2nvqjEDmVoVq7wp0uru6zms17Qel4wOkaaF4xbd7M8A==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + + thumbhash-node-darwin-x64@0.1.3: + resolution: {integrity: sha512-2N2oVSDr9Q6HZliuVEc48FpEdPqWxxv1DwcX0KwsE7SEduH3T7UOFvOoEhwe1ViLAhU/LM9KVbI4EpBsgCFndA==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + + thumbhash-node-freebsd-x64@0.1.3: + resolution: {integrity: sha512-8CXIYYMP/nMkVKFqt++YfVuatuBOQv/cpzhrOr0kilmn6IbUEIxK909eeZ8l27SxVubdfPnaORtV6aB3VbTsmQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [freebsd] + + thumbhash-node-linux-arm-gnueabihf@0.1.3: + resolution: {integrity: sha512-0puL2Owq8HUhSK517tLhWlxOLwg2Frvgee47WYU+grIOJEWNhT5xRenM7jvtvn3ABoP/9TbDO5B81gmB1JcsWw==} + engines: {node: '>= 10'} + cpu: [arm] + os: [linux] + + thumbhash-node-linux-arm64-gnu@0.1.3: + resolution: {integrity: sha512-lowvXaSaqwc/bghNLckMZQD+wjSZFaaK0mEJgv94QbbKMZkYKU7ELh28q1v/mSMsFLB3etsxP+10dbrmkUoXog==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + + thumbhash-node-linux-arm64-musl@0.1.3: + resolution: {integrity: sha512-1k4GXQA/iXD5hPPahOW1rNXyYWnc3C/Srp1UtdrqsH8A/rXIe6bPqaCKNr30GAcIifx1PoZIpvvEqfO14hqr3Q==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + + thumbhash-node-linux-x64-gnu@0.1.3: + resolution: {integrity: sha512-5gtw1mJIPGG/fpFvPCv7CmN3hkvdDCU+wHe8Mnhq1r8Z+Vu/Rizx4Uxzqqo2QBGxZLHDbR/l24R0+8Oo4rV77w==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + + thumbhash-node-linux-x64-musl@0.1.3: + resolution: {integrity: sha512-2qI7KARyY6kRgSEAvAi6rxYRS9GKO2JPyc9/Q/ai29IdJSvAXgnnvGZDJ6xdv7wzRwE9sjQoY1iME7AvM1x6Bw==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + + thumbhash-node-win32-arm64-msvc@0.1.3: + resolution: {integrity: sha512-Q1Gh3JLL8Y/2zenQH44WitoMCi9juHgX9HXoDvtHwEzthbFpehYozMTFjZh5trttKDUeW9qWb26YYSBVXYys/g==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + + thumbhash-node-win32-ia32-msvc@0.1.3: + resolution: {integrity: sha512-Wppy5xD05j7fks0gd4khE9JAXJtmmsPwvVuRHO+ftGWfVaYG44mcIZgygt6WqNSyXnyqXO4X9wuCJtoOtO8Xwg==} + engines: {node: '>= 10'} + cpu: [ia32] + os: [win32] + + thumbhash-node-win32-x64-msvc@0.1.3: + resolution: {integrity: sha512-yz6XkszxbVnICc6NWVHHExzjoUvrRkbCUeeETnVDSJJgo3XYw7Ak04Z6XPmyd700+dJp/Lgi+qumQbdAXqGZBA==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + + thumbhash-node@0.1.3: + resolution: {integrity: sha512-jP/j1zoNbTcYxN9wMaKU4WZYg+UIdY/hsCS8sKsiOmfK3VVmxProa3WE58rZ2yHafKEnK8wLWCqOjhdIB66SWQ==} + engines: {node: '>= 10'} + tiny-glob@0.2.9: resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==} @@ -2268,6 +2411,11 @@ packages: peerDependencies: vite: '>=3' + vite-plugin-thumbhash@0.1.6: + resolution: {integrity: sha512-T77tRokb8Q/xH9gJLfnpQU3Fpq6YW7bVZN01EFRNhtma+5FmigjA++TN53vc6kGRaqN7OLhp4Y+EE6nDgCrE1A==} + peerDependencies: + vite: '>=2.9.5' + vite@5.3.1: resolution: {integrity: sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==} engines: {node: ^18.0.0 || >=20.0.0} @@ -2627,6 +2775,45 @@ snapshots: dependencies: '@lezer/common': 1.2.1 + '@napi-rs/canvas-android-arm64@0.1.53': + optional: true + + '@napi-rs/canvas-darwin-arm64@0.1.53': + optional: true + + '@napi-rs/canvas-darwin-x64@0.1.53': + optional: true + + '@napi-rs/canvas-linux-arm-gnueabihf@0.1.53': + optional: true + + '@napi-rs/canvas-linux-arm64-gnu@0.1.53': + optional: true + + '@napi-rs/canvas-linux-arm64-musl@0.1.53': + optional: true + + '@napi-rs/canvas-linux-x64-gnu@0.1.53': + optional: true + + '@napi-rs/canvas-linux-x64-musl@0.1.53': + optional: true + + '@napi-rs/canvas-win32-x64-msvc@0.1.53': + optional: true + + '@napi-rs/canvas@0.1.53': + optionalDependencies: + '@napi-rs/canvas-android-arm64': 0.1.53 + '@napi-rs/canvas-darwin-arm64': 0.1.53 + '@napi-rs/canvas-darwin-x64': 0.1.53 + '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.53 + '@napi-rs/canvas-linux-arm64-gnu': 0.1.53 + '@napi-rs/canvas-linux-arm64-musl': 0.1.53 + '@napi-rs/canvas-linux-x64-gnu': 0.1.53 + '@napi-rs/canvas-linux-x64-musl': 0.1.53 + '@napi-rs/canvas-win32-x64-msvc': 0.1.53 + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -4538,6 +4725,61 @@ snapshots: commander: 2.20.3 source-map-support: 0.5.21 + thumbhash-node-android-arm-eabi@0.1.3: + optional: true + + thumbhash-node-android-arm64@0.1.3: + optional: true + + thumbhash-node-darwin-arm64@0.1.3: + optional: true + + thumbhash-node-darwin-x64@0.1.3: + optional: true + + thumbhash-node-freebsd-x64@0.1.3: + optional: true + + thumbhash-node-linux-arm-gnueabihf@0.1.3: + optional: true + + thumbhash-node-linux-arm64-gnu@0.1.3: + optional: true + + thumbhash-node-linux-arm64-musl@0.1.3: + optional: true + + thumbhash-node-linux-x64-gnu@0.1.3: + optional: true + + thumbhash-node-linux-x64-musl@0.1.3: + optional: true + + thumbhash-node-win32-arm64-msvc@0.1.3: + optional: true + + thumbhash-node-win32-ia32-msvc@0.1.3: + optional: true + + thumbhash-node-win32-x64-msvc@0.1.3: + optional: true + + thumbhash-node@0.1.3: + optionalDependencies: + thumbhash-node-android-arm-eabi: 0.1.3 + thumbhash-node-android-arm64: 0.1.3 + thumbhash-node-darwin-arm64: 0.1.3 + thumbhash-node-darwin-x64: 0.1.3 + thumbhash-node-freebsd-x64: 0.1.3 + thumbhash-node-linux-arm-gnueabihf: 0.1.3 + thumbhash-node-linux-arm64-gnu: 0.1.3 + thumbhash-node-linux-arm64-musl: 0.1.3 + thumbhash-node-linux-x64-gnu: 0.1.3 + thumbhash-node-linux-x64-musl: 0.1.3 + thumbhash-node-win32-arm64-msvc: 0.1.3 + thumbhash-node-win32-ia32-msvc: 0.1.3 + thumbhash-node-win32-x64-msvc: 0.1.3 + tiny-glob@0.2.9: dependencies: globalyzer: 0.1.0 @@ -4713,6 +4955,15 @@ snapshots: pathe: 1.1.2 vite: 5.3.1(@types/node@20.14.2)(terser@5.31.1) + vite-plugin-thumbhash@0.1.6(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1)): + dependencies: + '@napi-rs/canvas': 0.1.53 + '@rollup/pluginutils': 5.1.0(rollup@4.18.0) + thumbhash-node: 0.1.3 + vite: 5.3.1(@types/node@20.14.2)(terser@5.31.1) + transitivePeerDependencies: + - rollup + vite@5.3.1(@types/node@20.14.2)(terser@5.31.1): dependencies: esbuild: 0.21.5