vielle.dev
Personal Site
Position popout nav boxes
- last item is on right to prevent overflow
- "­" and "<wbr>" are replaced with the respective html entity/element for line breaks in word wrapping
+49
-1
src/components/Header.astro
+49
-1
src/components/Header.astro
···
1
1
---
2
2
import { urls, type nav } from "/site-config";
3
+
4
+
const betweenArr = <A, I>(arr: A[], item: I): (A | I)[] =>
5
+
arr.flatMap((x, i) => (i !== 0 ? [item, x] : [x]));
6
+
7
+
const strToX = <I,>(
8
+
arr: string,
9
+
map: [string, I][],
10
+
): (string | I)[] | string => {
11
+
const [key, value] = map.pop() ?? [undefined, undefined];
12
+
if (!key) return arr;
13
+
return betweenArr(arr.split(key), value).flatMap((x: string | I) =>
14
+
typeof x === "string" ? strToX(x, map) : x,
15
+
);
16
+
};
3
17
---
4
18
5
19
<header>
···
10
24
{
11
25
(() => {
12
26
const name = (url: nav) =>
13
-
url.slug ? <a href={url.slug}>{url.name}</a> : url.name;
27
+
url.slug ? (
28
+
<a href={url.slug}>
29
+
{/* {betweenArr(url.name.split("­"), <>­</>).flatMap((x) =>
30
+
typeof x === "string"
31
+
? betweenArr(x.split("<wbr>"), <wbr />)
32
+
: x,
33
+
)} */}
34
+
{strToX(url.name, [
35
+
["­", <>­</>],
36
+
["<wbr>", <wbr />],
37
+
])}
38
+
</a>
39
+
) : (
40
+
url.name
41
+
);
14
42
const flatten = (urls: nav[]) =>
15
43
urls.map((url) => (
16
44
<li>
···
81
109
height: 9px;
82
110
display: block;
83
111
}
112
+
}
113
+
}
114
+
}
115
+
116
+
nav > ul > li:last-child > details > ul {
117
+
right: 10px;
118
+
}
119
+
120
+
details {
121
+
> ul {
122
+
position: absolute;
123
+
124
+
125
+
margin-top: 10px;
126
+
padding: 15px;
127
+
border-image: url("../assets/box-tlbr.png") 10 fill / 10px round;
128
+
129
+
padding-left: 25px;
130
+
& ul {
131
+
margin-left: 10px;
84
132
}
85
133
}
86
134
}
+3
-3
src/site-config.ts
+3
-3
src/site-config.ts
···
46
46
children: [
47
47
{
48
48
slug: "https://bsky.app/profile/" + socials.atproto,
49
-
name: "Bluesky",
49
+
name: "Blue­sky",
50
50
},
51
51
{
52
52
slug: "https://tangled.sh/@" + socials.atproto,
53
-
name: "tangled.sh",
53
+
name: "tangled<wbr>.sh",
54
54
},
55
55
{
56
56
slug: "https://pdsls://at://" + socials.atproto,
···
89
89
},
90
90
{
91
91
slug: "https://afterlifepro.neocities.org",
92
-
name: "Neocities (old site)",
92
+
name: "Neo­cities (old site)",
93
93
},
94
94
],
95
95
},