kaan/bgenc.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Ugh

Browse source
This commit is contained in:
Kaan Barmore-Genç 2023-12-23 13:13:16 -06:00
parent c1baecdf22
commit 9c58e58571
Signed by: kaan
GPG key ID: B2E280771CD62FCF
16 changed files with 241 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
package-lock.json generated
View file

@ -7,8 +7,10 @@
"": { "": {
"name": "bgenc.net-new", "name": "bgenc.net-new",
"version": "0.0.1", "version": "0.0.1",
"dependencies": {
"@sveltejs/adapter-static": "^2.0.3"
},
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^2.1.1",
"@sveltejs/kit": "^1.27.6", "@sveltejs/kit": "^1.27.6",
"@types/lodash": "^4.14.201", "@types/lodash": "^4.14.201",
"@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/eslint-plugin": "^6.11.0",
@ -40,7 +42,6 @@
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
"version": "2.2.1", "version": "2.2.1",
"dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/gen-mapping": "^0.3.0",
@ -67,7 +68,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@ -131,7 +131,6 @@
}, },
"node_modules/@fastify/busboy": { "node_modules/@fastify/busboy": {
"version": "2.1.0", "version": "2.1.0",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=14" "node": ">=14"
@ -169,7 +168,6 @@
}, },
"node_modules/@jridgewell/gen-mapping": { "node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3", "version": "0.3.3",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/set-array": "^1.0.1", "@jridgewell/set-array": "^1.0.1",
@ -182,7 +180,6 @@
}, },
"node_modules/@jridgewell/resolve-uri": { "node_modules/@jridgewell/resolve-uri": {
"version": "3.1.1", "version": "3.1.1",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=6.0.0" "node": ">=6.0.0"
@ -190,7 +187,6 @@
}, },
"node_modules/@jridgewell/set-array": { "node_modules/@jridgewell/set-array": {
"version": "1.1.2", "version": "1.1.2",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=6.0.0" "node": ">=6.0.0"
@ -198,12 +194,10 @@
}, },
"node_modules/@jridgewell/sourcemap-codec": { "node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15", "version": "1.4.15",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@jridgewell/trace-mapping": { "node_modules/@jridgewell/trace-mapping": {
"version": "0.3.20", "version": "0.3.20",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/resolve-uri": "^3.1.0",
@ -244,7 +238,6 @@
}, },
"node_modules/@polka/url": { "node_modules/@polka/url": {
"version": "1.0.0-next.23", "version": "1.0.0-next.23",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@rollup/pluginutils": { "node_modules/@rollup/pluginutils": {
@ -273,20 +266,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@sveltejs/adapter-auto": { "node_modules/@sveltejs/adapter-static": {
"version": "2.1.1", "version": "2.0.3",
"dev": true, "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-2.0.3.tgz",
"license": "MIT", "integrity": "sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==",
"dependencies": {
"import-meta-resolve": "^4.0.0"
},
"peerDependencies": { "peerDependencies": {
"@sveltejs/kit": "^1.0.0" "@sveltejs/kit": "^1.5.0"
} }
}, },
"node_modules/@sveltejs/kit": { "node_modules/@sveltejs/kit": {
"version": "1.27.6", "version": "1.27.6",
"dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -317,7 +306,6 @@
}, },
"node_modules/@sveltejs/vite-plugin-svelte": { "node_modules/@sveltejs/vite-plugin-svelte": {
"version": "2.5.2", "version": "2.5.2",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^1.0.4", "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4",
@ -338,7 +326,6 @@
}, },
"node_modules/@sveltejs/vite-plugin-svelte-inspector": { "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
"version": "1.0.4", "version": "1.0.4",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"debug": "^4.3.4" "debug": "^4.3.4"
@ -354,12 +341,10 @@
}, },
"node_modules/@types/cookie": { "node_modules/@types/cookie": {
"version": "0.5.4", "version": "0.5.4",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/estree": { "node_modules/@types/estree": {
"version": "1.0.5", "version": "1.0.5",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/json-schema": { "node_modules/@types/json-schema": {
@ -576,7 +561,6 @@
}, },
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.11.2", "version": "8.11.2",
"dev": true,
"license": "MIT", "license": "MIT",
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
@ -649,7 +633,6 @@
}, },
"node_modules/aria-query": { "node_modules/aria-query": {
"version": "5.3.0", "version": "5.3.0",
"dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"dequal": "^2.0.3" "dequal": "^2.0.3"
@ -665,7 +648,6 @@
}, },
"node_modules/axobject-query": { "node_modules/axobject-query": {
"version": "3.2.1", "version": "3.2.1",
"dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"dequal": "^2.0.3" "dequal": "^2.0.3"
@ -836,7 +818,6 @@
}, },
"node_modules/code-red": { "node_modules/code-red": {
"version": "1.0.4", "version": "1.0.4",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15", "@jridgewell/sourcemap-codec": "^1.4.15",
@ -890,7 +871,6 @@
}, },
"node_modules/cookie": { "node_modules/cookie": {
"version": "0.5.0", "version": "0.5.0",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">= 0.6" "node": ">= 0.6"
@ -911,7 +891,6 @@
}, },
"node_modules/css-tree": { "node_modules/css-tree": {
"version": "2.3.1", "version": "2.3.1",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"mdn-data": "2.0.30", "mdn-data": "2.0.30",
@ -950,7 +929,6 @@
}, },
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"ms": "2.1.2" "ms": "2.1.2"
@ -993,7 +971,6 @@
}, },
"node_modules/deepmerge": { "node_modules/deepmerge": {
"version": "4.3.1", "version": "4.3.1",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@ -1001,7 +978,6 @@
}, },
"node_modules/dequal": { "node_modules/dequal": {
"version": "2.0.3", "version": "2.0.3",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=6" "node": ">=6"
@ -1025,7 +1001,6 @@
}, },
"node_modules/devalue": { "node_modules/devalue": {
"version": "4.3.2", "version": "4.3.2",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/dir-glob": { "node_modules/dir-glob": {
@ -1065,7 +1040,6 @@
}, },
"node_modules/esbuild": { "node_modules/esbuild": {
"version": "0.18.20", "version": "0.18.20",
"dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"license": "MIT", "license": "MIT",
"bin": { "bin": {
@ -1248,7 +1222,6 @@
}, },
"node_modules/esm-env": { "node_modules/esm-env": {
"version": "1.0.0", "version": "1.0.0",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/espree": { "node_modules/espree": {
@ -1299,7 +1272,6 @@
}, },
"node_modules/estree-walker": { "node_modules/estree-walker": {
"version": "3.0.3", "version": "3.0.3",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/estree": "^1.0.0" "@types/estree": "^1.0.0"
@ -1491,7 +1463,6 @@
}, },
"node_modules/globalyzer": { "node_modules/globalyzer": {
"version": "0.1.0", "version": "0.1.0",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/globby": { "node_modules/globby": {
@ -1515,7 +1486,6 @@
}, },
"node_modules/globrex": { "node_modules/globrex": {
"version": "0.1.2", "version": "0.1.2",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/graceful-fs": { "node_modules/graceful-fs": {
@ -1589,15 +1559,6 @@
"url": "https://github.com/sponsors/sindresorhus" "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": { "node_modules/imurmurhash": {
"version": "0.1.4", "version": "0.1.4",
"dev": true, "dev": true,
@ -1678,7 +1639,6 @@
}, },
"node_modules/is-reference": { "node_modules/is-reference": {
"version": "3.0.2", "version": "3.0.2",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/estree": "*" "@types/estree": "*"
@ -1725,7 +1685,6 @@
}, },
"node_modules/kleur": { "node_modules/kleur": {
"version": "4.1.5", "version": "4.1.5",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=6" "node": ">=6"
@ -1758,7 +1717,6 @@
}, },
"node_modules/locate-character": { "node_modules/locate-character": {
"version": "3.0.0", "version": "3.0.0",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/locate-path": { "node_modules/locate-path": {
@ -1799,7 +1757,6 @@
}, },
"node_modules/magic-string": { "node_modules/magic-string": {
"version": "0.30.5", "version": "0.30.5",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15" "@jridgewell/sourcemap-codec": "^1.4.15"
@ -1810,7 +1767,6 @@
}, },
"node_modules/mdn-data": { "node_modules/mdn-data": {
"version": "2.0.30", "version": "2.0.30",
"dev": true,
"license": "CC0-1.0" "license": "CC0-1.0"
}, },
"node_modules/mdsvex": { "node_modules/mdsvex": {
@ -1903,7 +1859,6 @@
}, },
"node_modules/mri": { "node_modules/mri": {
"version": "1.2.0", "version": "1.2.0",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=4" "node": ">=4"
@ -1911,7 +1866,6 @@
}, },
"node_modules/mrmime": { "node_modules/mrmime": {
"version": "1.0.1", "version": "1.0.1",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=10" "node": ">=10"
@ -1919,12 +1873,10 @@
}, },
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.2", "version": "2.1.2",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/nanoid": { "node_modules/nanoid": {
"version": "3.3.7", "version": "3.3.7",
"dev": true,
"funding": [ "funding": [
{ {
"type": "github", "type": "github",
@ -2070,7 +2022,6 @@
}, },
"node_modules/periscopic": { "node_modules/periscopic": {
"version": "3.1.0", "version": "3.1.0",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/estree": "^1.0.0", "@types/estree": "^1.0.0",
@ -2089,7 +2040,6 @@
}, },
"node_modules/picocolors": { "node_modules/picocolors": {
"version": "1.0.0", "version": "1.0.0",
"dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/picomatch": { "node_modules/picomatch": {
@ -2105,7 +2055,6 @@
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"dev": true,
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -2431,7 +2380,6 @@
}, },
"node_modules/rollup": { "node_modules/rollup": {
"version": "3.29.4", "version": "3.29.4",
"dev": true,
"license": "MIT", "license": "MIT",
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
@ -2468,7 +2416,6 @@
}, },
"node_modules/sade": { "node_modules/sade": {
"version": "1.8.1", "version": "1.8.1",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"mri": "^1.1.0" "mri": "^1.1.0"
@ -2534,7 +2481,6 @@
}, },
"node_modules/set-cookie-parser": { "node_modules/set-cookie-parser": {
"version": "2.6.0", "version": "2.6.0",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/sharp": { "node_modules/sharp": {
@ -2631,7 +2577,6 @@
}, },
"node_modules/sirv": { "node_modules/sirv": {
"version": "2.0.3", "version": "2.0.3",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@polka/url": "^1.0.0-next.20", "@polka/url": "^1.0.0-next.20",
@ -2666,7 +2611,6 @@
}, },
"node_modules/source-map-js": { "node_modules/source-map-js": {
"version": "1.0.2", "version": "1.0.2",
"dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@ -2735,7 +2679,6 @@
}, },
"node_modules/svelte": { "node_modules/svelte": {
"version": "4.2.5", "version": "4.2.5",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ampproject/remapping": "^2.2.1", "@ampproject/remapping": "^2.2.1",
@ -2805,7 +2748,6 @@
}, },
"node_modules/svelte-hmr": { "node_modules/svelte-hmr": {
"version": "0.15.3", "version": "0.15.3",
"dev": true,
"license": "ISC", "license": "ISC",
"engines": { "engines": {
"node": "^12.20 || ^14.13.1 || >= 16" "node": "^12.20 || ^14.13.1 || >= 16"
@ -2913,7 +2855,6 @@
}, },
"node_modules/tiny-glob": { "node_modules/tiny-glob": {
"version": "0.2.9", "version": "0.2.9",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"globalyzer": "0.1.0", "globalyzer": "0.1.0",
@ -2933,7 +2874,6 @@
}, },
"node_modules/totalist": { "node_modules/totalist": {
"version": "3.0.1", "version": "3.0.1",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=6" "node": ">=6"
@ -3002,7 +2942,6 @@
}, },
"node_modules/undici": { "node_modules/undici": {
"version": "5.26.5", "version": "5.26.5",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@fastify/busboy": "^2.0.0" "@fastify/busboy": "^2.0.0"
@ -3051,7 +2990,6 @@
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.5.0", "version": "4.5.0",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",
@ -3117,7 +3055,6 @@
}, },
"node_modules/vitefu": { "node_modules/vitefu": {
"version": "0.2.5", "version": "0.2.5",
"dev": true,
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
"vite": "^3.0.0 || ^4.0.0 || ^5.0.0" "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"

6
package.json
View file

@ -12,7 +12,6 @@
"format": "prettier --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^2.1.1",
"@sveltejs/kit": "^1.27.6", "@sveltejs/kit": "^1.27.6",
"@types/lodash": "^4.14.201", "@types/lodash": "^4.14.201",
"@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/eslint-plugin": "^6.11.0",
@ -33,5 +32,8 @@
"vite": "^4.4.2", "vite": "^4.4.2",
"vite-imagetools": "^6.2.4" "vite-imagetools": "^6.2.4"
}, },
"type": "module" "type": "module",
"dependencies": {
"@sveltejs/adapter-static": "^2.0.3"
}
} }

157
src/app.css
View file

@ -1,69 +1,122 @@
html { html {
--color-primary-h: 49; --color-primary-h: 49;
--color-primary-s: 79%; --color-primary-s: 79%;
--color-primary-l: 53%; --color-primary-l: 53%;
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)); --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
--color-secondary-h: 27; --color-secondary-h: 27;
--color-secondary-s: 96%; --color-secondary-s: 96%;
--color-secondary-l: 48%; --color-secondary-l: 48%;
--color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l)); --color-secondary: hsl(
--color-tertiary-h: 191; var(--color-secondary-h),
--color-tertiary-s: 55%; var(--color-secondary-s),
--color-tertiary-l: 53%; var(--color-secondary-l)
--color-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l)); );
--color-quaternary-h: 241; --color-tertiary-h: 191;
--color-quaternary-s: 48%; --color-tertiary-s: 55%;
--color-quaternary-l: 41%; --color-tertiary-l: 53%;
--color-quaternary: hsl(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l)); --color-tertiary: hsl(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l));
--color-quinary-h: 237; --color-quaternary-h: 241;
--color-quinary-s: 97%; --color-quaternary-s: 48%;
--color-quinary-l: 27%; --color-quaternary-l: 41%;
--color-quinary: hsl(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l)); --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-h: 0;
--color-text-s: 0%; --color-text-s: 0%;
--color-text-l: 0%; --color-text-l: 0%;
--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l)); --color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
--color-bg-h: 0; --color-bg-h: 0;
--color-bg-s: 0%; --color-bg-s: 0%;
--color-bg-l: 100%; --color-bg-l: 100%;
--color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l)); --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); --shadow-luminosity: calc(100% - var(--color-bg-l));
color: var(--color-text); --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 */ /* Reset */
*, *::before, *::after { *,
box-sizing: border-box; *::before,
font-size: 16px; *::after {
box-sizing: border-box;
font-size: 16px;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: normal; font-weight: normal;
} }
body { body {
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; 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 { img,
display: block; picture,
max-width: 100%; video,
height: auto; canvas,
svg {
display: block;
max-width: 100%;
height: auto;
} }
input, button, textarea, select { input,
font: inherit; button,
textarea,
select {
font: inherit;
} }
p, h1, h2, h3, h4, h5, h6 { p,
overflow-wrap: break-word; h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
} }
body { body {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

30
src/lib/Details.svelte Normal file
View 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>

0
src/lib/spacer.svelte → src/lib/Spacer.svelte
View file

8
src/routes/+layout.svelte
View file

@ -3,11 +3,13 @@
import '../typography.css'; import '../typography.css';
import '../prism/gruvbox/light.css'; import '../prism/gruvbox/light.css';
import Spacer from '$lib/spacer.svelte'; import Spacer from '$lib/Spacer.svelte';
import Footer from './footer.svelte'; import Footer from './Footer.svelte';
import Header from './header.svelte'; import Header from './Header.svelte';
import TrackingConsent from './TrackingConsent.svelte';
</script> </script>
<TrackingConsent />
<Header /> <Header />
<main><slot /></main> <main><slot /></main>
<Spacer /> <Spacer />

2
src/routes/+layout.ts Normal file
View file

@ -0,0 +1,2 @@
export const prerender = true;
export const trailingSlash = 'always';

4
src/routes/+page.md
View file

@ -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). 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). 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. problems I've encountered.
<style> <style>
@ -32,7 +32,7 @@ problems I've encountered.
max-width: 320px; max-width: 320px;
max-height: 320px; max-height: 320px;
margin: 0 auto; 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 { h1 {

1
src/routes/footer.svelte → src/routes/Footer.svelte
View file

@ -9,7 +9,6 @@
<a href="https://gitea.bgenc.net/kaan/bgenc.net">gitea.bgenc.net</a>. <a href="https://gitea.bgenc.net/kaan/bgenc.net">gitea.bgenc.net</a>.
</div> </div>
<div>.</div> <div>.</div>
<div class="rss"><a href="/posts/index.xml" target="_blank" title="rss">RSS</a></div>
</div> </div>
<div> <div>

3
src/routes/header.svelte → src/routes/Header.svelte
View file

@ -1,12 +1,11 @@
<script> <script>
import Spacer from '$lib/spacer.svelte'; import Spacer from '$lib/Spacer.svelte';
</script> </script>
<header> <header>
<a href="/" class="title">Kaan Barmore-Genç</a> <a href="/" class="title">Kaan Barmore-Genç</a>
<Spacer /> <Spacer />
<a href="/portfolio">Portfolio</a> <a href="/portfolio">Portfolio</a>
<a href="/posts">Blog</a>
</header> </header>
<style> <style>

71
src/routes/TrackingConsent.svelte Normal file
View 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
src/routes/[slug]/+page.ts
View file

@ -1,4 +1,5 @@
export async function load({ params }) { export async function load({ params }) {
console.log('params', params);
const post = await import(`../posts/${params.slug}.md`); const post = await import(`../posts/${params.slug}.md`);
const { title, date } = post.metadata; const { title, date } = post.metadata;
const content = post.default; const content = post.default;

1
src/routes/posts/+page.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { format } from 'date-fns'; import { format } from 'date-fns';
import { entries } from 'lodash';
export let data; export let data;
function groupPosts(posts: any[]) { function groupPosts(posts: any[]) {

5
src/routes/posts/+page.ts
View file

@ -8,9 +8,12 @@ export async function load() {
iterablePostFiles.map(async ([path, resolver]) => { iterablePostFiles.map(async ([path, resolver]) => {
const { metadata } = await resolver(); const { metadata } = await resolver();
const slug = /[^/]*[/](.*)[.]md/.exec(path)?.[1];
if (!slug) throw new Error(`Could not parse slug from path: ${path}`);
return { return {
meta: metadata, meta: metadata,
path: _.trimEnd(_.last(path.split('/')), '.md') path: slug
}; };
}) })
); );

47
src/routes/posts/2022.10.15.browser-caching-304-assets-not-revalidated.md
View file

@ -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:
![Browser developer tools window, there is only 1 request for /](/img/browser-caching-before.png)
With the `Cache-Control` header:
![Browser developer tools window, there are 5 requests in total, including /, style.css, and 3 images.](/img/browser-caching-after.png)

13
svelte.config.js
View file

@ -1,4 +1,4 @@
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite'; import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex } from 'mdsvex'; import { mdsvex } from 'mdsvex';
@ -19,10 +19,13 @@ const config = {
extensions: ['.svelte', '.md'], extensions: ['.svelte', '.md'],
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. adapter: adapter({
// If your environment is not supported or you settled on a specific environment, switch out the adapter. strict: false,
// See https://kit.svelte.dev/docs/adapters for more information about adapters. pages: 'build'
adapter: adapter() }),
prerender: {
handleHttpError: 'warn'
}
} }
}; };