diff options
Diffstat (limited to 'src/pages/index.astro')
| -rw-r--r-- | src/pages/index.astro | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000..d953797 --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,61 @@ +--- +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, I’m 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-6" 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-6" role="list"> + {latestNotes.map((note) => ( + <li> + <Note note={note} as="h3" isPreview /> + </li> + ))} + </ul> + </section> + ) + } +</PageLayout> |
