blob: 727fc055f70606fe8db8e4dc98343574a14e9bec (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import BlogPostPreview from '../components/BlogPostPreview.astro';
let title = 'Example Blog';
let description = 'The perfect starter for your perfect blog.';
// Use Astro.glob to fetch all post with associated frontmatter
const unsortedPosts = await Astro.glob('./posts/*.md');
const posts = unsortedPosts.sort(function (a, b) {
return (
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
);
});
---
<html lang="en">
<head>
<BaseHead title={title} description={description} />
</head>
<body>
<Header />
<div class="wrapper">
<main class="content">
<section class="intro">
<h1>{title}</h1>
<p>{description}</p>
</section>
<section aria-label="Blog post list">
{posts.map(({ url, frontmatter }) => (
<BlogPostPreview
title={frontmatter.title}
description={frontmatter.description}
publishDate={frontmatter.publishDate}
url={url}
/>
))}
</section>
</main>
</div>
</body>
</html>
<style>
.content {
margin-top: 4rem;
margin-bottom: 8rem;
}
.intro {
padding-bottom: 4rem;
margin-bottom: 2rem;
border-bottom: 4px solid var(--theme-divider);
}
h1 {
font-size: 2.5rem;
font-weight: 700;
}
</style>
|
