---
import BaseLayout from "../layouts/BaseLayout.astro";
import { sortItem } from "../utils/sort.js";
import { getCollection } from "astro:content";
import type { PostCollection } from "../types";

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

type PostData = {
  id: string;
  slug: string;
  data: {
    title: string;
    date: string | null;
  };
};

const postsByCategory: Record<string, PostData[]> = {};
for (const c of CATS) {
  const entries = await getCollection(c);
  entries.sort(sortItem);
  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" src="/scripts/index.js"></script>
</BaseLayout>