feat(ui): add photo file handling in Vite config

* include new image assets in static/photos
* define __PHOTO_FILES__ for dynamic photo URLs
* update package.json and package-lock.json with @types/node
This commit is contained in:
2026-08-12 00:30:27 +02:00
parent 1377d2791c
commit 89f19cc048
39 changed files with 37 additions and 9 deletions
+18
View File
@@ -14,6 +14,7 @@
"@sveltejs/kit": "^2.63.0",
"@sveltejs/vite-plugin-svelte": "^7.1.2",
"@tailwindcss/vite": "^4.3.0",
"@types/node": "^26.2.0",
"svelte": "^5.56.1",
"svelte-check": "^4.6.0",
"tailwindcss": "^4.3.0",
@@ -867,6 +868,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/node": {
"version": "26.2.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-26.2.0.tgz",
"integrity": "sha512-5IviulTZeRNp2vAJ514cc/HUlY5nZ9fCbq9DMyC52BrhFZACo3nI0R7qBxhQmo/d27NFe96ur/b7Wwxklda+kg==",
"dev": true,
"license": "MIT",
"dependencies": {
"undici-types": "~8.3.0"
}
},
"node_modules/@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -2350,6 +2361,13 @@
"node": ">=14.17"
}
},
"node_modules/undici-types": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
"integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
"dev": true,
"license": "MIT"
},
"node_modules/uqr": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.3.tgz",
+1
View File
@@ -18,6 +18,7 @@
"@sveltejs/kit": "^2.63.0",
"@sveltejs/vite-plugin-svelte": "^7.1.2",
"@tailwindcss/vite": "^4.3.0",
"@types/node": "^26.2.0",
"svelte": "^5.56.1",
"svelte-check": "^4.6.0",
"tailwindcss": "^4.3.0",
+3
View File
@@ -8,6 +8,9 @@ declare global {
// interface PageState {}
// interface Platform {}
}
// Filenames in static/photos, injected at build time (see vite.config.ts).
const __PHOTO_FILES__: string[];
}
export {};
+4 -9
View File
@@ -2,14 +2,9 @@
import { backOut, cubicIn } from "svelte/easing";
import { browser } from "$app/environment";
const modules = import.meta.glob(
"../../../assets/photos/*.{jpg,jpeg,png,JPG,JPEG,PNG}",
{
eager: true,
import: "default",
query: "?url",
},
) as Record<string, string>;
const photoUrls = __PHOTO_FILES__.map(
(name) => `/photos/${encodeURIComponent(name)}`,
);
function shuffle<T>(items: T[]): T[] {
const result = [...items];
@@ -56,7 +51,7 @@
$effect(() => {
if (!browser) return;
photos = shuffle(Object.values(modules));
photos = shuffle(photoUrls);
});
$effect(() => {

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 91 KiB

Before

Width:  |  Height:  |  Size: 273 KiB

After

Width:  |  Height:  |  Size: 273 KiB

Before

Width:  |  Height:  |  Size: 307 KiB

After

Width:  |  Height:  |  Size: 307 KiB

+11
View File
@@ -1,12 +1,23 @@
import { readdirSync } from 'node:fs';
import tailwindcss from '@tailwindcss/vite';
import adapter from '@sveltejs/adapter-static';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
// Background photos live in static/photos so Vite copies them verbatim
// (original filenames, no content hash) instead of running them through the
// module asset pipeline.
const photoFiles = readdirSync('static/photos').filter((name) =>
/\.(jpe?g|png)$/i.test(name)
);
export default defineConfig({
server: {
fs: { allow: ['assets'] }
},
define: {
__PHOTO_FILES__: JSON.stringify(photoFiles)
},
plugins: [
tailwindcss(),
sveltekit({