chore(lint): bump deps and fix linting/format

22 files changed, 157 insertions, 181 deletions

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index e0009b1..6729f27 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -6,13 +6,13 @@
 		"build-storybook": "storybook build --no-open"
 	},
 	"dependencies": {
-		"@storybook/addon-essentials": "^7.5.3",
-		"@storybook/addon-interactions": "^7.5.3",
-		"@storybook/addon-links": "^7.5.3",
+		"@storybook/addon-essentials": "^7.6.6",
+		"@storybook/addon-interactions": "^7.6.6",
+		"@storybook/addon-links": "^7.6.6",
 		"@storybook/addon-styling": "^1.3.7",
-		"@storybook/blocks": "^7.5.3",
-		"@storybook/react": "^7.5.3",
-		"@storybook/react-vite": "^7.5.3",
+		"@storybook/blocks": "^7.6.6",
+		"@storybook/react": "^7.6.6",
+		"@storybook/react-vite": "^7.6.6",
 		"@storybook/testing-library": "^0.2.2",
 		"postcss-pseudo-companion-classes": "^0.1.1",
 		"react": "^18.2.0",
@@ -22,15 +22,15 @@
 	"devDependencies": {
 		"@polyfrost/config": "workspace:*",
 		"@polyfrost/ui": "workspace:*",
-		"@types/react": "^18.2.38",
-		"@types/react-dom": "^18.2.17",
-		"@vitejs/plugin-react": "^4.2.0",
+		"@types/react": "^18.2.45",
+		"@types/react-dom": "^18.2.18",
+		"@vitejs/plugin-react": "^4.2.1",
 		"autoprefixer": "^10.4.16",
-		"postcss": "^8.4.31",
+		"postcss": "^8.4.32",
 		"prop-types": "^15.8.1",
-		"storybook": "^7.5.3",
-		"tailwindcss": "^3.3.5",
-		"typescript": "^5.3.2",
-		"vite": "^5.0.2"
+		"storybook": "^7.6.6",
+		"tailwindcss": "^3.4.0",
+		"typescript": "^5.3.3",
+		"vite": "^5.0.10"
 	}
 }
diff --git a/apps/website/package.json b/apps/website/package.json
index e3fb319..bb13cbe 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -7,6 +7,7 @@
 		"start": "astro start",
 		"build": "astro build",
 		"preview": "astro preview",
+		"astro": "astro",
 		"test": "vitest"
 	},
 	"dependencies": {
@@ -16,13 +17,13 @@
 		"@astrojs/tailwind": "^5.0.2",
 		"astro": "^4.0.6",
 		"sass": "^1.69.5",
-		"tailwindcss": "^3.3.5",
+		"tailwindcss": "^3.4.0",
 		"vitest": "^0.34.6"
 	},
 	"devDependencies": {
 		"@polyfrost/config": "workspace:*",
-		"@types/node": "~20.10.0",
+		"@types/node": "~20.10.5",
 		"node-html-parser": "^6.1.11",
-		"typescript": "^5.3.2"
+		"typescript": "^5.3.3"
 	}
 }
diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
index 438bafd..285052a 100644
--- a/apps/website/src/components/base/Button.astro
+++ b/apps/website/src/components/base/Button.astro
@@ -51,8 +51,8 @@ const className = [
 const Element = rest.href ? 'a' : 'button' as any;
 ---
 
-<Element {...rest} class={className}>
-	{iconLeft && <span class="mr-2"><Icon icon={iconLeft} size={iconSize[size]}></Icon></span>}
-	{text || <slot />}
-	{iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>}
-</Element>
+	<Element {...rest} class={className}>
+		{iconLeft && <span class="mr-2"><Icon icon={iconLeft} size={iconSize[size]}></Icon></span>}
+		{text || <slot/>}
+		{iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>}
+	</Element>
diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro
index b3fbc00..7cc51b2 100644
--- a/apps/website/src/components/base/Card.astro
+++ b/apps/website/src/components/base/Card.astro
@@ -4,8 +4,8 @@ import Icon from '@components/icons/Icon.astro';
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'div'> {
-	icon: Icons;
-	text?: string;
+	icon: Icons
+	text?: string
 }
 
 const {
@@ -16,7 +16,7 @@ const {
 ---
 
 <!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. -->
-<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0">
-	<Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon>
-	<p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl pl-[12px] pr-[32px]">{text}</p>
-</div>
+	<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0">
+		<Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon>
+		<p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl pl-[12px] pr-[32px]">{text}</p>
+	</div>
diff --git a/apps/website/src/components/base/CodeBlock.astro b/apps/website/src/components/base/CodeBlock.astro
deleted file mode 100644
index fd2cdd6..0000000
--- a/apps/website/src/components/base/CodeBlock.astro
+++ /dev/null
@@ -1,21 +0,0 @@
----
-
----
-
-<pre class="flex flex-col bg-gray-800 whitespace-pre border border-gray-50 rounded-2xl text-sm">
-	<!-- TODO: un-shit this -->
-	<code><ca>public</ca> <cb>class</cb> <cc>MyConfig</cc> <cd>&#123;</cd></code>
-	<code></code>
-	<code>    <ce>@</ce><ca>Switch</ca><cd>(</cd><ca>name</ca> <ce>=</ce> <cf>"Sub Switch"</cf><cd>,</cd> <ca>type</ca> <ce>=</ce> <ca>OptionType</ca><cd>.</cd><cb>SWITCH</cb><cd>)</cd></code>
-	<code>    <cb>public</cb> <cc>static boolean subSwitch</cc> <ce>=</ce> <cg>false</cg><cd>;</cd></code>
-	<code></code>
-	<code>    <ca>public MyConfig</ca><cd>() &#123;</cd></code>
-	<code>        <cb>super</cb><cd>(</cd><cb>new</cb> <ca>Mod</ca><cd>(</cd><cf>"My Mod"</cf><cd>,</cd> <ca>ModType</ca><cd>.</cd><cb>UTIL_QOL</cb><cd>),</cd> <cf>"config.json"</cf><cd>);</cd></code>
-	<code></code>
-	<code>        <cb>addDependency</cb><cd>(</cd><cf>"subSwitch"</cf><cd>, ()</cd> <ce>-&gt;</ce> <cd>&#123;</cd></code>
-	<code>            // Do stuff here!</code>
-	<code>        <cd>&#125;);</cd></code>
-	<code>    <cd>&#125;</cd></code>
-	<code></code>
-	<code><cd>&#125;</cd></code>
-</pre>
diff --git a/apps/website/src/components/base/FormattedDate.astro b/apps/website/src/components/base/FormattedDate.astro
index 1bcce73..af538b9 100644
--- a/apps/website/src/components/base/FormattedDate.astro
+++ b/apps/website/src/components/base/FormattedDate.astro
@@ -1,17 +1,17 @@
 ---
 interface Props {
-	date: Date;
+	date: Date
 }
 
 const { date } = Astro.props;
 ---
 
-<time datetime={date.toISOString()}>
-	{
-		date.toLocaleDateString('en-us', {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-		})
-	}
-</time>
+	<time datetime={date.toISOString()}>
+		{
+			date.toLocaleDateString('en-us', {
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric',
+			})
+		}
+	</time>
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index 70dc799..1ab879e 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -25,13 +25,13 @@ const {
 } = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
 
-const className = (align == 'inherit' ? '' : `text-${align} `)
-	+ (size == 'xxl' ? ' page-header' : '')
+const className = (align === 'inherit' ? '' : `text-${align} `)
+	+ (size === 'xxl' ? ' page-header' : '')
 	+ (attr.class ? ` ${attr.class}` : '');
 ---
 
 	<Element {...attr} class={className}>
-		<slot />
+		<slot/>
 	</Element>
 
 		<style>
@@ -74,4 +74,4 @@ const className = (align == 'inherit' ? '' : `text-${align} `)
 			font-weight: inherit;
 		}
 	}
-</style>
+		</style>
diff --git a/apps/website/src/components/base/Navbar.astro b/apps/website/src/components/base/Navbar.astro
index 8fa98df..15f7638 100644
--- a/apps/website/src/components/base/Navbar.astro
+++ b/apps/website/src/components/base/Navbar.astro
@@ -1,6 +1,6 @@
 ---
-import config from 'config';
 import type { Config } from '@webtypes/Config';
+import config from 'config';
 import NavbarElement from './NavbarElement.astro';
 
 ---
@@ -9,12 +9,12 @@ import NavbarElement from './NavbarElement.astro';
 		<nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center">
 			<ul class="flex flex-row justify-start gap-4">
 				{(config as Config).navbar.left.map((element, index) => (
-					<NavbarElement {element} {index} />
+					<NavbarElement {element} {index}/>
 				))}
 			</ul>
 			<ul class="flex flex-row justify-end gap-4">
 				{(config as Config).navbar.right.map((element, index) => (
-					<NavbarElement {element} {index} />
+					<NavbarElement {element} {index}/>
 				))}
 			</ul>
 		</nav>
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
index 17c3662..6d549bf 100644
--- a/apps/website/src/components/base/NavbarElement.astro
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -1,11 +1,11 @@
 ---
-import type { LogoType, NavbarElement } from '@webtypes/Config';
-import Logo from '@components/logos/Logo.astro';
 import Icon from '@components/icons/Icon.astro';
-import ScreenOverlay from './ScreenOverlay.astro';
+import Logo from '@components/logos/Logo.astro';
+import type { LogoType, NavbarElement } from '@webtypes/Config';
 import Header from './Header.astro';
-import Tag from './Tag.astro';
+import ScreenOverlay from './ScreenOverlay.astro';
 import ScrollbarOverlayContainer from './ScrollbarOverlayContainer.astro';
+import Tag from './Tag.astro';
 
 interface Props {
 	element: NavbarElement
@@ -25,66 +25,64 @@ const {
 				? (
 					<a href={element.path} class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500">
 						{element.text && element.text}
-						{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
-						{element.dropdown && <Icon icon="chevron-down" />}
+						{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
+						{element.dropdown && <Icon icon="chevron-down"/>}
 					</a>
-					)
+				)
 				: (
 					<p class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500 cursor-default">
 						{element.text && element.text}
-						{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
-						{element.dropdown && <Icon icon="chevron-down" />}
+						{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
+						{element.dropdown && <Icon icon="chevron-down"/>}
 					</p>
-					)}
+				)}
 
 			{element.dropdown && (
-				<ScreenOverlay class="max-sm:group-focus-within:opacity-100" />
-					<input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute">
+				<ScreenOverlay class="max-sm:group-focus-within:opacity-100"/>
+					<input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute"/>
 					<div class={`
-				transition-opacity
-                fixed md:absolute right-0 max-sm:bottom-0
-                max-sm:overflow-hidden
-                max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen
-                pointer-events-none opacity-0
+						transition-opacity
+                		fixed md:absolute right-0 max-sm:bottom-0
+               			max-sm:overflow-hidden
+                		max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen
+                		pointer-events-none opacity-0
 
-                md:top-full md:right-0
+                		md:top-full md:right-0
 
-                group-focus-within:pointer-events-auto group-focus-within:opacity-100
-                focus-within:pointer-events-auto focus-within:opacity-100
-                hover:pointer-events-auto hover:opacity-100
-            `}
-					>
+                		group-focus-within:pointer-events-auto group-focus-within:opacity-100
+                		focus-within:pointer-events-auto focus-within:opacity-100
+                		hover:pointer-events-auto hover:opacity-100
+            		`}>
 						<ScrollbarOverlayContainer
 							tabindex="-1"
 							class={`
-                    bg-gray-50
-                    rounded-t-lg md:rounded-lg
-                    transition-transform
-                    max-sm:translate-y-1/3 max-sm:left-0
-                    group-focus-within:translate-y-0
-                    max-h-full md:max-h-96 overflow-y-auto
-					md:shadow-lg
-                `}
-						>
+                    			bg-gray-50
+                    			rounded-t-lg md:rounded-lg
+                    			transition-transform
+                    			max-sm:translate-y-1/3 max-sm:left-0
+                    			group-focus-within:translate-y-0
+                    			max-h-full md:max-h-96 overflow-y-auto
+								md:shadow-lg
+                			`}>
 							<ul class="p-4">
 								{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">
-										<div class="w-[36px]">
-										{item.logo && <Logo size={40} logo={item.logo} />}
-         </div>
+											<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">
+												<div class="w-[36px]">
+													{item.logo && <Logo size={40} logo={item.logo}/>}
+												</div>
 
-										<div class="flex flex-col justify-start items-start">
-										<div class="flex flex-row gap-2">
-										<Header size="sm" class="text-gray-800">{item.name}</Header>
-										{item.tag && <Tag>{item.tag}</Tag>}
-         </div>
-										<p class="text-sm text-gray-400 font-light">{item.description}</p>
-         </div>
-         </div>
-         </a>
-         </li>
+												<div class="flex flex-col justify-start items-start">
+													<div class="flex flex-row gap-2">
+														<Header size="sm" class="text-gray-800">{item.name}</Header>
+														{item.tag && <Tag>{item.tag}</Tag>}
+													</div>
+													<p class="text-sm text-gray-400 font-light">{item.description}</p>
+												</div>
+											</div>
+										</a>
+									</li>
 								))}
 							</ul>
 						</ScrollbarOverlayContainer>
diff --git a/apps/website/src/components/base/Paragraph.astro b/apps/website/src/components/base/Paragraph.astro
index 832b296..ffb1030 100644
--- a/apps/website/src/components/base/Paragraph.astro
+++ b/apps/website/src/components/base/Paragraph.astro
@@ -27,5 +27,5 @@ const className = [
 ---
 
 	<p class={className} {...props}>
-		{text || <slot />}
+		{text || <slot/>}
 	</p>
diff --git a/apps/website/src/components/base/ScrollbarOverlayContainer.astro b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
index 84bedf5..235dbc7 100644
--- a/apps/website/src/components/base/ScrollbarOverlayContainer.astro
+++ b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
@@ -48,4 +48,4 @@ const { ...attr } = Astro.props;
         background-color: #00000040;
     }
 }
-</style>
+		</style>
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index 4edf1ba..55e3737 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -19,8 +19,8 @@ const {
 const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');
 
 const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 md:p-0 flex gap-4${
-	 twoColumn ? ` ${maxWidth == 'none' ? 'justify-center' : 'justify-between md:justify-evenly lg:justify-between'} ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row md:items-center md:flex-row` : ''
-	 }${props.class ? ` ${props.class}` : ''}`;
+	twoColumn ? ` ${maxWidth === 'none' ? 'justify-center' : 'justify-between md:justify-evenly lg:justify-between'} ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row md:items-center md:flex-row` : ''
+}${props.class ? ` ${props.class}` : ''}`;
 ---
 
 	<section class={`w-full flex justify-center ${wrapperClass ?? ''}`}>
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro
index c1b32d1..95ffd05 100644
--- a/apps/website/src/components/base/Slider.astro
+++ b/apps/website/src/components/base/Slider.astro
@@ -2,20 +2,21 @@
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'div'> {
-	dir?: string;
-	wrapperClass?: string;
+	dir?: string
+	wrapperClass?: string
 }
 
 const {
-	dir = "left",
-	wrapperClass = ""
+	dir = 'left',
+	wrapperClass = '',
 } = Astro.props;
 ---
 
 <div class={
 	`w-full bg-blue-100 flex flex-row gap-2.5 overflow-hidden slider
-	${dir === "right" ? "reverse" : ""}
-	${wrapperClass}`}>
+	${dir === 'right' ? 'reverse' : ''}
+	${wrapperClass}`
+}>
 	<slot />
 </div>
 
diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro
index b36d412..693948d 100644
--- a/apps/website/src/components/icons/Icon.astro
+++ b/apps/website/src/components/icons/Icon.astro
@@ -1,11 +1,11 @@
 ---
-import { parse } from 'node-html-parser';
 import type { HTMLAttributes } from 'astro/types';
+import { parse } from 'node-html-parser';
 
 export type Icons = 'chevron-down' | 'download' | 'book-open';
 
 interface Props extends HTMLAttributes<'svg'> {
-  	icon: Icons
+	icon: Icons
 	size?: number | [number, number]
 }
 
diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro
index ad41aad..52bfe34 100644
--- a/apps/website/src/components/logos/Logo.astro
+++ b/apps/website/src/components/logos/Logo.astro
@@ -10,19 +10,18 @@ export interface Props extends HTMLAttributes<'svg'> {
 
 const {
 	logo,
-	silent = false,
 	size = undefined,
 	...attr
 } = Astro.props;
 let svg: string | undefined;
 
 try {
-	if (logo == undefined)
+	if (logo === undefined)
 		return;
 	const dir = '../../../public/media';
 	svg = (await import(`${dir}/${logo.replaceAll('.', '/')}.svg?raw` /* @vite-ignore */)).default;
 
-	if (svg == undefined)
+	if (svg === undefined)
 		return;
 
 	if (typeof size == 'number' || Array.isArray(size)) {
@@ -52,4 +51,4 @@ catch (err) {
 
 ---
 
-	<Fragment set:html={svg} />
+	<Fragment set:html={svg}/>
diff --git a/apps/website/src/layouts/BlogPost.astro b/apps/website/src/layouts/BlogPost.astro
index ed2a3c3..188aae1 100644
--- a/apps/website/src/layouts/BlogPost.astro
+++ b/apps/website/src/layouts/BlogPost.astro
@@ -1,10 +1,9 @@
 ---
+import FormattedDate from '@components/base/FormattedDate.astro';
+import '@styles/blog.css';
 import type { CollectionEntry } from 'astro:content';
 import Layout from './Layout.astro';
 
-import '@styles/blog.css';
-import FormattedDate from '@components/base/FormattedDate.astro';
-
 type Props = CollectionEntry<'blog'>['data'];
 
 const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
@@ -12,25 +11,25 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
 <Layout title={title} description={description}>
 	<article>
-		<div class='hero-image'>
-			{heroImage && <img width={1020} height={510} src={heroImage} alt="Hero Image" />}
+		<div class="hero-image">
+			{heroImage && <img width={1020} height={510} src={heroImage} alt="Hero Image"/>}
 		</div>
 		<div class="prose">
 			<div class="title">
 				<div class="date">
-					<FormattedDate date={pubDate} />
+					<FormattedDate date={pubDate}/>
 					{
 						updatedDate && (
 							<div class="last-updated-on">
-								Last updated on <FormattedDate date={updatedDate} />
+								Last updated on <FormattedDate date={updatedDate}/>
 							</div>
 						)
 					}
 				</div>
 				<h1>{title}</h1>
-				<hr />
+				<hr/>
 			</div>
-			<slot />
+			<slot/>
 		</div>
 	</article>
 </Layout>
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
index 4acc407..1af3a1e 100644
--- a/apps/website/src/layouts/Layout.astro
+++ b/apps/website/src/layouts/Layout.astro
@@ -20,25 +20,25 @@ const {
 <!doctype html>
 	<html lang="en">
 		<head>
-			<meta charset="UTF-8" />
-			<meta name="description" content={description} />
-			<meta name="viewport" content="width=device-width" />
-			<link rel="icon" type="image/svg+xml" href={favicon} />
-			<meta name="generator" content={Astro.generator} />
+			<meta charset="UTF-8"/>
+			<meta name="description" content={description}/>
+			<meta name="viewport" content="width=device-width"/>
+			<link rel="icon" type="image/svg+xml" href={favicon}/>
+			<meta name="generator" content={Astro.generator}/>
 
-			<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">
+			<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"/>
 
 			<title>{title}</title>
 		</head>
 
 		<body class="bg-gray-50">
-			<Navbar />
+			<Navbar/>
 			<main class="min-h-screen h-auto">
-				<slot />
+				<slot/>
 			</main>
-			<Footer />
+			<Footer/>
 		</body>
 	</html>
diff --git a/apps/website/src/pages/blog/[...slug].astro b/apps/website/src/pages/blog/[...slug].astro
index d9995e7..abdde0a 100644
--- a/apps/website/src/pages/blog/[...slug].astro
+++ b/apps/website/src/pages/blog/[...slug].astro
@@ -19,7 +19,5 @@ const { Content } = await post.render();
 ---
 
 <BlogPost {...post.data}>
-	<Content />
+	<Content/>
 </BlogPost>
-
-
diff --git a/apps/website/src/pages/blog/index.astro b/apps/website/src/pages/blog/index.astro
index c8f8203..4bccad4 100644
--- a/apps/website/src/pages/blog/index.astro
+++ b/apps/website/src/pages/blog/index.astro
@@ -1,25 +1,25 @@
 ---
 /// <reference types="../../env.d.ts" />
-import Layout from '../../layouts/Layout.astro';
-import FormattedDate from '../../components/base/FormattedDate.astro'
 import { getCollection } from 'astro:content';
+import FormattedDate from '../../components/base/FormattedDate.astro';
+import Layout from '../../layouts/Layout.astro';
 
 const posts = (await getCollection('blog')).sort(
-	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
 );
 ---
 
-<Layout title='Polyfrost Blog' description='Recieve Polyfrost updates here'>
+<Layout title="Polyfrost Blog" description="Recieve Polyfrost updates here">
 	<section>
 		<ul>
 			{
 				posts.map(post => (
 					<li>
 						<a href={`blog/${post.slug}/`}>
-							<img width={720} height={360} src={post.data.heroImage} alt="" />
+							<img width={720} height={360} src={post.data.heroImage} alt=""/>
 							<h4 class="title">{post.data.title}</h4>
 							<p class="date">
-								<FormattedDate date={post.data.pubDate} />
+								<FormattedDate date={post.data.pubDate}/>
 							</p>
 						</a>
 					</li>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 6f88bf5..ccc6852 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
-import Layout from "@layouts/Layout.astro";
 import Section from '@components/base/Section.astro';
+import Layout from '@layouts/Layout.astro';
 ---
 <Layout>
 	<Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]">
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index 7badc11..e9728a1 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -1,27 +1,27 @@
 ---
+import Button from '@components/base/Button.astro';
+import Card from '@components/base/Card.astro';
 import Header from '@components/base/Header.astro';
-import Logo from '@components/logos/Logo.astro';
+import Paragraph from '@components/base/Paragraph.astro';
 import Section from '@components/base/Section.astro';
-import Button from '@components/base/Button.astro';
+import Slider from '@components/base/Slider.astro';
+import Logo from '@components/logos/Logo.astro';
 
-import Paragraph from '@components/base/Paragraph.astro';
 import Layout from '@layouts/Layout.astro';
 
 import { Code } from 'astro:components';
 
-import Slider from '@components/base/Slider.astro';
-import Card from '@components/base/Card.astro';
 ---
 
 <Layout>
 	<Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]">
-		<Logo size={56} logo="oneconfig.minimal" />
+		<Logo size={56} logo="oneconfig.minimal"/>
 		<Header align="center" size="xxl" class="max-w-[600px]">
 			Meet <b>OneConfig</b>, the library designed for <b>everyone</b>.
 		</Header>
 		<div class="flex flex-row justify-center items-center gap-2">
-			<Button href="/projects/oneconfig/download" iconLeft="download" text="Download" />
-			<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation" />
+			<Button href="/projects/oneconfig/download" iconLeft="download" text="Download"/>
+			<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
 		</div>
 	</Section>
 
@@ -33,13 +33,13 @@ import Card from '@components/base/Card.astro';
 			</div>
 			<div slot="right" class="w-3/4 md:w-auto">
 			<!-- TODO: make proper file names and alt text -->
-				<img src="/media/oneconfig/page_media_1.svg" alt="stuff" />
+			<img src="/media/oneconfig/page_media_1.svg" alt="stuff"/>
 			</div>
 		</Section>
 
 		<Section tabindex="0" colReverse={false}>
 			<div slot="left" class="w-1/2 md:w-auto">
-				<img src="/media/oneconfig/page_media_2.svg" alt="stuff" />
+				<img src="/media/oneconfig/page_media_2.svg" alt="stuff"/>
 			</div>
 
 			<div slot="right">
@@ -55,13 +55,14 @@ import Card from '@components/base/Card.astro';
 			</div>
 
 			<div slot="right" class="w-3/4 md:w-auto">
-				<img src="/media/oneconfig/page_media_3.svg" alt="stuff" />
+				<img src="/media/oneconfig/page_media_3.svg" alt="stuff"/>
 			</div>
 		</Section>
 
 		<Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="md:py-20 gap-4 pr-2">
-			<div slot="left" class='pr-2'>
-				<Code code={`public class MyConfig {
+			<div slot="left" class="pr-2">
+				<Code
+					code={`public class MyConfig {
 	@Switch(
 	    name = "Sub Switch",
 	    type = OptionType.SWITCH
@@ -74,7 +75,8 @@ import Card from '@components/base/Card.astro';
 			// Do stuff here
 		});
 	}
-}`} lang={'java'}/>
+}`}
+					lang="java"/>
 			</div>
 
 			<div slot="right" class="flex flex-col gap-2">
@@ -83,7 +85,7 @@ import Card from '@components/base/Card.astro';
 					With our simple APIs and documentation, it's easier than ever to integrate your mods with OneConfig.
 				</Paragraph>
 				<div class="flex">
-					<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation" />
+					<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
 				</div>
 			</div>
 		</Section>
@@ -95,17 +97,17 @@ import Card from '@components/base/Card.astro';
 					We take pride in having the cleanest and most intuitive UI of any mod, config library, or client out there.
 				</Paragraph>
 				<div class="flex">
-					<Button href="/projects/oneconfig/download" iconLeft="download" style="secondary" text="Download" />
+					<Button href="/projects/oneconfig/download" iconLeft="download" style="secondary" text="Download"/>
 				</div>
 			</div>
 			<div slot="right">
 				<!-- TODO: figure out non-arbitrary values -->
-				<img src="/media/oneconfig/page_media_4.png" class="h-[285px] rounded-2xl" />
+				<img src="/media/oneconfig/page_media_4.png" class="h-[285px] rounded-2xl"/>
 			</div>
 		</Section>
 
 		<Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]">
-			<img src="/media/oneconfig/page_media_5.png" class="h-[581px] rounded-2xl" />
+			<img src="/media/oneconfig/page_media_5.png" class="h-[581px] rounded-2xl"/>
 			<Header size="xl" align="center" class="w-96">A unified HUD editor</Header>
 			<Paragraph class="w-96 text-center text-gray-400">
 				Thanks to OneConfig's HUD API, you can customize any OneConfig-powered HUD to your liking, without having to worry about the hassle of finding the right command or keybind.
@@ -119,7 +121,7 @@ import Card from '@components/base/Card.astro';
 					Discover a wide range of mods integrated with OneConfig to enhance your experience.
 				</Paragraph>
 				<div class="flex">
-					<Button iconLeft="link-external" text="Discover mods" />
+					<Button iconLeft="link-external" text="Discover mods"/>
 				</div>
 			</div>
 		</Section>
@@ -148,10 +150,10 @@ import Card from '@components/base/Card.astro';
 			<div class="grid grid-rows-[repeat(8,_minmax(0,_1fr))] grid-cols-[repeat(7,_minmax(0,_1fr))]">
 				<!-- TODO: Change placeholder image -->
 				<!-- TODO: Mess around with the sizes to make it look nicer -->
-				<img src="/media/oneconfig/page_media_4.png" class="rounded-2xl col-[1_/_7] row-[1_/_8]" />
+				<img src="/media/oneconfig/page_media_4.png" class="rounded-2xl col-[1_/_7] row-[1_/_8]"/>
 				<div class="rounded-2xl col-[5_/_8] row-[6_/_9] shadow-md bg-white flex flex-col justify-items-start p-8 justify-center">
 					<Logo logo="oneconfig.logo_text" class="min-w-max"></Logo>
-					<Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit" />
+					<Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit"/>
 				</div>
 			</div>
 		</Section>
diff --git a/apps/website/vitest.config.ts b/apps/website/vitest.config.ts
index 85a3538..57b13a0 100644
--- a/apps/website/vitest.config.ts
+++ b/apps/website/vitest.config.ts
@@ -2,7 +2,6 @@
 import { getViteConfig } from 'astro/config';
 
 export default getViteConfig({
-	// @ts-expect-error astro moment
 	test: {
 		globals: true,
 		reporters: ['dot'],