Add responsive and lazy image loading

.vscode/tasks.json

@@ -6,7 +6,7 @@
     {
       "label": "Build & Deploy",
       "type": "shell",
-      "command": "npm run build && rsync -arzP --progress --delete-after --force --update --inplace --times ./build ./package.json ./package-lock.json root@f.bosin.ch:/home/sveltekit"
+      "command": "npm run build && rsync -arzP --progress --delete-after --force --update --inplace --times ./build ./package.json ./package-lock.json ./start.sh root@f.bosin.ch:/home/sveltekit"
     },
     {
       "label": "Restart Server",

package-lock.json

@@ -8,6 +8,8 @@
 			"name": "f.bosin.ch",
 			"version": "0.0.1",
 			"dependencies": {
+				"@vime/core": "^5.4.1",
+				"@vime/svelte": "^5.4.1",
 				"node-stream-zip": "^1.15.0",
 				"sharp": "^0.32.4"
 			},
@@ -22,6 +24,7 @@
 				"prettier-plugin-svelte": "^2.10.1",
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
+				"svelte-preprocess": "^5.0.4",
 				"typescript": "^5.0.0",
 				"vite": "^4.4.2"
 			}
@@ -39,7 +42,6 @@
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
 			"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.0",
 				"@jridgewell/trace-mapping": "^0.3.9"
@@ -493,7 +495,6 @@
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
 			"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.0.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -507,7 +508,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
 			"integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -516,7 +516,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
 			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -524,14 +523,12 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-			"dev": true
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.18",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
 			"integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "3.1.0",
 				"@jridgewell/sourcemap-codec": "1.4.14"
@@ -540,8 +537,7 @@
 		"node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.14",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
-			"dev": true
 		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
@@ -676,6 +672,18 @@
 				}
 			}
 		},
+		"node_modules/@stencil/core": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz",
+			"integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==",
+			"bin": {
+				"stencil": "bin/stencil"
+			},
+			"engines": {
+				"node": ">=12.10.0",
+				"npm": ">=6.0.0"
+			}
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz",
@@ -806,8 +814,12 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
-			"dev": true
+		},
+		"node_modules/@types/fscreen": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@types/fscreen/-/fscreen-1.0.1.tgz",
+			"integrity": "sha512-hV2d0BreihMGtrg+EdAFOIl/O2EL5vhAheHJUztGE/lPFZIN8ZCpGFL8hCbtyi1CfhKjDRCf47sHjP+FwJ4q0Q=="
 		},
 		"node_modules/@types/pug": {
 			"version": "2.0.6",
@@ -821,11 +833,32 @@
 			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
 			"dev": true
 		},
+		"node_modules/@vime/core": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/@vime/core/-/core-5.4.1.tgz",
+			"integrity": "sha512-ZFpV3xqZJ5tvh5rZOYKRh8zFzNIKr2ZcK6L75nJjFjbWt/ZmFF2nMBxtD9/hC4Xjk9v7hp1+P9cmctL674VFgA==",
+			"dependencies": {
+				"@stencil/core": "2.5.2",
+				"@types/fscreen": "^1.0.1",
+				"fscreen": "^1.2.0",
+				"mitt": "^3.0.0",
+				"stencil-wormhole": "^3.4.1"
+			}
+		},
+		"node_modules/@vime/svelte": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/@vime/svelte/-/svelte-5.4.1.tgz",
+			"integrity": "sha512-I0wnPpfkGIsx8149z32nAVBZ2YTjLTLrpnTFNs+6yV07ynvgEDvfTQEa3F6cx4XDerDROBk3nkpB6W6dtdt52Q==",
+			"hasInstallScript": true,
+			"peerDependencies": {
+				"@vime/core": "5.4.1",
+				"svelte": "^3.0.0 || ^4.0.0"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.10.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
 			"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -905,7 +938,6 @@
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
 			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -914,7 +946,6 @@
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
 			"integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1119,7 +1150,6 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.3.tgz",
 			"integrity": "sha512-kVwJELqiILQyG5aeuyKFbdsI1fmQy1Cmf7dQ8eGmVuJoaRVdwey7WaMknr2ZFeVSYSKT0rExsa8EGw0aoI/1QQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.14",
 				"@types/estree": "^1.0.0",
@@ -1132,7 +1162,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -1213,7 +1242,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
 			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
 			"dependencies": {
 				"mdn-data": "2.0.30",
 				"source-map-js": "^1.0.1"
@@ -1292,7 +1320,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -1732,6 +1759,11 @@
 			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
 			"dev": true
 		},
+		"node_modules/fscreen": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
+			"integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg=="
+		},
 		"node_modules/fsevents": {
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -2108,8 +2140,7 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
-			"dev": true
 		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
@@ -2158,8 +2189,7 @@
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-			"dev": true
 		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
@@ -2235,6 +2265,11 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/mitt": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+			"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+		},
 		"node_modules/mkdirp": {
 			"version": "0.5.6",
 			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -2446,7 +2481,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
 			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^3.0.0",
@@ -2457,7 +2491,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -2466,7 +2499,6 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.1.tgz",
 			"integrity": "sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -3104,11 +3136,15 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/stencil-wormhole": {
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/stencil-wormhole/-/stencil-wormhole-3.4.1.tgz",
+			"integrity": "sha512-ppYTcWTJnIl4ZAKwF39LTA9f/ypHfbVefsHdN2hpMQGrR57wt1TieZo9tlCM/r1Y4SFiZ5yz/cjho564C921Xw=="
+		},
 		"node_modules/streamsearch": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -3199,7 +3235,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.1.2.tgz",
 			"integrity": "sha512-/evA8U6CgOHe5ZD1C1W3va9iJG7mWflcCdghBORJaAhD2JzrVERJty/2gl0pIPrJYBGZwZycH6onYf+64XXF9g==",
-			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -3346,7 +3381,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -3355,7 +3389,6 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.1.tgz",
 			"integrity": "sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -3364,7 +3397,6 @@
 			"version": "0.30.2",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.2.tgz",
 			"integrity": "sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			},

package.json

@@ -22,11 +22,14 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-preprocess": "^5.0.4",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
 	},
 	"type": "module",
 	"dependencies": {
+		"@vime/core": "^5.4.1",
+		"@vime/svelte": "^5.4.1",
 		"node-stream-zip": "^1.15.0",
 		"sharp": "^0.32.4"
 	}

src/lib/components/Gallery.svelte

@@ -1,22 +1,19 @@
 <script>
 	import { getFileName } from '$lib/util/links';
   import { strf } from '$lib/data/language.js';
-
+	import Photo from './Photo.svelte';
-  function sortItems() {
-    items.sort((a, b) => {
-      if (a.item < b.item) return -1;
-      if (a.item > b.item) return 1;
-      return 0;
-    });
-  }
 
   /** @type {Item[]} */
   export let items = [];
 
   export let base = '';
+
+  export let layout = 'grid';
 </script>
 
-<section class="gallery">
+<section class="gallery"
+  class:gallery--grid={layout === 'grid'}>
+  {#if layout === 'grid'}
     <ul>
     {#each items as item (item.item)}
       <!-- <Photo src={`${uriBase}&item=${item.item}`} alt={$strf(item.title)} /> -->
@@ -28,10 +25,13 @@
           <b>Links:</b> <a href={`${base}${item.item}`}>Open</a> &bullet; <a href={`${base}${item.item}/download`}>Download</a><br />
           <b>Thumbnails:</b> <a href={`${base}${item.item}/t/s`}>Small</a> &bullet; <a href={`${base}${item.item}/t/m`}>Medium</a> &bullet; <a href={`${base}${item.item}/t/l`}>Large</a> &bullet; <a href={`${base}${item.item}/t/full`}>Full</a>
         </p>
-      <img src={`${base}${item.item}/t`} alt={(item.title ? $strf(item.title) : null) || (item.description ? $strf(item.description) : null) || getFileName(item.item)} />
+        <Photo src={`${base}${item.item}`} alt={(item.title ? $strf(item.title) : null) || (item.description ? $strf(item.description) : null) || getFileName(item.item)} />
       </li>
     {/each}
     </ul>
+  {:else}
+    <i>layout not available</i>
+  {/if}
 </section>
 
 <style>

src/lib/components/Photo.svelte

@@ -11,6 +11,12 @@
    */
   export let alt = undefined;
 
+  /**
+   * Whether the image is the first one in the viewport.
+   * @type {boolean}
+   */
+  export let firstViewport = false;
+
   /**
    * The click handler for the image.
    * @param {MouseEvent} event
@@ -21,10 +27,12 @@
   }
 </script>
 
-<a href="{src}" on:click={clickHandler}>
+<a href={src} on:click={clickHandler}>
-  <figure class="photo">
+  <picture>
-    <img src="{src}" alt="{alt}" />
+    <source media="(min-width: 850px)" srcset="{src}/t/l" />
-  </figure>
+    <source media="(min-width: 450px)" srcset="{src}/t/m" />
+    <img src="{src}/t" {alt} loading={firstViewport ? 'eager' : 'lazy'} />
+  </picture>
 </a>
 
 <style>

src/lib/styles/base.css

@@ -0,0 +1,34 @@
+:root {
+  --main-text-color: #1a1a1a;
+  --main-bg-color: #fff;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --main-text-color: #e7e7e7;
+    --main-bg-color: #1a1a1a;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+  font-size: 1em;
+  font-family: 'Roboto', 'Open Sans', sans-serif;
+}
+
+html,
+body,
+.container,
+.footer {
+  width: 100%;
+  max-width: 100%;
+}
+
+body {
+  font-family: sans-serif;
+  background-color: var(--main-bg-color);
+  color: var(--main-text-color);
+}

src/lib/types.d.ts

@@ -43,5 +43,3 @@ type Album = AlbumMetadata & {
 type ApiError = {
   error: string;
 };
-
-type GetFileFunction = (zipName: string, entryName: string, keepOpen: T) => Promise<T extends true ? { content: Buffer, zip: import('node-stream-zip').StreamZipAsync } : Buffer>;

src/lib/util/album.js

@@ -3,7 +3,14 @@ import StreamZip from "node-stream-zip";
 
 /** @param {string} zipName */
 async function _getZip(zipName) {
-  return new StreamZip.async({ file: `./zip/${zipName}` });
+  let zip = null;
+  try {
+    zip = new StreamZip.async({ file: `./zip/${zipName}` });
+  } catch (err) {
+    console.error(`${err.stack}`.replaceAll('/home/sveltekit', '.'));
+    throw error(404, `Album not found.`);
+  }
+  return zip;
 }
 /** @param {import('node-stream-zip').StreamZipAsync} zip @param {string} entryName */
 async function _getFile(zip, entryName) {

src/routes/+error.svelte

@@ -8,21 +8,10 @@
 </div>
 
 <style>
-  *{
-    margin: 0px 0px 0px 0px;
-    padding: 0px 0px 0px 0px;
-    border: none;
-    outline: none;
-  }
-  :global(body){
-    background-color: #22313F;
-  }
   .container {
-    font-family: Roboto, open-sans, Arial;
     position: fixed;
     top: 50%;
     left: 50%;
-    color: #FFF;
     transform: translate(-50%, -50%);
   }
   a {

src/routes/+layout.svelte

@@ -1,9 +1,5 @@
-<slot />
+<script>
+  import "$lib/styles/base.css";
+</script>
 
-<style>
+<slot />
-  :global(*) {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-</style>

src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { strf } from '$lib/data/language';
+
+  /** @type {import('./$types').PageData} */
+  export let data;
+</script>
+
+<div class="container">
+  {#if data.item}
+    <img class="image" src="{data.filename}/t/full" alt={(data.item.title ? $strf(data.item.title) : null) || (data.item.description ? $strf(data.item.description) : null) || data.filename} />
+  {:else}
+    Deine Mudda
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: grid;
+    place-items: center;
+    height: 100vh;
+  }
+  .image {
+    max-width: 100%;
+    max-height: 100vh;
+  }
+</style>

src/routes/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/+server.js

@@ -1,5 +1,6 @@
 import { getFile } from '$lib/util/album';
 import { getFileName, getFilePath, getZipName } from '$lib/util/links';
+import { error } from '@sveltejs/kit';
 import sharp from 'sharp';
 
 /** @type {import('./$types').RequestHandler} */
@@ -25,6 +26,7 @@ export async function GET({ params }) {
     thumbnail = thumbnail || await sharp(content).resize(width).webp({ quality: 90 }).toBuffer();
   } catch (err) {
     console.error(`${err.stack}`.replaceAll('/home/sveltekit', '.'));
+    throw error(500, 'Error getting thumbnail');
   }
   return new Response(thumbnail, {
     headers: {

src/routes/g/[slug]/[[timestamp]]/i/[...item]/+page.svelte

@@ -1,19 +0,0 @@
-<script>
-	import { strf } from '$lib/data/language';
-
-  /** @type {import('./$types').PageData} */
-  export let data;
-</script>
-
-{#if data.item}
-<img class="image" src="{data.filename}/t/full" alt={(data.item.title ? $strf(data.item.title) : null) || (data.item.description ? $strf(data.item.description) : null) || data.filename} />
-{:else}
-<p>Item not found.</p>
-{/if}
-
-<style>
-  .image {
-    max-width: 100%;
-    max-height: 100%;
-  }
-</style>

start.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+ORIGIN=https://f.bosin.ch/g
+cd /home/sveltekit
+node build

static/vime-default.css

@@ -0,0 +1,4 @@
+vm-player{--vm-color-dark:#313131;--vm-color-gray-100:rgba(0, 0, 0, 0.1);--vm-color-gray-200:rgba(0, 0, 0, 0.27);--vm-color-gray-300:rgba(0, 0, 0, 0.38);--vm-color-gray-500:rgba(0, 0, 0, 0.64);--vm-color-gray-600:rgba(0, 0, 0, 0.7);--vm-color-white-100:rgba(255, 255, 255, 0.1);--vm-color-white-200:rgba(255, 255, 255, 0.27);--vm-color-white-700:rgba(255, 255, 255, 0.87);--vm-fade-transition:opacity 0.3s ease-in-out;--vm-media-z-index:0;--vm-blocker-z-index:1;--vm-ui-z-index:2;--vm-loading-screen-z-index:1;--vm-poster-z-index:5;--vm-scrim-z-index:10;--vm-click-to-play-z-index:20;--vm-dbl-click-fullscreen-z-index:20;--vm-captions-z-index:30;--vm-spinner-z-index:40;--vm-controls-z-index:50;--vm-tooltip-z-index:60;--vm-menu-z-index:70;--vm-skeleton-z-index:100;--vm-player-bg:#000;--vm-player-border-radius:4px;--vm-player-font-family:'Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;--vm-loading-screen-dot-size:12px;--vm-loading-screen-pulse-duration:1.5s;--vm-loading-screen-dot-color:var(
+  --vm-player-theme,
+  var(--vm-color-white-700)
+);--vm-skeleton-color:hsl(0, 10%, 90%);--vm-skeleton-sheen-color:hsl(0, 10%, 97%);--vm-slider-thumb-width:13px;--vm-slider-thumb-height:13px;--vm-slider-thumb-bg:#fff;--vm-slider-thumb-border:2px solid transparent;--vm-slider-track-height:3px;--vm-slider-track-focused-height:5px;--vm-slider-track-color:var(--vm-color-white-200);--vm-slider-value-color:var(--vm-player-theme, #fff);--vm-tooltip-border-radius:3px;--vm-tooltip-font-size:14px;--vm-tooltip-padding:calc(var(--vm-control-spacing) / 1.5);--vm-tooltip-fade-duration:0.2s;--vm-tooltip-fade-timing-func:ease;--vm-tooltip-spacing:14px;--vm-tooltip-box-shadow:0 0 2px var(--vm-color-gray-500);--vm-tooltip-bg:var(--vm-color-dark);--vm-tooltip-color:var(--vm-color-white-700);--vm-spinner-width:80px;--vm-spinner-height:80px;--vm-spinner-thickness:3px;--vm-spinner-fill-color:#fff;--vm-spinner-track-color:var(--vm-color-white-200);--vm-spinner-spin-duration:1.1s;--vm-spinner-spin-timing-func:linear;--vm-scrim-bg:var(--vm-color-gray-300);--vm-captions-text-color:#fff;--vm-captions-font-size:18px;--vm-captions-font-size-medium:22px;--vm-captions-font-size-large:24px;--vm-captions-font-size-xlarge:28px;--vm-captions-cue-bg-color:var(--vm-color-gray-600);--vm-captions-cue-border-radius:2px;--vm-captions-cue-padding:0.2em 0.5em;--vm-controls-bg:transparent;--vm-controls-border-radius:4px;--vm-controls-padding:var(--vm-control-spacing);--vm-controls-spacing:var(--vm-control-spacing);--vm-control-group-spacing:var(--vm-control-spacing);--vm-control-border:0;--vm-control-scale:1;--vm-control-border-radius:3px;--vm-control-spacing:8px;--vm-control-padding:4px;--vm-control-icon-size:28px;--vm-control-color:#fff;--vm-control-tap-highlight:var(--vm-color-white-200);--vm-control-focus-color:#fff;--vm-control-focus-bg:var(--vm-player-theme, var(--vm-color-white-200));--vm-scrubber-loading-stripe-size:25px;--vm-scrubber-buffered-bg:var(--vm-color-white-200);--vm-scrubber-loading-stripe-color:var(--vm-color-white-200);--vm-scrubber-tooltip-spacing:10px;--vm-time-font-size:14px;--vm-time-font-weight:400;--vm-time-color:var(--vm-color-white-700);--vm-menu-color:var(--vm-color-white-700);--vm-menu-bg:var(--vm-color-dark);--vm-menu-font-size:14px;--vm-menu-font-weight:400;--vm-menu-transition:transform 0.25s ease-out;--vm-menu-item-padding:8px;--vm-menu-item-focus-color:var(--vm-menu-color);--vm-menu-item-focus-bg:var(--vm-color-white-100);--vm-menu-item-tap-highlight:var(--vm-color-white-100);--vm-menu-item-hint-color:var(--vm-menu-color);--vm-menu-item-hint-font-size:13px;--vm-menu-item-hint-opacity:0.54;--vm-menu-item-badge-color:var(--vm-menu-color);--vm-menu-item-badge-bg:transparent;--vm-menu-item-badge-font-size:10px;--vm-menu-item-arrow-color:var(--vm-menu-color);--vm-menu-item-check-icon-size:16px;--vm-menu-item-divider-color:var(--vm-color-white-100);--vm-settings-width:275px;--vm-settings-padding:8px;--vm-settings-max-height:75%;--vm-settings-border-radius:2px;--vm-settings-shadow:0 0 8px 2px var(--vm-color-gray-100);--vm-settings-scroll-width:10px;--vm-settings-scroll-thumb-color:var(--vm-color-white-200);--vm-settings-scroll-track-color:var(--vm-menu-bg);--vm-settings-transition:transform 0.2s cubic-bezier(0, 0, 0.4, 1) 0.16s,opacity 0.2s cubic-bezier(0, 0, 0.4, 1) 0.16s}vm-player[video]{--vm-tooltip-spacing:18px}vm-player[mobile],vm-player[touch]{--vm-control-border-radius:50%}vm-player[mobile]{--vm-settings-width:100%;--vm-menu-control-padding:12px calc(var(--vm-control-padding) * 2)}vm-player[audio]{--vm-controls-bg:var(--vm-color-dark);--vm-settings-max-height:200px;--vm-tooltip-spacing:10px}

static/vime-light.css

@@ -0,0 +1 @@
+vm-player[theme=light]{--vm-player-bg:#fff;--vm-player-box-shadow:0 0 8px 2px var(--vm-color-gray-100);--vm-slider-track-color:var(--vm-color-gray-100);--vm-slider-value-color:var(--vm-player-theme, var(--vm-color-dark));--vm-slider-thumb-shadow:0 0 1px var(--vm-color-gray-100),0 0 0 1px var(--vm-color-gray-200);--vm-tooltip-bg:#fff;--vm-tooltip-color:var(--vm-color-dark);--vm-controls-bg:#fff;--vm-control-color:var(--vm-color-dark);--vm-control-tap-highlight:var(--vm-color-gray-100);--vm-control-focus-color:#fff;--vm-control-focus-bg:var(--vm-player-theme, var(--vm-color-dark));--vm-scrubber-buffered-bg:var(--vm-color-gray-100);--vm-scrubber-loading-stripe-color:var(--vm-color-gray-100);--vm-time-color:var(--vm-color-gray-600);--vm-menu-color:var(--vm-color-gray-600);--vm-menu-bg:#fff;--vm-menu-item-focus-bg:var(--vm-color-gray-100);--vm-menu-item-tap-highlight:var(--vm-color-gray-100);--vm-menu-item-divider-color:var(--vm-color-gray-100);--vm-settings-scroll-thumb-color:var(--vm-color-gray-100)}

static/vime.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { Player, Video, DefaultUi } from '@vime/svelte';
+</script>
+
+<Player theme="dark" style="--vm-player-theme: #e86c8b;">
+  <Video crossOrigin={true} poster="https://media.vimejs.com/poster.png">
+    <source data-src="https://media.vimejs.com/720p.mp4" type="video/mp4"/>
+  </Video>
+  <DefaultUi />
+</Player>

svelte.config.js

@@ -6,7 +6,8 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		paths: { base: '/g', }
 	}
 };