---
import Layout from "@/layouts/Layout.astro";
import LinkButton from "@/components/link-button";
import { getCollection } from "astro:content";
import PostItem from "@/components/post-item";
import { sortContentByDate } from "@/utils/sorts";

const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
sortContentByDate(allPosts);
const last3Blogs = allPosts.slice(0, 3);

const allProjects = await getCollection(
    "portfolio",
    ({ data }) => data.draft !== true,
);
sortContentByDate(allProjects);
const last3Projects = allProjects.slice(0, 3);
---

<Layout
    title="juancmandev"
    description="Welcome to my domain, stranger. I am juancmandev, web developer, Linux enthusiast, and privacy defender."
>
    <div class="prose prose-invert">
        <h1 class="text-primary">Welcome to my domain, stranger.</h1>
        <p>
            I am <span class="font-semibold text-primary">juancmandev</span>, <strong
                >Web Developer</strong
            >, <strong>Linux</strong> enthusiast, and <strong>privacy</strong> defender.
        </p>
        <p>
            This is my <strong>website</strong>, a piece of the Internet that I
            could call my <strong>home base</strong>. Here, I share my knowledge
            about my career and talk about other topics.
        </p>
        <section>
            <h2>Latest posts</h2>
            <ul class="mt-0 p-0 list-none">
                {
                    last3Blogs.map((blogpost: any) => (
                        <li class="p-0">
                            <PostItem
                                type="blog"
                                slug={blogpost.slug}
                                date={blogpost.data.date!}
                                title={blogpost.data.title!}
                            />
                        </li>
                    ))
                }
            </ul>
            <LinkButton
                variant="secondary"
                href="/blog"
                className="no-underline">More posts</LinkButton
            >
        </section>
        <section>
            <h2>Latest projects</h2>
            <ul class="mt-0 p-0 list-none">
                {
                    last3Projects.map((project: any) => (
                        <li class="p-0">
                            <PostItem
                                type="portfolio"
                                slug={project.slug}
                                date={project.data.date!}
                                title={project.data.title!}
                            />
                        </li>
                    ))
                }
            </ul>
            <LinkButton
                variant="secondary"
                href="/portfolio"
                className="no-underline">More projects</LinkButton
            >
        </section>
    </div>
</Layout>
