Compare commits

...

2 Commits

Author SHA1 Message Date
177e2c8fca
update to fix vite vulns 2024-01-22 14:16:24 +01:00
7ec94246f0
Card is now fully loaded in itself
No longer do we have this weird shift of the description to the right of
the Card until some magical JS is loaded to fix it.
Not yet perfect: The now wrapping a-tag is for some reason still weirdly
sent to client until some js cleans it up. Currently results in a too
large gap which is fixed by local js.

Still TODO: do not blur images if no js present
2024-01-22 14:13:56 +01:00
2 changed files with 248 additions and 70 deletions

247
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@sveltejs/adapter-node": "^1.3.1", "@sveltejs/adapter-node": "^1.3.1",
"argon2": "^0.30.3", "argon2": "^0.30.3",
"cheerio": "1.0.0-rc.12",
"jsonwebtoken": "^9.0.1", "jsonwebtoken": "^9.0.1",
"mongoose": "^7.4.0", "mongoose": "^7.4.0",
"sharp": "^0.32.3", "sharp": "^0.32.3",
@ -357,9 +358,9 @@
} }
}, },
"node_modules/@fastify/busboy": { "node_modules/@fastify/busboy": {
"version": "2.0.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.0.0.tgz", "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
"integrity": "sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==", "integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==",
"engines": { "engines": {
"node": ">=14" "node": ">=14"
} }
@ -579,24 +580,24 @@
} }
}, },
"node_modules/@sveltejs/kit": { "node_modules/@sveltejs/kit": {
"version": "1.25.1", "version": "1.30.3",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.25.1.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.3.tgz",
"integrity": "sha512-pD8XsvNJNgTNkFngNlM60my/X8dXWPKVzN5RghEQr0NjGZmuCjy49AfFu2cGbZjNf5pBcqd2RCNMW912P5fkhA==", "integrity": "sha512-0DzVXfU4h+tChFvoc8C61IqErCyskD4ydSIDjpKS2lYlEzIYrtYrY7juSqACFxqcvZAnOEXvSY+zZ8br0+ZMMg==",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte": "^2.4.1", "@sveltejs/vite-plugin-svelte": "^2.5.0",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.3.1", "devalue": "^4.3.1",
"esm-env": "^1.0.0", "esm-env": "^1.0.0",
"kleur": "^4.1.5", "kleur": "^4.1.5",
"magic-string": "^0.30.0", "magic-string": "^0.30.0",
"mime": "^3.0.0", "mrmime": "^1.0.1",
"sade": "^1.8.1", "sade": "^1.8.1",
"set-cookie-parser": "^2.6.0", "set-cookie-parser": "^2.6.0",
"sirv": "^2.0.2", "sirv": "^2.0.2",
"tiny-glob": "^0.2.9", "tiny-glob": "^0.2.9",
"undici": "~5.25.0" "undici": "~5.26.2"
}, },
"bin": { "bin": {
"svelte-kit": "svelte-kit.js" "svelte-kit": "svelte-kit.js"
@ -605,7 +606,7 @@
"node": "^16.14 || >=18" "node": "^16.14 || >=18"
}, },
"peerDependencies": { "peerDependencies": {
"svelte": "^3.54.0 || ^4.0.0-next.0", "svelte": "^3.54.0 || ^4.0.0-next.0 || ^5.0.0-next.0",
"vite": "^4.0.0" "vite": "^4.0.0"
} }
}, },
@ -621,9 +622,9 @@
} }
}, },
"node_modules/@sveltejs/vite-plugin-svelte": { "node_modules/@sveltejs/vite-plugin-svelte": {
"version": "2.4.6", "version": "2.5.3",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.6.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
"integrity": "sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==", "integrity": "sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==",
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^1.0.4", "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4",
"debug": "^4.3.4", "debug": "^4.3.4",
@ -637,7 +638,7 @@
"node": "^14.18.0 || >= 16" "node": "^14.18.0 || >= 16"
}, },
"peerDependencies": { "peerDependencies": {
"svelte": "^3.54.0 || ^4.0.0", "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0",
"vite": "^4.0.0" "vite": "^4.0.0"
} }
}, },
@ -658,9 +659,9 @@
} }
}, },
"node_modules/@sveltejs/vite-plugin-svelte/node_modules/magic-string": { "node_modules/@sveltejs/vite-plugin-svelte/node_modules/magic-string": {
"version": "0.30.4", "version": "0.30.5",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
"integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==", "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15" "@jridgewell/sourcemap-codec": "^1.4.15"
}, },
@ -824,6 +825,11 @@
"readable-stream": "^3.4.0" "readable-stream": "^3.4.0"
} }
}, },
"node_modules/boolbase": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@ -909,6 +915,42 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/cheerio": {
"version": "1.0.0-rc.12",
"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
"integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
"dependencies": {
"cheerio-select": "^2.1.0",
"dom-serializer": "^2.0.0",
"domhandler": "^5.0.3",
"domutils": "^3.0.1",
"htmlparser2": "^8.0.1",
"parse5": "^7.0.0",
"parse5-htmlparser2-tree-adapter": "^7.0.0"
},
"engines": {
"node": ">= 6"
},
"funding": {
"url": "https://github.com/cheeriojs/cheerio?sponsor=1"
}
},
"node_modules/cheerio-select": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
"integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
"dependencies": {
"boolbase": "^1.0.0",
"css-select": "^5.1.0",
"css-what": "^6.1.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3",
"domutils": "^3.0.1"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/chokidar": { "node_modules/chokidar": {
"version": "3.5.3", "version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -1012,6 +1054,32 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/css-select": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
"dependencies": {
"boolbase": "^1.0.0",
"css-what": "^6.1.0",
"domhandler": "^5.0.2",
"domutils": "^3.0.1",
"nth-check": "^2.0.1"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
"engines": {
"node": ">= 6"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -1085,6 +1153,57 @@
"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.2.tgz", "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.2.tgz",
"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==" "integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg=="
}, },
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
"entities": "^4.2.0"
},
"funding": {
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
]
},
"node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/domutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3"
},
"funding": {
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/ecdsa-sig-formatter": { "node_modules/ecdsa-sig-formatter": {
"version": "1.0.11", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz", "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@ -1106,6 +1225,17 @@
"once": "^1.4.0" "once": "^1.4.0"
} }
}, },
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/es6-promise": { "node_modules/es6-promise": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@ -1336,6 +1466,24 @@
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==" "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
}, },
"node_modules/htmlparser2": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
"integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
"funding": [
"https://github.com/fb55/htmlparser2?sponsor=1",
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3",
"domutils": "^3.0.1",
"entities": "^4.4.0"
}
},
"node_modules/https-proxy-agent": { "node_modules/https-proxy-agent": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@ -1673,17 +1821,6 @@
"node": ">=8.6" "node": ">=8.6"
} }
}, },
"node_modules/mime": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
"bin": {
"mime": "cli.js"
},
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/mimic-response": { "node_modules/mimic-response": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz", "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
@ -1996,6 +2133,17 @@
"set-blocking": "^2.0.0" "set-blocking": "^2.0.0"
} }
}, },
"node_modules/nth-check": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
"dependencies": {
"boolbase": "^1.0.0"
},
"funding": {
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
"node_modules/object-assign": { "node_modules/object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@ -2024,6 +2172,29 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/parse5": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
"dependencies": {
"entities": "^4.4.0"
},
"funding": {
"url": "https://github.com/inikulin/parse5?sponsor=1"
}
},
"node_modules/parse5-htmlparser2-tree-adapter": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
"integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
"dependencies": {
"domhandler": "^5.0.2",
"parse5": "^7.0.0"
},
"funding": {
"url": "https://github.com/inikulin/parse5?sponsor=1"
}
},
"node_modules/path-is-absolute": { "node_modules/path-is-absolute": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@ -2953,9 +3124,9 @@
} }
}, },
"node_modules/undici": { "node_modules/undici": {
"version": "5.25.4", "version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici/-/undici-5.25.4.tgz", "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
"integrity": "sha512-450yJxT29qKMf3aoudzFpIciqpx6Pji3hEWaXqXmanbXF58LTAGCKxcJjxMXWu3iG+Mudgo3ZUfDB6YDFd/dAw==", "integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==",
"dependencies": { "dependencies": {
"@fastify/busboy": "^2.0.0" "@fastify/busboy": "^2.0.0"
}, },
@ -2969,9 +3140,9 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.4.10", "version": "4.5.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.10.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
"integrity": "sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==", "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",
"postcss": "^8.4.27", "postcss": "^8.4.27",
@ -3023,11 +3194,11 @@
} }
}, },
"node_modules/vitefu": { "node_modules/vitefu": {
"version": "0.2.4", "version": "0.2.5",
"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.4.tgz", "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
"integrity": "sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==", "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
"peerDependencies": { "peerDependencies": {
"vite": "^3.0.0 || ^4.0.0" "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"vite": { "vite": {

View File

@ -14,22 +14,27 @@ if(icon_override){
let isloaded = false let isloaded = false
import { onMount } from "svelte"; import { onMount } from "svelte";
onMount(() => {
isloaded = document.querySelector("img")?.complete ? true : false onMount(() => {
}) isloaded = document.querySelector("img")?.complete ? true : false
})
</script> </script>
<style> <style>
#card{ .card_anchor{
border-radius: 20px;
}
.card{
--card-width: 300px; --card-width: 300px;
position: relative;
flex-shrink: 0; flex-shrink: 0;
transition: 200ms; transition: 200ms;
text-decoration: none; text-decoration: none;
position: relative;
box-sizing: border-box; box-sizing: border-box;
font-family: sans-serif; font-family: sans-serif;
cursor: pointer; cursor: pointer;
height: calc(7/4 * var(--card-width)); /* otherwise card is not initialized at correct size and readjusts when populated*/ height: 525px;
width: var(--card-width); width: 300px;
border-radius: 20px; border-radius: 20px;
background-size: contain; background-size: contain;
display: flex; display: flex;
@ -39,8 +44,8 @@ import { onMount } from "svelte";
box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3); box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
} }
#image{ #image{
width: var(--card-width); width: 300px;
height: calc(var(--card-width)*0.85); height: 255px;
object-fit: cover; object-fit: cover;
transition: 200ms; transition: 200ms;
filter: blur(10px); filter: blur(10px);
@ -49,9 +54,9 @@ import { onMount } from "svelte";
.unblur{ .unblur{
filter: blur(0px) !important; filter: blur(0px) !important;
} }
#div_image, .div_image,
#div_div_image{ .div_div_image{
width: var(--card-width); width: 300px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -59,27 +64,28 @@ import { onMount } from "svelte";
border-top-left-radius: inherit; border-top-left-radius: inherit;
border-top-right-radius: inherit; border-top-right-radius: inherit;
} }
#div_div_image{ .div_div_image{
height: calc(var(--card-width)*0.85); height: 255px;
position: absolute; position: absolute;
width: var(--card-width); width: 300px;
top: 0; top: 0;
} }
#card:hover, .card:hover,
#card:focus-within{ .card:focus-within{
transform: scale(1.02,1.02); transform: scale(1.02,1.02);
background-color: var(--red); background-color: var(--red);
box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3); box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
} }
#card:focus{ .card:focus{
scale: 0.95 0.95; scale: 0.95 0.95;
} }
.title { .card_title {
position: relative; position: absolute;
padding-top: 0.5em; padding-top: 0.5em;
height: 50%; height: 262.5px;
width: 100% ; width: 300px;
top: 262.5px;
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
display: flex; display: flex;
@ -130,7 +136,7 @@ import { onMount } from "svelte";
transition: 100ms; transition: 100ms;
scale: 0.9; scale: 0.9;
} }
.title .category{ .card_title .category{
position: absolute; position: absolute;
box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6); box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
text-decoration: none; text-decoration: none;
@ -144,8 +150,8 @@ import { onMount } from "svelte";
transition: 100ms; transition: 100ms;
} }
.title .category:hover, .card_title .category:hover,
.title .category:focus-within .card_title .category:focus-within
{ {
box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6); box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
background-color: var(--nord3); background-color: var(--nord3);
@ -155,24 +161,24 @@ import { onMount } from "svelte";
scale: 0.9 0.9; scale: 0.9 0.9;
} }
#card:hover .icon, .card:hover .icon,
#card:focus-visible .icon .card:focus-visible .icon
{ {
animation: shake 0.6s; animation: shake 0.6s;
} }
</style> </style>
<a id="card" class:search_me={search} href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]> <a class=card_anchor href="/rezepte/{recipe.short_name}">
<div id=div_div_image > <div class="card" class:search_me={search} data-tags=[{recipe.tags}]>
<div id=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})"> <div class=div_div_image >
<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
<img class:unblur={isloaded} id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/> <img class:unblur={isloaded} id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/>
</div> </div>
</div> </div>
{#if icon_override || recipe.season.includes(current_month)} {#if icon_override || recipe.season.includes(current_month)}
<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a> <a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
{/if} {/if}
<div class="card_title">
<div class=title>
<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a> <a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>
<div> <div>
<div class=name>{@html recipe.name}</div> <div class=name>{@html recipe.name}</div>
@ -184,4 +190,5 @@ import { onMount } from "svelte";
{/each} {/each}
</div> </div>
</div> </div>
</div>
</a> </a>