website / src / components / projects / ProjectGrid.astro

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

export interface Props {
  limitTo?: number;
}

const projectEntries = await getCollection("projects");
let entries = projectEntries.sort((a, b) => {
  const [yearA, yearB] = [a.data.timespan.from, b.data.timespan.from];
  const [intA, intB] = [a.data.internalSort ?? 0, b.data.internalSort ?? 0];
  const yearSort = yearB - yearA;
  return yearSort === 0 ? intB - intA : yearSort;
});

const { limitTo } = Astro.props;
if (limitTo) {
  entries = entries.slice(0, limitTo);
}
---

<div>
  {entries.map((p) => <ProjectCard project={p} />)}
</div>

<style>
  div {
    display: grid;
    gap: var(--2);
    grid-template-columns: repeat(auto-fit, minmax(var(--14), 1fr));
  }
</style>