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
Move link logic fully into Nav.astro
vielle.dev
8 months ago
c64da965
e9a756be
verified
This commit was signed with the committer's
known signature
.
vielle.dev
SSH Key Fingerprint:
SHA256:/4bvxqoEh9iMdjAPgcgAgXKZZQTROL3ULiPt6nH9RSs=
+27
-69
2 changed files
expand all
collapse all
unified
split
src
components
generic
Nav.astro
NavEntry.astro
+27
-2
src/components/generic/Nav.astro
···
1
1
---
2
2
-
import NavEntry from "./NavEntry.astro";
2
2
+
import type { nav } from "@/content/config";
3
3
import { getEntry } from "astro:content";
4
4
5
5
const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? [];
6
6
---
7
7
8
8
<header>
9
9
-
<NavEntry {data} />
9
9
+
{
10
10
+
(() => {
11
11
+
const a = (name: string, href: string) => <a {href}>{name}</a>;
12
12
+
const render = (name: string, children: nav[]) => (
13
13
+
<details>
14
14
+
<summary>{name}</summary>
15
15
+
<ul>
16
16
+
{children.map((x) => (
17
17
+
<li>
18
18
+
{x.children
19
19
+
? render(x.name, x.children)
20
20
+
: a(x.name, x.url || "")}
21
21
+
</li>
22
22
+
))}
23
23
+
</ul>
24
24
+
</details>
25
25
+
);
26
26
+
return data.map((entry) => (
27
27
+
<li>
28
28
+
{entry.children
29
29
+
? render(entry.name, entry.children)
30
30
+
: a(entry.name, entry.url || "")}
31
31
+
</li>
32
32
+
));
33
33
+
})()
34
34
+
}
10
35
</header>
11
36
12
37
<style>
-67
src/components/generic/NavEntry.astro
···
1
1
-
---
2
2
-
import type { nav } from "@/content/config";
3
3
-
4
4
-
interface Props {
5
5
-
data: nav[];
6
6
-
root?: string;
7
7
-
}
8
8
-
9
9
-
const { data, root = "" } = Astro.props;
10
10
-
---
11
11
-
12
12
-
<ul>
13
13
-
{
14
14
-
data.map((x) => (
15
15
-
<li>
16
16
-
{x.url ? (
17
17
-
<a href={`${root}${x.url}`}>{x.name}</a>
18
18
-
) : (
19
19
-
<span>{x.name}</span>
20
20
-
)}
21
21
-
{x.children ? (
22
22
-
<Astro.self root={`${root}${x.url ? x.url : ""}`} data={x.children} />
23
23
-
) : null}
24
24
-
</li>
25
25
-
))
26
26
-
}
27
27
-
</ul>
28
28
-
29
29
-
<style>
30
30
-
li {
31
31
-
list-style-type: "╺ ";
32
32
-
margin-inline-start: 20px;
33
33
-
}
34
34
-
35
35
-
a:link {
36
36
-
color: #62a0ea;
37
37
-
}
38
38
-
39
39
-
a:visited {
40
40
-
color: #dc8add;
41
41
-
}
42
42
-
43
43
-
a:focus,
44
44
-
a:hover {
45
45
-
text-decoration: none;
46
46
-
color: #4040ff
47
47
-
48
48
-
&:visited {
49
49
-
color: #ff40ff;
50
50
-
}
51
51
-
}
52
52
-
53
53
-
a:focus {
54
54
-
outline: 2px solid #62a0ea;
55
55
-
outline-offset: 0;
56
56
-
border-radius: 4px;
57
57
-
58
58
-
&:visited {
59
59
-
outline-color: #dc8add;
60
60
-
}
61
61
-
}
62
62
-
63
63
-
a:active {
64
64
-
text-decoration: none;
65
65
-
scale: 1.05;
66
66
-
}
67
67
-
</style>
vielle.dev