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";

interface Project {
  name: string;
  link: string;
  desc: string;
  stats?: {
    forks: number;
    stars: number;
  };
}

const projects: Project[] = [
  {
    name: "HyLib",
    link: "https://github.com/xHyroM/HyLib",
    desc: "Source code for HyLib, a paper plugin and powerful library.",
  },
  {
    name: "HyChat",
    link: "https://github.com/xHyroM/HyChat",
    desc: "Source code for HyChat, a paper plugin.",
  },
  {
    name: "HyX",
    link: "https://github.com/xHyroM/HyX",
    desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quaerat.",
  },
  {
    name: "Mashe",
    link: "https://github.com/xHyroM/mashe",
    desc: "Simple, fast, and easy to use Event Handling for Java.",
  },
  {
    name: "Mumblum",
    link: "https://github.com/xHyroM/mumblum",
    desc: "Mumblum is a simple, modern discord bot in JDA.",
  },
  {
    name: "setup-bun",
    link: "https://github.com/xHyroM/setup-bun",
    desc: "Set up your GitHub Actions workflow with a specific version of Bun.",
  },
  {
    name: "Roles Bot",
    link: "https://github.com/xHyroM/roles-bot",
    desc: 'Discord bot for "button" roles, using Cloudflare Workers.',
  },
  {
    name: "Bun Discord Bot",
    link: "https://github.com/xHyroM/bun-discord-bot",
    desc: "Official serverless discord bot for bun discord server.",
  },
  {
    name: "hykord",
    link: "https://github.com/xHyroM/hykord",
    desc: "My @discord client modification.",
  },
  {
    name: "frog",
    link: "https://github.com/xHyroM/frog",
    desc: "Frog is an extremely simple language based on the monkey language.",
  },
  {
    name: "lsx",
    link: "https://github.com/xHyroM/lsx",
    desc: "Lsx is a simple, fast, and easy to use ls implementation in Rust.",
  },
  {
    name: "Slovensko v Grafoch",
    link: "https://github.com/xHyroM/slovensko-v-grafoch",
    desc: "Slovensko v Grafoch is a website that shows data about Slovakia in graphs.",
  },
  {
    name: "Peddler's Pocket",
    link: "https://github.com/xHyroM/peddlerspocket",
    desc: "CLOSED SOURCE NOW | /sell command that allows you to put things into GUI and then sell them by closing",
  },
  {
    name: "Peak Pursuit",
    link: "https://github.com/xHyroM/peakpursuit",
    desc: "CLOSED SOURCE NOW | PeakPursuit is a plugin for King of the Hill events that adds a competitive edge to your server gameplay. Conquer the hill and claim the crown!",
  },
  {
    name: "Spawner Genz",
    link: "https://github.com/xHyroM/spawnergenz",
    desc: "CLOSED SOURCE NOW | Spawner Genz is a plugin that modifies the functionality of spawners so that they don't spawn entities, but instead store drops in a virtual storag in which you can then sell or move everything to your inventory.",
  },
];

for (const project of projects) {
  const repository = await (
    await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
      headers: {
        Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`,
      },
    })
  ).json();

  project.stats = {
    forks: repository.forks,
    stars: repository.stargazers_count,
  };
}

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>
    <main class="flex flex-wrap justify-center gap-12">
      {
        projects.map((project) => (
          <section class="bg-gray flex min-h-max w-80 flex-col justify-between rounded-md border-[1px] border-neutral-800 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 py-1 px-4 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>
              <a
                href={project.link}
                class="bottom-0  inline-flex w-fit rounded-md bg-neutral-800 py-2 px-6 text-neutral-300 transition-colors duration-100 hover:bg-neutral-700 [&_img]:transition-all [&_img]:hover:translate-x-[2px]"
              >
                GitHub{" "}
                <img
                  src="/icons/arrow-up-right.svg"
                  class="ml-2 mt-[1px] h-[23px] w-5"
                  alt=""
                />
              </a>
              <a
                href={project.link}
                class=" bottom-0 inline-flex  w-fit translate-y-[6px] py-2 px-6 text-neutral-300 transition-all duration-100 hover:-translate-y-[-4px] hover:text-neutral-200"
              >
                <img src="/icons/book-open.svg" class="mr-2 h-6 w-5" alt="" />
                Docs{" "}
              </a>
            </div>
          </section>
        ))
      }
    </main>
  </Container>
</Layout>