prettier time

src/components/Avatar.astro

@@ -1,6 +1,6 @@
 ---
-import { Image } from "astro:assets"
+import { Image } from "astro:assets";
-import logo from "@assets/logo.png"
+import logo from "@assets/logo.png";
 ---
 
 <div class="avatar-wrapper">
@@ -30,23 +30,27 @@ import logo from "@assets/logo.png"
 
 <script>
 	const colours = {
-		"online": "var(--green)",
+		online: "var(--green)",
-		"idle": "var(--yellow)",
+		idle: "var(--yellow)",
-		"dnd": "var(--red)",
+		dnd: "var(--red)",
-		"offline": "var(--overlay0)"
+		offline: "var(--overlay0)"
 	};
-	const avatarWrapper: HTMLElement = document.querySelector(".avatar-wrapper");
+	const avatarWrapper: HTMLElement =
+		document.querySelector(".avatar-wrapper");
 
-	window.addEventListener('lanyard-update', (e: CustomEvent) => {
+	window.addEventListener("lanyard-update", (e: CustomEvent) => {
 		const presence = e.detail;
 		avatarWrapper.animate(
 			[
-				{ backgroundColor: colours[presence.discord_status] ?? colours.offline }
+				{
+					backgroundColor:
+						colours[presence.discord_status] ?? colours.offline
+				}
 			],
 			{
 				duration: 100,
 				fill: "forwards"
-			},
+			}
 		);
 	});
 </script>

src/components/Button.astro

@@ -5,8 +5,31 @@ import ExternalIcon from "@assets/svg/external.svg";
 
 <style>
 	.button-wrapper {
-		background: linear-gradient(#343343, #2E2E3E, #2E2E3E);
+		background: linear-gradient(#343343, #2e2e3e, #2e2e3e);
-		transition: 0.54s linear(0, 0.0021, 0.0081 1.26%, 0.0302 2.51%, 0.106, 0.2088 7.53%, 0.5809 15.7%, 0.7667 20.72%, 0.8391 23.23%, 0.9106 26.37%, 0.9538 28.88%, 0.9926 32.02%, 1.0134, 1.0269 37.04%, 1.0359, 1.0384 43.32%, 1.0353 47.72%, 1.0124 61.53%, 1.003 70.32%, 0.9988 81.62%, 0.9992 99.83%);
+		transition: 0.54s
+			linear(
+				0,
+				0.0021,
+				0.0081 1.26%,
+				0.0302 2.51%,
+				0.106,
+				0.2088 7.53%,
+				0.5809 15.7%,
+				0.7667 20.72%,
+				0.8391 23.23%,
+				0.9106 26.37%,
+				0.9538 28.88%,
+				0.9926 32.02%,
+				1.0134,
+				1.0269 37.04%,
+				1.0359,
+				1.0384 43.32%,
+				1.0353 47.72%,
+				1.0124 61.53%,
+				1.003 70.32%,
+				0.9988 81.62%,
+				0.9992 99.83%
+			);
 		clip-path: var(--clip-button-outer);
 		cursor: pointer;
 		user-select: none;
@@ -20,17 +43,17 @@ import ExternalIcon from "@assets/svg/external.svg";
 	}
 	button {
 		border: none;
-		background-color: #2B2B3B;
+		background-color: #2b2b3b;
 		clip-path: var(--clip-button-inner);
 		color: var(--text);
 		padding: 10px 20px;
 	}
 	.button-wrapper:has(button:hover:active) {
-		background: #2F2F41;
+		background: #2f2f41;
 		transform: scale(0.98);
 	}
 	button:hover:active {
-		background-color: #2F2F41;
+		background-color: #2f2f41;
 	}
 	.link-button {
 		padding: 15px;
@@ -61,20 +84,24 @@ import ExternalIcon from "@assets/svg/external.svg";
 		<a href={url}>
 			<div class="button-wrapper">
 				<button id={id} class="link-button">
-					{ name && <div class="link-button-heading">
+					{name && (
-						<span>
+						<div class="link-button-heading">
-							<slot name="icon" />
+							<span>
-							<b>{name}</b>
+								<slot name="icon" />
-						</span>
+								<b>{name}</b>
-						<ExternalIcon />
+							</span>
-					</div> }
+							<ExternalIcon />
+						</div>
+					)}
 					<slot />
 				</button>
 			</div>
 		</a>
 	) : (
 		<div class="button-wrapper">
-			<button id={id}><slot /></button>
+			<button id={id}>
+				<slot />
+			</button>
 		</div>
 	)
 }

src/components/Chip.astro

@@ -1,6 +1,7 @@
 ---
-const { ...attrs } = Astro.props
+const { ...attrs } = Astro.props;
 ---
+
 <a {...attrs}>
 	<slot />
 </a>

src/components/GroupBox.astro

@@ -1,12 +1,12 @@
 <style>
 	.group-box-wrapper {
-		background: linear-gradient(#343343, #2E2E3E, #2E2E3E);
+		background: linear-gradient(#343343, #2e2e3e, #2e2e3e);
-		clip-path: var(--clip-group-box-outer)
+		clip-path: var(--clip-group-box-outer);
 	}
 	.group-box {
 		padding: 15px;
 		clip-path: var(--clip-group-box-inner);
-		background-color: #2B2B3B;
+		background-color: #2b2b3b;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;

src/components/windows/code/CodeWindow.astro

@@ -14,16 +14,16 @@ import GithubIcon from "@assets/svg/github.svg";
 	customClass="code-window"
 	offset="55px"
 >
-	As mentioned in the main page, I write code. Some used by a lot, some
+	As mentioned in the main page, I write code. Some used by a lot, some not as
-	not as much. You can find it below.
+	much. You can find it below.
 	<Button name="GitHub" url="https://gh.nin0.dev/">
 		<GithubIcon slot="icon" />
-		Here, you'll find most of my external contributions. I rarely start
+		Here, you'll find most of my external contributions. I rarely start personal
-		personal projects on GitHub.
+		projects on GitHub.
 	</Button>
 	<Button name="Forgejo" url="https://git.nin0.dev/nin0">
 		<ForgejoIcon slot="icon" />
-		Some more personal/niche projects can be found on my own instance
+		Some more personal/niche projects can be found on my own instance (git.nin0.dev),
-		(git.nin0.dev), which will probably be down.
+		which will probably be down.
 	</Button>
 </Window>

src/components/windows/main/InfoStack.astro

@@ -1,6 +1,6 @@
 ---
-import Avatar from "components/Avatar.astro"
+import Avatar from "components/Avatar.astro";
-import SpotifyCard from "./SpotifyCard.astro"
+import SpotifyCard from "./SpotifyCard.astro";
 ---
 
 <>

src/components/windows/main/MainWindow.astro

@@ -13,12 +13,19 @@ import GroupBox from "@components/GroupBox.astro";
 
 	document
 		.querySelector("#show-code-window")
-		.addEventListener("click", () => WindowManager.topmost = document.getElementById("window-code-window"));
+		.addEventListener(
+			"click",
+			() =>
+				(WindowManager.topmost =
+					document.getElementById("window-code-window"))
+		);
 
 	new Lanyard(LANYARD_ID, presence =>
-		window.dispatchEvent(new CustomEvent('lanyard-update', {
+		window.dispatchEvent(
-			detail: presence
+			new CustomEvent("lanyard-update", {
-		}))
+				detail: presence
+			})
+		)
 	);
 </script>
 
@@ -30,8 +37,8 @@ import GroupBox from "@components/GroupBox.astro";
 	<GroupBox>
 		<h3>About me</h3>
 		<p>
-			I'm a Canadian self-taught software developer.
+			I'm a Canadian self-taught software developer. I also make things
-			I also make things that some people use with varying degrees of usefulness.
+			that some people use with varying degrees of usefulness.
 		</p>
 	</GroupBox>
 

src/css/catppuccin.css

@@ -2,25 +2,25 @@
 :root {
 	--rosewater: #f5e0dc;
 	--rosewater-rgb: 245, 224, 220;
-	--rosewater-hsl: 9.600, 55.556%, 91.176%;
+	--rosewater-hsl: 9.6, 55.556%, 91.176%;
 	--flamingo: #f2cdcd;
 	--flamingo-rgb: 242, 205, 205;
-	--flamingo-hsl: 0.000, 58.730%, 87.647%;
+	--flamingo-hsl: 0, 58.73%, 87.647%;
 	--pink: #f5c2e7;
 	--pink-rgb: 245, 194, 231;
 	--pink-hsl: 316.471, 71.831%, 86.078%;
 	--mauve: #cba6f7;
 	--mauve-rgb: 203, 166, 247;
-	--mauve-hsl: 267.407, 83.505%, 80.980%;
+	--mauve-hsl: 267.407, 83.505%, 80.98%;
 	--red: #f38ba8;
 	--red-rgb: 243, 139, 168;
-	--red-hsl: 343.269, 81.250%, 74.902%;
+	--red-hsl: 343.269, 81.25%, 74.902%;
 	--maroon: #eba0ac;
 	--maroon-rgb: 235, 160, 172;
-	--maroon-hsl: 350.400, 65.217%, 77.451%;
+	--maroon-hsl: 350.4, 65.217%, 77.451%;
 	--peach: #fab387;
 	--peach-rgb: 250, 179, 135;
-	--peach-hsl: 22.957, 92.000%, 75.490%;
+	--peach-hsl: 22.957, 92%, 75.49%;
 	--yellow: #f9e2af;
 	--yellow-rgb: 249, 226, 175;
 	--yellow-hsl: 41.351, 86.047%, 83.137%;
@@ -29,16 +29,16 @@
 	--green-hsl: 115.455, 54.098%, 76.078%;
 	--teal: #94e2d5;
 	--teal-rgb: 148, 226, 213;
-	--teal-hsl: 170.000, 57.353%, 73.333%;
+	--teal-hsl: 170, 57.353%, 73.333%;
 	--sky: #89dceb;
 	--sky-rgb: 137, 220, 235;
 	--sky-hsl: 189.184, 71.014%, 72.941%;
 	--sapphire: #74c7ec;
 	--sapphire-rgb: 116, 199, 236;
-	--sapphire-hsl: 198.500, 75.949%, 69.020%;
+	--sapphire-hsl: 198.5, 75.949%, 69.02%;
 	--blue: #89b4fa;
 	--blue-rgb: 137, 180, 250;
-	--blue-hsl: 217.168, 91.870%, 75.882%;
+	--blue-hsl: 217.168, 91.87%, 75.882%;
 	--lavender: #b4befe;
 	--lavender-rgb: 180, 190, 254;
 	--lavender-hsl: 231.892, 97.368%, 85.098%;
@@ -47,7 +47,7 @@
 	--text-hsl: 226.154, 63.934%, 88.039%;
 	--subtext1: #bac2de;
 	--subtext1-rgb: 186, 194, 222;
-	--subtext1-hsl: 226.667, 35.294%, 80.000%;
+	--subtext1-hsl: 226.667, 35.294%, 80%;
 	--subtext0: #a6adc8;
 	--subtext0-rgb: 166, 173, 200;
 	--subtext0-hsl: 227.647, 23.611%, 71.765%;
@@ -56,13 +56,13 @@
 	--overlay2-hsl: 228.387, 16.757%, 63.725%;
 	--overlay1: #7f849c;
 	--overlay1-rgb: 127, 132, 156;
-	--overlay1-hsl: 229.655, 12.775%, 55.490%;
+	--overlay1-hsl: 229.655, 12.775%, 55.49%;
 	--overlay0: #6c7086;
 	--overlay0-rgb: 108, 112, 134;
 	--overlay0-hsl: 230.769, 10.744%, 47.451%;
 	--surface2: #585b70;
 	--surface2-rgb: 88, 91, 112;
-	--surface2-hsl: 232.500, 12.000%, 39.216%;
+	--surface2-hsl: 232.5, 12%, 39.216%;
 	--surface1: #45475a;
 	--surface1-rgb: 69 71 90;
 	--surface1-hsl: 234.286, 13.208%, 31.176%;
@@ -71,11 +71,11 @@
 	--surface0-hsl: 236.842, 16.239%, 22.941%;
 	--base: #1e1e2e;
 	--base-rgb: 30, 30, 46;
-	--base-hsl: 240.000, 21.053%, 14.902%;
+	--base-hsl: 240, 21.053%, 14.902%;
 	--mantle: #181825;
 	--mantle-rgb: 24, 24, 37;
-	--mantle-hsl: 240.000, 21.311%, 11.961%;
+	--mantle-hsl: 240, 21.311%, 11.961%;
 	--crust: #11111b;
 	--crust-rgb: 17, 17, 27;
-	--crust-hsl: 240.000, 22.727%, 8.627%;
+	--crust-hsl: 240, 22.727%, 8.627%;
 }

src/layouts/BaseLayout.astro

@@ -16,7 +16,9 @@ const { tabTitle } = Astro.props;
 		<script>
 			import { WindowManager } from "@models/WindowManager.ts";
 			document.addEventListener("DOMContentLoaded", () => {
-				document.querySelectorAll(".window").forEach(window => WindowManager.observe(window));
+				document
+					.querySelectorAll(".window")
+					.forEach(window => WindowManager.observe(window));
 			});
 		</script>
 	</body>

src/types/lastfm.ts

@@ -22,14 +22,13 @@ export interface FMTrack {
 	album: string;
 	url: string;
 	albumArt: string;
-
 }
 
 export interface FMResponse {
 	recenttracks: {
 		track: FMRawTrack[];
 	};
-};
+}
 
 export function transformRawTrack(raw: FMRawTrack): FMTrack {
 	return {

src/utils/mergeStyles.ts

@@ -1,5 +1,5 @@
 export function mergeStyles(source, target: CSSStyleDeclaration) {
 	for (const prop in source) {
-		target.setProperty(prop, source[prop])
+		target.setProperty(prop, source[prop]);
 	}
 }