[Archived] Archived WIP of vielle.dev

Add anchor polyfill

vielle.dev 03e4fd41 ba492406

verified
+87
+1
package.json
··· 15 15 "@astrojs/mdx": "^4.3.0", 16 16 "@astrojs/rss": "^4.0.12", 17 17 "@astrojs/sitemap": "^3.4.1", 18 + "@oddbird/css-anchor-positioning": "^0.6.1", 18 19 "astro": "5.11.0", 19 20 "lunarphase-js": "^2.0.3", 20 21 "markdown-it": "^14.1.0",
+63
pnpm-lock.yaml
··· 19 19 "@astrojs/sitemap": 20 20 specifier: ^3.4.1 21 21 version: 3.4.1 22 + "@oddbird/css-anchor-positioning": 23 + specifier: ^0.6.1 24 + version: 0.6.1 22 25 astro: 23 26 specifier: 5.11.0 24 27 version: 5.11.0(@types/node@22.15.20)(rollup@4.41.0)(typescript@5.8.3)(yaml@2.8.0) ··· 455 458 cpu: [x64] 456 459 os: [win32] 457 460 461 + "@floating-ui/core@1.7.2": 462 + resolution: 463 + { 464 + integrity: sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==, 465 + } 466 + 467 + "@floating-ui/dom@1.7.2": 468 + resolution: 469 + { 470 + integrity: sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==, 471 + } 472 + 473 + "@floating-ui/utils@0.2.10": 474 + resolution: 475 + { 476 + integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==, 477 + } 478 + 458 479 "@img/sharp-darwin-arm64@0.33.5": 459 480 resolution: 460 481 { ··· 649 670 integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==, 650 671 } 651 672 engines: { node: ">= 8" } 673 + 674 + "@oddbird/css-anchor-positioning@0.6.1": 675 + resolution: 676 + { 677 + integrity: sha512-/M1guQMJROMAFjS0uTmcg93S2X5r0Gwe6m5DqmRrGxNEUe1llmY6/Qw8UuhvexP6yeD+GDCP9CJtXBJS1vS9UQ==, 678 + } 652 679 653 680 "@oslojs/encoding@1.1.0": 654 681 resolution: ··· 876 903 integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==, 877 904 } 878 905 906 + "@types/css-tree@2.3.10": 907 + resolution: 908 + { 909 + integrity: sha512-WcaBazJ84RxABvRttQjjFWgTcHvZR9jGr0Y3hccPkHjFyk/a3N8EuxjKr+QfrwjoM5b1yI1Uj1i7EzOAAwBwag==, 910 + } 911 + 879 912 "@types/debug@4.1.12": 880 913 resolution: 881 914 { ··· 2384 2417 integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==, 2385 2418 } 2386 2419 engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 } 2420 + hasBin: true 2421 + 2422 + nanoid@5.1.5: 2423 + resolution: 2424 + { 2425 + integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==, 2426 + } 2427 + engines: { node: ^18 || >=20 } 2387 2428 hasBin: true 2388 2429 2389 2430 neotraverse@0.6.18: ··· 3908 3949 "@esbuild/win32-x64@0.25.4": 3909 3950 optional: true 3910 3951 3952 + "@floating-ui/core@1.7.2": 3953 + dependencies: 3954 + "@floating-ui/utils": 0.2.10 3955 + 3956 + "@floating-ui/dom@1.7.2": 3957 + dependencies: 3958 + "@floating-ui/core": 1.7.2 3959 + "@floating-ui/utils": 0.2.10 3960 + 3961 + "@floating-ui/utils@0.2.10": {} 3962 + 3911 3963 "@img/sharp-darwin-arm64@0.33.5": 3912 3964 optionalDependencies: 3913 3965 "@img/sharp-libvips-darwin-arm64": 1.0.4 ··· 4027 4079 "@nodelib/fs.scandir": 2.1.5 4028 4080 fastq: 1.19.1 4029 4081 4082 + "@oddbird/css-anchor-positioning@0.6.1": 4083 + dependencies: 4084 + "@floating-ui/dom": 1.7.2 4085 + "@types/css-tree": 2.3.10 4086 + css-tree: 3.1.0 4087 + nanoid: 5.1.5 4088 + 4030 4089 "@oslojs/encoding@1.1.0": {} 4031 4090 4032 4091 "@rollup/pluginutils@5.1.4(rollup@4.41.0)": ··· 4133 4192 "@swc/helpers@0.5.17": 4134 4193 dependencies: 4135 4194 tslib: 2.8.1 4195 + 4196 + "@types/css-tree@2.3.10": {} 4136 4197 4137 4198 "@types/debug@4.1.12": 4138 4199 dependencies: ··· 5390 5451 muggle-string@0.4.1: {} 5391 5452 5392 5453 nanoid@3.3.11: {} 5454 + 5455 + nanoid@5.1.5: {} 5393 5456 5394 5457 neotraverse@0.6.18: {} 5395 5458
+7
src/Base.astro
··· 32 32 // sets the timezone offset 33 33 document.cookie = `timezone=${new Date().toString()};path=/`; 34 34 </script> 35 + <script> 36 + import polyfill from "@oddbird/css-anchor-positioning/fn"; 37 + polyfill().then(() => { 38 + console.log("Loaded anchor polyfill"); 39 + document.body.dataset.anchorPolyfill = "loaded"; 40 + }); 41 + </script> 35 42 <!-- default styles --> 36 43 <style is:global> 37 44 @layer reset {
+16
src/components/generic/Nav.astro
··· 117 117 padding: 10px 20px; 118 118 width: max-content; 119 119 120 + /* fallback for no anchor support */ 121 + border-color: red; 122 + 123 + /* browser native anchor-positioning (chromium 125+ at time of writing) */ 124 + @supports (anchor-name: --supports-anchor) { 125 + border-color: blue; 126 + } 127 + 128 + /* polyfilled anchor-positioning 129 + polyfill doesnt trigger support */ 130 + @supports not (anchor-name: --supports-anchor) { 131 + [data-anchor-polyfill="loaded"] & { 132 + border-color: yellow; 133 + } 134 + } 135 + 120 136 ul { 121 137 margin-left: 1em; 122 138 }