Grayscale hover on navbar dropdown elements + client side mod fetching

apps/website/config.ts

@@ -7,7 +7,7 @@ export const configConst = {
 		youtube: 'https://youtube.com/',
 		discord: 'https://discord.gg/',
 		github: 'https://github.com/Polyfrost',
-		modrinth: 'https://modrinth.com/user/Wyvest',
+		modrinthId: 'a6VEZDKe', // user id of Wyvest
 	},
 	navbar: {
 		left: [

apps/website/src/components/base/navbar/NavbarElement.astro

@@ -74,7 +74,7 @@ function isCurrentPage(url: string): boolean {
 								{element.dropdown.map(item => (
 									<li>
 										<a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]">
-											<div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50 active:bg-blue-100">
+											<div class={`transition-[color,background-color,filter] text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 ${item.path ? 'hover:bg-blue-50 active:bg-blue-100' : 'hover:grayscale hover:brightness-75'}`}>
 												<div class="w-[36px]">
 													{item.logo && <Logo size={40} logo={item.logo}/>}
 												</div>

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>

apps/website/src/types/Config.d.ts

@@ -49,7 +49,7 @@ export interface Config {
 		// twitter: string,
 		discord: string,
 		github: string,
-		modrinth: string,
+		modrinthId: string,
 	},
 	navbar: {
 		left: NavbarElement[],

apps/website/tailwind.config.ts

@@ -97,6 +97,10 @@ const config: Config = {
 			lineHeight: {
 				none: '0',
 			},
+
+			transitionProperty: {
+				filter: 'filter',
+			},
 		},
 	},
 	plugins: [],