this repo has no description
Add debug content to blog page
- Load title, id, date, and image for blog posts
- moved blog.astro to blog/index.astro
+45
-21
-21
src/pages/blog.astro
-21
src/pages/blog.astro
···
1
-
---
2
-
import Base from "@/layouts/base.astro";
3
-
import Rss from "@/assets/rss.svg";
4
-
console.log(Rss);
5
-
---
6
-
7
-
<style>
8
-
a:has(svg) {
9
-
background-color: orange;
10
-
display: block;
11
-
width: fit-content;
12
-
height: fit-content;
13
-
padding: 1rem;
14
-
border-radius: 1rem;
15
-
}
16
-
</style>
17
-
18
-
<Base title="Blog">
19
-
<h1>Blog</h1>
20
-
<a href="/rss.xml" aria-label="Rss Feed"><Rss width={64} height={64} /></a>
21
-
</Base>
+45
src/pages/blog/index.astro
+45
src/pages/blog/index.astro
···
1
+
---
2
+
import Base from "@/layouts/base.astro";
3
+
import Rss from "@/assets/rss.svg";
4
+
import { getCollection } from "astro:content";
5
+
import { Image } from "astro:assets";
6
+
console.log(Rss);
7
+
8
+
const posts = await getCollection("blog");
9
+
---
10
+
11
+
<style>
12
+
a:has(svg) {
13
+
background-color: orange;
14
+
display: block;
15
+
width: fit-content;
16
+
height: fit-content;
17
+
padding: 1rem;
18
+
border-radius: 1rem;
19
+
}
20
+
</style>
21
+
22
+
<Base title="Blog">
23
+
<h1>Blog</h1>
24
+
<a href="/rss.xml" aria-label="Rss Feed"><Rss width={64} height={64} /></a>
25
+
{
26
+
await Promise.all(
27
+
posts.map(async (x) => {
28
+
const img = x.data.image.src.match(/.*(?=\.png)/gm);
29
+
if (img === null) return;
30
+
const { default: image } = await import(
31
+
`../../posts/assets/${img[0]}.png`
32
+
);
33
+
34
+
return (
35
+
<a style={`display: block; background-color: ${x.data.colour}`} href={`/blog/${x.id}/`}>
36
+
({x.id}) {x.data.title}
37
+
<br />
38
+
{x.data.date.toLocaleString()}
39
+
<Image src={image} alt={x.data.image.alt} />
40
+
</a>
41
+
);
42
+
})
43
+
)
44
+
}
45
+
</Base>
src/pages/post/[id].astro
src/pages/blog/[id].astro
src/pages/post/[id].astro
src/pages/blog/[id].astro