Thumbhash images

This commit is contained in:
Jade Ellis 2024-07-16 21:50:00 +01:00
parent 85970c9852
commit 0b350894de
No known key found for this signature in database
GPG key ID: 8705A2A3EBF77BD2
5 changed files with 294 additions and 11 deletions

View file

@ -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) {

View file

@ -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": {

View file

@ -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>

View file

@ -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
// })

251
pnpm-lock.yaml generated
View file

@ -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