apply biome lint

components/AudioPlay.tsx

@@ -1,4 +1,4 @@
-import { StationType } from "@/interfaces/station.ts";
+import type { StationType } from "@/interfaces/station.ts";
 
 export default function AudioPlay() {
   return (
@@ -7,9 +7,12 @@ export default function AudioPlay() {
       class="hidden flex-wrap flex-row justify-center items-center"
     >
       <img
+        alt="Radio logo"
         id="audioImg"
         class="w-40 h-40 text-xl font-bold bg-gray-400 border-4 border-yellow-400 flex items-center justify-evenly mr-5"
       />
+      {/*TODO: maybe add captions for stations that have it*/}
+      {/* biome-ignore lint/a11y/useMediaCaption: <explanation> */}
       <audio id="audio" controls />
     </div>
   );

fresh.gen.ts

@@ -19,7 +19,7 @@ import * as $StatioMain from "./islands/StatioMain.tsx";
 import * as $StationSearch from "./islands/StationSearch.tsx";
 import * as $Stations from "./islands/Stations.tsx";
 import * as $TopStations from "./islands/TopStations.tsx";
-import { type Manifest } from "$fresh/server.ts";
+import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {

islands/FavStations.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "preact/hooks";
-import { StationType } from "@/interfaces/station.ts";
+import type { StationType } from "@/interfaces/station.ts";
 import Stations from "@/islands/Stations.tsx";
 import { useSignal } from "@preact/signals";
 

islands/StatioMain.tsx

@@ -1,17 +1,18 @@
 import { useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
-import { StationType } from "@/interfaces/station.ts";
+import type { StationType } from "@/interfaces/station.ts";
 import Stations, { apiUrl, HEADERS, sortByVotes } from "@/islands/Stations.tsx";
 
-async function getStations(cn: string | undefined) {
-  if (cn === undefined) {
-    cn = Intl.DateTimeFormat()
+async function getStations(countryNameOrg?: string) {
+  let countryName = countryNameOrg;
+  if (countryName === undefined) {
+    countryName = Intl.DateTimeFormat()
       .resolvedOptions()
       .timeZone.split("/")[1];
   }
   const stations: StationType[] = await (
     await fetch(
-      `${apiUrl}/bycountry/${cn}`,
+      `${apiUrl}/bycountry/${countryName}`,
       {
         headers: HEADERS,
       },

islands/StationSearch.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "preact/hooks";
 import { useSignal } from "@preact/signals";
-import { StationType } from "@/interfaces/station.ts";
+import type { StationType } from "@/interfaces/station.ts";
 import Stations, { apiUrl, HEADERS, sortByVotes } from "@/islands/Stations.tsx";
 import { button54 } from "@/styles/styles.ts";
 
@@ -44,24 +44,22 @@ export default function SearchStations() {
       <input
         style={button54}
         value={input.value}
-        // deno-lint-ignore no-explicit-any
-        onChange={(e: any) => {
-          input.value = e.target.value;
+        onChange={(e) => {
+          input.value = (e?.target as HTMLInputElement).value;
         }}
       />
       <select
         style={button54}
         value={method.value}
-        // deno-lint-ignore no-explicit-any
-        onChange={(e: any) => {
-          method.value = e.target.value;
+        onChange={(e) => {
+          method.value = (e?.target as HTMLInputElement).value;
         }}
       >
         <option>Country</option>
         <option>Language</option>
         <option>Name</option>
       </select>
-      <button style={button54} onClick={search}>Search</button>
+      <button type="button" style={button54} onClick={search}>Search</button>
       {stations.value.length !== 0 && (
         <Stations title="Search Results" stations={stations} />
       )}

islands/Stations.tsx

@@ -1,7 +1,7 @@
 import { useState } from "preact/hooks";
-import { StationType } from "@/interfaces/station.ts";
+import type { StationType } from "@/interfaces/station.ts";
 import Audioplay from "@/components/AudioPlay.tsx";
-import { Signal, useComputed, useSignal } from "@preact/signals";
+import { type Signal, useComputed, useSignal } from "@preact/signals";
 import { button74 } from "@/styles/styles.ts";
 
 export const HEADERS = {
@@ -34,9 +34,8 @@ const Station = (
   const stationName = (name: string) => {
     if (name.length > 12) {
       return `${name.slice(0, 12)}..`;
-    } else {
-      return name;
     }
+    return name;
   };
 
   const stationStyle = {
@@ -93,6 +92,7 @@ const Station = (
   return (
     <div>
       <button
+        type="button"
         style={stationStyle}
         onClick={() => {
           activeStaion.value = station;
@@ -104,18 +104,21 @@ const Station = (
       <div class="flex justify-center">
         <p class="font-bold">{stationName(station.name)}</p>
         <button
+          type="button"
           class="invisible"
           onClick={() => toggleFavStation(station)}
         >
           {(starStyle().color === "yellow")
             ? (
               <img
+                alt="{x}"
                 src="/icon/star-filled.svg"
                 class="visible w-5"
               />
             )
             : (
               <img
+                alt="{}"
                 src="/icon/star-unfilled.svg"
                 class="visible w-5"
               />
@@ -168,9 +171,9 @@ export default function Stations(
         ))}
       </div>
       {pager.value > 0 &&
-        <button style={button74} onClick={backPage}>back</button>}
+        <button type="button" style={button74} onClick={backPage}>back</button>}
       {(pager.value + pageNumItems < stations.value.length) &&
-        <button style={button74} onClick={nextPage}>next</button>}
+        <button type="button" style={button74} onClick={nextPage}>next</button>}
     </div>
   );
 }

islands/TopStations.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "preact/hooks";
 import Stations, { apiUrl, HEADERS } from "@/islands/Stations.tsx";
-import { Signal, useSignal } from "@preact/signals";
-import { StationType } from "@/interfaces/station.ts";
+import { type Signal, useSignal } from "@preact/signals";
+import type { StationType } from "@/interfaces/station.ts";
 import { button74 } from "@/styles/styles.ts";
 
 export default function TopStations() {
@@ -32,8 +32,8 @@ export default function TopStations() {
       {stations.value.length !== 0 &&
         <Stations title="Top Stations" stations={stations} />}
       {offset.value >= pageNumItems &&
-        <button style={button74} onClick={backPage}>back</button>}
-      <button style={button74} onClick={nextPage}>next</button>
+        <button type="button" style={button74} onClick={backPage}>back</button>}
+      <button type="button" style={button74} onClick={nextPage}>next</button>
     </div>
   );
 }

routes/api/db/bycountry/[country].ts

@@ -1,5 +1,5 @@
-import { Handlers } from "$fresh/server.ts";
-import { StationType } from "@/interfaces/station.ts";
+import type { Handlers } from "$fresh/server.ts";
+import type { StationType } from "@/interfaces/station.ts";
 import { db } from "@/static_server/db.ts";
 
 export const handler: Handlers = {

routes/api/db/bylanguage/[language].ts

@@ -1,5 +1,5 @@
-import { Handlers } from "$fresh/server.ts";
-import { StationType } from "@/interfaces/station.ts";
+import type { Handlers } from "$fresh/server.ts";
+import type { StationType } from "@/interfaces/station.ts";
 import { db } from "@/static_server/db.ts";
 
 export const handler: Handlers = {

routes/api/db/byname/[name].ts

@@ -1,5 +1,5 @@
-import { Handlers } from "$fresh/server.ts";
-import { StationType } from "@/interfaces/station.ts";
+import type { Handlers } from "$fresh/server.ts";
+import type { StationType } from "@/interfaces/station.ts";
 import { db } from "@/static_server/db.ts";
 
 export const handler: Handlers = {

routes/api/db/topclick.ts

@@ -1,17 +1,17 @@
-import { Handlers } from "$fresh/server.ts";
-import { StationType } from "@/interfaces/station.ts";
+import type { Handlers } from "$fresh/server.ts";
+import type { StationType } from "@/interfaces/station.ts";
 import { db } from "@/static_server/db.ts";
 
 export const handler: Handlers = {
   GET(req) {
     const rawSearch = new URL(req.url).search;
     const params: { [key: string]: string } = {};
-    rawSearch.substring(1).split("&").forEach((pair) => {
+    for (const pair of rawSearch.substring(1).split("&")) {
       const [key, value] = pair.split("=");
       params[key] = value;
-    });
+    }
     // construct query that may include limit or/and offest depending on the prams
-    let query = `SELECT * FROM radio_table ORDER BY votes DESC`;
+    let query = "SELECT * FROM radio_table ORDER BY votes DESC";
     if (params.limit) {
       query += ` LIMIT ${params.limit}`;
     }

routes/api/handlesrc.ts

@@ -1,4 +1,4 @@
-import { Handlers } from "$fresh/server.ts";
+import type { Handlers } from "$fresh/server.ts";
 import {} from "@/static_server/deps.ts";
 
 export const handler: Handlers = {

routes/byCountry/[country].tsx

@@ -1,4 +1,4 @@
-import { PageProps } from "$fresh/src/server/types.ts";
+import type { PageProps } from "$fresh/src/server/types.ts";
 import StationMain from "@/islands/StatioMain.tsx";
 import { Partial } from "$fresh/runtime.ts";
 

routes/map.tsx

@@ -1,6 +1,6 @@
 import { Head } from "$fresh/runtime.ts";
 
-export default function Map() {
+export default function RadioMap() {
   return (
     <>
       <Head>
@@ -12,8 +12,9 @@ export default function Map() {
         />
         <link rel="stylesheet" href="/map/map.css" />
       </Head>
-      <div id="map"></div>
+      <div id="map" />
       <button
+        type="button"
         class="bg-green-600 border border-gray-400 rounded-md shadow-sm py-2 px-4 text-white font-bold cursor-pointer inline-block mt-5 w-150 h-30"
         id="goBtn"
       >

scripts/compileMap.ts

@@ -8,9 +8,14 @@ const target = "static/map/map.js";
 const compileMap = async () => {
   const emitResult = await transpile("static_server/map.ts");
 
-  const mapJs = emitResult.get(
-    [...emitResult.keys()].find((k) => k.includes("static_server/map.ts"))!,
+  const key = [...emitResult.keys()].find((k) =>
+    k.includes("static_server/map.ts")
   );
+  if (!key) {
+    console.error("could not find map.ts source");
+    return;
+  }
+  const mapJs = emitResult.get(key);
 
   const warning = "// This file is generated by compileMap.ts";
   await Deno.writeTextFile(target, `${warning}\n${mapJs}`);

scripts/createRadioDb.ts

@@ -1,4 +1,4 @@
-import { StationType } from "@/interfaces/station.ts";
+import type { StationType } from "@/interfaces/station.ts";
 
 const createRadioDb = async (arg?: string) => {
   // create the db folder
@@ -27,7 +27,7 @@ const createRadioDb = async (arg?: string) => {
 
   let size = (await fetch("https://de1.api.radio-browser.info/json/stations"))
     .headers.get("content-length");
-  if (size) size = formatBytes(parseFloat(size));
+  if (size) size = formatBytes(Number.parseFloat(size));
 
   console.log(
     `%cfetching the latest radio database (${size})`,
@@ -65,8 +65,7 @@ function formatBytes(bytes: number, decimals = 2) {
   const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + " " +
-    sizes[i];
+  return `${Number.parseFloat((bytes / k ** i).toFixed(decimals))} ${sizes[i]}`;
 }
 
 if (import.meta.main) {

static/map/map.js

@@ -54,8 +54,8 @@ async function getLatLng(cn) {
   const lat = resp[0].lat;
   const lon = resp[0].lon;
   return [
-    parseFloat(lat),
-    parseFloat(lon),
+    Number.parseFloat(lat),
+    Number.parseFloat(lon),
   ];
 }
 async function countryFromLatLng({ lat, lng }) {

static/pwa/app.js

@@ -1,5 +1,5 @@
 if ("serviceWorker" in navigator) {
-  addEventListener("load", function () {
+  addEventListener("load", () => {
     navigator.serviceWorker
       // we're going to give it scope / so it needs to be in the root of the repo
       .register("/sw.js")

static_server/db.ts

@@ -1,6 +1,6 @@
 /// <reference lib="deno.ns" />
 import { DB } from "https://deno.land/x/[email protected]/mod.ts";
-import { StationType } from "@/interfaces/station.ts";
+import type { StationType } from "@/interfaces/station.ts";
 
 export const db = new DB("", { memory: true });
 
@@ -15,19 +15,9 @@ const sanitize = (s: string) => s.replaceAll('"', "").replaceAll("'", "");
 db.query(
   `insert into radio_table values ${
     jsonDb.map((station) =>
-      "('" +
-      sanitize(station.name) +
-      "','" +
-      sanitize(station.country) +
-      "','" +
-      sanitize(station.language) +
-      "'," +
-      station.votes +
-      ",'" +
-      sanitize(station.url) +
-      "','" +
-      sanitize(station.favicon) +
-      "')"
-    ).join(",")
+      //deno-fmt-ignore
+      `('${sanitize(station.name)}','${sanitize(station.country)}','${sanitize(station.language)}',${station.votes},'${sanitize(station.url)}','${sanitize(station.favicon)}')`
+    )
+      .join(",")
   }`,
 );

static_server/map.ts

@@ -12,7 +12,8 @@ async function drawMap() {
     .resolvedOptions()
     .timeZone.split("/")[1];
 
-  const btn = document.getElementById("goBtn")!;
+  const btn = document.getElementById("goBtn");
+  if (!btn) throw new Error("no btn with id goBtn");
   btn.onclick = () => {
     window.location.href = `/byCountry/${activeCountry}`;
   };
@@ -64,7 +65,7 @@ async function getLatLng(cn: string): Promise<[number, number]> {
   ).then((r) => r.json());
   const lat = resp[0].lat;
   const lon = resp[0].lon;
-  return [parseFloat(lat), parseFloat(lon)];
+  return [Number.parseFloat(lat), Number.parseFloat(lon)];
 }
 
 async function countryFromLatLng(

twind.config.ts

@@ -1,4 +1,4 @@
-import { Options } from "$fresh/plugins/twind.ts";
+import type { Options } from "$fresh/plugins/twind.ts";
 
 export default {
   selfURL: import.meta.url,