diff options
Diffstat (limited to 'apps/website/src')
| -rw-r--r-- | apps/website/src/components/base/navbar/NavbarElement.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/pages/mods.astro | 38 | ||||
| -rw-r--r-- | apps/website/src/types/Config.d.ts | 2 |
3 files changed, 31 insertions, 11 deletions
diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro index c2c76b3..5e37253 100644 --- a/apps/website/src/components/base/navbar/NavbarElement.astro +++ b/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> 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> diff --git a/apps/website/src/types/Config.d.ts b/apps/website/src/types/Config.d.ts index 87f9b58..6e714b9 100644 --- a/apps/website/src/types/Config.d.ts +++ b/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[], |