Personal Site
Add markdown for header and expose `nav` type
+40
-4
+36
src/components/Header.astro
+36
src/components/Header.astro
···
1
+
---
2
+
import { urls, type nav } from "/site-config";
3
+
4
+
---
5
+
6
+
<header>
7
+
<h1>vielle.dev</h1>
8
+
9
+
<ul>
10
+
{
11
+
(() => {
12
+
const name = (url: nav) =>
13
+
url.slug ? <a href={url.slug}>{url.name}</a> : url.name;
14
+
const flatten = (urls: nav[]) =>
15
+
urls.map((url) => (
16
+
<li>
17
+
{name(url)}
18
+
{url.children && <ul>{flatten(url.children)}</ul>}
19
+
</li>
20
+
));
21
+
return urls.map((url) => (
22
+
<li>
23
+
{url.children ? (
24
+
<details name="nav">
25
+
<summary>{name(url)}</summary>
26
+
<ul>{flatten(url.children)}</ul>
27
+
</details>
28
+
) : (
29
+
name(url)
30
+
)}
31
+
</li>
32
+
));
33
+
})()
34
+
}
35
+
</ul>
36
+
</header>
+4
-4
src/site-config.ts
+4
-4
src/site-config.ts
···
6
6
matrix: "afterlifepro:matrix.org",
7
7
} as const;
8
8
9
-
type nav = {
9
+
export type nav = {
10
10
slug?: string;
11
11
name: string;
12
12
children?: nav[];
···
59
59
],
60
60
},
61
61
{
62
-
slug: "https://" + socials.tumblr + ".tumblr.com/",
63
-
name: "Tumblr"
62
+
slug: "https://" + socials.tumblr + ".tumblr.com/",
63
+
name: "Tumblr",
64
64
},
65
65
{
66
66
slug: "https://github.com/" + socials.github,
···
73
73
{
74
74
slug: "https://matrix.to/#/@" + socials.matrix,
75
75
name: "Matrix",
76
-
}
76
+
},
77
77
],
78
78
},
79
79
{