71 lines
2.1 KiB
Text
71 lines
2.1 KiB
Text
---
|
||
import { buttonVariants } from '@/components/ui/button'
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from '@/components/ui/card'
|
||
import BlogCard from '@components/BlogCard.astro'
|
||
import Container from '@components/Container.astro'
|
||
import Link from '@components/Link.astro'
|
||
import { SITE } from '@consts'
|
||
import Layout from '@layouts/Layout.astro'
|
||
import { getCollection } from 'astro:content'
|
||
|
||
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={SITE.DESCRIPTION}>
|
||
<Container class="flex flex-col gap-y-6">
|
||
<section>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-3xl">er·u·dite</CardTitle>
|
||
<CardDescription
|
||
>/ˈer(y)əˌdīt/ • <span class="font-semibold">adjective</span
|
||
></CardDescription
|
||
>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p class="text-sm">
|
||
astro-erudite is an opinionated, no-frills static blogging template
|
||
built with <Link href="https://astro.build" external underline
|
||
>Astro</Link
|
||
>. To learn more about why this template exists, read <Link
|
||
href="/blog/the-state-of-static-blogs"
|
||
underline>The State of Static Blogs in 2024</Link
|
||
>.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
<section class="flex flex-col gap-y-4">
|
||
<h2 class="text-2xl font-bold">Latest posts</h2>
|
||
<ul class="not-prose flex flex-col gap-y-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"
|
||
>→</span
|
||
>
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
</Container>
|
||
</Layout>
|