flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template
flo-bit.dev/blog-template/
astro
blog
template
1.2 kB
40 lines
1---
2import { SITE_TITLE, SITE_DESCRIPTION, POSTS_PER_PAGE } from "../consts";
3
4import { getCollection } from "astro:content";
5
6import Footer from "$components/Footer.astro";
7import Header from "$components/Header.astro";
8import BaseLayout from "$layouts/BaseLayout.astro";
9import BlogPost from "$layouts/BlogPost.astro";
10import BlogEntry from "$components/BlogEntry.astro";
11
12import { Content } from "$content/info/description.md";
13import Pagination from "$components/Pagination.astro";
14
15const posts = (await getCollection("blog"))
16 .sort((a: any, b: any) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
17 .splice(0, POSTS_PER_PAGE);
18
19const total = Math.ceil((await getCollection("blog")).length / POSTS_PER_PAGE);
20---
21
22<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
23 <Header />
24 <main class="max-w-2xl lg:max-w-3xl mx-auto mt-16 px-4">
25 <BlogPost>
26 <Content />
27 <div class="my-14 space-y-14 max-w-3xl not-prose">
28 {
29 posts.map((post: any) => (
30 <BlogEntry {...post.data} slug={post.slug} />
31 ))
32 }
33 </div>
34 </BlogPost>
35
36 {total > 1 ? <Pagination current={1} total={total} /> : null}
37 </main>
38
39 <Footer />
40</BaseLayout>