Ugh
This commit is contained in:
parent
c1baecdf22
commit
9c58e58571
GPG key ID:
B2E280771CD62FCF
79
package-lock.json
generated
79
package-lock.json
generated
|
|
@ -7,8 +7,10 @@
|
|||
"": {
|
||||
"name": "bgenc.net-new",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-static": "^2.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.1.1",
|
||||
"@sveltejs/kit": "^1.27.6",
|
||||
"@types/lodash": "^4.14.201",
|
||||
"@typescript-eslint/eslint-plugin": "^6.11.0",
|
||||
|
|
@ -40,7 +42,6 @@
|
|||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
"version": "2.2.1",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.0",
|
||||
|
|
@ -67,7 +68,6 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -131,7 +131,6 @@
|
|||
},
|
||||
"node_modules/@fastify/busboy": {
|
||||
"version": "2.1.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
|
|
@ -169,7 +168,6 @@
|
|||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.3",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.0.1",
|
||||
|
|
@ -182,7 +180,6 @@
|
|||
},
|
||||
"node_modules/@jridgewell/resolve-uri": {
|
||||
"version": "3.1.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
|
|
@ -190,7 +187,6 @@
|
|||
},
|
||||
"node_modules/@jridgewell/set-array": {
|
||||
"version": "1.1.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
|
|
@ -198,12 +194,10 @@
|
|||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.15",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.20",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
|
|
@ -244,7 +238,6 @@
|
|||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.23",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@rollup/pluginutils": {
|
||||
|
|
@ -273,20 +266,16 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-auto": {
|
||||
"version": "2.1.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"import-meta-resolve": "^4.0.0"
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-static": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-2.0.3.tgz",
|
||||
"integrity": "sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==",
|
||||
"peerDependencies": {
|
||||
"@sveltejs/kit": "^1.0.0"
|
||||
"@sveltejs/kit": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/kit": {
|
||||
"version": "1.27.6",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
@ -317,7 +306,6 @@
|
|||
},
|
||||
"node_modules/@sveltejs/vite-plugin-svelte": {
|
||||
"version": "2.5.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@sveltejs/vite-plugin-svelte-inspector": "^1.0.4",
|
||||
|
|
@ -338,7 +326,6 @@
|
|||
},
|
||||
"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
|
||||
"version": "1.0.4",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "^4.3.4"
|
||||
|
|
@ -354,12 +341,10 @@
|
|||
},
|
||||
"node_modules/@types/cookie": {
|
||||
"version": "0.5.4",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.5",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
|
|
@ -576,7 +561,6 @@
|
|||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.11.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
|
|
@ -649,7 +633,6 @@
|
|||
},
|
||||
"node_modules/aria-query": {
|
||||
"version": "5.3.0",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"dequal": "^2.0.3"
|
||||
|
|
@ -665,7 +648,6 @@
|
|||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "3.2.1",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"dequal": "^2.0.3"
|
||||
|
|
@ -836,7 +818,6 @@
|
|||
},
|
||||
"node_modules/code-red": {
|
||||
"version": "1.0.4",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15",
|
||||
|
|
@ -890,7 +871,6 @@
|
|||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "0.5.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
|
|
@ -911,7 +891,6 @@
|
|||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "2.3.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.30",
|
||||
|
|
@ -950,7 +929,6 @@
|
|||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ms": "2.1.2"
|
||||
|
|
@ -993,7 +971,6 @@
|
|||
},
|
||||
"node_modules/deepmerge": {
|
||||
"version": "4.3.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -1001,7 +978,6 @@
|
|||
},
|
||||
"node_modules/dequal": {
|
||||
"version": "2.0.3",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
|
|
@ -1025,7 +1001,6 @@
|
|||
},
|
||||
"node_modules/devalue": {
|
||||
"version": "4.3.2",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dir-glob": {
|
||||
|
|
@ -1065,7 +1040,6 @@
|
|||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.18.20",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
|
|
@ -1248,7 +1222,6 @@
|
|||
},
|
||||
"node_modules/esm-env": {
|
||||
"version": "1.0.0",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/espree": {
|
||||
|
|
@ -1299,7 +1272,6 @@
|
|||
},
|
||||
"node_modules/estree-walker": {
|
||||
"version": "3.0.3",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0"
|
||||
|
|
@ -1491,7 +1463,6 @@
|
|||
},
|
||||
"node_modules/globalyzer": {
|
||||
"version": "0.1.0",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/globby": {
|
||||
|
|
@ -1515,7 +1486,6 @@
|
|||
},
|
||||
"node_modules/globrex": {
|
||||
"version": "0.1.2",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/graceful-fs": {
|
||||
|
|
@ -1589,15 +1559,6 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/import-meta-resolve": {
|
||||
"version": "4.0.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/imurmurhash": {
|
||||
"version": "0.1.4",
|
||||
"dev": true,
|
||||
|
|
@ -1678,7 +1639,6 @@
|
|||
},
|
||||
"node_modules/is-reference": {
|
||||
"version": "3.0.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
|
|
@ -1725,7 +1685,6 @@
|
|||
},
|
||||
"node_modules/kleur": {
|
||||
"version": "4.1.5",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
|
|
@ -1758,7 +1717,6 @@
|
|||
},
|
||||
"node_modules/locate-character": {
|
||||
"version": "3.0.0",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
|
|
@ -1799,7 +1757,6 @@
|
|||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.5",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
|
|
@ -1810,7 +1767,6 @@
|
|||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"dev": true,
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/mdsvex": {
|
||||
|
|
@ -1903,7 +1859,6 @@
|
|||
},
|
||||
"node_modules/mri": {
|
||||
"version": "1.2.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
|
|
@ -1911,7 +1866,6 @@
|
|||
},
|
||||
"node_modules/mrmime": {
|
||||
"version": "1.0.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
|
|
@ -1919,12 +1873,10 @@
|
|||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.2",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
|
|
@ -2070,7 +2022,6 @@
|
|||
},
|
||||
"node_modules/periscopic": {
|
||||
"version": "3.1.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0",
|
||||
|
|
@ -2089,7 +2040,6 @@
|
|||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.0.0",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
|
|
@ -2105,7 +2055,6 @@
|
|||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.31",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -2431,7 +2380,6 @@
|
|||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.29.4",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
|
|
@ -2468,7 +2416,6 @@
|
|||
},
|
||||
"node_modules/sade": {
|
||||
"version": "1.8.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mri": "^1.1.0"
|
||||
|
|
@ -2534,7 +2481,6 @@
|
|||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.6.0",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sharp": {
|
||||
|
|
@ -2631,7 +2577,6 @@
|
|||
},
|
||||
"node_modules/sirv": {
|
||||
"version": "2.0.3",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@polka/url": "^1.0.0-next.20",
|
||||
|
|
@ -2666,7 +2611,6 @@
|
|||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -2735,7 +2679,6 @@
|
|||
},
|
||||
"node_modules/svelte": {
|
||||
"version": "4.2.5",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.1",
|
||||
|
|
@ -2805,7 +2748,6 @@
|
|||
},
|
||||
"node_modules/svelte-hmr": {
|
||||
"version": "0.15.3",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": "^12.20 || ^14.13.1 || >= 16"
|
||||
|
|
@ -2913,7 +2855,6 @@
|
|||
},
|
||||
"node_modules/tiny-glob": {
|
||||
"version": "0.2.9",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"globalyzer": "0.1.0",
|
||||
|
|
@ -2933,7 +2874,6 @@
|
|||
},
|
||||
"node_modules/totalist": {
|
||||
"version": "3.0.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
|
|
@ -3002,7 +2942,6 @@
|
|||
},
|
||||
"node_modules/undici": {
|
||||
"version": "5.26.5",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fastify/busboy": "^2.0.0"
|
||||
|
|
@ -3051,7 +2990,6 @@
|
|||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.5.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.18.10",
|
||||
|
|
@ -3117,7 +3055,6 @@
|
|||
},
|
||||
"node_modules/vitefu": {
|
||||
"version": "0.2.5",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.1.1",
|
||||
"@sveltejs/kit": "^1.27.6",
|
||||
"@types/lodash": "^4.14.201",
|
||||
"@typescript-eslint/eslint-plugin": "^6.11.0",
|
||||
|
|
@ -33,5 +32,8 @@
|
|||
"vite": "^4.4.2",
|
||||
"vite-imagetools": "^6.2.4"
|
||||
},
|
||||
"type": "module"
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-static": "^2.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
157
src/app.css
157
src/app.css
|
|
@ -1,69 +1,122 @@
|
|||
html {
|
||||
--color-primary-h: 49;
|
||||
--color-primary-s: 79%;
|
||||
--color-primary-l: 53%;
|
||||
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
|
||||
--color-secondary-h: 27;
|
||||
--color-secondary-s: 96%;
|
||||
--color-secondary-l: 48%;
|
||||
--color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
|
||||
--color-tertiary-h: 191;
|
||||
--color-tertiary-s: 55%;
|
||||
--color-tertiary-l: 53%;
|
||||
--color-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l));
|
||||
--color-quaternary-h: 241;
|
||||
--color-quaternary-s: 48%;
|
||||
--color-quaternary-l: 41%;
|
||||
--color-quaternary: hsl(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l));
|
||||
--color-quinary-h: 237;
|
||||
--color-quinary-s: 97%;
|
||||
--color-quinary-l: 27%;
|
||||
--color-quinary: hsl(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l));
|
||||
--color-primary-h: 49;
|
||||
--color-primary-s: 79%;
|
||||
--color-primary-l: 53%;
|
||||
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
|
||||
--color-secondary-h: 27;
|
||||
--color-secondary-s: 96%;
|
||||
--color-secondary-l: 48%;
|
||||
--color-secondary: hsl(
|
||||
var(--color-secondary-h),
|
||||
var(--color-secondary-s),
|
||||
var(--color-secondary-l)
|
||||
);
|
||||
--color-tertiary-h: 191;
|
||||
--color-tertiary-s: 55%;
|
||||
--color-tertiary-l: 53%;
|
||||
--color-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l));
|
||||
--color-quaternary-h: 241;
|
||||
--color-quaternary-s: 48%;
|
||||
--color-quaternary-l: 41%;
|
||||
--color-quaternary: hsl(
|
||||
var(--color-quaternary-h),
|
||||
var(--color-quaternary-s),
|
||||
var(--color-quaternary-l)
|
||||
);
|
||||
--color-quinary-h: 237;
|
||||
--color-quinary-s: 97%;
|
||||
--color-quinary-l: 27%;
|
||||
--color-quinary: hsl(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l));
|
||||
|
||||
--color-text-h: 0;
|
||||
--color-text-s: 0%;
|
||||
--color-text-l: 0%;
|
||||
--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
|
||||
--color-bg-h: 0;
|
||||
--color-bg-s: 0%;
|
||||
--color-bg-l: 100%;
|
||||
--color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));
|
||||
--color-text-h: 0;
|
||||
--color-text-s: 0%;
|
||||
--color-text-l: 0%;
|
||||
--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
|
||||
--color-bg-h: 0;
|
||||
--color-bg-s: 0%;
|
||||
--color-bg-l: 100%;
|
||||
--color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));
|
||||
|
||||
--size-container: 640px;
|
||||
--size-container: 640px;
|
||||
--size-modal: 480px;
|
||||
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
--shadow-luminosity: calc(100% - var(--color-bg-l));
|
||||
--shadow-small: 0.5px 1px 1px
|
||||
hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.7);
|
||||
--shadow-medium: 1px 2px 2px
|
||||
hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
|
||||
2px 4px 4px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
|
||||
3px 6px 6px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333);
|
||||
--shadow-large: 1px 2px 2px
|
||||
hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
|
||||
2px 4px 4px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
|
||||
4px 8px 8px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
|
||||
8px 16px 16px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
|
||||
16px 32px 32px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2);
|
||||
|
||||
--z-index-modal: 100;
|
||||
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Reset */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family:
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
avenir next,
|
||||
avenir,
|
||||
segoe ui,
|
||||
helvetica neue,
|
||||
helvetica,
|
||||
Cantarell,
|
||||
Ubuntu,
|
||||
roboto,
|
||||
noto,
|
||||
arial,
|
||||
sans-serif;
|
||||
}
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
30
src/lib/Details.svelte
Normal file
30
src/lib/Details.svelte
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script lang="ts">
|
||||
export let expandButtonText = 'Expand';
|
||||
let expanded = false;
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<button
|
||||
on:click={() => {
|
||||
expanded = !expanded;
|
||||
}}>{expandButtonText}</button
|
||||
>
|
||||
<div class={`content ${expanded ? 'expanded' : 'collapsed'}`}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
transition: flex 0.5s ease-in-out;
|
||||
}
|
||||
.content.collapsed {
|
||||
flex: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,11 +3,13 @@
|
|||
import '../typography.css';
|
||||
import '../prism/gruvbox/light.css';
|
||||
|
||||
import Spacer from '$lib/spacer.svelte';
|
||||
import Footer from './footer.svelte';
|
||||
import Header from './header.svelte';
|
||||
import Spacer from '$lib/Spacer.svelte';
|
||||
import Footer from './Footer.svelte';
|
||||
import Header from './Header.svelte';
|
||||
import TrackingConsent from './TrackingConsent.svelte';
|
||||
</script>
|
||||
|
||||
<TrackingConsent />
|
||||
<Header />
|
||||
<main><slot /></main>
|
||||
<Spacer />
|
||||
|
|
|
|||
2
src/routes/+layout.ts
Normal file
2
src/routes/+layout.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export const prerender = true;
|
||||
export const trailingSlash = 'always';
|
||||
|
|
@ -24,7 +24,7 @@ including TypeScript, React, SvelteKit, TailwindCSS, Rust, Docker, SQL, AWS
|
|||
|
||||
Outside work I build open source software, available on my [Github profile](https://github.com/SeriousBug).
|
||||
I showcase some of my proudest projects on my [portfolio](/portfolio).
|
||||
You can also find my [blog](/blog) here where I talk about software I'm using, stuff I'm working on, or solutions to
|
||||
You can also find my blog here where I talk about software I'm using, stuff I'm working on, or solutions to
|
||||
problems I've encountered.
|
||||
|
||||
<style>
|
||||
|
|
@ -32,7 +32,7 @@ problems I've encountered.
|
|||
max-width: 320px;
|
||||
max-height: 320px;
|
||||
margin: 0 auto;
|
||||
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
|
||||
clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<a href="https://gitea.bgenc.net/kaan/bgenc.net">gitea.bgenc.net</a>.
|
||||
</div>
|
||||
<div>.</div>
|
||||
<div class="rss"><a href="/posts/index.xml" target="_blank" title="rss">RSS</a></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
<script>
|
||||
import Spacer from '$lib/spacer.svelte';
|
||||
import Spacer from '$lib/Spacer.svelte';
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<a href="/" class="title">Kaan Barmore-Genç</a>
|
||||
<Spacer />
|
||||
<a href="/portfolio">Portfolio</a>
|
||||
<a href="/posts">Blog</a>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
71
src/routes/TrackingConsent.svelte
Normal file
71
src/routes/TrackingConsent.svelte
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<script lang="ts">
|
||||
import Details from '$lib/Details.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const TRACKING_CONSENT_KEY = 'tracking-consent';
|
||||
let trackingConsent: string | null;
|
||||
onMount(() => {
|
||||
if (trackingConsent === null) {
|
||||
trackingConsent = window.localStorage.getItem(TRACKING_CONSENT_KEY);
|
||||
}
|
||||
});
|
||||
|
||||
function changeConsent(value: string) {
|
||||
window.localStorage.setItem(TRACKING_CONSENT_KEY, value);
|
||||
trackingConsent = value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Only show consent banner if the user has not already picked if they consent or not -->
|
||||
{#if trackingConsent === 'true' || trackingConsent === 'false'}
|
||||
<div>Privacy</div>
|
||||
{:else}
|
||||
<div id="privacy-notice">
|
||||
<h2>Privacy Notice</h2>
|
||||
<p>
|
||||
This site would like to collect anonymous usage data to help improve the site. No personal
|
||||
information is collected, and no cookies are used. Would you consider opting in?
|
||||
</p>
|
||||
<Details>
|
||||
<p class="details">
|
||||
This website is using <a href="https://github.com/SeriousBug/ferrite-analytics"
|
||||
>Ferrite Analytics</a
|
||||
> to collect anonymous usage data. The tracking is done by creating an anonymized, temporary
|
||||
ID based on your IP address and your browser user agent. This temporary ID will be only used
|
||||
on this website, it can't track you on other websites. The temporary ID will expire within a
|
||||
day, your visits across multiple days can't be linked.
|
||||
</p>
|
||||
</Details>
|
||||
<button
|
||||
class="no"
|
||||
on:click={() => {
|
||||
changeConsent('false');
|
||||
}}>No, Do Not Share</button
|
||||
>
|
||||
<button
|
||||
class="yes"
|
||||
on:click={() => {
|
||||
changeConsent('true');
|
||||
}}>Yes, Share Usage Data</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#privacy-notice {
|
||||
--color-bg: var(--color-primary);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
max-width: min(480px, calc(100vw - 2rem));
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: var(--shadow-large);
|
||||
z-index: var(--z-index-modal);
|
||||
padding: 2rem 2rem 2rem 8rem;
|
||||
box-sizing: content-box;
|
||||
clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 15% 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: flex 0.5s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export async function load({ params }) {
|
||||
console.log('params', params);
|
||||
const post = await import(`../posts/${params.slug}.md`);
|
||||
const { title, date } = post.metadata;
|
||||
const content = post.default;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { format } from 'date-fns';
|
||||
import { entries } from 'lodash';
|
||||
|
||||
export let data;
|
||||
function groupPosts(posts: any[]) {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@ export async function load() {
|
|||
iterablePostFiles.map(async ([path, resolver]) => {
|
||||
const { metadata } = await resolver();
|
||||
|
||||
const slug = /[^/]*[/](.*)[.]md/.exec(path)?.[1];
|
||||
if (!slug) throw new Error(`Could not parse slug from path: ${path}`);
|
||||
|
||||
return {
|
||||
meta: metadata,
|
||||
path: _.trimEnd(_.last(path.split('/')), '.md')
|
||||
path: slug
|
||||
};
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
---
|
||||
title: "Browser Caching: Assets not revalidated when server sends a 304 'Not Modified' for html page"
|
||||
date: 2022-10-15T20:56:36-04:00
|
||||
toc: false
|
||||
images:
|
||||
tags:
|
||||
- dev
|
||||
- web
|
||||
---
|
||||
|
||||
I've been working on some web server middleware, and hit a weird issue that I
|
||||
couldn't find documented anywhere. First, let's look at an overview of how
|
||||
browser caching works:
|
||||
|
||||
If your web server sends an
|
||||
[ETag](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag) header in
|
||||
a HTTP response, the web browser may choose to cache the response. Next time the
|
||||
same object is requested, the browser may add an
|
||||
[If-None-Match](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-None-Match)
|
||||
header to let the server know that the browser might have the object cached. At this point, the server should respond with the
|
||||
[304 Not Modified](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304)
|
||||
code and skip sending the response. This can also happen with the
|
||||
[Last Modified](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified)
|
||||
and
|
||||
[If-Modified-Since](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since)
|
||||
headers if `ETag` is not supported as well.
|
||||
|
||||
After implementing this in my middleware, I made a quick test website to try it
|
||||
out. That's when I ran into a weird behavior: the browser would revalidate the
|
||||
HTML page itself with the `If-None-Match` header, but when the server responded
|
||||
with `304` it would not attempt to revalidate the linked stylesheets, scripts,
|
||||
and images. The browser would not request them at all and immediately use the
|
||||
cached version. It looks like if the server responds with `304` on the HTML
|
||||
page, the browser assumes that all the linked assets are not modified as well.
|
||||
That means that if the asset does change (you weren't using something like
|
||||
fingerprinting or versioning on your assets), then the browser will use outdated
|
||||
assets. Oops!
|
||||
|
||||
Luckily it looks like there's an easy solution: add `Cache-Control: no-cache`
|
||||
header to your responses. `no-cache` doesn't actually mean "don't cache at all",
|
||||
but rather means that the browser needs to revalidate objects before using
|
||||
the cached version.
|
||||
|
||||
Without the `Cache-Control` header:
|
||||
|
||||
With the `Cache-Control` header:
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
import { mdsvex } from 'mdsvex';
|
||||
|
||||
|
|
@ -19,10 +19,13 @@ const config = {
|
|||
extensions: ['.svelte', '.md'],
|
||||
|
||||
kit: {
|
||||
// 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({
|
||||
strict: false,
|
||||
pages: 'build'
|
||||
}),
|
||||
prerender: {
|
||||
handleHttpError: 'warn'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue