feat(web): add more a11y and make preload more efficientHEADmain

4 files changed, 32 insertions, 5 deletions

diff --git a/apps/website/src/components/shared/BaseHead.astro b/apps/website/src/components/shared/BaseHead.astro
index 39e98a7..4c878dd 100644
--- a/apps/website/src/components/shared/BaseHead.astro
+++ b/apps/website/src/components/shared/BaseHead.astro
@@ -1,6 +1,7 @@
 ---
 import smartypants from 'smartypants';
 import siteInfo from '../../data/site-info';
+import FontPreload from './FontPreload.astro';
 import SEO from './SEO.astro';
 import Favicon from '/media/polyfrost/minimal_bg.svg?url';
 
@@ -35,10 +36,7 @@ const resolvedImage = {
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font Preloads -->
-<link rel="preconnect" href="https://fonts.googleapis.com"/>
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
-<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/>
+<FontPreload />
 
 <!-- Low Priority Global Metadata -->
 <link rel="icon" type="image/svg+xml" href={Favicon}/>
diff --git a/apps/website/src/components/shared/FontPreload.astro b/apps/website/src/components/shared/FontPreload.astro
new file mode 100644
index 0000000..a1f0cf1
--- /dev/null
+++ b/apps/website/src/components/shared/FontPreload.astro
@@ -0,0 +1,28 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+<link
+	href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+	rel="preload"
+	as="style"
+	onload="this.onload=null;this.rel='stylesheet'"
+/>
+<link
+	href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap"
+	rel="preload"
+	as="style"
+	onload="this.onload=null;this.rel='stylesheet'"
+/>
+
+<noscript>
+<link
+	href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+	rel="stylesheet"
+	type="text/css"
+/>
+<link
+	href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap"
+	rel="stylesheet"
+	type="text/css"
+/>
+</noscript>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index c2835ac..f6ec7f5 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -82,7 +82,7 @@ import Layout from '@layouts/Layout.astro';
 						Learn more about what OneConfig is, and how it's revolutionized modding and user experience.
 					</Paragraph>
 					<div class="mt-10 flex items-center justify-center gap-x-4 lg:justify-start">
-						<Button href="/projects/oneconfig" size="sm" iconLeft="oneconfig" style="secondary">Learn more</Button>
+						<Button href="/projects/oneconfig" size="sm" iconLeft="oneconfig" style="secondary">About OneConfig</Button>
 						<Button href="/mods" size="sm" iconLeft="link-external" style="secondary">Discover mods</Button>
 					</div>
 				</div>
diff --git a/apps/website/src/types/Config.d.ts b/apps/website/src/types/Config.d.ts
index 870cb3c..6a4306d 100644
--- a/apps/website/src/types/Config.d.ts
+++ b/apps/website/src/types/Config.d.ts
@@ -30,6 +30,7 @@ export interface NavbarElement {
 	text?: string
 	logo?: [string, number]
 	path?: string
+	alt?: string
 	dropdown?: NavbarDropdown[]
 }