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

export async function getStaticPaths() {
  return Object.keys(collections.collections)
    .filter((category) => category !== "git" && category !== "gists")
    .map((category) => ({
      params: { category },
    }));
}

const category = Astro.params.category as PostCollection;
const title = "Barrett Ruth";

const posts = await getCollection(category);
posts.sort(sortItem);
---

<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>
      <li class="topic death">
        <a href="/death" data-topic="death">death</a>
      </li>
    </ul>

    <div class="posts" id="posts">
      {
        posts.map((p) => (
          <a href={`/${category}/${p.slug}.html`}>{p.data.title}</a>
        ))
      }
    </div>
  </div>
</BaseLayout>