---
import BaseLayout from "../layouts/BaseLayout.astro";
import { getCollection } from "astro:content";

const title = "Barrett Ruth";
const CATS = ["algorithms", "software", "meditations", "autonomous-racing"];

function parseEuroDate(dateStr) {
  if (!dateStr) return new Date(0);
  const [d, m, y] = (dateStr || "").split("/");
  return new Date(Number(y), Number(m) - 1, Number(d));
}

const postsByCategory = {};
for (const c of CATS) {
  const entries = await getCollection(c);
  entries.sort(
    (a, b) =>
      parseEuroDate(b.data.date).getTime() -
      parseEuroDate(a.data.date).getTime(),
  );
  postsByCategory[c] = entries.map((e) => ({
    id: `${c}/${e.slug}.mdx`,
    slug: e.slug,
    data: {
      title: e.data.title ?? e.slug,
      date: e.data.date ?? null,
    },
  }));
}
---

<BaseLayout title={title}>
  <slot name="head" slot="head">
    <link rel="stylesheet" href="/styles/index.css" />
  </slot>

  <div class="content">
    <ul class="topics">
      <li class="topic algorithms">
        <a href="#algorithms" data-topic="algorithms">algorithms</a>
      </li>
      <li class="topic software">
        <a href="#software" data-topic="software">software</a>
      </li>
      <li class="topic meditations">
        <a href="#meditations" data-topic="meditations">meditations</a>
      </li>
      <li class="topic autonomous-racing">
        <a href="#autonomous-racing" data-topic="autonomous-racing"
          >autonomous racing</a
        >
      </li>
    </ul>
    <div class="posts" id="posts"></div>
  </div>

  <script slot="scripts" define:vars={{ postsByCategory }}>
    window.postsByCategory = postsByCategory;
  </script>
  <script slot="scripts" type="module" src="/scripts/index.js"></script>
</BaseLayout>
