personal site
feat: blomgs
+79
-5
+9
src/components/Content/Prose.astro
+9
src/components/Content/Prose.astro
+17
src/content.config.ts
+17
src/content.config.ts
···
1
+
import { defineCollection } from "astro:content";
2
+
3
+
import { glob } from "astro/loaders";
4
+
5
+
import { z } from "astro/zod";
6
+
7
+
const blog = defineCollection({
8
+
loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
9
+
schema: z.object({
10
+
title: z.string()
11
+
// description: z.string(),
12
+
// pubDate: z.coerce.date(),
13
+
// updatedDate: z.coerce.date().optional()
14
+
})
15
+
});
16
+
17
+
export const collections = { blog };
-5
src/pages/blog.astro
-5
src/pages/blog.astro
+25
src/pages/blog/[id].astro
+25
src/pages/blog/[id].astro
···
1
+
---
2
+
import type { GetStaticPaths } from "astro";
3
+
import { render } from "astro:content";
4
+
import { getCollection } from "astro:content";
5
+
import BaseLayout from "../../layouts/BaseLayout.astro";
6
+
import Prose from "../../components/Content/Prose.astro";
7
+
8
+
export const getStaticPaths = (async () => {
9
+
const posts = await getCollection("blog");
10
+
return posts.map((post) => ({ params: { id: post.id }, props: { post } }));
11
+
}) satisfies GetStaticPaths;
12
+
13
+
const { post } = Astro.props;
14
+
const { Content } = await render(post);
15
+
---
16
+
17
+
<BaseLayout>
18
+
<div
19
+
class="border-glw-overlay0 flex min-h-screen w-[66vw] flex-col gap-2 border-r border-l border-dashed px-8 py-4"
20
+
>
21
+
<Prose>
22
+
<Content />
23
+
</Prose>
24
+
</div>
25
+
</BaseLayout>
+27
src/pages/blog/index.astro
+27
src/pages/blog/index.astro
···
1
+
---
2
+
import BaseLayout from "../../layouts/BaseLayout.astro";
3
+
import { getCollection } from "astro:content";
4
+
5
+
const allBlogPosts = await getCollection("blog");
6
+
7
+
console.log(allBlogPosts);
8
+
---
9
+
10
+
<BaseLayout>
11
+
<div
12
+
class="border-glw-overlay0 flex min-h-screen w-[66vw] flex-col gap-2 border-r border-l border-dashed px-8 py-4"
13
+
>
14
+
Blog Entries
15
+
<ul>
16
+
{
17
+
allBlogPosts.map((post) => {
18
+
return (
19
+
<li>
20
+
<a href={`/blog/${post.id}`}>{post.data.title}</a>
21
+
</li>
22
+
);
23
+
})
24
+
}
25
+
</ul>
26
+
</div>
27
+
</BaseLayout>