diff options
| -rw-r--r-- | apps/website/config.ts | 2 | ||||
| -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 | ||||
| -rw-r--r-- | apps/website/tailwind.config.ts | 4 |
5 files changed, 36 insertions, 12 deletions
diff --git a/apps/website/config.ts b/apps/website/config.ts index 1d1daef..bb52e9a 100644 --- a/apps/website/config.ts +++ b/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: [ 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[], diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts index 8a37a65..214421a 100644 --- a/apps/website/tailwind.config.ts +++ b/apps/website/tailwind.config.ts @@ -97,6 +97,10 @@ const config: Config = { lineHeight: { none: '0', }, + + transitionProperty: { + filter: 'filter', + }, }, }, plugins: [], |