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

const title = "Git Repositories";
const repos = await getCollection("git");
repos.sort((a, b) => a.slug.localeCompare(b.slug));
---

<BaseLayout title={title}>
  <slot name="head" slot="head">
    <link rel="stylesheet" href="/styles/index.css" />
    <script type="module" src="/scripts/index.js"></script>
  </slot>

  <div class="content">
    <ul class="topics" id="repo-list">
      {
        repos.map((r) => (
          <li class="topic">
            <a href={`/git/${r.slug}.html`} data-topic={`git/${r.slug}`}>
              {r.data.title || r.slug}
            </a>
          </li>
        ))
      }
    </ul>
    <div class="posts" id="posts"></div>
  </div>
</BaseLayout>