vixalien.tngl.sh
my website
chore: add blog index page
-1
astro.config.mjs
-1
astro.config.mjs
+9
-3
src/components/PostsIndex.astro
+9
-3
src/components/PostsIndex.astro
···
4
4
// import Tags from "./Tags.astro";
5
5
import type { CollectionEntry } from "astro:content";
6
6
7
-
const posts = (await getCollection("blog")).sort(
8
-
(a, b) => b.data.publish_date.valueOf() - a.data.publish_date.valueOf(),
9
-
);
7
+
interface Props {
8
+
limit?: number;
9
+
}
10
+
11
+
const { limit = Infinity } = Astro.props;
12
+
13
+
const posts = (await getCollection("blog"))
14
+
.sort((a, b) => b.data.publish_date.valueOf() - a.data.publish_date.valueOf())
15
+
.slice(0, limit);
10
16
11
17
type Post = CollectionEntry<"blog">;
12
18
+1
-1
src/consts.ts
+1
-1
src/consts.ts
···
1
1
// Place any global data in this file.
2
2
// You can import this data from anywhere in your site by using the `import` keyword.
3
3
4
-
export const SITE_TITLE = "vixalien´s blog";
4
+
export const SITE_TITLE = "vixalien´s site";
5
5
export const SITE_DESCRIPTION = "Welcome to my website!";
6
6
export const AUTHOR = "vixalien";
7
7
export const PUBLISH_YEAR = new Date().getFullYear();
+39
src/pages/blog.astro
+39
src/pages/blog.astro
···
1
+
---
2
+
import BaseHead from "../components/BaseHead.astro";
3
+
import { SITE_TITLE, SITE_DESCRIPTION, AUTHOR, PUBLISH_YEAR } from "../consts";
4
+
import Intro from "../components/Intro.astro";
5
+
import Welcome from "../components/Welcome.astro";
6
+
import PostsIndex from "../components/PostsIndex.astro";
7
+
import ContactLinks from "../components/ContactLinks.astro";
8
+
import Header from "../components/Header.astro";
9
+
---
10
+
11
+
<!doctype html>
12
+
<html lang="en">
13
+
<head>
14
+
<BaseHead title={`vixalien´s blog`} description={SITE_DESCRIPTION} />
15
+
</head>
16
+
<body>
17
+
<main class="container">
18
+
<Header title={SITE_TITLE} />
19
+
<Intro title={`vixalien´s blog`} />
20
+
<Welcome> An archive of all my blog posts. </Welcome>
21
+
<h2>Posts</h2>
22
+
<PostsIndex />
23
+
24
+
<footer>
25
+
<a class="top" href="#top">↑ Scroll to Top</a>
26
+
{
27
+
(
28
+
<div>
29
+
<br />
30
+
<span>
31
+
© {AUTHOR} {PUBLISH_YEAR}
32
+
</span>
33
+
</div>
34
+
)
35
+
}
36
+
</footer>
37
+
</main>
38
+
</body>
39
+
</html>
+18
-3
src/pages/index.astro
+18
-3
src/pages/index.astro
···
20
20
GTK developer and this is my website, a collection of projects and
21
21
writings.
22
22
</Welcome>
23
-
<h2>Posts</h2>
24
-
<PostsIndex />
23
+
<div class="heading">
24
+
<h2>Posts</h2>
25
+
<a href="/blog">All Posts →</a>
26
+
</div>
27
+
<PostsIndex limit={3} />
28
+
<p>
29
+
<a href="/blog">More Blog Posts →</a>
30
+
</p>
25
31
<h2>Contact & Links</h2>
26
32
<ContactLinks />
27
33
<footer>
28
-
© {AUTHOR} {new Date().getFullYear()}
34
+
© {AUTHOR}
35
+
{new Date().getFullYear()}
29
36
</footer>
30
37
</main>
31
38
</body>
32
39
</html>
40
+
41
+
<style>
42
+
.heading {
43
+
display: flex;
44
+
justify-content: space-between;
45
+
align-items: center;
46
+
}
47
+
</style>