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

const title = "gists";
const gists = await getCollection("gists");
gists.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">
      {
        gists.map((gist) => (
          <li class="topic">
            <a
              href={`/gist/${gist.slug}.html`}
              data-topic={`gist/${gist.slug}`}
            >
              {gist.data.title || gist.slug}
            </a>
          </li>
        ))
      }
    </ul>
  </div>
</BaseLayout>