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/kit": "^2.63.0",
"@sveltejs/vite-plugin-svelte": "^7.1.2", "@sveltejs/vite-plugin-svelte": "^7.1.2",
"@tailwindcss/vite": "^4.3.0", "@tailwindcss/vite": "^4.3.0",
"@types/node": "^26.2.0",
"svelte": "^5.56.1", "svelte": "^5.56.1",
"svelte-check": "^4.6.0", "svelte-check": "^4.6.0",
"tailwindcss": "^4.3.0", "tailwindcss": "^4.3.0",
@@ -867,6 +868,16 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/@types/trusted-types": {
"version": "2.0.7", "version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -2350,6 +2361,13 @@
"node": ">=14.17" "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": { "node_modules/uqr": {
"version": "0.1.3", "version": "0.1.3",
"resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.3.tgz", "resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.3.tgz",
+1
View File
@@ -18,6 +18,7 @@
"@sveltejs/kit": "^2.63.0", "@sveltejs/kit": "^2.63.0",
"@sveltejs/vite-plugin-svelte": "^7.1.2", "@sveltejs/vite-plugin-svelte": "^7.1.2",
"@tailwindcss/vite": "^4.3.0", "@tailwindcss/vite": "^4.3.0",
"@types/node": "^26.2.0",
"svelte": "^5.56.1", "svelte": "^5.56.1",
"svelte-check": "^4.6.0", "svelte-check": "^4.6.0",
"tailwindcss": "^4.3.0", "tailwindcss": "^4.3.0",
+3
View File
@@ -8,6 +8,9 @@ declare global {
// interface PageState {} // interface PageState {}
// interface Platform {} // interface Platform {}
} }
// Filenames in static/photos, injected at build time (see vite.config.ts).
const __PHOTO_FILES__: string[];
} }
export {}; export {};
+4 -9
View File
@@ -2,14 +2,9 @@
import { backOut, cubicIn } from "svelte/easing"; import { backOut, cubicIn } from "svelte/easing";
import { browser } from "$app/environment"; import { browser } from "$app/environment";
const modules = import.meta.glob( const photoUrls = __PHOTO_FILES__.map(
"../../../assets/photos/*.{jpg,jpeg,png,JPG,JPEG,PNG}", (name) => `/photos/${encodeURIComponent(name)}`,
{ );
eager: true,
import: "default",
query: "?url",
},
) as Record<string, string>;
function shuffle<T>(items: T[]): T[] { function shuffle<T>(items: T[]): T[] {
const result = [...items]; const result = [...items];
@@ -56,7 +51,7 @@
$effect(() => { $effect(() => {
if (!browser) return; if (!browser) return;
photos = shuffle(Object.values(modules)); photos = shuffle(photoUrls);
}); });
$effect(() => { $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 tailwindcss from '@tailwindcss/vite';
import adapter from '@sveltejs/adapter-static'; import adapter from '@sveltejs/adapter-static';
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from '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({ export default defineConfig({
server: { server: {
fs: { allow: ['assets'] } fs: { allow: ['assets'] }
}, },
define: {
__PHOTO_FILES__: JSON.stringify(photoFiles)
},
plugins: [ plugins: [
tailwindcss(), tailwindcss(),
sveltekit({ sveltekit({