feat(export): single-file offline keepsake viewer + guest download

Rebuild the guest "keepsake" (offline HTML gallery) so it renders when the extracted index.html is opened over file://. Browsers block external ES-module scripts and fetch() at origin null, so a normal multi-file SvelteKit build shows a blank window. Build the viewer as one self-contained index.html (inlined JS/CSS via vite-plugin-singlefile, standalone non-SvelteKit entry) and inject the data as window.__EXPORT_DATA__; the backend embeds the built viewer via include_dir! and writes the data global into index.html when zipping. Also surface the guest-facing download: a feed banner and the BottomNav Export tab, both shown once the host releases the export. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-18 17:28:54 +02:00
parent f243bfe89a
commit 3654aca18b
26 changed files with 271 additions and 92 deletions
--- a/frontend/export-viewer/index.html
+++ b/frontend/export-viewer/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>EventSnap — Galerie</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/standalone.ts"></script>
+	</body>
+</html>
--- a/frontend/export-viewer/package-lock.json
+++ b/frontend/export-viewer/package-lock.json
@@ -15,7 +15,8 @@
 				"svelte": "^5.54.0",
 				"tailwindcss": "^4.2.2",
 				"typescript": "^5.9.3",
-				"vite": "^7.3.1"
+				"vite": "^7.3.1",
+				"vite-plugin-singlefile": "^2.3.3"
 			}
 		},
 		"node_modules/@esbuild/aix-ppc64": {
@@ -1318,6 +1319,19 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/braces": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fill-range": "^7.1.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/clsx": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1457,6 +1471,19 @@
 				}
 			}
 		},
+		"node_modules/fill-range": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"to-regex-range": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1479,6 +1506,16 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/is-number": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.12.0"
+			}
+		},
 		"node_modules/is-reference": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
@@ -1787,6 +1824,33 @@
 				"@jridgewell/sourcemap-codec": "^1.5.5"
 			}
 		},
+		"node_modules/micromatch": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"braces": "^3.0.3",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=8.6"
+			}
+		},
+		"node_modules/micromatch/node_modules/picomatch": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+			"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/mrmime": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -2021,6 +2085,19 @@
 				"url": "https://github.com/sponsors/SuperchupuDev"
 			}
 		},
+		"node_modules/to-regex-range": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-number": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -2122,6 +2199,28 @@
 				}
 			}
 		},
+		"node_modules/vite-plugin-singlefile": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-2.3.3.tgz",
+			"integrity": "sha512-XVnGH0QzbOa8fxRSsHdCarVN1BSBXNi7uLMQYlrGRN5apdHkk62XQWRJhVever0lnfuyBkwn+kvVChdm/OoOUg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"micromatch": "^4.0.8"
+			},
+			"engines": {
+				"node": ">18.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^4.59.0",
+				"vite": "^5.4.21 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/vitefu": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.3.tgz",
--- a/frontend/export-viewer/package.json
+++ b/frontend/export-viewer/package.json
@@ -5,7 +5,8 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build --config vite.standalone.config.js",
+		"build:sveltekit": "vite build",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''"
 	},
@@ -17,6 +18,7 @@
 		"svelte": "^5.54.0",
 		"tailwindcss": "^4.2.2",
 		"typescript": "^5.9.3",
-		"vite": "^7.3.1"
+		"vite": "^7.3.1",
+		"vite-plugin-singlefile": "^2.3.3"
 	}
 }
--- a/frontend/export-viewer/src/routes/+page.svelte
+++ b/frontend/export-viewer/src/routes/+page.svelte
@@ -99,9 +99,18 @@

 	onMount(async () => {
 		try {
-			const res = await fetch('./data.json');
-			if (!res.ok) throw new Error(`HTTP ${res.status}`);
-			data = await res.json();
+			// The keepsake is opened by double-clicking index.html (file://), where a
+			// cross-origin `fetch()` is blocked. The export injects the data as a global
+			// so it's available without any network request; fall back to fetching
+			// data.json only when the viewer is actually served over http(s).
+			const injected = (globalThis as { __EXPORT_DATA__?: ViewerData }).__EXPORT_DATA__;
+			if (injected) {
+				data = injected;
+			} else {
+				const res = await fetch('./data.json');
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				data = await res.json();
+			}
 		} catch {
 			error =
 				'Daten konnten nicht geladen werden. Stelle sicher, dass data.json im selben Ordner liegt.';
--- a/frontend/export-viewer/src/standalone.ts
+++ b/frontend/export-viewer/src/standalone.ts
@@ -0,0 +1,8 @@
+// Standalone (non-SvelteKit) entry for the offline keepsake. Mounts the plain
+// Svelte viewer component into a single, self-contained index.html so it works
+// when opened by double-clicking from an extracted ZIP (file://).
+import './app.css';
+import { mount } from 'svelte';
+import App from './routes/+page.svelte';
+
+mount(App, { target: document.getElementById('app')! });
--- a/frontend/export-viewer/vite.config.js
+++ b/frontend/export-viewer/vite.config.js
@@ -0,0 +1,10 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+// NOTE: the production keepsake is built with `vite.standalone.config.js`
+// (see `npm run build`), which inlines everything into a single, file://-safe
+// index.html. This SvelteKit config is kept only for `npm run dev`/`preview`.
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});
--- a/frontend/export-viewer/vite.standalone.config.js
+++ b/frontend/export-viewer/vite.standalone.config.js
@@ -0,0 +1,25 @@
+import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import tailwindcss from '@tailwindcss/vite';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+import { defineConfig } from 'vite';
+import { fileURLToPath } from 'node:url';
+
+// Builds the keepsake viewer as ONE self-contained index.html (all JS + CSS
+// inlined) so it renders when opened via file://. Uses the plain Svelte plugin
+// (not SvelteKit) because SvelteKit emits multiple module entry points, which
+// cannot be inlined into a single file.
+export default defineConfig({
+	plugins: [
+		tailwindcss(),
+		svelte({ configFile: false, preprocess: vitePreprocess(), compilerOptions: { runes: true } }),
+		viteSingleFile()
+	],
+	resolve: {
+		alias: { $lib: fileURLToPath(new URL('./src/lib', import.meta.url)) }
+	},
+	build: {
+		outDir: fileURLToPath(new URL('../../backend/static/export-viewer', import.meta.url)),
+		emptyOutDir: true,
+		target: 'es2020'
+	}
+});