From d423a4cffc6b67536e866ef2b08622b748e30403 Mon Sep 17 00:00:00 2001 From: Maciej Jur Date: Mon, 24 Apr 2023 00:43:33 +0200 Subject: [PATCH] Add sidenotes, update deps --- package.json | 2 +- pnpm-lock.yaml | 243 ++++++++++++++------------ src/components/Sidenote.astro | 3 + src/content/posts/{css.md => css.mdx} | 17 +- 4 files changed, 148 insertions(+), 117 deletions(-) create mode 100644 src/components/Sidenote.astro rename src/content/posts/{css.md => css.mdx} (98%) diff --git a/package.json b/package.json index 167a863..e2e4bcf 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89b62ec..037ad93 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/src/components/Sidenote.astro b/src/components/Sidenote.astro new file mode 100644 index 0000000..cf2c6c6 --- /dev/null +++ b/src/components/Sidenote.astro @@ -0,0 +1,3 @@ + diff --git a/src/content/posts/css.md b/src/content/posts/css.mdx similarity index 98% rename from src/content/posts/css.md rename to src/content/posts/css.mdx index 4d86072..7c0b759 100644 --- a/src/content/posts/css.md +++ b/src/content/posts/css.mdx @@ -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() %} + 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 %} + 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() %} + 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 %} + Another problem is that we are using a very generic element `
` as a selector, which means that every single `
` that is a child of `` will receive these styles. That could be a bad thing if we would like to use `
` 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() %} + 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 %} + 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() %} + 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 %} + 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.