blog.z0x.ca/src/pages/index.astro
2024-09-11 12:31:49 -07:00

70 lines
2 KiB
Text
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 Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import { SITE } from '@consts'
import BlogCard from '@components/BlogCard.astro'
import { buttonVariants } from '@/components/ui/button'
import { getCollection } from 'astro:content'
import Link from '@components/Link.astro'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
const blog = (await getCollection('blog'))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, SITE.NUM_POSTS_ON_HOMEPAGE)
---
<Layout title="Home" description="Home">
<Container>
<section class="space-y-6">
<Card>
<CardHeader>
<CardTitle className="text-3xl">er·u·dite</CardTitle>
<CardDescription
>/ˈer(y)əˌdīt/ &bull; <span
class="font-semibold text-muted-foreground">adjective</span
></CardDescription
>
</CardHeader>
<CardContent>
<p>having or showing great knowledge or learning.</p>
</CardContent>
</Card>
<div class="mt-8">
<p class="prose min-w-full dark:prose-invert">
{SITE.TITLE} is an opinionated, no-frills static blogging template built
with Astro.
</p>
</div>
<div class="flex flex-wrap items-center justify-between gap-y-2">
<h2 class="text-2xl font-bold">Latest posts</h2>
</div>
<ul class="not-prose flex flex-col gap-4">
{
blog.map((post) => (
<li>
<BlogCard entry={post} />
</li>
))
}
</ul>
<div class="flex justify-center">
<Link
href="/blog"
class={buttonVariants({ variant: 'ghost' }) + ' group'}
>
See all posts <span
class="ml-1.5 transition-transform group-hover:translate-x-1"
>&rarr;</span
>
</Link>
</div>
</section>
</Container>
</Layout>