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="text-white">
      <section class="flex flex-wrap justify-center gap-12 pb-4">
        {
          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">
                  {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>
          ))
        }
      </section>

      <section class="text-center text-xl">
        <p>
          You can also look at my repositories on <a
            class="text-gold"
            href="https://github.com/xHyroM">github</a
          >. 👀
        </p>
      </section>
    </main>
  </Container>
</Layout>