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

const title = "git repos";
const repos = await getCollection("git");
repos.sort(sortItem);
---

<BaseLayout title={title}>
  <slot name="head" slot="head">
    <link rel="stylesheet" href="/styles/index.css" />
    <script src="/scripts/index.js" is:inline></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>