Wombosvideo/f.bosin.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive and lazy image loading

Browse Source
This commit is contained in:
Luca Bosin
2023-08-21 22:04:10 +02:00
parent 6ae22b7a9c
commit ca90df83e9
30 changed files with 197 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/tasks.json vendored
View File

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

92
package-lock.json generated
View File

@ -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==",
"dev": true
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"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==",
"dev": true
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
},
"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==",
"dev": true
"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
},
"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==",
"dev": true
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
},
"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==",
"dev": true
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
},
"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"
},

3
package.json
View File

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

48
src/lib/components/Gallery.svelte
View File

@ -1,37 +1,37 @@
<script>
import { getFileName } from '$lib/util/links';
import { strf } from '$lib/data/language.js';
function sortItems() {
items.sort((a, b) => {
if (a.item < b.item) return -1;
if (a.item > b.item) return 1;
return 0;
});
}
import Photo from './Photo.svelte';
/** @type {Item[]} */
export let items = [];
export let base = '';
export let layout = 'grid';
</script>
<section class="gallery">
<ul>
{#each items as item (item.item)}
<!-- <Photo src={`${uriBase}&item=${item.item}`} alt={$strf(item.title)} /> -->
<li>
<h3>{item.item}</h3>
<p>
<b>Title:</b> {#if item.title}{$strf(item.title)}{:else}<i>no title</i>{/if}<br />
<b>Description:</b> {#if item.description}{$strf(item.description)}{:else}<i>no description</i>{/if}<br />
<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)} />
</li>
{/each}
</ul>
<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)} /> -->
<li>
<h3>{item.item}</h3>
<p>
<b>Title:</b> {#if item.title}{$strf(item.title)}{:else}<i>no title</i>{/if}<br />
<b>Description:</b> {#if item.description}{$strf(item.description)}{:else}<i>no description</i>{/if}<br />
<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>
<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>

16
src/lib/components/Photo.svelte
View File

@ -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}>
<figure class="photo">
<img src="{src}" alt="{alt}" />
</figure>
<a href={src} on:click={clickHandler}>
<picture>
<source media="(min-width: 850px)" srcset="{src}/t/l" />
<source media="(min-width: 450px)" srcset="{src}/t/m" />
<img src="{src}/t" {alt} loading={firstViewport ? 'eager' : 'lazy'} />
</picture>
</a>
<style>

34
src/lib/styles/base.css Normal file
View File

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

2
src/lib/types.d.ts vendored
View File

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

9
src/lib/util/album.js
View File

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

11
src/routes/+error.svelte
View File

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

12
src/routes/+layout.svelte
View File

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

0
src/routes/g/+page.svelte → src/routes/+page.svelte
View File

0
src/routes/g/[slug]/[[timestamp]]/+page.js → src/routes/[slug]/[[timestamp]]/+page.server.js
View File

0
src/routes/g/[slug]/[[timestamp]]/+page.svelte → src/routes/[slug]/[[timestamp]]/+page.svelte
View File

0
src/routes/g/[slug]/[[timestamp]]/.album → src/routes/[slug]/[[timestamp]]/.album
View File

0
src/routes/g/[slug]/[[timestamp]]/download/+server.js → src/routes/[slug]/[[timestamp]]/download/+server.js
View File

0
src/routes/g/[slug]/[[timestamp]]/i/[...item]/+page.js → src/routes/[slug]/[[timestamp]]/i/[...item]/+page.server.js
View File

26
src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte Normal file
View File

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

0
src/routes/g/[slug]/[[timestamp]]/i/[...item]/.image-frame → src/routes/[slug]/[[timestamp]]/i/[...item]/.image-frame
View File

0
src/routes/g/[slug]/[[timestamp]]/i/[...item]/download/+server.js → src/routes/[slug]/[[timestamp]]/i/[...item]/download/+server.js
View File

2
src/routes/g/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/+server.js → src/routes/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/+server.js
View File

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

0
src/routes/g/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/.thumbnail → src/routes/[slug]/[[timestamp]]/i/[...item]/t/[[width]]/.thumbnail
View File

0
src/routes/g/[slug]/[[timestamp]]/random/+server.js → src/routes/[slug]/[[timestamp]]/random/+server.js
View File

0
src/routes/g/.gallery
View File

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

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

4
start.sh Executable file
View File

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

BIN
static/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

4
static/vime-default.css Normal file
View File

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

1
static/vime-light.css Normal file
View File

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

10
static/vime.svelte Normal file
View File

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

3
svelte.config.js
View File

@ -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', }
}
};