lint

src/front/App.tsx

@@ -2,9 +2,8 @@ import "mdui/components/layout";
 import "mdui/components/layout-main";
 
 import NavigationBar from "./components/NavigationBar";
-import TopAppBar from "./components/TopAppBar";
-
 import About from "./components/pages/About";
+import TopAppBar from "./components/TopAppBar";
 
 export default () => {
 	return (

src/front/components/Hyperate/index.tsx

@@ -22,7 +22,9 @@ export default () => {
 	});
 	return (
 		<div>
-			<p class="heartbeat" ref={paragraph}>❤️ 0 BPM</p>
+			<p class="heartbeat" ref={paragraph}>
+				❤️ 0 BPM
+			</p>
 		</div>
 	);
 };

src/front/components/Lanyard/index.tsx

@@ -1,6 +1,6 @@
 import { highlightElement } from "@speed-highlight/core";
-import { artist } from "../../utilities/artist";
 import { createRef } from "tsx-dom";
+import { artist } from "../../utilities/artist";
 import socket from "../../utilities/socket";
 
 const colorMap = {
@@ -39,7 +39,6 @@ export default () => {
 			document.body.style.removeProperty("--lanyard-display");
 		}
 
-
 		if (container.current) {
 			container.current.textContent = JSON.stringify(
 				{

src/front/components/pages/About/index.tsx

@@ -1,18 +1,20 @@
-import 'mdui/components/card';
+import "mdui/components/card";
-import 'mdui/components/avatar';
+import "mdui/components/avatar";
 
-import 'mdui/components/segmented-button-group';
+import "mdui/components/segmented-button-group";
-import 'mdui/components/segmented-button';
+import "mdui/components/segmented-button";
 
-import { getColorFromImage } from 'mdui/functions/getColorFromImage';
+import { getColorFromImage } from "mdui/functions/getColorFromImage";
-import { artist } from '../../../utilities/artist';
+import { artist } from "../../../utilities/artist";
-import Lanyard from '../../Lanyard';
+import Hyperate from "../../Hyperate";
-import Hyperate from '../../Hyperate';
+import Lanyard from "../../Lanyard";
 
 const Abyssinian = new Image();
 Abyssinian.src = "/public/Abyssinian/default.png";
 Abyssinian.onload = async () => {
-    const profilePicture = document.getElementById("profilePicture") as HTMLElement;
+	const profilePicture = document.getElementById(
+		"profilePicture",
+	) as HTMLElement;
 
 	artist(await getColorFromImage(Abyssinian), profilePicture);
 
@@ -22,14 +24,18 @@ Abyssinian.onload = async () => {
 
 export default () => {
 	return (
-        <div style={{
+		<div
+			style={{
 				display: "flex",
 				justifyContent: "center",
 				alignItems: "center",
 				flexDirection: "column",
 				height: "100%",
-        }}>
+			}}
-            <mdui-card variant="filled" style={{
+		>
+			<mdui-card
+				variant="filled"
+				style={{
 					width: "90%",
 					padding: ".5rem",
 					// center the contents
@@ -39,16 +45,23 @@ export default () => {
 					flexDirection: "column",
 
 					textAlign: "center",
-            }}>
+				}}
-                <mdui-avatar style={{
+			>
+				<mdui-avatar
+					style={{
 						width: "5rem",
 						height: "inherit",
 						border: "2px solid rgb(var(--status-color))",
-                }} id="profilePicture">S</mdui-avatar>
+					}}
+					id="profilePicture"
+				>
+					S
+				</mdui-avatar>
 				<h1>Seth</h1>
 				{/* make important text bold */}
 				<p>
-                    A <strong>Dedicated</strong> Backend Developer, with many <strong>passions</strong>.
+					A <strong>Dedicated</strong> Backend Developer, with many{" "}
+					<strong>passions</strong>.
 					<br />
 					<br />
 					<mdui-segmented-button-group full-width>
@@ -59,11 +72,15 @@ export default () => {
 				</p>
 			</mdui-card>
 
-            <br style={{
+			<br
+				style={{
 					display: "var(--lanyard-display)",
-            }} />
+				}}
+			/>
 
-            <mdui-card variant="filled" style={{
+			<mdui-card
+				variant="filled"
+				style={{
 					width: "90%",
 					padding: ".5rem",
 					// center the contents
@@ -73,15 +90,20 @@ export default () => {
 					flexDirection: "column",
 
 					//textAlign: "center",
-            }}>
+				}}
+			>
 				<Lanyard />
 			</mdui-card>
 
-            <br style={{
+			<br
+				style={{
 					display: "var(--hyperate-display)",
-            }} />
+				}}
+			/>
 
-            <mdui-card variant="filled" style={{
+			<mdui-card
+				variant="filled"
+				style={{
 					width: "90%",
 					padding: ".5rem",
 					// center the contents
@@ -91,7 +113,8 @@ export default () => {
 					flexDirection: "column",
 
 					//textAlign: "center",
-            }}>
+				}}
+			>
 				<Hyperate />
 			</mdui-card>
 		</div>

src/front/utilities/artist/index.ts

@@ -9,5 +9,10 @@ export const artist = (color?: string, element?: HTMLElement) => {
 		setColorScheme("#FFF");
 	}
 
-    document.body.style.setProperty("--status-color", getComputedStyle(document.documentElement).getPropertyValue("--mdui-color-primary"));
+	document.body.style.setProperty(
+		"--status-color",
+		getComputedStyle(document.documentElement).getPropertyValue(
+			"--mdui-color-primary",
+		),
+	);
 };

src/front/utilities/clicker/index.ts

@@ -16,7 +16,7 @@ document.onclick = (event: MouseEvent) => {
 
 	if (!isWhitelisted) return;
 
-    ("vibrate" in navigator && navigator.vibrate(1));
+	"vibrate" in navigator && navigator.vibrate(1);
 	effectTick.currentTime = 0;
 	effectTick.play();
 };