index.astro

---
import { getCollection } from "astro:content";
import Layout from "../../layouts/Layout.astro";
import HorizontalContainer from "../../components/HorizontalContainer.astro";
import Hero from "../../components/Hero.astro";
import QuickStart from "../../components/QuickStart.astro";
import Grid3 from "../../components/Grid3.astro";
import HoverableLink from "../../components/HoverableLink.astro";
import { conceptPagePath } from "../../lib/utils";

const title = "Concepts";
const heroTitle = "Nix concepts";
const description = "The whys and the hows of Nix";

const conceptPages = await getCollection("concepts");
---

<Layout {title} {description}>
  <HorizontalContainer>
    <Hero title={heroTitle} {description} />

    <QuickStart />

    <Grid3>
      {
        conceptPages.map(({ slug, data: { title } }) => (
          <HoverableLink
            text={title}
            href={conceptPagePath(slug)}
            size="normal"
          />
        ))
      }
    </Grid3>
  </HorizontalContainer>
</Layout>