---
import { getCollection } from "astro:content";

import PageBase from "../layouts/PageBase.astro";
import Friend from "../components/Friend.astro";
import ArticlePreviewList from "../components/ArticlePreviewList.astro";

const posts = (
    await getCollection("articles", ({ id }) => id.startsWith("posts/"))
).slice(0, 3);
---

<PageBase title="crupest's home">
    <img id="avatar" src="/avatar.png" alt="My avatar" width="80" height="80" />
    <h1 id="title">Hello! This is <code>crupest</code> !</h1>
    <hr />
    <section>
        <p>Welcome to my home page! Nice to meet you here! 🥰</p>
        <p>
            Feel free to contact me via my email address <a
                href="mailto:crupest@crupest.life">crupest@crupest.life</a
            >, or just create an issue in any of my <a
                rel="noopener noreferrer"
                href="https://github.com/crupest">GitHub</a
            >
            repos. I love talking with people a lot.
        </p>
        <div id="links" class="mono-link">
            goto:
            <ul>
                <li><a href="/git/">git</a></li>
                <li><a href="/notes/">notes</a></li>
                <li><a href="/notes/hurd">hurd</a></li>
                <li><a href="/notes/cheat-sheet">cheat-sheet</a></li>
            </ul>
        </div>
    </section>
    <hr />
    <section id="recent-posts">
        <h2>Recent Posts <a class="mono-link" href="/posts">(all)</a></h2>
        <ArticlePreviewList articles={posts} headerElement="h3" />
    </section>
    <hr />
    <section>
        <h2 id="friends">
            My Friends <small>(more links are being collected ...)</small>
        </h2>
        <div id="friends-container">
            <Friend
                name="wsm"
                avatarUrl="https://avatars.githubusercontent.com/u/74699943?v=4"
                githubUrl="wushuming666"
            />
            <Friend
                name="hsz"
                url="https://www.hszsoft.com"
                avatarUrl="https://avatars.githubusercontent.com/u/63097618?v=4"
                githubUrl="hszSoft"
                tag="随性の程序员"
            />
        </div>
    </section>
</PageBase>

<style>
    #avatar {
        float: right;
    }

    #links {
        font-family: monospace;

        margin-block-end: 1rem;

        > ul {
            display: inline;
            padding-inline-start: 0.5em;
            > li {
                display: inline;

                &::after {
                    content: " | ";
                }
            }
        }
    }

    #recent-posts {
        margin-block-end: 1.5em;
    }

    #friends-container {
        display: flex;
        gap: 1em;
    }

    .friend {
        flex-grow: 0;
        text-align: center;
    }

    .citation {
        margin: auto;
    }

    .citation figcaption {
        text-align: right;
    }

    html[data-theme="dark"] {
        & .friend-github {
            filter: invert(1);
        }
    }
</style>