---

import { compareDesc, format } from 'date-fns'
import { toZonedTime } from 'date-fns-tz'

import BaseLayout from '../layouts/BaseLayout.astro';
import cri from "./chills_going_waaaaah.png"
import { Picture } from 'astro:assets';

import MDXCallout from "../components/mdx/MDXCallout.astro"

import { getCollection } from 'astro:content';

const posts = await getCollection('posts')

import { timeZone } from "../lib/utils";
import HR from '../components/HR.astro';

---

<BaseLayout title="home">
	<h2 class="font-serif text-3xl my-2 hover:underline">Hey. Welcome to City 23.</h2>
      <img 
        src="/chills_going_waaaaah.png"
        alt="A scrunkly drawing of my sona crying"
        class="w-20 mr-4 inline-flex float-left"
      />
      <p class="mb-2">
        This is my personal website, containing blog posts, a mini journal, and a whole bunch of other nicknacks and projects that I&apos;m working on.
        Essentially, this is my fullstack webdev playground where everything is possible and nothing makes sense... the dark side of the sauce.
      </p>
      <p class="mb-2">Expect posts once or twice a week, I guess.</p>

      <p class="mb-2"><b>Last journal update:</b>
        <a href="/journal" class="font-serif text-subtitle text-sm hover:underline">June 14, 2025</a>
      </p>
      
      <h2 class="font-serif text-2xl mb-2">recent posts</h2>
      <ul class="space-y-2 mb-2">
        {posts.sort((a, b) => compareDesc(new Date(a.data.date), new Date(b.data.date))).map((post, idx) => {
          if (idx >= 3 || post.data.draft) return;
          console.log(toZonedTime(post.data.date, timeZone));
          return (
            <li >
              <a href={'/posts/' + post.slug} class="font-serif text-lg text-crusta-400 dark:text-night-300 hover:underline">{post.data.title}</a>
              &emsp;<span class="font-mono text-md">{format(toZonedTime(post.data.date, timeZone), 'LLL d, yyyy')}</span>
              <p>{post.data.summary}</p>
            </li>
          );
        })}
      </ul>
      <p class="mb-2"><a href="/blog" class="text-subtitle italic hover:text-current">find more posts →</a></p>
      <HR/>
      <div class="flex items-center">
        <a class="text-subtitle hover:text-current" href="https://fediring.net/previous?host=eleboog.com">←&ensp;</a>
        <a class="text-subtitle hover:text-current" href="https://fediring.net/">Fediring</a>
        <a class="text-subtitle hover:text-current" href="https://fediring.net/next?host=eleboog.com">&ensp;→</a>
        &emsp;&emsp;
        <a class="text-subtitle hover:text-current" href="https://webring.bucketfish.me/redirect.html?to=prev&name=kebokyo">←&ensp;</a>
        <a class="text-subtitle hover:text-current" href="https://webring.bucketfish.me">bucket webring</a>
        <a class="text-subtitle hover:text-current" href="https://webring.bucketfish.me/redirect.html?to=next&name=kebokyo">&ensp;→</a>
        &emsp;&emsp;
        <a href="https://512kb.club"><img width="88" height="31" src="/buttons/green-team.gif" alt="a proud member of the green team of 512KB club" /></a>
      </div>
</BaseLayout>