auto-lint

src/components/app.tsx

@@ -1,7 +1,7 @@
-import Navbar from './navbar';
+import Container from "./container";
-import Container from './container';
+import Navbar from "./navbar";
 
-import './app.css';
+import "./app.css";
 
 export default () => {
 	return (
@@ -9,5 +9,5 @@ export default () => {
 			<Navbar />
 			<Container />
 		</>
-  )
+	);
-}
+};

src/components/container/index.tsx

@@ -1,34 +1,41 @@
-import { useState } from 'preact/hooks';
+import { useState } from "preact/hooks";
 
-import Heart from '../heart';
+import Heart from "../heart";
 
 const statusMap = {
 	online: "border-success-subtle",
 	idle: "border-warning-subtle",
 	dnd: "border-danger-subtle",
 	offline: "border-light-subtle",
-}
+};
 
 export default () => {
-    const [status, setStatus] = useState<keyof typeof statusMap>('offline');
+	const [status, setStatus] = useState<keyof typeof statusMap>("offline");
 
 	fetch("https://lanyard.creations.works/v1/users/1273447359417942128")
-        .then(req => req.json())
+		.then((req) => req.json())
 		.then((res) => {
 			if (res.data.discord_status) {
 				setStatus(res.data.discord_status);
 			} else {
-                setStatus('offline');
+				setStatus("offline");
 			}
-        })
+		});
 
 	return (
 		<>
 			<div class="container bg-body-tertiary shadow text-center position-absolute top-50 start-50 translate-middle mx-auto py-4">
-                <img src="favicon.svg" class={`img-thumbnail rounded-circle border border-4  ${statusMap[status]}`} alt="..." width="100px" height="100px" />
+				<img
+					src="favicon.svg"
+					class={`img-thumbnail rounded-circle border border-4  ${statusMap[status]}`}
+					alt="..."
+					width="100px"
+					height="100px"
+				/>
 				<br />
 				<h1>Seth</h1>
-                <h2 class="lead">Dedicated Backend Developer
+				<h2 class="lead">
+					Dedicated Backend Developer
 					<br />
 					<br />
 					<small class="text-body-secondary">
@@ -38,5 +45,5 @@ export default () => {
 				<Heart />
 			</div>
 		</>
-    )
+	);
-}
+};

src/components/heart/index.css

@@ -3,7 +3,6 @@
 }
 
 @keyframes pulse {
-
 	0%,
 	100% {
 		transform: scale(1);

src/components/heart/index.tsx

@@ -1,12 +1,13 @@
-import { useState } from 'preact/hooks';
+import { useState } from "preact/hooks";
-
-import './index.css';
 
+import "./index.css";
 
 export default () => {
 	const [heartrate, setHeartrate] = useState(0);
 
-    const ws = new WebSocket("wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9");
+	const ws = new WebSocket(
+		"wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9",
+	);
 
 	let hrTimeout: ReturnType<typeof setTimeout>;
 
@@ -40,7 +41,6 @@ export default () => {
 		return setHrInterval();
 	};
 
-
 	ws.onmessage = ({ data }) => {
 		const { event, payload } = JSON.parse(data);
 		switch (event) {
@@ -58,11 +58,14 @@ export default () => {
 
 	return (
 		<>
-            <div style={heartrate === 0 ? "display:none" : `--bpm: ${heartrate};`} class="heart">
+			<div
+				style={heartrate === 0 ? "display:none" : `--bpm: ${heartrate};`}
+				class="heart"
+			>
 				♥️
 				<br />
 				<span>{heartrate} BPM</span>
 			</div>
 		</>
-    )
+	);
-}
+};

src/components/navbar/index.tsx

@@ -1,29 +1,46 @@
-import { Minus, Minimize, X } from 'lucide-preact';
+import { Minimize, Minus, X } from "lucide-preact";
 
 const close = () => {
 	window.close();
 	window.history.back();
-}
+};
 
 export default () => {
 	return (
 		<>
-            <nav class="navbar shadow fixed-top" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
+			<nav
+				class="navbar shadow fixed-top"
+				style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);"
+			>
 				<div class="container-fluid">
 					<div class="navbar-brand">
-                        <img src="favicon.svg" alt="Logo" width="24" height="24" class="d-inline-block align-text-top" />
+						<img
+							src="favicon.svg"
+							alt="Logo"
+							width="24"
+							height="24"
+							class="d-inline-block align-text-top"
+						/>
 						Seth
 					</div>
-                    <span class="navbar-text">
+					<span class="navbar-text">IPv4 dot Army</span>
-                        IPv4 dot Army
-                    </span>
 					<div class="d-flex hstack gap-2">
-                        <button type="button" class="btn btn-outline-success btn-sm"><Minus size={20} /></button>
+						<button type="button" class="btn btn-outline-success btn-sm">
-                        <button type="button" class="btn btn-outline-warning btn-sm"><Minimize size={20} /></button>
+							<Minus size={20} />
-                        <button type="button" class="btn btn-outline-danger btn-sm" onClick={close}><X size={20} /></button>
+						</button>
+						<button type="button" class="btn btn-outline-warning btn-sm">
+							<Minimize size={20} />
+						</button>
+						<button
+							type="button"
+							class="btn btn-outline-danger btn-sm"
+							onClick={close}
+						>
+							<X size={20} />
+						</button>
 					</div>
 				</div>
 			</nav>
 		</>
-    )
+	);
-}
+};

src/main.tsx

@@ -1,6 +1,9 @@
-import { render } from 'preact'
+import { render } from "preact";
-import './index.css'
+import "./index.css";
-import 'halfmoon/css/halfmoon.min.css';
+import "halfmoon/css/halfmoon.min.css";
-import App from './components/app.tsx'
+import App from "./components/app.tsx";
 
-render(<App />, document.getElementById('app') as HTMLElement || document.body)
+render(
+	<App />,
+	(document.getElementById("app") as HTMLElement) || document.body,
+);

tsconfig.app.json

@@ -4,19 +4,11 @@
 		"target": "ES2020",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
-    "lib": [
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
 		"skipLibCheck": true,
 		"paths": {
-      "react": [
+			"react": ["./node_modules/preact/compat/"],
-        "./node_modules/preact/compat/"
+			"react-dom": ["./node_modules/preact/compat/"]
-      ],
-      "react-dom": [
-        "./node_modules/preact/compat/"
-      ]
 		},
 		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
@@ -31,7 +23,5 @@
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedSideEffectImports": true
 	},
-  "include": [
+	"include": ["src"]
-    "src"
-  ]
 }

tsconfig.node.json

@@ -2,9 +2,7 @@
 	"compilerOptions": {
 		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 		"target": "ES2022",
-    "lib": [
+		"lib": ["ES2023"],
-      "ES2023"
-    ],
 		"module": "ESNext",
 		"skipLibCheck": true,
 		"moduleResolution": "bundler",
@@ -18,7 +16,5 @@
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedSideEffectImports": true
 	},
-  "include": [
+	"include": ["vite.config.ts"]
-    "vite.config.ts"
-  ]
 }

vite.config.ts

@@ -1,26 +1,28 @@
 /// <reference types="vite/client" />
 
-import { defineConfig } from 'vite'
+import preact from "@preact/preset-vite";
-import preact from '@preact/preset-vite'
+import { defineConfig } from "vite";
 
 import postCSSPurgeCSS from "@fullhuman/postcss-purgecss";
 
 // https://vite.dev/config/
 export default defineConfig({
 	css: {
-    ...(import.meta.env.NODE_ENV === "production") ? {
+		...(import.meta.env.NODE_ENV === "production"
+			? {
 					transformer: "postcss",
 					postcss: {
 						plugins: [
 							postCSSPurgeCSS({
 								content: ["./index.html", "./src/**/*.{ts,tsx}"],
-          })
+							}),
-        ]
+						],
+					},
 				}
-    } : { transformer: "lightningcss" }
+			: { transformer: "lightningcss" }),
 	},
 	build: {
 		cssMinify: "lightningcss",
 	},
 	plugins: [preact()],
-})
+});