this repo has no description
Rough implementation of a sidebar navList
- Add a path to /navList.json to add it to the navigation
- Add a <Nav /> component to the page you want
- Clicking "Open" opens the nav with light dismiss (will add an X later)
- Sidebar slides in and out on left
- Can open on default
- Made the /blog heading not sticky
+167
-12
+22
-4
src/content.config.ts
+22
-4
src/content.config.ts
···
1
1
import { defineCollection, z } from "astro:content";
2
-
import { glob } from "astro/loaders";
2
+
import { file, glob } from "astro/loaders";
3
3
4
4
const blog = defineCollection({
5
5
loader: glob({ pattern: "**/*.md", base: "./src/posts" }),
···
24
24
loader: glob({ pattern: "**/*.mdx", base: "./src/posts" }),
25
25
schema: z.object({
26
26
title: z.string(),
27
-
})
28
-
})
27
+
}),
28
+
});
29
29
30
-
export const collections = { blog, blogMdx };
30
+
const baseNav = z.object({
31
+
slug: z.string(),
32
+
name: z.string(),
33
+
});
34
+
35
+
export type nav = z.infer<typeof baseNav> & {
36
+
children?: nav[];
37
+
};
38
+
39
+
const navSchema: z.ZodType<nav> = baseNav.extend({
40
+
children: z.lazy(() => navSchema.array()),
41
+
});
42
+
43
+
const nav = defineCollection({
44
+
loader: file("src/navList.json"),
45
+
schema: navSchema,
46
+
});
47
+
48
+
export const collections = { blog, blogMdx, nav };
+29
-8
src/pages/blog/index.astro
+29
-8
src/pages/blog/index.astro
···
2
2
import Base from "@/Base.astro";
3
3
import Post from "@/components/blog/Post.astro";
4
4
import Background from "@/components/blog/Background.astro";
5
+
import Nav from "@/components/generic/Nav.astro";
5
6
6
7
import Rss from "@/assets/rss.svg";
7
8
···
9
10
import { blog } from "@/config";
10
11
11
12
const posts = await getCollection("blog");
13
+
const nav = await getCollection("nav").then((x) => x.map((x) => x.data));
12
14
---
13
15
14
16
<style>
15
17
a:has(svg) {
16
18
background-color: orange;
17
19
display: inline-block;
18
-
height: 1em;
20
+
height: 2em;
19
21
aspect-ratio: 1;
20
-
padding: 0.1em;
22
+
padding: 0.2em;
21
23
border-radius: 0.5rem;
22
24
23
25
& svg {
24
-
width: 0.8em;
26
+
width: 1.6em;
25
27
aspect-ratio: 1;
26
28
}
27
29
}
28
30
29
-
h1 {
31
+
heading {
32
+
font-size: 1.6rem;
30
33
margin-bottom: var(--y-gap);
31
34
color: white;
35
+
36
+
position: fixed;
37
+
top: 0;
38
+
width: 100%;
39
+
z-index: 999;
40
+
padding: 0.5rem 1.5rem;
41
+
display: flex;
42
+
align-items: center;
43
+
justify-content: space-between;
44
+
45
+
& .gap {
46
+
width: 100%;
47
+
}
48
+
}
49
+
50
+
.top-offset {
51
+
height: 16rem;
32
52
}
33
53
</style>
34
54
35
55
<Base title="Blog">
36
56
<Background />
37
57
<main>
38
-
<h1 style={`--y-gap: ${blog.post.yGap}rem`}>
39
-
Blog
58
+
<heading style={`--y-gap: ${blog.post.yGap}rem`}>
59
+
<Nav data={nav} current="Blog" />
60
+
40
61
<a href="/rss.xml" aria-label="Rss Feed">
41
-
<Rss width=".8em" height=".8em" />
62
+
<Rss width="1.6em" height="1.6em" />
42
63
</a>
43
-
</h1>
64
+
</heading>
44
65
45
66
{
46
67
posts.map((x, i) => (