Grayscale hover on navbar dropdown elements + client side mod fetching

1 files changed, 29 insertions, 9 deletions

diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro
index 20e42b5..a0286ee 100644
--- a/apps/website/src/pages/mods.astro
+++ b/apps/website/src/pages/mods.astro
@@ -9,11 +9,7 @@ import configConst from '@config';
 import Layout from '@layouts/Layout.astro';
 import { Code } from 'astro:components';
 
-const res = await fetch('https://api.modrinth.com/v2/user/Wyvest/projects');
-const data = await res.json();
-const mods = data.filter((mod: any) => {
-	return mod.slug !== 'oneconfig' && mod.slug !== 'easeify';
-});
+const modrinthId = configConst.socials.modrinthId;
 ---
 
 <Layout>
@@ -47,19 +43,19 @@ const mods = data.filter((mod: any) => {
 		<div class="flex flex-col justify-start items-center max-w-full mt-6 md:mt-10 gap-6 px-4">
 			<Header align="center" size="xxl" class="text-navy-peony max-w-xl">Redefining modding, one mod at a time</Header>
 			<div class="flex flex-row justify-center items-center gap-x-2">
-				<Button style="primary" iconLeft="link-external" href={configConst.socials.modrinth}>Modrinth</Button>
+				<Button style="primary" iconLeft="link-external" href={`https://modrinth.com/user/${configConst.socials.modrinthId}`}>Modrinth</Button>
 				<Button style="primary" iconLeft="github" href={configConst.socials.github}>GitHub</Button>
 			</div>
 
 			<Paragraph class="text-navy-peony text-lg font-semibold max-w-screen-sm text-center mt-20">
-				{Math.floor(mods.length / 5) * 5}+ mods. Unparalleled new features. OneConfig. We combine our groundbreaking library with mods with no equivalent anywhere else.
+				<span id="mod_count">16</span>+ mods. Unparalleled new features. OneConfig. We combine our groundbreaking library with mods with no equivalent anywhere else.
 			</Paragraph>
 		</div>
 	</Section>
 
 	<Section tabindex="0">
 		<div slot="left">
-			<Header size="lg" class="text-navy-peony"><b>{mods.length}</b> maintained mods</Header>
+			<Header size="lg" class="text-navy-peony"><b id="mod_count_maintained_mods">16</b> maintained mods</Header>
 			<Paragraph size="sm" class="text-gray-400 max-w-[500px]">
 				OneConfig is a revolutionary new way to configure mods. It allows you to configure all of your mods in one place, with a beautiful UI.
 			</Paragraph>
@@ -138,10 +134,34 @@ const mods = data.filter((mod: any) => {
 		<div class="flex flex-col gap-y-1 relative md:-left-12 justify-center items-center">
 			<Header size="xl" class="text-navy-peony text-header-page w-11/12 md:max-w-lg text-center">Get our mods, available on Modrinth and GitHub.</Header>
 			<div class="flex flex-row justify-center items-center gap-x-2">
-				<Button style="primary" iconLeft="link-external" href={configConst.socials.modrinth}>Modrinth</Button>
+				<Button style="primary" iconLeft="link-external" href={`https://modrinth.com/user/${configConst.socials.modrinthId}`}>Modrinth</Button>
 				<Button style="primary" iconLeft="github" href={configConst.socials.github}>GitHub</Button>
 			</div>
 		</div>
 	</Section>
 
 </Layout>
+
+<script define:vars={{ modrinthId: modrinthId }}>
+
+async function getModCount() {
+	const res = await fetch(`https://api.modrinth.com/v2/user/${modrinthId}/projects`);
+	const data = await res.json();
+	const mods = data.filter((mod) => {
+		return mod.slug !== 'oneconfig' && mod.slug !== 'easeify';
+	});
+
+	return mods.length;
+}
+
+getModCount().then((size) => {
+	const modCount = document.getElementById('mod_count');
+	const modCountMaintainedMods = document.getElementById('mod_count_maintained_mods');
+
+	if (modCount)
+		modCount.textContent = size;
+
+	if (modCountMaintainedMods)
+		modCountMaintainedMods.textContent = size;
+});
+</script>