feat(lint): switch to eslint config and formatting (use vscode for autoformat)

29 files changed, 450 insertions, 4290 deletions

diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
index 9a50fb5..3087975 100644
--- a/apps/storybook/.storybook/main.ts
+++ b/apps/storybook/.storybook/main.ts
@@ -5,30 +5,30 @@ const config: StorybookConfig = {
 		{
 			directory: '../../../packages/ui/src/**',
 			titlePrefix: 'UI',
-			files: '*.stories.*'
+			files: '*.stories.*',
 		},
 		{
 			directory: '../../../interface/app/**',
 			titlePrefix: 'Interface',
-			files: '*.stories.*'
-		}
+			files: '*.stories.*',
+		},
 	],
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',
-		'@storybook/addon-styling'
+		'@storybook/addon-styling',
 	],
 	framework: {
 		name: '@storybook/react-vite',
-		options: {}
+		options: {},
 	},
 	docs: {
-		autodocs: 'tag'
+		autodocs: 'tag',
 	},
 	core: {
-		disableTelemetry: true
-	}
+		disableTelemetry: true,
+	},
 };
 
 export default config;
diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
index 4663aa6..794f8fa 100644
--- a/apps/storybook/.storybook/preview.ts
+++ b/apps/storybook/.storybook/preview.ts
@@ -7,10 +7,10 @@ const preview: Preview = {
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,
-				date: /Date$/
-			}
-		}
-	}
+				date: /Date$/,
+			},
+		},
+	},
 };
 
 export default preview;
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 5fb43f0..e0009b1 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -6,31 +6,31 @@
 		"build-storybook": "storybook build --no-open"
 	},
 	"dependencies": {
-		"@storybook/addon-essentials": "^7.5.1",
-		"@storybook/addon-interactions": "^7.5.1",
-		"@storybook/addon-links": "^7.5.1",
+		"@storybook/addon-essentials": "^7.5.3",
+		"@storybook/addon-interactions": "^7.5.3",
+		"@storybook/addon-links": "^7.5.3",
 		"@storybook/addon-styling": "^1.3.7",
-		"@storybook/blocks": "^7.5.1",
-		"@storybook/react": "^7.5.1",
-		"@storybook/react-vite": "^7.5.1",
+		"@storybook/blocks": "^7.5.3",
+		"@storybook/react": "^7.5.3",
+		"@storybook/react-vite": "^7.5.3",
 		"@storybook/testing-library": "^0.2.2",
 		"postcss-pseudo-companion-classes": "^0.1.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sass": "^1.69.4"
+		"sass": "^1.69.5"
 	},
 	"devDependencies": {
 		"@polyfrost/config": "workspace:*",
 		"@polyfrost/ui": "workspace:*",
-		"@types/react": "^18.2.31",
-		"@types/react-dom": "^18.2.14",
-		"@vitejs/plugin-react": "^4.1.0",
+		"@types/react": "^18.2.38",
+		"@types/react-dom": "^18.2.17",
+		"@vitejs/plugin-react": "^4.2.0",
 		"autoprefixer": "^10.4.16",
 		"postcss": "^8.4.31",
 		"prop-types": "^15.8.1",
-		"storybook": "^7.5.1",
-		"tailwindcss": "^3.3.3",
-		"typescript": "^5.2.2",
-		"vite": "^4.5.0"
+		"storybook": "^7.5.3",
+		"tailwindcss": "^3.3.5",
+		"typescript": "^5.3.2",
+		"vite": "^5.0.2"
 	}
 }
diff --git a/apps/storybook/postcss.config.js b/apps/storybook/postcss.config.js
index de27714..19ea98c 100644
--- a/apps/storybook/postcss.config.js
+++ b/apps/storybook/postcss.config.js
@@ -4,7 +4,7 @@ module.exports = {
 		'autoprefixer': {},
 		'postcss-pseudo-companion-classes': {
 			prefix: 'sb-pseudo--',
-			restrictTo: [':hover', ':focus']
-		}
-	}
+			restrictTo: [':hover', ':focus'],
+		},
+	},
 };
diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json
index da3cfcc..01795c6 100644
--- a/apps/storybook/tsconfig.json
+++ b/apps/storybook/tsconfig.json
@@ -1,19 +1,19 @@
 {
 	"compilerOptions": {
 		"target": "ESNext",
-		"module": "ESNext",
-		"moduleResolution": "Node",
+		"jsx": "react-jsx",
 		"lib": ["DOM", "DOM.Iterable", "ESNext"],
 		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"resolveJsonModule": true,
 		"allowJs": true,
-		"skipLibCheck": true,
-		"esModuleInterop": false,
-		"allowSyntheticDefaultImports": true,
 		"strict": true,
+		"noEmit": true,
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": false,
 		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"noEmit": true,
-		"jsx": "react-jsx"
+		"skipLibCheck": true
 	}
 }
diff --git a/apps/storybook/vite.config.ts b/apps/storybook/vite.config.ts
new file mode 100644
index 0000000..b6ead16
--- /dev/null
+++ b/apps/storybook/vite.config.ts
@@ -0,0 +1,4 @@
+import baseConfig from '../../packages/config/vite';
+
+// https://vitejs.dev/config/
+export default baseConfig;
diff --git a/apps/website/.eslintrc.js b/apps/website/.eslintrc.js
deleted file mode 100644
index f80eaa9..0000000
--- a/apps/website/.eslintrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('eslint').ESLint.ConfigData} */
-module.exports = {
-	extends: [require.resolve('@polyfrost/config/eslint/web.js')],
-	parserOptions: {
-		tsconfigRootDir: __dirname,
-		project: './tsconfig.json'
-	}
-};
diff --git a/apps/website/astro.config.ts b/apps/website/astro.config.ts
index c7c7928..2e8c40c 100644
--- a/apps/website/astro.config.ts
+++ b/apps/website/astro.config.ts
@@ -1,6 +1,5 @@
 import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';
-// @ts-ignore - Tailwind doesn't have types for this yet
 import postcssNesting from 'tailwindcss/nesting';
 
 // https://astro.build/config
@@ -9,8 +8,8 @@ export default defineConfig({
 	vite: {
 		css: {
 			postcss: {
-				plugins: [postcssNesting]
-			}
-		}
-	}
+				plugins: [postcssNesting],
+			},
+		},
+	},
 });
diff --git a/apps/website/config.ts b/apps/website/config.ts
index b483705..e74d7aa 100644
--- a/apps/website/config.ts
+++ b/apps/website/config.ts
@@ -1,4 +1,4 @@
-import type { Config, NavbarDropdown, NavbarElement, Project } from '@webtypes/Config';
+import type { Config, NavbarDropdown, Project } from '@webtypes/Config';
 
 export const configConst = {
 	projects: getProjects(),
@@ -7,24 +7,24 @@ export const configConst = {
 		left: [
 			{
 				logo: ['polyfrost.full', -1],
-				path: '/'
-			}
+				path: '/',
+			},
 		],
 		right: [
 			{
 				text: 'Home',
-				path: '/'
+				path: '/',
 			},
 			{
 				text: 'Projects',
 				dropdown: getProjects().map((project) => {
 					(project as any).path = `/projects/${project.name.toLowerCase()}`;
 					return project;
-				}) as unknown as NavbarDropdown[]
-			}
-		]
-	}
-} as const satisfies Config;
+				}) as unknown as NavbarDropdown[],
+			},
+		],
+	},
+} satisfies Config;
 
 function getProjects(): Project[] {
 	return [
@@ -32,14 +32,14 @@ function getProjects(): Project[] {
 			name: 'OneConfig',
 			description: 'The next-generation config library for Forge and Fabric',
 			logo: 'oneconfig.minimal',
-			tag: 'BETA'
+			tag: 'BETA',
 		},
 		{
 			name: 'OneLauncher',
 			description: 'The next-generation launcher for Forge and Fabric',
 			logo: 'polyfrost.minimal',
-			tag: 'SOON'
-		}
+			tag: 'SOON',
+		},
 	];
 }
 
diff --git a/apps/website/package.json b/apps/website/package.json
index 0cd0c4e..fe9b603 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -10,13 +10,13 @@
 	},
 	"dependencies": {
 		"@astrojs/tailwind": "^5.0.2",
-		"astro": "^3.3.3",
-		"tailwindcss": "^3.3.3"
+		"astro": "^3.6.0",
+		"tailwindcss": "^3.3.5"
 	},
 	"devDependencies": {
 		"@polyfrost/config": "../../packages/config",
-		"@types/node": "~18.17.19",
-		"node-html-parser": "^6.1.10",
-		"typescript": "^5.2.2"
+		"@types/node": "~20.10.0",
+		"node-html-parser": "^6.1.11",
+		"typescript": "^5.3.2"
 	}
 }
diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
index 0a4dc9f..438bafd 100644
--- a/apps/website/src/components/base/Button.astro
+++ b/apps/website/src/components/base/Button.astro
@@ -1,27 +1,27 @@
 ---
-import type { Icons } from "@components/icons/Icon.astro";
-import Icon from "@components/icons/Icon.astro";
-import type { HTMLAttributes } from "astro/types";
+import type { Icons } from '@components/icons/Icon.astro';
+import Icon from '@components/icons/Icon.astro';
+import type { HTMLAttributes } from 'astro/types';
 
 const styles = {
 	// TODO: adjust active / disabled colors
-	primary: "bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4",
-	secondary: "bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200",
-}
+	primary: 'bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4',
+	secondary: 'bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200',
+};
 
 const sizes = {
-	sm: "px-4 py-2 text-sm",
-	md: "px-5 py-3 text-md",
-	lg: "px-6 py-3 text-lg rounded-2xl"
-}
+	sm: 'px-4 py-2 text-sm',
+	md: 'px-5 py-3 text-md',
+	lg: 'px-6 py-3 text-lg rounded-2xl',
+};
 
 const iconSize = {
 	sm: 15,
 	md: 18,
-	lg: 24
-}
+	lg: 24,
+};
 
-interface Props extends HTMLAttributes<"button"> {
+interface Props extends HTMLAttributes<'button'> {
 	style?: keyof typeof styles
 	size?: keyof typeof sizes
 	text?: string
@@ -31,28 +31,28 @@ interface Props extends HTMLAttributes<"button"> {
 }
 
 const {
-	style = "primary",
-	size = "md",
-    text = "",
-	iconLeft = "",
-	iconRight = "",
+	style = 'primary',
+	size = 'md',
+	text = '',
+	iconLeft = '',
+	iconRight = '',
 	...rest
 } = Astro.props;
 
 const className = [
-	"flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4",
-	"rounded-xl font-medium",
+	'flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4',
+	'rounded-xl font-medium',
 	styles[style],
 	sizes[size],
-	"transition-colors",
-	rest.class
-].join(" ");
+	'transition-colors',
+	rest.class,
+].join(' ');
 
-const Element = rest.href ? "a" : "button" as any;
+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 ? text : <slot />}
+	{text || <slot />}
 	{iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>}
 </Element>
diff --git a/apps/website/src/components/base/CodeBlock.astro b/apps/website/src/components/base/CodeBlock.astro
index ceeecc0..fd2cdd6 100644
--- a/apps/website/src/components/base/CodeBlock.astro
+++ b/apps/website/src/components/base/CodeBlock.astro
@@ -19,45 +19,3 @@
 	<code></code>
 	<code><cd>&#125;</cd></code>
 </pre>
-
-<style>
-	/* thanks stackoverflow! https://stackoverflow.com/a/41309213 */
-	pre {
-		white-space: pre-wrap;
-		padding: 10px;
-		color: #546E7A;
-	}
-	pre::before {
-		counter-reset: listing;
-	}
-	pre code {
-		counter-increment: listing;
-		text-align: left;
-		float: left;
-		clear: left;
-		font-family: 'Roboto Mono', monospace !important;
-		font-size: 12px;
-		height: 1.5em;
-	}
-	pre code::before {
-		content: counter(listing) " ";
-		display: inline-block;
-		float: left;
-		height: 3em;
-		width: 2em;
-		padding: 0;
-		margin-left: auto;
-		margin-right: 10px;
-		text-align: right;
-		font-family: 'Roboto Mono', monospace !important;
-		font-size: 12px;
-	}
-
-	ca { color: #F07178; font-family: inherit; }
-	cb { color: #C792EA; font-family: inherit; }
-	cc { color: #82AAFF; font-family: inherit; }
-	cd { color: #EFF; font-family: inherit; }
-	ce { color: #89DDFF; font-family: inherit; }
-	cf { color: #C3E88D; font-family: inherit; }
-	cg { color: #F78C6C; font-family: inherit; }
-</style>
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
index b24db5f..9bc1c61 100644
--- a/apps/website/src/components/base/Footer.astro
+++ b/apps/website/src/components/base/Footer.astro
@@ -2,6 +2,5 @@
 
 ---
 
-<footer class="flex min-h-[400px] bg-blue-100 mt-4">
-
-</footer>
+	<footer class="flex min-h-[400px] bg-blue-100 mt-4">
+	</footer>
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index d35ad9f..70dc799 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -1,40 +1,40 @@
 ---
-import type { HTMLAttributes } from "astro/types"
+import type { HTMLAttributes } from 'astro/types';
 
 const sizes = {
-	"xxl": "h1",
-    "xl": "h2",
-    "lg": "h2",
-    "md": "h3",
-    "sm": "h4",
-    "xs": "h5",
-    "xxs": "h6"
+	xxl: 'h1',
+	xl: 'h2',
+	lg: 'h2',
+	md: 'h3',
+	sm: 'h4',
+	xs: 'h5',
+	xxs: 'h6',
 };
 
-type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type Headers = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 interface Props extends HTMLAttributes<Headers> {
-    size?: keyof typeof sizes;
-	align?: "left" | "center" | "right" | "inherit";
+	size?: keyof typeof sizes
+	align?: 'left' | 'center' | 'right' | 'inherit'
 }
 
 const {
-	size = "lg",
-	align = "inherit",
+	size = 'lg',
+	align = 'inherit',
 	...attr
 } = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
 
-const className = (align == "inherit" ? "" : `text-${align} `)
-	+ (size == "xxl" ? " page-header" : "")
-	+ (attr.class ? ` ${attr.class}` : "");
+const className = (align == 'inherit' ? '' : `text-${align} `)
+	+ (size == 'xxl' ? ' page-header' : '')
+	+ (attr.class ? ` ${attr.class}` : '');
 ---
 
-<Element {...attr} class={className}>
-    <slot />
-</Element>
+	<Element {...attr} class={className}>
+		<slot />
+	</Element>
 
-<style>
+		<style>
     h1 {
 		font-size: theme("fontSize.header-lg");
 		&.page-header {
diff --git a/apps/website/src/components/base/Navbar.astro b/apps/website/src/components/base/Navbar.astro
index a3a82fe..8fa98df 100644
--- a/apps/website/src/components/base/Navbar.astro
+++ b/apps/website/src/components/base/Navbar.astro
@@ -1,21 +1,21 @@
 ---
-import config from "config";
-import type { Config } from "@webtypes/Config";
-import NavbarElement from "./NavbarElement.astro";
+import config from 'config';
+import type { Config } from '@webtypes/Config';
+import NavbarElement from './NavbarElement.astro';
 
 ---
 
-<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
-    <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} />
-            ))}
-        </ul>
-        <ul class="flex flex-row justify-end gap-4">
-            {(config as Config).navbar.right.map((element, index) => (
-                <NavbarElement {element} {index} />
-            ))}
-        </ul>
-    </nav>
-</div>
+	<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
+		<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} />
+				))}
+			</ul>
+			<ul class="flex flex-row justify-end gap-4">
+				{(config as Config).navbar.right.map((element, index) => (
+					<NavbarElement {element} {index} />
+				))}
+			</ul>
+		</nav>
+	</div>
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
index b0f1282..17c3662 100644
--- a/apps/website/src/components/base/NavbarElement.astro
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -1,45 +1,46 @@
 ---
-import ChevronDown from "@components/icons/ChevronDown.svg";
-import type { LogoType, NavbarElement } from "@webtypes/Config";
-import ScreenOverlay from "./ScreenOverlay.astro";
-import Header from "./Header.astro";
-import Tag from "./Tag.astro";
-import Logo from "@components/logos/Logo.astro";
-import ScrollbarOverlayContainer from "./ScrollbarOverlayContainer.astro";
-import Icon from "@components/icons/Icon.astro";
+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 Header from './Header.astro';
+import Tag from './Tag.astro';
+import ScrollbarOverlayContainer from './ScrollbarOverlayContainer.astro';
 
 interface Props {
-    element: NavbarElement;
-    index: number;
+	element: NavbarElement
+	index: number
 }
 
 const {
-    element,
-    index
+	element,
+	index,
 } = Astro.props;
 ---
 
-<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
-    <label for={`navbar-input-${index}`} class="group">
+	<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
+		<label for={`navbar-input-${index}`} class="group">
 
-        {element.path ? (
-            <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" />}
-            </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" />}
-            </p>
-        )}
+			{element.path
+				? (
+					<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" />}
+					</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" />}
+					</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">
-            <div class={`
+			{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">
+					<div class={`
 				transition-opacity
                 fixed md:absolute right-0 max-sm:bottom-0
                 max-sm:overflow-hidden
@@ -51,8 +52,11 @@ const {
                 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={`
+            `}
+					>
+						<ScrollbarOverlayContainer
+							tabindex="-1"
+							class={`
                     bg-gray-50
                     rounded-t-lg md:rounded-lg
                     transition-transform
@@ -60,30 +64,31 @@ const {
                     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>
+                `}
+						>
+							<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="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>
-            </div>
-        )}
-    </label>
-</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>
+					</div>
+			)}
+		</label>
+	</li>
diff --git a/apps/website/src/components/base/Paragraph.astro b/apps/website/src/components/base/Paragraph.astro
index 08fbbdd..832b296 100644
--- a/apps/website/src/components/base/Paragraph.astro
+++ b/apps/website/src/components/base/Paragraph.astro
@@ -1,31 +1,31 @@
 ---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
 
 const sizes = {
-	xs: "text-xs",
-	sm: "text-sm",
-	md: "text-md",
-	lg: "text-lg",
-	xl: "text-xl"
-}
+	xs: 'text-xs',
+	sm: 'text-sm',
+	md: 'text-md',
+	lg: 'text-lg',
+	xl: 'text-xl',
+};
 
-interface Props extends HTMLAttributes<"p"> {
-	text?: string,
+interface Props extends HTMLAttributes<'p'> {
+	text?: string
 	size?: keyof typeof sizes
 }
 
 const {
-	text = "",
-	size = "md",
+	text = '',
+	size = 'md',
 	...props
 } = Astro.props;
 
 const className = [
 	sizes[size],
-	props.class
-].join(" ");
+	props.class,
+].join(' ');
 ---
 
-<p class={className} {...props}>
-	{text ? text : <slot />}
-</p>
+	<p class={className} {...props}>
+		{text || <slot />}
+	</p>
diff --git a/apps/website/src/components/base/ScreenOverlay.astro b/apps/website/src/components/base/ScreenOverlay.astro
index 7be8bc5..1b97152 100644
--- a/apps/website/src/components/base/ScreenOverlay.astro
+++ b/apps/website/src/components/base/ScreenOverlay.astro
@@ -1,16 +1,16 @@
 ---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props extends HTMLAttributes<"div"> {
-    zIndex?: number;
+interface Props extends HTMLAttributes<'div'> {
+	zIndex?: number
 }
 
 const {
-    zIndex = 0,
-    ...rest
+	zIndex = 0,
+	...rest
 } = Astro.props;
 ---
 
-<div class="pointer-events-none absolute left-0 top-0">
-    <div class={`transition-opacity fixed opacity-0 w-screen h-screen z-[${zIndex}] bg-black/30 ${rest.class}`} {...rest}></div>
-</div>
\ No newline at end of file
+	<div class="pointer-events-none absolute left-0 top-0">
+		<div class={`transition-opacity fixed opacity-0 w-screen h-screen z-[${zIndex}] bg-black/30 ${rest.class}`} {...rest}></div>
+	</div>
diff --git a/apps/website/src/components/base/ScrollbarOverlayContainer.astro b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
index d8d315d..84bedf5 100644
--- a/apps/website/src/components/base/ScrollbarOverlayContainer.astro
+++ b/apps/website/src/components/base/Scrollb