this repo has no description
Make simple post component which has fixed width and layers from top down.
+48
-18
+44
src/components/blog/post.astro
+44
src/components/blog/post.astro
···
1
+
---
2
+
import type { InferEntrySchema } from "astro:content";
3
+
import { Image } from "astro:assets";
4
+
5
+
interface Props {
6
+
id: string;
7
+
data: InferEntrySchema<"blog">;
8
+
layer: number;
9
+
}
10
+
11
+
const { id, data, layer } = Astro.props;
12
+
13
+
const img = data.image.src.match(/.*(?=\.png)/gm);
14
+
if (img === null) return;
15
+
const { default: image } = await import(`../../posts/assets/${img[0]}.png`);
16
+
---
17
+
18
+
<style>
19
+
a {
20
+
width: 30rem;
21
+
background-color: white;
22
+
border: 0.5rem solid var(--colour, dodgerblue);
23
+
border-radius: 2.5rem;
24
+
padding: 1rem;
25
+
display: block;
26
+
box-shadow: 0 0 5rem #00000040;
27
+
z-index: var(--layer);
28
+
29
+
& > img {
30
+
border-radius: 1.5rem;
31
+
32
+
width: 30rem;
33
+
height: 20rem;
34
+
object-fit: cover;
35
+
}
36
+
}
37
+
</style>
38
+
39
+
<a style={`--colour: ${data.colour}; --layer: ${layer}`} href={`/blog/${id}/`}>
40
+
<Image src={image} alt={data.image.alt} />
41
+
({id}) {data.title}
42
+
<br />
43
+
{data.date.toLocaleString()}
44
+
</a>
+4
-18
src/pages/blog/index.astro
+4
-18
src/pages/blog/index.astro
···
3
3
import Rss from "@/assets/rss.svg";
4
4
import { getCollection } from "astro:content";
5
5
import { Image } from "astro:assets";
6
+
import Post from "@/components/blog/post.astro";
6
7
console.log(Rss);
7
8
8
9
const posts = await getCollection("blog");
···
23
24
<h1>Blog</h1>
24
25
<a href="/rss.xml" aria-label="Rss Feed"><Rss width={64} height={64} /></a>
25
26
{
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
-
)
27
+
posts.map((x, i) => (
28
+
<Post id={x.id} data={x.data} layer={posts.length - i} />
29
+
))
44
30
}
45
31
</Base>