auto-lint

src/components/app.tsx

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

src/components/container/index.tsx

@@ -6,9 +6,15 @@ export default () => {
 				<br />
 				<br />
 				<form action={localStorage.getItem("searchEngine") || ""} method="get">
-                    <input class="form-control me-2" type="search" placeholder={`Search with ${localStorage.getItem("searchEngineName")}`} aria-label="Search with Google" name="q" />
+					<input
+						class="form-control me-2"
+						type="search"
+						placeholder={`Search with ${localStorage.getItem("searchEngineName")}`}
+						aria-label="Search with Google"
+						name="q"
+					/>
 				</form>
 			</div>
 		</>
-    )
+	);
-}
+};

src/components/navbar/index.tsx

@@ -1,28 +1,43 @@
-import { useState } from 'preact/hooks';
+import { ChevronLeft, ChevronRight } from "lucide-preact";
-import { ChevronLeft, ChevronRight } from 'lucide-preact';
+import { useState } from "preact/hooks";
 
 export default () => {
 	const [wttrDesc, setWttrDesc] = useState<string>("Loading...");
 
-    fetch(`https://wttr.in/${localStorage.getItem("location") || ""}?format=%t%20with%20%C%c&m`)
+	fetch(
-        .then(res => res.text())
+		`https://wttr.in/${localStorage.getItem("location") || ""}?format=%t%20with%20%C%c&m`,
-        .then(desc => {
+	)
+		.then((res) => res.text())
+		.then((desc) => {
 			setWttrDesc(desc.trim());
-        })
+		});
 
 	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">
+					<div class="navbar-brand">{wttrDesc}</div>
-                        {wttrDesc}
-                    </div>
 					<div class="d-flex hstack gap-2">
-                        <button type="button" class="btn btn-outline-light btn-sm" onClick={history.back}><ChevronLeft size={20} /></button>
+						<button
-                        <button type="button" class="btn btn-outline-light btn-sm" onClick={history.forward}><ChevronRight size={20} /></button>
+							type="button"
+							class="btn btn-outline-light btn-sm"
+							onClick={history.back}
+						>
+							<ChevronLeft size={20} />
+						</button>
+						<button
+							type="button"
+							class="btn btn-outline-light btn-sm"
+							onClick={history.forward}
+						>
+							<ChevronRight size={20} />
+						</button>
 					</div>
 				</div>
 			</nav>
 		</>
-    )
+	);
-}
+};

src/components/sidebar/index.tsx

@@ -2,79 +2,137 @@ const dataset = document.documentElement.dataset;
 
 export default () => {
 	return (
-
+		<nav
-        <nav class="sidebar offcanvas-start offcanvas-md" style={(localStorage.getItem("sidebar") === "false" ? "display: none;" : "")}>
+			class="sidebar offcanvas-start offcanvas-md"
-
+			style={
+				localStorage.getItem("sidebar") === "false" ? "display: none;" : ""
+			}
+		>
 			<div class="offcanvas-header border-bottom border-secondary border-opacity-25">
+				<span class="sidebar-brand">.</span>
 
-                <span class="sidebar-brand">
+				<button
-                    .
+					type="button"
-                </span>
+					class="btn-close d-md-none"
-
+					data-bs-dismiss="offcanvas"
-                <button type="button" class="btn-close d-md-none" data-bs-dismiss="offcanvas" data-bs-target="#sidebar-example" />
+					data-bs-target="#sidebar-example"
-
+				/>
 			</div>
 
 			<div class="offcanvas-body">
 				<h6>Name</h6>
-                <form class="d-flex" id="name" onSubmit={(e) => {
+				<form
+					class="d-flex"
+					id="name"
+					onSubmit={(e) => {
 						e.preventDefault();
 						const form = document.forms.namedItem("name");
 						if (form) {
 							localStorage.setItem("name", form.userName.value);
 						}
-                }}>
+					}}
-
+				>
-                    <input name="userName" class="form-control me-2" placeholder="Set Name" />
+					<input
-
+						name="userName"
-                    <button class="btn btn-primary" type="submit">Save</button>
+						class="form-control me-2"
+						placeholder="Set Name"
+					/>
 
+					<button class="btn btn-primary" type="submit">
+						Save
+					</button>
 				</form>
 				<hr class="sidebar-divider" />
 				<h6>Search Engine</h6>
-                <form id="searchEngine" onSubmit={(e) => {
+				<form
+					id="searchEngine"
+					onSubmit={(e) => {
 						e.preventDefault();
 						const form = document.forms.namedItem("searchEngine");
 						if (form) {
 							localStorage.setItem("searchEngine", form.engine.value);
 							localStorage.setItem("searchEngineName", form.engineName.value);
 						}
-                }}>
+					}}
-
+				>
-                    <input name="engine" class="form-control me-2" placeholder="e.g. https://google.com/search" />
+					<input
+						name="engine"
+						class="form-control me-2"
+						placeholder="e.g. https://google.com/search"
+					/>
 					<br />
-                    <input name="engineName" class="form-control me-2" placeholder="e.g. Google" />
+					<input
+						name="engineName"
+						class="form-control me-2"
+						placeholder="e.g. Google"
+					/>
 					<br />
-                    <button class="btn btn-primary" type="submit">Save</button>
+					<button class="btn btn-primary" type="submit">
-
+						Save
+					</button>
 				</form>
 				<hr class="sidebar-divider" />
 				<h6>Weather Location</h6>
-                <form class="d-flex" id="weatherLocation" onSubmit={(e) => {
+				<form
+					class="d-flex"
+					id="weatherLocation"
+					onSubmit={(e) => {
 						e.preventDefault();
 						const form = document.forms.namedItem("weatherLocation");
 						if (form) {
 							localStorage.setItem("location", form.location.value);
 						}
-                }}>
+					}}
-
+				>
-                    <input name="location" class="form-control me-2" placeholder="Leave blank for current location" />
+					<input
-
+						name="location"
-                    <button class="btn btn-primary" type="submit">Save</button>
+						class="form-control me-2"
+						placeholder="Leave blank for current location"
+					/>
 
+					<button class="btn btn-primary" type="submit">
+						Save
+					</button>
 				</form>
 
 				<hr class="sidebar-divider" />
 				<h6>Color Scheme</h6>
 				<ul class="nav nav-pills nav-fill">
 					<li class="nav-item">
-                        <button class="btn btn-primary" type={"button"} onClick={() => { localStorage.setItem("colorScheme", "auto"); location.reload() }}>Auto</button>
+						<button
+							class="btn btn-primary"
+							type={"button"}
+							onClick={() => {
+								localStorage.setItem("colorScheme", "auto");
+								location.reload();
+							}}
+						>
+							Auto
+						</button>
 					</li>
 					<li class="nav-item">
-                        <button class="btn btn-primary" type={"button"} onClick={() => { localStorage.setItem("colorScheme", "light"); dataset.bsTheme = "light" }}>Light</button>
+						<button
+							class="btn btn-primary"
+							type={"button"}
+							onClick={() => {
+								localStorage.setItem("colorScheme", "light");
+								dataset.bsTheme = "light";
+							}}
+						>
+							Light
+						</button>
 					</li>
 					<li class="nav-item">
-                        <button class="btn btn-primary" type={"button"} onClick={() => { localStorage.setItem("colorScheme", "dark"); dataset.bsTheme = "dark" }}>Dark</button>
+						<button
+							class="btn btn-primary"
+							type={"button"}
+							onClick={() => {
+								localStorage.setItem("colorScheme", "dark");
+								dataset.bsTheme = "dark";
+							}}
+						>
+							Dark
+						</button>
 					</li>
 				</ul>
 
@@ -82,28 +140,65 @@ export default () => {
 				<h6>Theme</h6>
 				<ul class="nav nav-pills nav-fill">
 					<li class="nav-item">
-                        <button class="btn btn-primary" type={"button"} onClick={() => { localStorage.setItem("theme", "default"); dataset.bsCore = "default" }}>Default</button>
+						<button
+							class="btn btn-primary"
+							type={"button"}
+							onClick={() => {
+								localStorage.setItem("theme", "default");
+								dataset.bsCore = "default";
+							}}
+						>
+							Default
+						</button>
 					</li>
 					<li class="nav-item">
-                        <button class="btn btn-primary" type={"button"} onClick={() => { localStorage.setItem("theme", "modern"); dataset.bsCore = "modern" }}>Modern</button>
+						<button
+							class="btn btn-primary"
+							type={"button"}
+							onClick={() => {
+								localStorage.setItem("theme", "modern");
+								dataset.bsCore = "modern";
+							}}
+						>
+							Modern
+						</button>
 					</li>
 					<li class="nav-item">
-                        <button class="btn btn-primary" type={"button"} onClick={() => { localStorage.setItem("theme", "elegant"); dataset.bsCore = "elegant" }}>Elegant</button>
+						<button
+							class="btn btn-primary"
+							type={"button"}
+							onClick={() => {
+								localStorage.setItem("theme", "elegant");
+								dataset.bsCore = "elegant";
+							}}
+						>
+							Elegant
+						</button>
 					</li>
 				</ul>
 				<hr class="sidebar-divider" />
 
-                <button class="btn btn-secondary" type={"button"} onClick={() => { localStorage.setItem("sidebar", "false"); location.reload() }}>Save & Close</button>
+				<button
+					class="btn btn-secondary"
+					type={"button"}
+					onClick={() => {
+						localStorage.setItem("sidebar", "false");
+						location.reload();
+					}}
+				>
+					Save & Close
+				</button>
 
 				<hr class="sidebar-divider" />
 				<h6>About</h6>
-                <p>halfPage is a minimalistic startpage, built on only open-source software.</p>
+				<p>
+					halfPage is a minimalistic startpage, built on only open-source
+					software.
+				</p>
 				<a href="https://www.gethalfmoon.com/wttr">halfmoon</a>
 				<a href="https://github.com/chubin/wttr.in">wttr.in</a>
 				<a href="https://git.creations.works/seth/halfPage">Source</a>
-
 			</div>
-
 		</nav>
-    )
+	);
-}
+};

src/main.tsx

@@ -1,15 +1,22 @@
-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 'halfmoon/css/cores/halfmoon.modern.css';
+import "halfmoon/css/cores/halfmoon.modern.css";
-import 'halfmoon/css/cores/halfmoon.elegant.css';
+import "halfmoon/css/cores/halfmoon.elegant.css";
-import App from './components/app.tsx'
+import App from "./components/app.tsx";
 
 const dataset = document.documentElement.dataset;
 
-const colorScheme = localStorage.getItem("colorScheme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") || "auto";
+const colorScheme =
+	localStorage.getItem("colorScheme") ||
+	(window.matchMedia("(prefers-color-scheme: dark)").matches
+		? "dark"
+		: "light") ||
+	"auto";
 if (colorScheme === "auto") {
-    dataset.bsTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	dataset.bsTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+		? "dark"
+		: "light";
 } else {
 	dataset.bsTheme = colorScheme;
 }
@@ -19,9 +26,12 @@ dataset.bsCore = localStorage.getItem("theme") || "default";
 const favicon = document.getElementById("favicon") as HTMLLinkElement;
 
 fetch(`https://wttr.in/${localStorage.getItem("location") || ""}?format=%c`)
-    .then(res => res.text())
+	.then((res) => res.text())
-    .then(emoji => {
+	.then((emoji) => {
-        favicon.href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji.trim()}</text></svg>`
+		favicon.href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji.trim()}</text></svg>`;
-    })
+	});
 
-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()],
-})
+});