fix: soo many lint errors

islands/IngredientsList.tsx

@@ -9,15 +9,12 @@ function formatAmount(num: number) {
 }
 
 function formatUnit(unit: string, amount: number) {
-  const unitKey = unit.toLowerCase() as keyof typeof unitsOfMeasure;
+  if (!unit) return "";
+  const unitKey = unit.toLowerCase() as (keyof typeof unitsOfMeasure);
   if (unitKey in unitsOfMeasure) {
     if (amount > 1 && unitsOfMeasure[unitKey].plural !== undefined) {
       return unitsOfMeasure[unitKey].plural;
     }
-    if (unitKey !== "cup") {
-      return unitsOfMeasure[unitKey].short;
-    }
-
     return unitKey.toString();
   } else {
     return unit;
@@ -66,9 +63,22 @@ export const IngredientsList: FunctionalComponent<
     <table class="w-full border-collapse table-auto">
       <tbody>
         {ingredients.map((item) => {
-          return (
-            <Ingredient ingredient={item} amount={amount} portion={portion} />
-          );
+          if ("items" in item) {
+            return item.items.map((ing, i) => {
+              return (
+                <Ingredient
+                  key={i}
+                  ingredient={ing}
+                  amount={amount}
+                  portion={portion}
+                />
+              );
+            });
+          } else {
+            return (
+              <Ingredient ingredient={item} amount={amount} portion={portion} />
+            );
+          }
         })}
       </tbody>
     </table>

islands/KMenu.tsx

@@ -103,8 +103,9 @@ export const KMenu = (
   }
 
   useEventListener("keydown", (ev: KeyboardEvent) => {
+    const target = ev.target as HTMLElement;
     if (ev.key === "k") {
-      if (ev?.target?.nodeName == "INPUT") {
+      if (target.nodeName == "INPUT") {
         return;
       }
 

islands/Link.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "preact/hooks";
 
 declare global {
-  // deno-lint-ignore no-var
   var loadingTimeout: ReturnType<typeof setTimeout> | undefined;
 }
 

islands/Recommendations.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState } from "preact/hooks";
 import { IconWand } from "@components/icons.tsx";
+import { RecommendationResource } from "@lib/recommendation.ts";
 
 type RecommendationState = "disabled" | "loading";
 
@@ -11,7 +12,7 @@ export function Recommendations(
   },
 ) {
   const [state, setState] = useState<RecommendationState>("disabled");
-  const [results, setResults] = useState();
+  const [results, setResults] = useState<RecommendationResource[]>();
 
   const startFetch = useCallback(
     async () => {
@@ -44,9 +45,9 @@ export function Recommendations(
                 <div class="flex gap-5 items-center mb-4">
                   <img
                     class="w-12 h-12 rounded-full object-cover"
-                    src={`https://image.tmdb.org/t/p/original${res.poster_path}`}
+                    src={`https://image.tmdb.org/t/p/original${res.id}`}
                   />
-                  <p>{res.title}</p>
+                  <p>{res.id}</p>
                 </div>
               );
             })}
@@ -66,6 +67,7 @@ export function Recommendations(
       {!results && state === "disabled" &&
         (
           <button
+            type="submit"
             onClick={startFetch}
             class="ml-8 mt-2 font-thin flex items-center gap-2 text-white my-2"
           >

islands/Search.tsx

@@ -10,7 +10,7 @@ import { Rating } from "@components/Rating.tsx";
 import { useSignal } from "@preact/signals";
 import Image from "@components/Image.tsx";
 import { Emoji } from "@components/Emoji.tsx";
-import { GenericResource } from "@lib/marka/schema.ts";
+import { GenericResource, getNameOfResource } from "@lib/marka/schema.ts";
 
 export async function fetchQueryResource(url: URL, type = "") {
   const query = url.searchParams.get("q");
@@ -33,21 +33,23 @@ export async function fetchQueryResource(url: URL, type = "") {
   }
 }
 
-export const RedirectSearchHandler = () => {
-  if (getCookie("session_cookie")) {
-    useEventListener("keydown", (e: KeyboardEvent) => {
-      if (e?.target?.nodeName == "INPUT") return;
+export function RedirectSearchHandler() {
+  useEventListener("keydown", (e: KeyboardEvent) => {
+    if (getCookie("session_cookie")) {
+      const target = e.target as HTMLInputElement;
+      if (target.nodeName == "INPUT") return;
       if (
         e.key === "?" &&
         globalThis.location.search === ""
       ) {
         globalThis.location.href += "?q=";
       }
-    }, IS_BROWSER ? document?.body : undefined);
-  }
+    }
+  }, IS_BROWSER ? document?.body : undefined);
 
-  return;
-};
+  // deno-lint-ignore jsx-no-useless-fragment
+  return <></>;
+}
 
 const SearchResultImage = ({ src }: { src: string }) => {
   return (
@@ -67,7 +69,8 @@ export const SearchResultItem = (
     showEmoji?: boolean;
   },
 ) => {
-  const resourceType = resources[item?.content._type];
+  const resourceType =
+    resources[item.content._type.toLowerCase() as keyof typeof resources];
   const href = item?.path.replace("/resources", "").replace(/\.md$/, "");
   return (
     <a
@@ -78,8 +81,7 @@ export const SearchResultItem = (
         ? <Emoji class="w-7 h-7" name={resourceType.emoji} />
         : ""}
       {item.image && <SearchResultImage src={item.image?.url} />}
-      {item.content?.headline || item.content?.name ||
-        item.content?.itemReviewed.name || item?.name}
+      {getNameOfResource(item)}
     </a>
   );
 };