Add sidenotes, update deps

This commit is contained in:
Maciej Jur 2023-04-24 00:43:33 +02:00
parent a2707fa942
commit d423a4cffc
4 changed files with 148 additions and 117 deletions

View file

@ -17,7 +17,7 @@
"leaflet": "^1.9.3",
"leaflet.markercluster": "^1.5.3",
"lunr": "^2.3.9",
"rehype-katex": "^6.0.2",
"rehype-katex": "^6.0.3",
"rehype-raw": "^6.1.1",
"rehype-stringify": "^9.0.3",
"remark-emoji": "^3.1.1",

View file

@ -3,7 +3,7 @@ lockfileVersion: '6.0'
dependencies:
'@astrojs/mdx':
specifier: ^0.19.0
version: 0.19.0(astro@2.3.0)(rollup@3.20.7)
version: 0.19.0(astro@2.3.0)(rollup@3.21.0)
'@astrojs/solid-js':
specifier: ^2.1.0
version: 2.1.0(@babel/core@7.21.4)(solid-js@1.7.3)
@ -23,8 +23,8 @@ dependencies:
specifier: ^2.3.9
version: 2.3.9
rehype-katex:
specifier: ^6.0.2
version: 6.0.2
specifier: ^6.0.3
version: 6.0.3
rehype-raw:
specifier: ^6.1.1
version: 6.1.1
@ -101,9 +101,9 @@ packages:
resolution: {integrity: sha512-fPovAX/X46eE2w03jNRMpQ7W9m2mAvNt4Ay65lD9wl1Z5vIQYxlg7Enp9qP225muTr4jSVB5QiLumFJmZMAaVA==}
hasBin: true
dependencies:
'@vscode/emmet-helper': 2.8.6
'@vscode/emmet-helper': 2.8.7
events: 3.3.0
prettier: 2.8.7
prettier: 2.8.8
prettier-plugin-astro: 0.7.2
source-map: 0.7.4
vscode-css-languageservice: 6.2.4
@ -138,14 +138,14 @@ packages:
- supports-color
dev: false
/@astrojs/mdx@0.19.0(astro@2.3.0)(rollup@3.20.7):
/@astrojs/mdx@0.19.0(astro@2.3.0)(rollup@3.21.0):
resolution: {integrity: sha512-McFpMV+npinIEKnY5t9hsdzLd76g78GgIRUPxem2OeXPNB8xr2pNS28GeU0+6Pn5STnB+sgcyyeqXLgzauOlMQ==}
engines: {node: '>=16.12.0'}
dependencies:
'@astrojs/markdown-remark': 2.1.4(astro@2.3.0)
'@astrojs/prism': 2.1.1
'@mdx-js/mdx': 2.3.0
'@mdx-js/rollup': 2.3.0(rollup@3.20.7)
'@mdx-js/rollup': 2.3.0(rollup@3.21.0)
acorn: 8.8.2
es-module-lexer: 1.2.1
estree-util-visit: 1.2.1
@ -463,8 +463,8 @@ packages:
resolution: {integrity: sha512-1ESCGgXRgn1r29hRmz8K0G4Ywr5jDWezMgRnICComBCWmg3znLWU8+tmakuM1og1Vn4W/sauvlABl/oq2pve8w==}
dev: false
/@esbuild/android-arm64@0.17.17:
resolution: {integrity: sha512-jaJ5IlmaDLFPNttv0ofcwy/cfeY4bh/n705Tgh+eLObbGtQBK3EPAu+CzL95JVE4nFAliyrnEu0d32Q5foavqg==}
/@esbuild/android-arm64@0.17.18:
resolution: {integrity: sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==}
engines: {node: '>=12'}
cpu: [arm64]
os: [android]
@ -472,8 +472,8 @@ packages:
dev: false
optional: true
/@esbuild/android-arm@0.17.17:
resolution: {integrity: sha512-E6VAZwN7diCa3labs0GYvhEPL2M94WLF8A+czO8hfjREXxba8Ng7nM5VxV+9ihNXIY1iQO1XxUU4P7hbqbICxg==}
/@esbuild/android-arm@0.17.18:
resolution: {integrity: sha512-EmwL+vUBZJ7mhFCs5lA4ZimpUH3WMAoqvOIYhVQwdIgSpHC8ImHdsRyhHAVxpDYUSm0lWvd63z0XH1IlImS2Qw==}
engines: {node: '>=12'}
cpu: [arm]
os: [android]
@ -481,8 +481,8 @@ packages:
dev: false
optional: true
/@esbuild/android-x64@0.17.17:
resolution: {integrity: sha512-446zpfJ3nioMC7ASvJB1pszHVskkw4u/9Eu8s5yvvsSDTzYh4p4ZIRj0DznSl3FBF0Z/mZfrKXTtt0QCoFmoHA==}
/@esbuild/android-x64@0.17.18:
resolution: {integrity: sha512-x+0efYNBF3NPW2Xc5bFOSFW7tTXdAcpfEg2nXmxegm4mJuVeS+i109m/7HMiOQ6M12aVGGFlqJX3RhNdYM2lWg==}
engines: {node: '>=12'}
cpu: [x64]
os: [android]
@ -490,8 +490,8 @@ packages:
dev: false
optional: true
/@esbuild/darwin-arm64@0.17.17:
resolution: {integrity: sha512-m/gwyiBwH3jqfUabtq3GH31otL/0sE0l34XKpSIqR7NjQ/XHQ3lpmQHLHbG8AHTGCw8Ao059GvV08MS0bhFIJQ==}
/@esbuild/darwin-arm64@0.17.18:
resolution: {integrity: sha512-6tY+djEAdF48M1ONWnQb1C+6LiXrKjmqjzPNPWXhu/GzOHTHX2nh8Mo2ZAmBFg0kIodHhciEgUBtcYCAIjGbjQ==}
engines: {node: '>=12'}
cpu: [arm64]
os: [darwin]
@ -499,8 +499,8 @@ packages:
dev: false
optional: true
/@esbuild/darwin-x64@0.17.17:
resolution: {integrity: sha512-4utIrsX9IykrqYaXR8ob9Ha2hAY2qLc6ohJ8c0CN1DR8yWeMrTgYFjgdeQ9LIoTOfLetXjuCu5TRPHT9yKYJVg==}
/@esbuild/darwin-x64@0.17.18:
resolution: {integrity: sha512-Qq84ykvLvya3dO49wVC9FFCNUfSrQJLbxhoQk/TE1r6MjHo3sFF2tlJCwMjhkBVq3/ahUisj7+EpRSz0/+8+9A==}
engines: {node: '>=12'}
cpu: [x64]
os: [darwin]
@ -508,8 +508,8 @@ packages:
dev: false
optional: true
/@esbuild/freebsd-arm64@0.17.17:
resolution: {integrity: sha512-4PxjQII/9ppOrpEwzQ1b0pXCsFLqy77i0GaHodrmzH9zq2/NEhHMAMJkJ635Ns4fyJPFOlHMz4AsklIyRqFZWA==}
/@esbuild/freebsd-arm64@0.17.18:
resolution: {integrity: sha512-fw/ZfxfAzuHfaQeMDhbzxp9mc+mHn1Y94VDHFHjGvt2Uxl10mT4CDavHm+/L9KG441t1QdABqkVYwakMUeyLRA==}
engines: {node: '>=12'}
cpu: [arm64]
os: [freebsd]
@ -517,8 +517,8 @@ packages:
dev: false
optional: true
/@esbuild/freebsd-x64@0.17.17:
resolution: {integrity: sha512-lQRS+4sW5S3P1sv0z2Ym807qMDfkmdhUYX30GRBURtLTrJOPDpoU0kI6pVz1hz3U0+YQ0tXGS9YWveQjUewAJw==}
/@esbuild/freebsd-x64@0.17.18:
resolution: {integrity: sha512-FQFbRtTaEi8ZBi/A6kxOC0V0E9B/97vPdYjY9NdawyLd4Qk5VD5g2pbWN2VR1c0xhzcJm74HWpObPszWC+qTew==}
engines: {node: '>=12'}
cpu: [x64]
os: [freebsd]
@ -526,8 +526,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-arm64@0.17.17:
resolution: {integrity: sha512-2+pwLx0whKY1/Vqt8lyzStyda1v0qjJ5INWIe+d8+1onqQxHLLi3yr5bAa4gvbzhZqBztifYEu8hh1La5+7sUw==}
/@esbuild/linux-arm64@0.17.18:
resolution: {integrity: sha512-R7pZvQZFOY2sxUG8P6A21eq6q+eBv7JPQYIybHVf1XkQYC+lT7nDBdC7wWKTrbvMXKRaGudp/dzZCwL/863mZQ==}
engines: {node: '>=12'}
cpu: [arm64]
os: [linux]
@ -535,8 +535,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-arm@0.17.17:
resolution: {integrity: sha512-biDs7bjGdOdcmIk6xU426VgdRUpGg39Yz6sT9Xp23aq+IEHDb/u5cbmu/pAANpDB4rZpY/2USPhCA+w9t3roQg==}
/@esbuild/linux-arm@0.17.18:
resolution: {integrity: sha512-jW+UCM40LzHcouIaqv3e/oRs0JM76JfhHjCavPxMUti7VAPh8CaGSlS7cmyrdpzSk7A+8f0hiedHqr/LMnfijg==}
engines: {node: '>=12'}
cpu: [arm]
os: [linux]
@ -544,8 +544,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-ia32@0.17.17:
resolution: {integrity: sha512-IBTTv8X60dYo6P2t23sSUYym8fGfMAiuv7PzJ+0LcdAndZRzvke+wTVxJeCq4WgjppkOpndL04gMZIFvwoU34Q==}
/@esbuild/linux-ia32@0.17.18:
resolution: {integrity: sha512-ygIMc3I7wxgXIxk6j3V00VlABIjq260i967Cp9BNAk5pOOpIXmd1RFQJQX9Io7KRsthDrQYrtcx7QCof4o3ZoQ==}
engines: {node: '>=12'}
cpu: [ia32]
os: [linux]
@ -553,8 +553,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-loong64@0.17.17:
resolution: {integrity: sha512-WVMBtcDpATjaGfWfp6u9dANIqmU9r37SY8wgAivuKmgKHE+bWSuv0qXEFt/p3qXQYxJIGXQQv6hHcm7iWhWjiw==}
/@esbuild/linux-loong64@0.17.18:
resolution: {integrity: sha512-bvPG+MyFs5ZlwYclCG1D744oHk1Pv7j8psF5TfYx7otCVmcJsEXgFEhQkbhNW8otDHL1a2KDINW20cfCgnzgMQ==}
engines: {node: '>=12'}
cpu: [loong64]
os: [linux]
@ -562,8 +562,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-mips64el@0.17.17:
resolution: {integrity: sha512-2kYCGh8589ZYnY031FgMLy0kmE4VoGdvfJkxLdxP4HJvWNXpyLhjOvxVsYjYZ6awqY4bgLR9tpdYyStgZZhi2A==}
/@esbuild/linux-mips64el@0.17.18:
resolution: {integrity: sha512-oVqckATOAGuiUOa6wr8TXaVPSa+6IwVJrGidmNZS1cZVx0HqkTMkqFGD2HIx9H1RvOwFeWYdaYbdY6B89KUMxA==}
engines: {node: '>=12'}
cpu: [mips64el]
os: [linux]
@ -571,8 +571,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-ppc64@0.17.17:
resolution: {integrity: sha512-KIdG5jdAEeAKogfyMTcszRxy3OPbZhq0PPsW4iKKcdlbk3YE4miKznxV2YOSmiK/hfOZ+lqHri3v8eecT2ATwQ==}
/@esbuild/linux-ppc64@0.17.18:
resolution: {integrity: sha512-3dLlQO+b/LnQNxgH4l9rqa2/IwRJVN9u/bK63FhOPB4xqiRqlQAU0qDU3JJuf0BmaH0yytTBdoSBHrb2jqc5qQ==}
engines: {node: '>=12'}
cpu: [ppc64]
os: [linux]
@ -580,8 +580,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-riscv64@0.17.17:
resolution: {integrity: sha512-Cj6uWLBR5LWhcD/2Lkfg2NrkVsNb2sFM5aVEfumKB2vYetkA/9Uyc1jVoxLZ0a38sUhFk4JOVKH0aVdPbjZQeA==}
/@esbuild/linux-riscv64@0.17.18:
resolution: {integrity: sha512-/x7leOyDPjZV3TcsdfrSI107zItVnsX1q2nho7hbbQoKnmoeUWjs+08rKKt4AUXju7+3aRZSsKrJtaRmsdL1xA==}
engines: {node: '>=12'}
cpu: [riscv64]
os: [linux]
@ -589,8 +589,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-s390x@0.17.17:
resolution: {integrity: sha512-lK+SffWIr0XsFf7E0srBjhpkdFVJf3HEgXCwzkm69kNbRar8MhezFpkIwpk0qo2IOQL4JE4mJPJI8AbRPLbuOQ==}
/@esbuild/linux-s390x@0.17.18:
resolution: {integrity: sha512-cX0I8Q9xQkL/6F5zWdYmVf5JSQt+ZfZD2bJudZrWD+4mnUvoZ3TDDXtDX2mUaq6upMFv9FlfIh4Gfun0tbGzuw==}
engines: {node: '>=12'}
cpu: [s390x]
os: [linux]
@ -598,8 +598,8 @@ packages:
dev: false
optional: true
/@esbuild/linux-x64@0.17.17:
resolution: {integrity: sha512-XcSGTQcWFQS2jx3lZtQi7cQmDYLrpLRyz1Ns1DzZCtn898cWfm5Icx/DEWNcTU+T+tyPV89RQtDnI7qL2PObPg==}
/@esbuild/linux-x64@0.17.18:
resolution: {integrity: sha512-66RmRsPlYy4jFl0vG80GcNRdirx4nVWAzJmXkevgphP1qf4dsLQCpSKGM3DUQCojwU1hnepI63gNZdrr02wHUA==}
engines: {node: '>=12'}
cpu: [x64]
os: [linux]
@ -607,8 +607,8 @@ packages:
dev: false
optional: true
/@esbuild/netbsd-x64@0.17.17:
resolution: {integrity: sha512-RNLCDmLP5kCWAJR+ItLM3cHxzXRTe4N00TQyQiimq+lyqVqZWGPAvcyfUBM0isE79eEZhIuGN09rAz8EL5KdLA==}
/@esbuild/netbsd-x64@0.17.18:
resolution: {integrity: sha512-95IRY7mI2yrkLlTLb1gpDxdC5WLC5mZDi+kA9dmM5XAGxCME0F8i4bYH4jZreaJ6lIZ0B8hTrweqG1fUyW7jbg==}
engines: {node: '>=12'}
cpu: [x64]
os: [netbsd]
@ -616,8 +616,8 @@ packages:
dev: false
optional: true
/@esbuild/openbsd-x64@0.17.17:
resolution: {integrity: sha512-PAXswI5+cQq3Pann7FNdcpSUrhrql3wKjj3gVkmuz6OHhqqYxKvi6GgRBoaHjaG22HV/ZZEgF9TlS+9ftHVigA==}
/@esbuild/openbsd-x64@0.17.18:
resolution: {integrity: sha512-WevVOgcng+8hSZ4Q3BKL3n1xTv5H6Nb53cBrtzzEjDbbnOmucEVcZeGCsCOi9bAOcDYEeBZbD2SJNBxlfP3qiA==}
engines: {node: '>=12'}
cpu: [x64]
os: [openbsd]
@ -625,8 +625,8 @@ packages:
dev: false
optional: true
/@esbuild/sunos-x64@0.17.17:
resolution: {integrity: sha512-V63egsWKnx/4V0FMYkr9NXWrKTB5qFftKGKuZKFIrAkO/7EWLFnbBZNM1CvJ6Sis+XBdPws2YQSHF1Gqf1oj/Q==}
/@esbuild/sunos-x64@0.17.18:
resolution: {integrity: sha512-Rzf4QfQagnwhQXVBS3BYUlxmEbcV7MY+BH5vfDZekU5eYpcffHSyjU8T0xucKVuOcdCsMo+Ur5wmgQJH2GfNrg==}
engines: {node: '>=12'}
cpu: [x64]
os: [sunos]
@ -634,8 +634,8 @@ packages:
dev: false
optional: true
/@esbuild/win32-arm64@0.17.17:
resolution: {integrity: sha512-YtUXLdVnd6YBSYlZODjWzH+KzbaubV0YVd6UxSfoFfa5PtNJNaW+1i+Hcmjpg2nEe0YXUCNF5bkKy1NnBv1y7Q==}
/@esbuild/win32-arm64@0.17.18:
resolution: {integrity: sha512-Kb3Ko/KKaWhjeAm2YoT/cNZaHaD1Yk/pa3FTsmqo9uFh1D1Rfco7BBLIPdDOozrObj2sahslFuAQGvWbgWldAg==}
engines: {node: '>=12'}
cpu: [arm64]
os: [win32]
@ -643,8 +643,8 @@ packages:
dev: false
optional: true
/@esbuild/win32-ia32@0.17.17:
resolution: {integrity: sha512-yczSLRbDdReCO74Yfc5tKG0izzm+lPMYyO1fFTcn0QNwnKmc3K+HdxZWLGKg4pZVte7XVgcFku7TIZNbWEJdeQ==}
/@esbuild/win32-ia32@0.17.18:
resolution: {integrity: sha512-0/xUMIdkVHwkvxfbd5+lfG7mHOf2FRrxNbPiKWg9C4fFrB8H0guClmaM3BFiRUYrznVoyxTIyC/Ou2B7QQSwmw==}
engines: {node: '>=12'}
cpu: [ia32]
os: [win32]
@ -652,8 +652,8 @@ packages:
dev: false
optional: true
/@esbuild/win32-x64@0.17.17:
resolution: {integrity: sha512-FNZw7H3aqhF9OyRQbDDnzUApDXfC1N6fgBhkqEO2jvYCJ+DxMTfZVqg3AX0R1khg1wHTBRD5SdcibSJ+XF6bFg==}
/@esbuild/win32-x64@0.17.18:
resolution: {integrity: sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==}
engines: {node: '>=12'}
cpu: [x64]
os: [win32]
@ -723,14 +723,14 @@ packages:
- supports-color
dev: false
/@mdx-js/rollup@2.3.0(rollup@3.20.7):
/@mdx-js/rollup@2.3.0(rollup@3.21.0):
resolution: {integrity: sha512-wLvRfJS/M4UmdqTd+WoaySEE7q4BIejYf1xAHXYvtT1du/1Tl/z2450Gg2+Hu7fh05KwRRiehiTP9Yc/Dtn0fA==}
peerDependencies:
rollup: '>=2'
dependencies:
'@mdx-js/mdx': 2.3.0
'@rollup/pluginutils': 5.0.2(rollup@3.20.7)
rollup: 3.20.7
'@rollup/pluginutils': 5.0.2(rollup@3.21.0)
rollup: 3.21.0
source-map: 0.7.4
vfile: 5.3.7
transitivePeerDependencies:
@ -770,7 +770,7 @@ packages:
tslib: 2.5.0
dev: false
/@rollup/pluginutils@5.0.2(rollup@3.20.7):
/@rollup/pluginutils@5.0.2(rollup@3.21.0):
resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
engines: {node: '>=14.0.0'}
peerDependencies:
@ -782,7 +782,7 @@ packages:
'@types/estree': 1.0.1
estree-walker: 2.0.2
picomatch: 2.3.1
rollup: 3.20.7
rollup: 3.21.0
dev: false
/@types/acorn@4.0.6:
@ -850,8 +850,8 @@ packages:
resolution: {integrity: sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==}
dev: false
/@types/katex@0.11.1:
resolution: {integrity: sha512-DUlIj2nk0YnJdlWgsFuVKcX27MLW0KbKmGVoUHmFr+74FYYNUDAaj9ZqTADvsbE8rfxuVmSFc7KczYn5Y09ozg==}
/@types/katex@0.14.0:
resolution: {integrity: sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==}
dev: false
/@types/katex@0.16.0:
@ -913,8 +913,8 @@ packages:
resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
dev: false
/@vscode/emmet-helper@2.8.6:
resolution: {integrity: sha512-IIB8jbiKy37zN8bAIHx59YmnIelY78CGHtThnibD/d3tQOKRY83bYVi9blwmZVUZh6l9nfkYH3tvReaiNxY9EQ==}
/@vscode/emmet-helper@2.8.7:
resolution: {integrity: sha512-y67wWaWBhlWKMX3FNOXcMPh83+xS31IqobBP6vi3HkMRxv14Bti3xgu+ya/c3oKZ0OM/QMvO+oBCwGWqbPv7Rw==}
dependencies:
emmet: 2.4.2
jsonc-parser: 2.3.1
@ -1081,7 +1081,7 @@ packages:
'@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.21.4)
'@babel/types': 7.21.4
html-entities: 2.3.3
validate-html-nesting: 1.2.1
validate-html-nesting: 1.2.2
dev: false
/babel-preset-solid@1.7.3(@babel/core@7.21.4):
@ -1394,38 +1394,43 @@ packages:
resolution: {integrity: sha512-dqx7eA9YaqyvYtUhJwT4rC1HIp82j5ybS1/vQ42ur+jBe17dJMwZE4+gvL1XadSFfxaPFFGt3Xsw+Y8akThDlw==}
dev: false
/entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
dev: false
/es-module-lexer@1.2.1:
resolution: {integrity: sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==}
dev: false
/esbuild@0.17.17:
resolution: {integrity: sha512-/jUywtAymR8jR4qsa2RujlAF7Krpt5VWi72Q2yuLD4e/hvtNcFQ0I1j8m/bxq238pf3/0KO5yuXNpuLx8BE1KA==}
/esbuild@0.17.18:
resolution: {integrity: sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
optionalDependencies:
'@esbuild/android-arm': 0.17.17
'@esbuild/android-arm64': 0.17.17
'@esbuild/android-x64': 0.17.17
'@esbuild/darwin-arm64': 0.17.17
'@esbuild/darwin-x64': 0.17.17
'@esbuild/freebsd-arm64': 0.17.17
'@esbuild/freebsd-x64': 0.17.17
'@esbuild/linux-arm': 0.17.17
'@esbuild/linux-arm64': 0.17.17
'@esbuild/linux-ia32': 0.17.17
'@esbuild/linux-loong64': 0.17.17
'@esbuild/linux-mips64el': 0.17.17
'@esbuild/linux-ppc64': 0.17.17
'@esbuild/linux-riscv64': 0.17.17
'@esbuild/linux-s390x': 0.17.17
'@esbuild/linux-x64': 0.17.17
'@esbuild/netbsd-x64': 0.17.17
'@esbuild/openbsd-x64': 0.17.17
'@esbuild/sunos-x64': 0.17.17
'@esbuild/win32-arm64': 0.17.17
'@esbuild/win32-ia32': 0.17.17
'@esbuild/win32-x64': 0.17.17
'@esbuild/android-arm': 0.17.18
'@esbuild/android-arm64': 0.17.18
'@esbuild/android-x64': 0.17.18
'@esbuild/darwin-arm64': 0.17.18
'@esbuild/darwin-x64': 0.17.18
'@esbuild/freebsd-arm64': 0.17.18
'@esbuild/freebsd-x64': 0.17.18
'@esbuild/linux-arm': 0.17.18
'@esbuild/linux-arm64': 0.17.18
'@esbuild/linux-ia32': 0.17.18
'@esbuild/linux-loong64': 0.17.18
'@esbuild/linux-mips64el': 0.17.18
'@esbuild/linux-ppc64': 0.17.18
'@esbuild/linux-riscv64': 0.17.18
'@esbuild/linux-s390x': 0.17.18
'@esbuild/linux-x64': 0.17.18
'@esbuild/netbsd-x64': 0.17.18
'@esbuild/openbsd-x64': 0.17.18
'@esbuild/sunos-x64': 0.17.18
'@esbuild/win32-arm64': 0.17.18
'@esbuild/win32-ia32': 0.17.18
'@esbuild/win32-x64': 0.17.18
dev: false
/escalade@3.1.1:
@ -1665,6 +1670,31 @@ packages:
function-bind: 1.1.1
dev: false
/hast-util-from-dom@4.2.0:
resolution: {integrity: sha512-t1RJW/OpJbCAJQeKi3Qrj1cAOLA0+av/iPFori112+0X7R3wng+jxLA+kXec8K4szqPRGI8vPxbbpEYvvpwaeQ==}
dependencies:
hastscript: 7.2.0
web-namespaces: 2.0.1
dev: false
/hast-util-from-html-isomorphic@1.0.0:
resolution: {integrity: sha512-Yu480AKeOEN/+l5LA674a+7BmIvtDj24GvOt7MtQWuhzUwlaaRWdEPXAh3Qm5vhuthpAipFb2vTetKXWOjmTvw==}
dependencies:
'@types/hast': 2.3.4
hast-util-from-dom: 4.2.0
hast-util-from-html: 1.0.1
unist-util-remove-position: 4.0.2
dev: false
/hast-util-from-html@1.0.1:
resolution: {integrity: sha512-ehTy+4Lz1YAVF6enEuL9QFUHqJKRxAc8a7KACyhawY+YqTG5pLkrBHfykXELEy75N601fHDr36HIqCGSNxmgZw==}
dependencies:
'@types/hast': 2.3.4
hast-util-from-parse5: 7.1.2
parse5: 7.1.2
vfile: 5.3.7
dev: false
/hast-util-from-parse5@7.1.2:
resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==}
dependencies:
@ -1955,13 +1985,6 @@ packages:
resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
dev: false
/katex@0.15.6:
resolution: {integrity: sha512-UpzJy4yrnqnhXvRPhjEuLA4lcPn6eRngixW7Q3TJErjg3Aw2PuLFBzTkdUb89UtumxjhHTqL3a5GDGETMSwgJA==}
hasBin: true
dependencies:
commander: 8.3.0
dev: false
/katex@0.16.6:
resolution: {integrity: sha512-XVB7X8jEogjJ+OY+a9JdE+VOk9i7znela0HP6WaDbpB4sUh8ghrG0Ccluu2MA2tcJbFAViBC9aVXus2UvkEr8A==}
hasBin: true
@ -2795,6 +2818,12 @@ packages:
resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
dev: false
/parse5@7.1.2:
resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
dependencies:
entities: 4.5.0
dev: false
/path-exists@4.0.0:
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
engines: {node: '>=8'}
@ -2870,13 +2899,13 @@ packages:
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
dependencies:
'@astrojs/compiler': 0.31.4
prettier: 2.8.7
prettier: 2.8.8
sass-formatter: 0.7.6
synckit: 0.8.5
dev: false
/prettier@2.8.7:
resolution: {integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==}
/prettier@2.8.8:
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
engines: {node: '>=10.13.0'}
hasBin: true
dev: false
@ -2917,16 +2946,14 @@ packages:
dependencies:
picomatch: 2.3.1
/rehype-katex@6.0.2:
resolution: {integrity: sha512-C4gDAlS1+l0hJqctyiU64f9CvT00S03qV1T6HiMzbSuLBgWUtcqydWHY9OpKrm0SpkK16FNd62CDKyWLwV2ppg==}
/rehype-katex@6.0.3:
resolution: {integrity: sha512-ByZlRwRUcWegNbF70CVRm2h/7xy7jQ3R9LaY4VVSvjnoVWwWVhNL60DiZsBpC5tSzYQOCvDbzncIpIjPZWodZA==}
dependencies:
'@types/hast': 2.3.4
'@types/katex': 0.11.1
'@types/katex': 0.14.0
hast-util-from-html-isomorphic: 1.0.0
hast-util-to-text: 3.1.2
katex: 0.15.6
rehype-parse: 8.0.4
unified: 10.1.2
unist-util-remove-position: 4.0.2
katex: 0.16.6
unist-util-visit: 4.1.2
dev: false
@ -3101,8 +3128,8 @@ packages:
engines: {node: '>=10.0.0'}
dev: false
/rollup@3.20.7:
resolution: {integrity: sha512-P7E2zezKSLhWnTz46XxjSmInrbOCiul1yf+kJccMxT56vxjHwCbDfoLbiqFgu+WQoo9ij2PkraYaBstgB2prBA==}
/rollup@3.21.0:
resolution: {integrity: sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
optionalDependencies:
@ -3537,8 +3564,8 @@ packages:
sade: 1.8.1
dev: false
/validate-html-nesting@1.2.1:
resolution: {integrity: sha512-T1ab131NkP3BfXB7KUSgV7Rhu81R2id+L6NaJ7NypAAG5iV6gXnPpQE5RK1fvb+3JYsPTL+ihWna5sr5RN9gaQ==}
/validate-html-nesting@1.2.2:
resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==}
dev: false
/vfile-location@4.1.0:
@ -3589,9 +3616,9 @@ packages:
terser:
optional: true
dependencies:
esbuild: 0.17.17
esbuild: 0.17.18
postcss: 8.4.23
rollup: 3.20.7
rollup: 3.21.0
sass: 1.62.0
optionalDependencies:
fsevents: 2.3.2

View file

@ -0,0 +1,3 @@
<aside class="sc-sidenote">
<slot />
</aside>

View file

@ -3,14 +3,15 @@ title: "CSS - How do you even write that?"
date: 2022-10-01T21:06:44+02:00
tags: ["webdev"]
---
import Sidenote from '../../components/Sidenote.astro';
## Writing CSS is hard
I've heard many people say that CSS is pretty difficult to write. There are hundreds of properties to remember, some of which aren't even compatible with some browsers yet. CSS spec is certainly full of landmines and edge cases which not a single human can fully remember... and yet, I do enjoy writing CSS. Or rather, I should say that I enjoy writing SCSS, but fundamentally it doesn't change all that much.
{% sidenote() %}
<Sidenote>
According to the [index of CSS properties](https://www.w3.org/Style/CSS/all-properties.en.html) at the time of writing there are 158 properties with recommendation or note statuses. There are hundreds more properties with different statuses.
{% end %}
</Sidenote>
Throughout the years CSS has gotten better. We can now use things such as flexboxes or grids, we can create beautiful animations without an ounce of JavaScript being involved. Of course, first we have to learn all the various properties, how to combine them together to create the desired effects. However, in my experience at least, this isn't even the hardest part about CSS. I know lots of properties and complex selectors, and how to use them, and I do admit it was pretty difficult to figure out all of this stuff myself. The only thing I know for certain now is that there is no single straightforward way to *structure* your CSS.
@ -46,9 +47,9 @@ This might seem fairly reasonable at first, but there are a couple of problems t
First thing is that we are using "modifier" classes to modify the `.blog-post` class, to give it some different look, possibly because of being used in a different context. The result of nesting rules like that is creating rules with high specificity, which are sometimes very hard to override. For instance, the `.blog-post header .title` rule has a specificity of (2, 1). We won't be able to override that style with a rule `.blog-post .title` (2, 0).
{% sidenote() %}
<Sidenote>
Specificity is simply a number [calculated](https://specificity.keegan.st/) from the complexity of the selector. The higher the specificity, the more priority the CSS rule has. Many people argue that we should always aim for as low specificity as possible, which means we should use as simple rules as possible (but still specific!).
{% end %}
</Sidenote>
Another problem is that we are using a very generic element `<header>` as a selector, which means that every single `<header>` that is a child of `<element class="blog-post">` will receive these styles. That could be a bad thing if we would like to use `<header>` element in semantically different contexts, for example as an article header and as a section header.
@ -58,9 +59,9 @@ Third problem is that at some point we might realize that in fact certain elemen
We all would like to write reusable styles, but I honestly feel like all this talk about reusability is kind of the wrong way to look at the problem. What if we tried to write a new CSS rule for every single piece of our website anew without reusing anything? Surely, we would just end up with a colossal CSS file spanning over 6000 CSS rules with a total size of about 500 kB. We wouldn't really reuse anything. What's the opposite of that? What if we tried to reuse every single CSS rule? Well, then we would have to write a single CSS rule per every property we use, and then use these classes to assign each property individually.
{% sidenote() %}
<Sidenote>
The last idea is actually a thing, there are CSS frameworks out there which use this idea of "atomic CSS". One such example is [Tailwind CSS](https://tailwindcss.com/).
{% end %}
</Sidenote>
If we only used a single class per each property in CSS and assigned many of such classes to each HTML tag, wouldn't we just end up doing exactly the same thing as in the first idea, except now by doing it within the `class` attribute? Consider this element:
@ -74,9 +75,9 @@ I personally think that it is *possible* to find classes which are small enough
## To BEM, or not to BEM?
{% sidenote() %}
<Sidenote>
In short, [BEM](https://getbem.com/) is a naming convention which is all about writing class names in a very specific way. We write names as combinations of three parts: block, element and modifier, with the latter two being optional.
{% end %}
</Sidenote>
One of the things which have helped me improve the state of my CSS stylesheets is trying to incorporate BEM into the way I write my rules. I won't explain what it is exactly, because that's not the point, but I'll try to summarize my findings.