tangled
alpha
login
or
join now
vielle.dev
/
site-archive
0
fork
atom
[Archived] Archived WIP of vielle.dev
0
fork
atom
overview
issues
pulls
pipelines
Add anchor polyfill
vielle.dev
8 months ago
03e4fd41
ba492406
verified
This commit was signed with the committer's
known signature
.
vielle.dev
SSH Key Fingerprint:
SHA256:/4bvxqoEh9iMdjAPgcgAgXKZZQTROL3ULiPt6nH9RSs=
+87
4 changed files
expand all
collapse all
unified
split
package.json
pnpm-lock.yaml
src
Base.astro
components
generic
Nav.astro
+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
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
22
+
"@oddbird/css-anchor-positioning":
23
23
+
specifier: ^0.6.1
24
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
461
+
"@floating-ui/core@1.7.2":
462
462
+
resolution:
463
463
+
{
464
464
+
integrity: sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==,
465
465
+
}
466
466
+
467
467
+
"@floating-ui/dom@1.7.2":
468
468
+
resolution:
469
469
+
{
470
470
+
integrity: sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==,
471
471
+
}
472
472
+
473
473
+
"@floating-ui/utils@0.2.10":
474
474
+
resolution:
475
475
+
{
476
476
+
integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==,
477
477
+
}
478
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
673
+
674
674
+
"@oddbird/css-anchor-positioning@0.6.1":
675
675
+
resolution:
676
676
+
{
677
677
+
integrity: sha512-/M1guQMJROMAFjS0uTmcg93S2X5r0Gwe6m5DqmRrGxNEUe1llmY6/Qw8UuhvexP6yeD+GDCP9CJtXBJS1vS9UQ==,
678
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
906
+
"@types/css-tree@2.3.10":
907
907
+
resolution:
908
908
+
{
909
909
+
integrity: sha512-WcaBazJ84RxABvRttQjjFWgTcHvZR9jGr0Y3hccPkHjFyk/a3N8EuxjKr+QfrwjoM5b1yI1Uj1i7EzOAAwBwag==,
910
910
+
}
911
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
2420
+
hasBin: true
2421
2421
+
2422
2422
+
nanoid@5.1.5:
2423
2423
+
resolution:
2424
2424
+
{
2425
2425
+
integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==,
2426
2426
+
}
2427
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
3952
+
"@floating-ui/core@1.7.2":
3953
3953
+
dependencies:
3954
3954
+
"@floating-ui/utils": 0.2.10
3955
3955
+
3956
3956
+
"@floating-ui/dom@1.7.2":
3957
3957
+
dependencies:
3958
3958
+
"@floating-ui/core": 1.7.2
3959
3959
+
"@floating-ui/utils": 0.2.10
3960
3960
+
3961
3961
+
"@floating-ui/utils@0.2.10": {}
3962
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
4082
+
"@oddbird/css-anchor-positioning@0.6.1":
4083
4083
+
dependencies:
4084
4084
+
"@floating-ui/dom": 1.7.2
4085
4085
+
"@types/css-tree": 2.3.10
4086
4086
+
css-tree: 3.1.0
4087
4087
+
nanoid: 5.1.5
4088
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
4195
+
4196
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
5454
+
5455
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
35
+
<script>
36
36
+
import polyfill from "@oddbird/css-anchor-positioning/fn";
37
37
+
polyfill().then(() => {
38
38
+
console.log("Loaded anchor polyfill");
39
39
+
document.body.dataset.anchorPolyfill = "loaded";
40
40
+
});
41
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
120
+
/* fallback for no anchor support */
121
121
+
border-color: red;
122
122
+
123
123
+
/* browser native anchor-positioning (chromium 125+ at time of writing) */
124
124
+
@supports (anchor-name: --supports-anchor) {
125
125
+
border-color: blue;
126
126
+
}
127
127
+
128
128
+
/* polyfilled anchor-positioning
129
129
+
polyfill doesnt trigger support */
130
130
+
@supports not (anchor-name: --supports-anchor) {
131
131
+
[data-anchor-polyfill="loaded"] & {
132
132
+
border-color: yellow;
133
133
+
}
134
134
+
}
135
135
+
120
136
ul {
121
137
margin-left: 1em;
122
138
}