Files
kazoottt-blog-v2/src/pages/index.astro
2025-02-05 14:07:58 +08:00

62 lines
1.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
import { type CollectionEntry, getCollection } from "astro:content";
import SocialList from "@/components/SocialList.astro";
import PostPreview from "@/components/blog/PostPreview.astro";
import Note from "@/components/note/Note.astro";
import { getAllPosts } from "@/data/post";
import PageLayout from "@/layouts/Base.astro";
import { collectionDateSort } from "@/utils/date";
// Posts
const MAX_POSTS = 10;
const allPosts = await getAllPosts();
const allPostsByDate = allPosts
.sort(collectionDateSort)
.slice(0, MAX_POSTS) as CollectionEntry<"post">[];
// Notes
const MAX_NOTES = 5;
const allNotes = await getCollection("note");
const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
---
<PageLayout meta={{ title: "Home" }}>
<section>
<h1 class="title mb-6">Hello World!</h1>
<p class="mb-4">
Hi, Im a theme for Astro, a simple starter that you can use to create your website or blog.
If you want to know more about how you can customise me, add more posts, and make it your own,
click on the GitHub icon link below and it will take you to my repo.
</p>
<SocialList />
</section>
<section class="mt-16">
<h2 class="title text-accent mb-6 text-xl"><a href="/posts/">Posts</a></h2>
<ul class="space-y-4" role="list">
{
allPostsByDate.map((p) => (
<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
<PostPreview post={p} />
</li>
))
}
</ul>
</section>
{
latestNotes.length > 0 && (
<section class="mt-16">
<h2 class="title text-accent mb-6 text-xl">
<a href="/notes/">Notes</a>
</h2>
<ul class="space-y-4" role="list">
{latestNotes.map((note) => (
<li>
<Note note={note} as="h3" isPreview />
</li>
))}
</ul>
</section>
)
}
</PageLayout>