vielle.dev
Personal Site
render post bodies
bit scuffed of a layout but yk
+40
-2
+40
-2
src/pages/blog/[...slug].astro
+40
-2
src/pages/blog/[...slug].astro
···
1
1
---
2
+
import { getCollection } from "astro:content";
2
3
import Base from "/components/Base.astro";
4
+
import { render } from "astro:content";
5
+
6
+
export async function getStaticPaths() {
7
+
return await Promise.all(
8
+
await getCollection("blog").then((posts) =>
9
+
posts.map(async (post) => ({
10
+
params: { slug: post.id },
11
+
props: {
12
+
post,
13
+
banner: await import(
14
+
`../../content/blog/assets/${post.data.banner.replace(".png", "")}.png`
15
+
).then(({ default: img }) => img.src as string),
16
+
},
17
+
})),
18
+
),
19
+
);
20
+
}
21
+
22
+
const { post, banner } = Astro.props;
23
+
const { Content } = await render(post);
3
24
---
4
25
5
-
<Base>
6
-
<h1>vielle.dev</h1>
26
+
<Base
27
+
title={post.data.title}
28
+
graph={{
29
+
description: post.data.bio,
30
+
url: Astro.url.toString(),
31
+
type: "article",
32
+
image: banner,
33
+
}}
34
+
>
35
+
<img src={banner} alt="" />
36
+
<h1>{post.data.title}</h1>
37
+
<time
38
+
datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth()}-${post.data.pub.getDate()}`}
39
+
>{post.data.pub.getDate()}-{post.data.pub.getMonth()}-{
40
+
post.data.pub.getFullYear()
41
+
}</time
42
+
>
43
+
44
+
<Content />
7
45
</Base>