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

23 files changed, 409 insertions, 4253 deletions

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/ScrollbarOverlayContainer.astro
@@ -1,21 +1,21 @@
 ---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props extends HTMLAttributes<"div"> {
+interface Props extends HTMLAttributes<'div'> {
 
 }
 
 const { ...attr } = Astro.props;
 ---
 
-<div {...attr}>
-    <slot></slot>
-</div>
+	<div {...attr}>
+		<slot></slot>
+	</div>
 
-<style>
+		<style>
 @media (hover: hover) {
     div {
-        
+
     }
 
     div::-webkit-scrollbar {
@@ -48,4 +48,4 @@ const { ...attr } = Astro.props;
         background-color: #00000040;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index bb7a062..51d9fa1 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -1,40 +1,42 @@
 ---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props extends HTMLAttributes<"section"> {
-	maxWidth?: "none" | String;
-	colReverse?: boolean;
-	wrapperClass?: string;
-	wFull?: boolean;
+interface Props extends HTMLAttributes<'section'> {
+	maxWidth?: 'none' | String
+	colReverse?: boolean
+	wrapperClass?: string
+	wFull?: boolean
 }
 
 const {
-	maxWidth = "1080px",
+	maxWidth = '1080px',
 	colReverse = true,
-	wrapperClass = "",
+	wrapperClass = '',
 	wFull = true,
 	...props
 } = Astro.props;
 
-const twoColumn = Astro.slots.has("left") || Astro.slots.has("right");
+const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');
 
-const className = `max-w-[${maxWidth}] ${wFull ? "w-full" : ""} 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}` : "");
+const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : ''} 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}` : ''}`;
 ---
 
-<section class={`w-full flex justify-center ${wrapperClass ?? ""}`}>
-	<div class={className} {...props}>
-		{twoColumn ? (
-			<div class="flex flex-col items-start text-left relative">
-				<slot name="left"></slot>
-			</div>
+	<section class={`w-full flex justify-center ${wrapperClass ?? ''}`}>
+		<div class={className} {...props}>
+			{twoColumn
+				? (
+					<div class="flex flex-col items-start text-left relative">
+						<slot name="left"></slot>
+					</div>
 
-			<div class="flex flex-col items-start text-left relative">
-				<slot name="right"></slot>
-			</div>
-		) : (
-			<slot></slot>
-		)}
-	</div>
-</section>
+						<div class="flex flex-col items-start text-left relative">
+							<slot name="right"></slot>
+						</div>
+					)
+				: (
+					<slot></slot>
+					)}
+		</div>
+	</section>
diff --git a/apps/website/src/components/base/Tag.astro b/apps/website/src/components/base/Tag.astro
index e6fd34f..b903344 100644
--- a/apps/website/src/components/base/Tag.astro
+++ b/apps/website/src/components/base/Tag.astro
@@ -1,14 +1,13 @@
 ---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props extends HTMLAttributes<"span"> {}
+interface Props extends HTMLAttributes<'span'> {}
 
 const { ...attr } = Astro.props;
 ---
 
-<div class="transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
-    <span {...attr}>
-        <slot></slot>
-    </span>
-</div>
-
+	<div class="transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
+		<span {...attr}>
+			<slot></slot>
+		</span>
+	</div>
diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro
index bf2b362..b36d412 100644
--- a/apps/website/src/components/icons/Icon.astro
+++ b/apps/website/src/components/icons/Icon.astro
@@ -1,28 +1,26 @@
 ---
-export type Icons = "chevron-down" | "download" | "book-open";
-
 import { parse } from 'node-html-parser';
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
+
+export type Icons = 'chevron-down' | 'download' | 'book-open';
 
-interface Props extends HTMLAttributes<"svg"> {
-  	icon: Icons;
-	size?: number | [number, number];
+interface Props extends HTMLAttributes<'svg'> {
+  	icon: Icons
+	size?: number | [number, number]
 }
 
 async function getSVG(name: string) {
 	const file = await import(`./impl/${name}.svg?raw` /* @vite-ignore */);
 
-	if (!file) {
+	if (!file)
 		throw new Error(`${name} not found`);
-	}
 
 	const content = parse(file.default);
 
 	const svg = content.querySelector('svg');
 
-	if (!svg) {
+	if (!svg)
 		throw new Error(`${name} is not a valid SVG`);
-	}
 
 	const { attributes, innerHTML } = svg;
 
@@ -39,13 +37,12 @@ const {
 } = Astro.props as Props;
 
 let svgAttributes = {};
-let html = "";
+let html = '';
 
 try {
 	const sizeAttributes = () => {
-		if (!size) {
+		if (!size)
 			return {};
-		}
 
 		if (Array.isArray(size)) {
 			return {
@@ -58,7 +55,7 @@ try {
 			width: size,
 			height: size,
 		};
-	}
+	};
 
 	const { attributes: baseAttributes, innerHTML } = await getSVG(icon);
 	svgAttributes = {
@@ -69,9 +66,10 @@ try {
 
 	const colorRegex = /(fill|stroke)=\"([^"]*)\"/g;
 	html = innerHTML.replaceAll(colorRegex, '$1="currentColor"');
-} catch (err) {
-
+}
+catch (err) {
+	// ignored
 }
 ---