---
import DefaultPageLayout from "../layouts/default.astro";
import AuthorCard from "../components/AuthorCard.astro";
import { getGhostAuthors, getGhostSettings } from "../../api";
import invariant from "tiny-invariant";

let title = "All Authors";
let description = "All the authors";
const authors = await getGhostAuthors();
const settings = await getGhostSettings();
invariant(settings, 'Settings not found');
---

<DefaultPageLayout content={{ title, description }} settings={settings}>
  <section class="outer">
    <div class="inner posts">
      <h1>
        {settings.title}
      </h1>
      <div class="page__excerpt m-t text-acc-3 text-center text-lg">
        Collection of Tags
      </div>
      <div class="author-feed">
        {authors.map((author) => (
          <article class="post-card ">
            <AuthorCard author={author} settings={settings} />
          </article>
        ))}
      </div>
    </div>
  </section>
</DefaultPageLayout>

<style lang="scss">
  .author-feed {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 1fr;
    grid-column-gap: 9vh;
    grid-row-gap: 10vh;
    padding: 4vmin 0;
  }
</style>