---
export const prerender = true

import { getCollection, getEntryBySlug } from 'astro:content'
import DefaultPageLayout from '$/layouts/default.astro'
import PostPreviewList from '$/components/PostPreviewList.astro'
import Prose from '$/components/Prose.astro'
import { SITE } from "$/config";

const title = 'Home'
const description = SITE.description

const posts = await getCollection('blog')
---
<DefaultPageLayout content={{ title, description }} showPageHeader={false}>
    <PostPreviewList posts={posts.slice(0, 3)} heading="recent posts"/>
    <div class="page__actions">
        <a class="action__go-to-blog ink-h" href="/blog" title="All Posts">All Posts &rarr;</a>
    </div>
</DefaultPageLayout>

<style>
    .hero {
        @apply flex flex-col md:flex-row gap-8 w-full transition-all pb-4
    }
    .hero__face {
        @apply flex md:flex-none justify-center
    }
    .hero__says {
        @apply flex-1 text-center md:text-left
    }
    .author-card {
        @apply  h-48 w-48 md:h-56 bg-theme-primary dark:bg-theme-dark-primary rounded-full md:rounded-md shadow-lg
    }
    .author-card img {
        @apply rounded-full h-48 w-48 md:h-56
    }
    .page__actions {
        @apply flex justify-center md:justify-end py-6
    }
    .action__go-to-blog {
        @apply py-4 hover:underline
    }
</style>
