website/src/pages/projects.astro

---
import Layout from "@layouts/Layout.astro";
import Navbar from "@components/widgets/Navbar.astro";
import Container from "@components/atoms/Container.astro";
import { PROJECTS } from "~/config";
import Button from "~/components/widgets/Button.astro";

for (const project of PROJECTS) {
  try {
    const rawRepository = await fetch(
      `https://api.github.com/repos/${project.link.slice(19)}`,
      {
        headers: {
          Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`,
        },
      }
    ).catch(console.log);
    if (!rawRepository) {
      project.stats = {
        forks: 0,
        stars: 0,
      };

      continue;
    }

    const repository = await rawRepository.json();

    project.stats = {
      forks: repository.forks,
      stars: repository.stargazers_count,
    };
  } catch (e) {
    console.log(e);
  }
}

PROJECTS.sort((a, b) => a.name.localeCompare(b.name));
---

<Layout
  schemaOrg={{
    "@context": "https://schema.org/",
    "@type": "ItemList",
    name: "Projects",
    itemListElement: PROJECTS.map((project, i) => ({
      "@type": "ListItem",
      position: i + 1,
      name: project.name,
      url: project.link,
    })),
  }}
>
  <Navbar />
  <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
    Projects
  </h1>

  <Container class="pb-4">
    <main class="flex flex-wrap justify-center gap-12">
      {
        PROJECTS.map((project) => (
          <section class="flex min-h-max w-80 flex-col justify-between rounded-md border-[1px] border-neutral-800 bg-dark-50 p-6 md:w-96">
            <div class="flex">
              <h2 class="mb-4 break-words text-3xl font-bold text-white">
                {project.name}
              </h2>
              <div class="ml-4 flex h-fit translate-y-1 items-center justify-center gap-2 rounded-lg bg-neutral-800 px-4 py-1 text-neutral-300">
                <div class="flex gap-1">
                  <img
                    src="/icons/star.svg"
                    alt=""
                    class="h-[21px] w-[21px] translate-y-[1px]"
                  />
                  <p>{project.stats!.stars}</p>
                </div>
                <div class="flex gap-1">
                  {" "}
                  <img
                    src="/icons/code-fork-solid.svg"
                    alt=""
                    class="h-[21px] w-[21px] translate-y-[1px]"
                  />
                  <p>{project.stats!.forks}</p>
                </div>
              </div>
            </div>

            <p class="mb-6 break-all text-neutral-300">{project.desc}</p>
            <div>
              <Button
                label="GitHub"
                link={project.link}
                type="primary"
                icon="/icons/arrow-up-right.svg"
                iconClass="ml-2 mt-[1px] h-[23px] w-5"
              />
              <Button
                label="Docs"
                link={project.link}
                type="secondary"
                icon="/icons/book-open.svg"
                iconClass="mr-2 h-6 w-5"
                iconPosition="left"
              />
            </div>
          </section>
        ))
      }
    </main>
  </Container>
</Layout>