feat: add kmenu icon for mobile

components/Emoji.tsx

@@ -10,5 +10,5 @@ export const Emoji = (props: { class?: string; name: string }) => {
         />
       )
       : <span>{props.name}</span>
-    : <></>;
+    : null;
 };

components/Image.tsx

@@ -47,6 +47,11 @@ const Image = (
     "/api/images",
   );
 
+  const hasDimensions = typeof props.width === "number" &&
+    typeof props.height === "number";
+  const sizes = hasDimensions ? "" : responsiveAttributes.sizes;
+  const srcset = hasDimensions ? "" : responsiveAttributes.srcset;
+
   return (
     <span
       style={{
@@ -62,8 +67,8 @@ const Image = (
         loading="lazy"
         alt={props.alt}
         style={props.style}
-        srcset={responsiveAttributes.srcset}
+        sizes={sizes}
-        sizes={responsiveAttributes.sizes}
+        srcset={srcset}
         src={`/api/images?image=${asset(props.src)}${
           props.width ? `&width=${props.width}` : ""
         }${props.height ? `&height=${props.height}` : ""}`}

components/MetaTags.tsx

@@ -26,7 +26,7 @@ function generateJsonLd(resource: GenericResource): string {
   if (resource.content?.datePublished) {
     try {
       baseSchema.datePublished = formatDate(
-        new Date(resource.content.datePublished),
+        resource.content.datePublished,
       );
     } catch (_) {
       // Ignore invalid date

components/Rating.tsx

@@ -1,5 +1,5 @@
 import { IconStar, IconStarFilled } from "@components/icons.tsx";
-import { useSignal } from "@preact/signals";
+import { Signal, useSignal } from "@preact/signals";
 import { useState } from "preact/hooks";
 
 export const SmallRating = (
@@ -24,27 +24,30 @@ export const SmallRating = (
 };
 
 export const Rating = (
-  props: { max?: number; rating: number },
+  { max, rating = useSignal(0) }: {
+    max?: number;
+    rating: Signal<number | undefined>;
+  },
 ) => {
-  const [rating, setRating] = useState(props.rating);
   const [hover, setHover] = useState(0);
-  const max = useSignal(props.max || 5);
+
+  const ratingValue = rating.value || 0;
 
   return (
     <div
-      class="flex items-center gap-2 px-5 rounded-2xl bg-gray-200 z-10"
+      class="flex items-center gap-2 px-5 rounded-2xl bg-gray-200 z-10 h-full"
       style={{ color: "var(--foreground)", background: "var(--background)" }}
     >
-      {Array.from({ length: max.value }).map((_, i) => {
+      {Array.from({ length: max || 5 }).map((_, i) => {
         return (
           <span
             class={`cursor-pointer opacity-${
-              (i + 1) <= rating ? 100 : (i + 1) <= hover ? 20 : 100
+              (i + 1) <= ratingValue ? 100 : (i + 1) <= hover ? 20 : 100
             }`}
             onMouseOver={() => setHover(i + 1)}
-            onClick={() => setRating(i + 1)}
+            onClick={() => (rating.value = i + 1)}
           >
-            {(i + 1) <= rating || (i + 1) <= hover
+            {(i + 1) <= ratingValue || (i + 1) <= hover
               ? <IconStarFilled class="w-4 h-4" />
               : <IconStar class="w-4 h-4" />}
           </span>

components/icons.tsx

@@ -17,3 +17,5 @@ export { default as IconSearch } from "https://deno.land/x/tabler_icons_tsx@0.0.
 export { default as IconGhost } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/ghost.tsx";
 export { default as IconBrandYoutube } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/brand-youtube.tsx";
 export { default as IconWand } from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/wand.tsx";
+export { default as IconMenu2 } from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/menu-2.tsx";
+export { default as IconAlertCircle } from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/alert-circle.tsx";

components/layouts/main.tsx

@@ -12,21 +12,29 @@ export type Props = {
   searchResults?: GenericResource[];
 };
 
+function getQFromUrl(u: string | URL): string | null {
+  try {
+    const _u = typeof u === "string" ? new URL(u) : u;
+    return _u?.searchParams.get("q");
+  } catch (_e) {
+    return null;
+  }
+}
+
 export const MainLayout = (
   { children, url, context, searchResults }: Props,
 ) => {
-  const _url = typeof url === "string" ? new URL(url) : url;
+  const q = getQFromUrl(url);
-  const hasSearch = _url?.search?.includes("q=");
 
-  if (hasSearch) {
+  if (typeof q === "string") {
     return (
       <Search
-        q={_url.searchParams.get("q") || ""}
         {...context}
+        q={q}
         results={searchResults}
       />
     );
   }
 
-  return <>{children}</>;
+  return children;
 };

deno.json

@@ -48,6 +48,7 @@
     "camelcase-css": "npm:camelcase-css",
     "thumbhash": "npm:thumbhash@^0.1.1",
     "tsx": "npm:tsx@^4.19.2",
+    "turndown": "npm:turndown@^7.2.2",
     "yaml": "https://deno.land/std@0.197.0/yaml/mod.ts",
     "zod": "npm:zod@^3.24.1",
     "fs": "https://deno.land/std/fs/mod.ts"

fresh.gen.ts

@@ -11,6 +11,7 @@ import * as $admin_log_index from "./routes/admin/log/index.tsx";
 import * as $admin_performance_index from "./routes/admin/performance/index.tsx";
 import * as $api_articles_name_ from "./routes/api/articles/[name].ts";
 import * as $api_articles_create_index from "./routes/api/articles/create/index.ts";
+import * as $api_articles_enhance_name_ from "./routes/api/articles/enhance/[name].ts";
 import * as $api_articles_index from "./routes/api/articles/index.ts";
 import * as $api_auth_callback from "./routes/api/auth/callback.ts";
 import * as $api_auth_login from "./routes/api/auth/login.ts";
@@ -57,7 +58,9 @@ import * as $KMenu_commands_create_movie from "./islands/KMenu/commands/create_m
 import * as $KMenu_commands_create_recipe from "./islands/KMenu/commands/create_recipe.ts";
 import * as $KMenu_commands_create_recommendations from "./islands/KMenu/commands/create_recommendations.ts";
 import * as $KMenu_commands_create_series from "./islands/KMenu/commands/create_series.ts";
+import * as $KMenu_commands_enhance_article_infos from "./islands/KMenu/commands/enhance_article_infos.ts";
 import * as $KMenu_types from "./islands/KMenu/types.ts";
+import * as $KMenuButton from "./islands/KMenuButton.tsx";
 import * as $Link from "./islands/Link.tsx";
 import * as $Recommendations from "./islands/Recommendations.tsx";
 import * as $Search from "./islands/Search.tsx";
@@ -74,6 +77,7 @@ const manifest = {
     "./routes/admin/performance/index.tsx": $admin_performance_index,
     "./routes/api/articles/[name].ts": $api_articles_name_,
     "./routes/api/articles/create/index.ts": $api_articles_create_index,
+    "./routes/api/articles/enhance/[name].ts": $api_articles_enhance_name_,
     "./routes/api/articles/index.ts": $api_articles_index,
     "./routes/api/auth/callback.ts": $api_auth_callback,
     "./routes/api/auth/login.ts": $api_auth_login,
@@ -127,7 +131,10 @@ const manifest = {
     "./islands/KMenu/commands/create_recommendations.ts":
       $KMenu_commands_create_recommendations,
     "./islands/KMenu/commands/create_series.ts": $KMenu_commands_create_series,
+    "./islands/KMenu/commands/enhance_article_infos.ts":
+      $KMenu_commands_enhance_article_infos,
     "./islands/KMenu/types.ts": $KMenu_types,
+    "./islands/KMenuButton.tsx": $KMenuButton,
     "./islands/Link.tsx": $Link,
     "./islands/Recommendations.tsx": $Recommendations,
     "./islands/Search.tsx": $Search,

islands/KMenu.tsx

@@ -5,6 +5,7 @@ import { menus } from "@islands/KMenu/commands.ts";
 import { MenuEntry } from "@islands/KMenu/types.ts";
 import * as icons from "@components/icons.tsx";
 import { IS_BROWSER } from "$fresh/runtime.ts";
+import { isKMenuOpen } from "@lib/kmenu.ts";
 const KMenuEntry = (
   { entry, activeIndex, index }: {
     entry: MenuEntry;
@@ -21,7 +22,7 @@ const KMenuEntry = (
           : "text-gray-400"
       }`}
     >
-      {entry?.icon && icons[entry.icon]({ class: "w-4 h-4 mr-1" })}
+      {entry?.icon && icons[entry.icon]({ class: "min-w-4 h-4 mr-1" })}
       {entry.title}
     </div>
   );
@@ -42,7 +43,7 @@ export const KMenu = (
   const input = useRef<HTMLInputElement>(null);
   const commandInput = useSignal("");
 
-  const visible = useSignal(false);
+  const visible = isKMenuOpen;
   if (visible.value === false) {
     setTimeout(() => {
       activeMenuType.value = "main";
@@ -168,13 +169,15 @@ export const KMenu = (
         style={{ background: "#2B2930", color: "#818181" }}
       >
         <div
-          class={`grid h-12 text-gray-400 ${
+          class={`grid min-h-12 text-gray-400 ${
-            activeState.value !== "loading" && "border-b"
+            (activeState.value === "normal" || activeState.value === "input") &&
+            "border-b"
           } border-gray-500 `}
           style={{
-            gridTemplateColumns: activeState.value !== "loading"
+            gridTemplateColumns:
-              ? "auto 1fr"
+              (activeState.value === "normal" || activeState.value === "input")
-              : "1fr",
+                ? "auto 1fr"
+                : "1fr",
           }}
         >
           {(activeState.value === "normal" || activeState.value === "input") &&
@@ -198,12 +201,18 @@ export const KMenu = (
             )}
           {activeState.value === "loading" && (
             <div class="py-3 px-4 flex items-center gap-2">
-              <icons.IconLoader2 class="animate-spin w-4 h-4" />
+              <icons.IconLoader2 class="animate-spin min-w-4 h-4" />
               {loadingText.value || "Loading..."}
             </div>
           )}
+          {activeState.value === "error" && (
+            <div class="py-3 px-4 flex items-center gap-2 text-red-400">
+              <icons.IconAlertCircle class="min-w-4 h-4" />
+              {loadingText.value || "An error occurred"}
+            </div>
+          )}
         </div>
-        {activeState.value === "normal" &&
+        {(activeState.value === "normal" || activeState.value === "input") &&
           (
             <div
               class=""

islands/KMenu/commands.ts

@@ -7,6 +7,7 @@ import { addSeriesInfo } from "@islands/KMenu/commands/add_series_infos.ts";
 import { createNewSeries } from "@islands/KMenu/commands/create_series.ts";
 import { updateAllRecommendations } from "@islands/KMenu/commands/create_recommendations.ts";
 import { createNewRecipe } from "@islands/KMenu/commands/create_recipe.ts";
+import { enhanceArticleInfo } from "@islands/KMenu/commands/enhance_article_infos.ts";
 
 export const menus: Record<string, Menu> = {
   main: {
@@ -77,6 +78,7 @@ export const menus: Record<string, Menu> = {
       createNewSeries,
       createNewRecipe,
       addMovieInfos,
+      enhanceArticleInfo,
       // updateAllRecommendations,
     ],
   },

islands/KMenu/commands/add_movie_infos.ts

@@ -8,39 +8,53 @@ export const addMovieInfos: MenuEntry = {
   meta: "",
   icon: "IconReportSearch",
   cb: async (state, context) => {
-    state.activeState.value = "loading";
+    try {
-    const movie = context as ReviewResource;
+      state.activeState.value = "loading";
+      const movie = context as ReviewResource;
 
-    const query = movie.name;
+      const query = movie.name;
 
-    const response = await fetch(
+      const response = await fetch(
-      `/api/tmdb/query?q=${encodeURIComponent(query)}`,
+        `/api/tmdb/query?q=${encodeURIComponent(query)}`,
-    );
+      );
 
-    const json = await response.json() as TMDBMovie[];
+      if (!response.ok) {
+        throw new Error(await response.text());
+      }
 
-    const menuID = `result/${movie.name}`;
+      const json = await response.json() as TMDBMovie[];
 
-    state.menus[menuID] = {
+      const menuID = `result/${movie.name}`;
-      title: "Select",
-      entries: json.map((m) => ({
-        title: `${m.title} released ${m.release_date}`,
-        cb: async () => {
-          state.activeState.value = "loading";
-          await fetch(`/api/movies/enhance/${movie.name}/`, {
-            method: "POST",
-            body: JSON.stringify({ tmdbId: m.id }),
-          });
-          state.visible.value = false;
-          state.activeState.value = "normal";
-          globalThis.location.reload();
-        },
-      })),
-    };
 
-    state.activeMenu.value = menuID;
+      state.menus[menuID] = {
-    state.commandInput.value = "";
+        title: "Select",
-    state.activeState.value = "normal";
+        entries: json.map((m) => ({
+          title: `${m.title} released ${m.release_date}`,
+          cb: async () => {
+            try {
+              state.activeState.value = "loading";
+              await fetch(`/api/movies/enhance/${movie.name}/`, {
+                method: "POST",
+                body: JSON.stringify({ tmdbId: m.id }),
+              });
+              state.visible.value = false;
+              state.activeState.value = "normal";
+              globalThis.location.reload();
+            } catch (e) {
+              state.activeState.value = "error";
+              state.loadingText.value = e.message;
+            }
+          },
+        })),
+      };
+
+      state.activeMenu.value = menuID;
+      state.commandInput.value = "";
+      state.activeState.value = "normal";
+    } catch (e) {
+      state.activeState.value = "error";
+      state.loadingText.value = e.message;
+    }
   },
   visible: () => {
     const loc = globalThis["location"];

islands/KMenu/commands/add_series_infos.ts

@@ -8,39 +8,53 @@ export const addSeriesInfo: MenuEntry = {
   meta: "",
   icon: "IconReportSearch",
   cb: async (state, context) => {
-    state.activeState.value = "loading";
+    try {
-    const series = context as ReviewResource;
+      state.activeState.value = "loading";
+      const series = context as ReviewResource;
 
-    const query = series.name;
+      const query = series.name;
 
-    const response = await fetch(
+      const response = await fetch(
-      `/api/tmdb/query?q=${encodeURIComponent(query)}&type=serie`,
+        `/api/tmdb/query?q=${encodeURIComponent(query)}&type=serie`,
-    );
+      );
 
-    const json = await response.json() as TMDBSeries[];
+      if (!response.ok) {
+        throw new Error(await response.text());
+      }
 
-    const menuID = `result/${series.name}`;
+      const json = await response.json() as TMDBSeries[];
 
-    state.menus[menuID] = {
+      const menuID = `result/${series.name}`;
-      title: "Select",
-      entries: json.map((m) => ({
-        title: `${m.name || m.original_name} released ${m.first_air_date}`,
-        cb: async () => {
-          state.activeState.value = "loading";
-          await fetch(`/api/series/enhance/${series.name}/`, {
-            method: "POST",
-            body: JSON.stringify({ tmdbId: m.id }),
-          });
-          state.visible.value = false;
-          state.activeState.value = "normal";
-          //window.location.reload();
-        },
-      })),
-    };
 
-    state.commandInput.value = "";
+      state.menus[menuID] = {
-    state.activeMenu.value = menuID;
+        title: "Select",
-    state.activeState.value = "normal";
+        entries: json.map((m) => ({
+          title: `${m.name || m.original_name} released ${m.first_air_date}`,
+          cb: async () => {
+            try {
+              state.activeState.value = "loading";
+              await fetch(`/api/series/enhance/${series.name}/`, {
+                method: "POST",
+                body: JSON.stringify({ tmdbId: m.id }),
+              });
+              state.visible.value = false;
+              state.activeState.value = "normal";
+              //window.location.reload();
+            } catch (e) {
+              state.activeState.value = "error";
+              state.loadingText.value = e.message;
+            }
+          },
+        })),
+      };
+
+      state.commandInput.value = "";
+      state.activeMenu.value = menuID;
+      state.activeState.value = "normal";
+    } catch (e) {
+      state.activeState.value = "error";
+      state.loadingText.value = e.message;
+    }
   },
   visible: () => {
     const loc = globalThis["location"];

islands/KMenu/commands/create_article.ts

@@ -22,14 +22,16 @@ export const createNewArticle: MenuEntry = {
         state.activeState.value = "loading";
 
         fetchStream("/api/articles/create?url=" + value, (chunk) => {
-          if (chunk.startsWith("id:")) {
+          if (chunk.type === "error") {
+            state.activeState.value = "error";
+            state.loadingText.value = chunk.message;
+          } else if (chunk.type === "finished") {
             state.loadingText.value = "Finished";
             setTimeout(() => {
-              window.location.href = "/articles/" +
+              globalThis.location.href = "/articles/" + chunk.url;
-                chunk.replace("id:", "").trim();
             }, 500);
           } else {
-            state.loadingText.value = chunk;
+            state.loadingText.value = chunk.message;
           }
         });
       }

islands/KMenu/commands/create_movie.ts

@@ -31,35 +31,52 @@ export const createNewMovie: MenuEntry = {
 
     let currentQuery: string;
     const search = debounce(async function search(query: string) {
-      currentQuery = query;
+      try {
-      if (query.length < 2) {
+        currentQuery = query;
-        return;
+        if (query.length < 2) {
+          return;
+        }
+
+        const response = await fetch("/api/tmdb/query?q=" + query);
+
+        if (!response.ok) {
+          throw new Error(await response.text());
+        }
+
+        const movies = await response.json() as TMDBMovie[];
+
+        if (query !== currentQuery) return;
+
+        state.menus["input_link"] = {
+          title: "Search",
+          entries: movies.map((r) => {
+            return {
+              title: `${r.title} - ${r.release_date}`,
+              cb: async () => {
+                try {
+                  state.activeState.value = "loading";
+                  const response = await fetch("/api/movies/" + r.id, {
+                    method: "POST",
+                  });
+                  if (!response.ok) {
+                    throw new Error(await response.text());
+                  }
+                  const movie = await response.json() as ReviewResource;
+                  unsub();
+                  globalThis.location.href = "/movies/" + movie.name;
+                } catch (e) {
+                  state.activeState.value = "error";
+                  state.loadingText.value = e.message;
+                }
+              },
+            };
+          }),
+        };
+        state.activeMenu.value = "input_link";
+      } catch (e) {
+        state.activeState.value = "error";
+        state.loadingText.value = e.message;
       }
-
-      const response = await fetch("/api/tmdb/query?q=" + query);
-
-      const movies = await response.json() as TMDBMovie[];
-
-      if (query !== currentQuery) return;
-
-      state.menus["input_link"] = {
-        title: "Search",
-        entries: movies.map((r) => {
-          return {
-            title: `${r.title} - ${r.release_date}`,
-            cb: async () => {
-              state.activeState.value = "loading";
-              const response = await fetch("/api/movies/" + r.id, {
-                method: "POST",
-              });
-              const movie = await response.json() as ReviewResource;
-              unsub();
-              globalThis.location.href = "/movies/" + movie.name;
-            },
-          };
-        }),
-      };
-      state.activeMenu.value = "input_link";
     }, 500);
 
     const unsub = state.commandInput.subscribe((value) => {

islands/KMenu/commands/create_recipe.ts

@@ -21,15 +21,17 @@ export const createNewRecipe: MenuEntry = {
 
         state.activeState.value = "loading";
 
-        fetchStream("/api/recipes/create?url=" + value, (chunk) => {
+        fetchStream("/api/recipes/create?url=" + value, (msg) => {
-          if (chunk.startsWith("id:")) {
+          if (msg.type === "error") {
+            state.activeState.value = "error";
+            state.loadingText.value = msg.message;
+          } else if (msg.type === "finished") {
             state.loadingText.value = "Finished";
             setTimeout(() => {
-              globalThis.location.href = "/recipes/" +
+              globalThis.location.href = "/recipes/" + msg.url;
-                chunk.replace("id:", "").trim();
             }, 500);
           } else {
-            state.loadingText.value = chunk;
+            state.loadingText.value = msg.message;
           }
         });
       }

islands/KMenu/commands/create_recommendations.ts

@@ -10,12 +10,15 @@ export const updateAllRecommendations: MenuEntry = {
     state.activeState.value = "loading";
 
     fetchStream("/api/recommendation/all", (chunk) => {
-      if (chunk.toLowerCase().includes("finish")) {
+      if (chunk.type === "error") {
+        state.activeState.value = "error";
+        state.loadingText.value = chunk.message;
+      } else if (chunk.type === "finished") {
         setTimeout(() => {
-          window.location.reload();
+          globalThis.location.reload();
         }, 500);
       } else {
-        state.loadingText.value = chunk;
+        state.loadingText.value = chunk.message;
       }
     });
   },

islands/KMenu/commands/create_series.ts

@@ -31,38 +31,55 @@ export const createNewSeries: MenuEntry = {
 
     let currentQuery: string;
     const search = debounce(async function search(query: string) {
-      currentQuery = query;
+      try {
-      if (query.length < 2) {
+        currentQuery = query;
-        return;
+        if (query.length < 2) {
+          return;
+        }
+
+        const response = await fetch(
+          "/api/tmdb/query?q=" + query + "&type=series",
+        );
+
+        if (!response.ok) {
+          throw new Error(await response.text());
+        }
+
+        const series = await response.json() as TMDBSeries[];
+
+        if (query !== currentQuery) return;
+
+        state.menus["input_link"] = {
+          title: "Search",
+          entries: series.map((r) => {
+            return {
+              title: `${r.name} - ${r.first_air_date}`,
+              cb: async () => {
+                try {
+                  state.activeState.value = "loading";
+                  const response = await fetch("/api/series/" + r.id, {
+                    method: "POST",
+                  });
+                  if (!response.ok) {
+                    throw new Error(await response.text());
+                  }
+                  const series = await response.json() as ReviewResource;
+                  unsub();
+                  globalThis.location.href = "/series/" + series.name;
+                } catch (e) {
+                  state.activeState.value = "error";
+                  state.loadingText.value = e.message;
+                }
+              },
+            };
+          }),
+        };
+        state.commandInput.value = "";
+        state.activeMenu.value = "input_link";
+      } catch (e) {
+        state.activeState.value = "error";
+        state.loadingText.value = e.message;
       }
-
-      const response = await fetch(
-        "/api/tmdb/query?q=" + query + "&type=series",
-      );
-
-      const series = await response.json() as TMDBSeries[];
-
-      if (query !== currentQuery) return;
-
-      state.menus["input_link"] = {
-        title: "Search",
-        entries: series.map((r) => {
-          return {
-            title: `${r.name} - ${r.first_air_date}`,
-            cb: async () => {
-              state.activeState.value = "loading";
-              const response = await fetch("/api/series/" + r.id, {
-                method: "POST",
-              });
-              const series = await response.json() as ReviewResource;
-              unsub();
-              globalThis.location.href = "/series/" + series.name;
-            },
-          };
-        }),
-      };
-      state.commandInput.value = "";
-      state.activeMenu.value = "input_link";
     }, 500);
 
     const unsub = state.commandInput.subscribe((value) => {

islands/KMenu/commands/enhance_article_infos.ts

@@ -0,0 +1,41 @@
+import { getCookie } from "@lib/string.ts";
+import { MenuEntry } from "../types.ts";
+import { ArticleResource } from "@lib/marka/schema.ts";
+import { fetchStream } from "@lib/helpers.ts";
+
+export const enhanceArticleInfo: MenuEntry = {
+  title: "Enhance Article Info",
+  meta: "Update metadata and content from source url",
+  icon: "IconReportSearch",
+  cb: (state, context) => {
+    state.activeState.value = "loading";
+    const article = context as ArticleResource;
+
+    fetchStream(
+      `/api/articles/enhance/${article.name}/`,
+      (chunk) => {
+        if (chunk.type === "error") {
+          state.activeState.value = "error";
+          state.loadingText.value = chunk.message;
+        } else if (chunk.type == "finished") {
+          state.loadingText.value = "Finished";
+          setTimeout(() => {
+            state.visible.value = false;
+            state.activeState.value = "normal";
+            globalThis.location.reload();
+          }, 500);
+        } else {
+          state.loadingText.value = chunk.message;
+        }
+      },
+      { method: "POST" },
+    );
+  },
+  visible: () => {
+    const loc = globalThis["location"];
+    if (!getCookie("session_cookie")) return false;
+
+    return (loc?.pathname?.includes("article") &&
+      !loc.pathname.endsWith("articles"));
+  },
+};

islands/KMenuButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from "@components/Button.tsx";
+import { IconMenu2 } from "@components/icons.tsx";
+import { isKMenuOpen } from "@lib/kmenu.ts";
+
+export default function KMenuButton() {
+  return (
+    <Button
+      class="fixed bottom-4 right-4 md:hidden bg-gray-800 text-white p-3 rounded-full shadow-lg z-50"
+      onClick={() => (isKMenuOpen.value = true)}
+    >
+      <IconMenu2 class="w-6 h-6" />
+    </Button>
+  );
+}

islands/Search.tsx

@@ -23,7 +23,7 @@ export async function fetchQueryResource(url: URL, type = "") {
       url.searchParams.set("status", "not-seen");
     }
     if (type) {
-      url.searchParams.set("types", type);
+      url.searchParams.set("type", type);
     }
     const response = await fetch(url);
     const jsonData = await response.json();
@@ -55,8 +55,8 @@ const SearchResultImage = ({ src }: { src: string }) => {
   return (
     <Image
       class="object-cover w-12 h-12 rounded-full"
-      width="50"
+      width={100}
-      height="50"
+      height={100}
       src={src}
       alt="preview image"
     />
@@ -114,6 +114,7 @@ const Search = (
   const searchQuery = useSignal(q);
   const data = useSignal<GenericResource[] | undefined>(results);
   const isLoading = useSignal(false);
+  const rating = useSignal<number | undefined>(undefined);
   const showSeenStatus = useSignal(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -122,8 +123,10 @@ const Search = (
     if (u.searchParams.get("q") !== searchQuery.value) {
       u.searchParams.set("q", searchQuery.value);
     }
-    if (showSeenStatus.value) {
+    if (showSeenStatus.value === true) {
       u.searchParams.set("rating", "0");
+    } else if (rating.value) {
+      u.searchParams.set("rating", rating.value.toString());
     } else {
       u.searchParams.delete("rating");
     }
@@ -162,7 +165,7 @@ const Search = (
 
   useEffect(() => {
     debouncedFetchData(); // Call the debounced fetch function with the updated search query
-  }, [searchQuery.value, showSeenStatus.value]);
+  }, [searchQuery.value, showSeenStatus.value, rating.value]);
 
   useEffect(() => {
     debouncedFetchData();
@@ -187,8 +190,12 @@ const Search = (
             onInput={handleInputChange}
           />
         </div>
-        <Checkbox label="seen" checked={showSeenStatus} />
+        <Checkbox label="unrated" checked={showSeenStatus} />
-        <Rating rating={4} />
+        <div
+          class={showSeenStatus.value ? "opacity-10" : ""}
+        >
+          <Rating rating={rating} />
+        </div>
       </header>
       {data.value?.length && !isLoading.value
         ? <SearchResultList showEmoji={!type} result={data.value} />

lib/env.ts

@@ -7,6 +7,7 @@ export const PROXY_PASSWORD = Deno.env.get("PROXY_PASSWORD");
 export const TMDB_API_KEY = Deno.env.get("TMDB_API_KEY");
 export const OPENAI_API_KEY = Deno.env.get("OPENAI_API_KEY");
 export const YOUTUBE_API_KEY = Deno.env.get("YOUTUBE_API_KEY");
+export const UNSPLASH_API_KEY = Deno.env.get("UNSPLASH_API_KEY");
 export const TELEGRAM_API_KEY = Deno.env.get("TELEGRAM_API_KEY")!;
 
 export const GITEA_SERVER = Deno.env.get("GITEA_SERVER");
@@ -18,6 +19,7 @@ const duration = Deno.env.get("SESSION_DURATION");
 export const SESSION_DURATION = duration ? +duration : (60 * 60 * 24);
 
 export const MARKA_API_KEY = Deno.env.get("MARKA_API_KEY");
+export const MARKA_API_URL = Deno.env.get("MARKA_API_URL");
 
 export const JWT_SECRET = Deno.env.get("JWT_SECRET");
 

lib/helpers.ts

@@ -31,19 +31,54 @@ export const fixRenderedMarkdown = (content: string) => {
     });
 };
 
-export async function fetchStream(url: string, cb: (chunk: string) => void) {
+type StreamMessage = {
-  const response = await fetch(url);
+  type: "info";
-  const reader = response?.body?.getReader();
+  message: string;
-  if (reader) {
+} | {
-    while (true) {
+  type: "error";
-      const { done, value } = await reader.read();
+  message: string;
-      if (done) return;
+} | {
-      const data = new TextDecoder().decode(value);
+  type: "warning";
-      data
+  message: string;
-        .split("$")
+} | {
-        .filter((d) => d && d.length)
+  type: "finished";
-        .map((d) => cb(Array.isArray(d) ? d[0] : d));
+  url: string;
-    }
+};
+
+export async function fetchStream(
+  url: string,
+  cb: (chunk: StreamMessage) => void,
+  init?: RequestInit,
+) {
+  const res = await fetch(url, init);
+  if (!res.body) return;
+
+  let buffer = "";
+  const reader = res.body
+    .pipeThrough(new TextDecoderStream())
+    .pipeThrough(
+      new TransformStream<string, string>({
+        transform(chunk, controller) {
+          buffer += chunk;
+          let idx;
+          while ((idx = buffer.indexOf("\n")) >= 0) {
+            const line = buffer.slice(0, idx).trim();
+            buffer = buffer.slice(idx + 1);
+            if (line) controller.enqueue(line);
+          }
+        },
+        flush(controller) {
+          const line = buffer.trim();
+          if (line) controller.enqueue(line);
+        },
+      }),
+    )
+    .getReader();
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    cb(JSON.parse(value));
   }
 }
 
@@ -58,32 +93,53 @@ export function hashString(message: string) {
 }
 
 export const createStreamResponse = () => {
-  let controller: ReadableStreamController<ArrayBufferView>;
+  const encoder = new TextEncoder();
-  const body = new ReadableStream({
+  let controller: ReadableStreamDefaultController<Uint8Array>;
-    start(cont) {
+
-      controller = cont;
+  const body = new ReadableStream<Uint8Array>({
+    start(c) {
+      controller = c;
     },
   });
 
   const response = new Response(body, {
     headers: {
-      "content-type": "text/plain",
+      // newline-delimited JSON
+      "content-type": "application/x-ndjson; charset=utf-8",
+      // prevent intermediaries from buffering/transforming
+      "cache-control": "no-cache, no-transform",
       "x-content-type-options": "nosniff",
+      // nginx hint to disable proxy buffering
+      "x-accel-buffering": "no",
+      // if you control compression, keep it off for streams
+      // "content-encoding": "identity",
     },
   });
 
-  function cancel() {
+  const send = (obj: unknown) => {
-    controller.close();
+    controller.enqueue(encoder.encode(JSON.stringify(obj) + "\n")); // ← delimiter
+  };
+  const cancel = () => controller.close();
+
+  function info(message: string) {
+    return send({ type: "info", message });
   }
 
-  function enqueue(chunk: string) {
+  function error(message: string) {
-    controller?.enqueue(new TextEncoder().encode("$" + chunk));
+    return send({ type: "error", message });
+  }
+
+  function warning(message: string) {
+    return send({ type: "warning", message });
   }
 
   return {
     response,
     cancel,
-    enqueue,
+    send,
+    info,
+    error,
+    warning,
   };
 };
 

lib/kmenu.ts

@@ -0,0 +1,3 @@
+import { signal } from "@preact/signals";
+
+export const isKMenuOpen = signal(false);

lib/log/fs.ts

@@ -41,7 +41,6 @@ export async function getLogs() {
           date: new Date(date),
         } as Log;
       });
-    console.log(logs);
 
     // Return the logs sorted by date
     return logs.sort((a, b) => a.date.getTime() - b.date.getTime());

lib/log/index.ts

@@ -38,13 +38,13 @@ export function createLogger(scope: string, _options?: LoggerOptions): Logger {
 export function loggerFromStream(stream: StreamResponse) {
   return {
     debug: (...data: unknown[]) =>
-      stream.enqueue(`${data.length > 1 ? data.join(" ") : data[0]}`),
+      stream.info(`${data.length > 1 ? data.join(" ") : data[0]}`),
     info: (...data: unknown[]) =>
-      stream.enqueue(`${data.length > 1 ? data.join(" ") : data[0]}`),
+      stream.info(`${data.length > 1 ? data.join(" ") : data[0]}`),
     error: (...data: unknown[]) =>
-      stream.enqueue(`[ERROR]: ${data.length > 1 ? data.join(" ") : data[0]}`),
+      stream.error(`[ERROR]: ${data.length > 1 ? data.join(" ") : data[0]}`),
     warn: (...data: unknown[]) =>
-      stream.enqueue(`[WARN]: ${data.length > 1 ? data.join(" ") : data[0]}`),
+      stream.warning(`[WARN]: ${data.length > 1 ? data.join(" ") : data[0]}`),
   };
 }
 

lib/marka/index.ts

@@ -1,10 +1,8 @@
-import { MARKA_API_KEY } from "../env.ts";
+import { createCache } from "../cache.ts";
+import { MARKA_API_KEY, MARKA_API_URL } from "../env.ts";
 import { getImage } from "../image.ts";
 import { GenericResource } from "./schema.ts";
 
-const url = `https://marka.max-richter.dev`;
-//const url = "http://localhost:8080";
-
 async function addImageToResource<T extends GenericResource>(
   resource: GenericResource,
 ): Promise<T> {
@@ -14,7 +12,7 @@ async function addImageToResource<T extends GenericResource>(
       const absoluteImageUrl = (imageUrl.startsWith("https://") ||
           imageUrl.startsWith("http://"))
         ? imageUrl
-        : `${url}/${imageUrl}`;
+        : `${MARKA_API_URL}/${imageUrl}`;
       const image = await getImage(absoluteImageUrl);
       return { ...resource, image } as T;
     } catch (e) {
@@ -24,34 +22,68 @@ async function addImageToResource<T extends GenericResource>(
   return resource as T;
 }
 
+type Resource = GenericResource & {
+  content: GenericResource["content"] & Array<GenericResource>;
+};
+
+const fetchCache = createCache<Resource>("marka");
+const cacheLock = new Map<string, Promise<Resource>>();
+
+async function fetchAndStoreUrl(url: string) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch resource: ${response.status}`);
+  }
+  const res = await response.json();
+  fetchCache.set(url, res);
+  return res;
+}
+
+async function cachedFetch(
+  url: string,
+): Promise<Resource | undefined> {
+  if (fetchCache.has(url)) {
+    fetchAndStoreUrl(url); // Fetch the url in the background
+    return fetchCache.get(url);
+  }
+
+  if (cacheLock.has(url)) return cacheLock.get(url);
+
+  const response = fetchAndStoreUrl(url);
+  cacheLock.set(url, response);
+
+  const res = await response;
+  cacheLock.delete(url);
+  return res;
+}
+
 export async function fetchResource<T extends GenericResource>(
   resource: string,
 ): Promise<T | undefined> {
   try {
-    const response = await fetch(
+    const d = `${MARKA_API_URL}/resources/${resource}`;
-      `${url}/resources/${resource}`,
+    const res = await cachedFetch(d);
-    );
+    if (!res) return;
-    const res = await response.json();
     return addImageToResource<T>(res);
   } catch (_e) {
     return;
   }
 }
 
-export async function listResources<T = GenericResource>(
+export async function listResources<T extends GenericResource>(
   resource: string,
 ): Promise<T[]> {
   try {
-    const response = await fetch(
+    const d = `${MARKA_API_URL}/resources/${resource}`;
-      `${url}/resources/${resource}`,
+    const list = await cachedFetch(d);
-    );
+    if (!list) return [];
-    const list = await response.json();
     return Promise.all(
       list?.content
-        .filter((a: GenericResource) => a?.content?._type)
+        .filter((a) => a?.content?._type)
-        .map((res: GenericResource) => addImageToResource(res)),
+        .map((res) => addImageToResource(res) as Promise<T>),
     );
   } catch (_e) {
+    console.log(`Failed to fetch resource: ${resource}`, _e);
     return [];
   }
 }
@@ -62,7 +94,7 @@ export async function createResource(
 ) {
   const isJson = typeof content === "object" &&
     !(content instanceof ArrayBuffer);
-  const fetchUrl = `${url}/resources/${path}`;
+  const fetchUrl = `${MARKA_API_URL}/resources/${path}`;
   const headers = new Headers();
   headers.append("Content-Type", isJson ? "application/json" : "");
   if (MARKA_API_KEY) {
@@ -74,7 +106,12 @@ export async function createResource(
     body: isJson ? JSON.stringify(content) : content,
   });
   if (!response.ok) {
-    throw new Error(`Failed to create resource: ${response.status}`);
+    const text = await response.text();
+    throw new Error(
+      `failed to create resource (resources/${path}): ${
+        text || response.status
+      }`,
+    );
   }
   return response.json();
 }

lib/openai.ts

@@ -195,6 +195,23 @@ respond with a plain unordered list each item starting with the year the movie w
   return recommendations;
 };
 
+export async function createUnsplashSearchTerm(content: string) {
+  if (!openAI) return;
+  const chatCompletion = await openAI.chat.completions.create({
+    model: model,
+    messages: [
+      {
+        role: "system",
+        content:
+          "Please respond with a search term for unsplash for the following article",
+      },
+      { role: "user", content: content.slice(0, 10_000) },
+    ],
+  });
+
+  return chatCompletion.choices[0].message.content?.toLowerCase();
+}
+
 export async function createTags(content: string) {
   if (!openAI) return;
   const chatCompletion = await openAI.chat.completions.create({

lib/playwright.ts

@@ -9,7 +9,7 @@ export async function fetchHtmlWithPlaywright(
   fetchUrl: string,
   streamResponse: ReturnType<typeof createStreamResponse>,
 ): Promise<string> {
-  streamResponse.enqueue("booting up playwright");
+  streamResponse.info("booting up playwright");
 
   const config: Parameters<typeof firefox.launch>[0] = {};
   if (env.PROXY_SERVER) {
@@ -24,7 +24,7 @@ export async function fetchHtmlWithPlaywright(
   // Launch the Playwright browser
   const browser = await firefox.launch(config);
 
-  streamResponse.enqueue("fetching html");
+  streamResponse.info("fetching html");
 
   try {
     // Open a new browser context and page
@@ -42,7 +42,7 @@ export async function fetchHtmlWithPlaywright(
 
     return html;
   } catch (error) {
-    streamResponse.enqueue("error fetching html");
+    streamResponse.error("error fetching html");
     console.error(error);
     return "";
   } finally {

lib/recipeSchema.ts

@@ -18,8 +18,9 @@ export const IngredientGroupSchema = z.object({
 export type IngredientGroup = z.infer<typeof IngredientGroupSchema>;
 
 const recipeSchema = z.object({
+  _type: z.literal("Recipe"),
   name: z.string().describe(
-    "Title of the Recipe, without the name of the website or author",
+    "Name of the Recipe, without the name of the website or author",
   ),
   description: z.string().describe(
     "Optional, short description of the recipe",
@@ -41,11 +42,7 @@ const recipeSchema = z.object({
 
 export type Recipe = z.infer<typeof recipeSchema>;
 
-const noRecipeSchema = z.object({
+const noRecipeSchema = z.literal("none").describe("No Recipe found");
-  errorMessages: z.array(z.string()).describe(
-    "List of error messages, if no recipe was found",
-  ),
-});
 
 export const recipeResponseSchema = z.union([recipeSchema, noRecipeSchema]);
 

lib/recommendation.ts

@@ -74,7 +74,7 @@ export function getRecommendation(
 }
 
 export async function getSimilarMovies(id: string) {
-  const recs = getRecommendation(id, "movie");
+  const recs = getRecommendation(id, "movies");
   if (!recs?.keywords?.length) return;
 
   const recommendations = await openai.getMovieRecommendations(

lib/resources.ts

@@ -1,26 +1,26 @@
 export const resources = {
   "home": {
-    emoji: "House with Garden.png",
+    emoji: "home_icon.png",
     name: "Home",
     link: "/",
   },
   "recipe": {
-    emoji: "Fork and Knife with Plate.png",
+    emoji: "recipes_icon.png",
     name: "Recipes",
     link: "/recipes",
   },
   "movie": {
-    emoji: "Popcorn.png",
+    emoji: "movies_icon.png",
     name: "Movies",
     link: "/movies",
   },
   "article": {
-    emoji: "Writing Hand Medium-Light Skin Tone.png",
+    emoji: "articles_icon.png",
     name: "Articles",
     link: "/articles",
   },
   "series": {
-    emoji: "Television.png",
+    emoji: "tv_series_icon.png",
     name: "Series",
     link: "/series",
   },

lib/search.ts

@@ -19,7 +19,7 @@ export function parseResourceUrl(_url: string | URL): SearchParams | undefined {
   try {
     const url = typeof _url === "string" ? new URL(_url) : _url;
     let query = url.searchParams.get("q") || "*";
-    if (!query) {
+    if (!(typeof query === "string")) {
       return undefined;
     }
     query = decodeURIComponent(query);
@@ -54,12 +54,14 @@ export async function searchResource(
   { q, tags = [], types, rating }: SearchParams,
 ): Promise<GenericResource[]> {
   const resources = (await Promise.all([
-    (!types || types.includes("movie")) && listResources("movies"),
+    (!types || types.includes("movies")) && listResources("movies"),
     (!types || types.includes("series")) && listResources("series"),
-    (!types || types.includes("article")) && listResources("articles"),
+    (!types || types.includes("articles")) && listResources("articles"),
-    (!types || types.includes("recipe")) && listResources("recipes"),
+    (!types || types.includes("recipes")) && listResources("recipes"),
   ])).flat().filter(isResource);
 
+  console.log({ types, rating, tags, q, resourceLength: resources.length });
+
   const results: Record<string, GenericResource> = {};
 
   for (const resource of resources) {
@@ -71,9 +73,18 @@ export async function searchResource(
       results[resource.name] = resource;
     }
 
+    // Select not-rated resources
     if (
-      !(resource.name in results) &&
+      rating === 0 &&
-      rating && resource.content.reviewRating?.ratingValue &&
+      resource.content?.reviewRating?.ratingValue === undefined
+    ) {
+      results[resource.name] = resource;
+    }
+
+    if (
+      typeof rating === "number" &&
+      rating !== 0 &&
+      resource.content.reviewRating?.ratingValue &&
       parseRating(resource.content.reviewRating.ratingValue) >= rating
     ) {
       results[resource.name] = resource;
@@ -81,6 +92,7 @@ export async function searchResource(
   }
 
   if (q.length && q !== "*") {
+    q = decodeURIComponent(q);
     const fuzzyResult = fuzzysort.go(q, resources, {
       keys: [
         "name",
@@ -92,6 +104,7 @@ export async function searchResource(
       ],
       threshold: 0.3,
     });
+    console.log({ fuzzyResult });
     for (const result of fuzzyResult) {
       results[result.obj.name] = result.obj;
     }

lib/string.ts

@@ -1,23 +1,37 @@
-export function formatDate(date: Date): string {
+export function formatDate(date?: string | Date): string {
+  if (!date) return "";
+  if (typeof date === "string") {
+    try {
+      const d = new Date(date);
+      return formatDate(d);
+    } catch (_e) {
+      return "";
+    }
+  }
   const options = { year: "numeric", month: "long", day: "numeric" } as const;
   return new Intl.DateTimeFormat("en-US", options).format(date);
 }
 
-export function safeFileName(inputString: string): string {
+export function safeFileName(input: string): string {
-  let fileName = inputString.toLowerCase();
+  return input
-  fileName = fileName.replace(/ /g, "_");
+    .normalize("NFKD")
-  fileName = fileName.replace(/[^\w.-]/g, "");
+    .replace(/[\u0300-\u036f]/g, "")
-  fileName = fileName.replaceAll(":", "");
+    .replace(/[\s-]+/g, "_")
-  return fileName;
+    .replace(/-+/g, "-")
+    .replace(/[^A-Za-z0-9_]+/g, "")
+    .replace(/_+/g, "_")
+    // Trim underscores/dots from ends and prevent leading dots
+    .replace(/^[_\.]+|[_\.]+$/g, "").replace(/^\.+/, "")
+    .toLowerCase();
 }
 
 export function toUrlSafeString(input: string): string {
   return input
-    .trim() // Remove leading and trailing whitespace
+    .normalize("NFKD")
-    .toLowerCase() // Convert to lowercase
+    .replace(/[\u0300-\u036f]/g, "")
-    .replace(/[^a-z0-9\s-]/g, "") // Remove non-alphanumeric characters except spaces and hyphens
+    .replace(/[^A-Za-z0-9 _-]+/g, "")
-    .replace(/\s+/g, "-") // Replace spaces with hyphens
+    .replace(/\s+/g, " ")
-    .replace(/-+/g, "-"); // Remove consecutive hyphens
+    .trim();
 }
 
 export function extractHashTags(inputString: string) {

lib/unsplash.ts

@@ -0,0 +1,29 @@
+import { UNSPLASH_API_KEY } from "./env.ts";
+
+const API_URL = "https://api.unsplash.com";
+
+export async function getImageBySearchTerm(
+  searchTerm: string,
+): Promise<string | undefined> {
+  if (!UNSPLASH_API_KEY) {
+    throw new Error("UNSPLASH_API_KEY is not set");
+  }
+
+  const url = new URL("/search/photos", API_URL);
+  url.searchParams.append("query", searchTerm);
+  url.searchParams.append("per_page", "1");
+  url.searchParams.append("orientation", "landscape");
+
+  const response = await fetch(url.toString(), {
+    headers: {
+      Authorization: `Client-ID ${UNSPLASH_API_KEY}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Unsplash API request failed: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  return data.results[0]?.urls?.regular;
+}

lib/webScraper.ts

@@ -1,6 +1,8 @@
 import { JSDOM } from "jsdom";
 import { fetchHtmlWithPlaywright } from "./playwright.ts";
 import { createStreamResponse } from "./helpers.ts";
+import { Defuddle } from "defuddle/node";
+import TurndownService from "turndown";
 
 /**
  * Mutates the given JSDOM instance: rewrites all relevant URL-bearing attributes
@@ -164,6 +166,8 @@ function absolutizeMetaRefresh(content: string, base: string): string {
   return `${delay}; url=${abs}`;
 }
 
+const turndownService = new TurndownService();
+
 export async function webScrape(
   url: string,
   streamResponse: ReturnType<typeof createStreamResponse>,
@@ -172,5 +176,12 @@ export async function webScrape(
   const html = await fetchHtmlWithPlaywright(url, streamResponse);
   const dom = new JSDOM(html);
   absolutizeDomUrls(dom, u.origin);
-  return dom;
+
+  const result = await Defuddle(dom, url);
+
+  return {
+    ...result,
+    dom: dom.window.document,
+    markdown: turndownService.turndown(result.content),
+  };
 }

lib/youtube.ts

@@ -74,6 +74,11 @@ export interface PageInfo {
   resultsPerPage: number;
 }
 
+export async function getYoutubeVideoCover(id: string): Promise<ArrayBuffer> {
+  const res = await fetch(`https://i.ytimg.com/vi/${id}/maxresdefault.jpg`);
+  return res.arrayBuffer();
+}
+
 export async function getYoutubeVideoDetails(
   id: string,
 ): Promise<Item> {
@@ -81,6 +86,5 @@ export async function getYoutubeVideoDetails(
     `${BASE_URL}videos?part=snippet%2CcontentDetails%2Cstatistics&id=${id}&key=${YOUTUBE_API_KEY}`,
   );
   const json = await response.json();
-
   return json?.items[0];
 }

routes/_app.tsx

@@ -1,11 +1,9 @@
+// deno-lint-ignore-file react-no-danger
 import { PageProps } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
-import { useEffect } from "preact/hooks";
 
 export default function App({ Component }: PageProps) {
-  const globalCss = Deno
+  const globalCss = Deno.readTextFileSync("./static/global.css");
-    .readTextFileSync("./static/global.css")
-    .replaceAll("\n", "");
 
   return (
     <html>
@@ -21,7 +19,19 @@ export default function App({ Component }: PageProps) {
         <meta name="msapplication-TileColor" content="#da532c" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#141218" />
-        <style>{globalCss}</style>
+        <link
+          rel="preload"
+          href="/fonts/work-sans-v18-latin-regular.woff2"
+          as="font"
+          type="font/woff2"
+        />
+        <link
+          rel="preload"
+          href="/fonts/work-sans-v18-latin-700.woff2"
+          as="font"
+          type="font/woff2"
+        />
+        <style dangerouslySetInnerHTML={{ __html: globalCss }} />
         <title>Memorium</title>
       </head>
       <body f-client-nav>

routes/_layout.tsx

@@ -2,6 +2,7 @@ import { PageProps } from "$fresh/server.ts";
 import { resources } from "@lib/resources.ts";
 import { Link } from "@islands/Link.tsx";
 import { Emoji } from "@components/Emoji.tsx";
+import KMenuButton from "@islands/KMenuButton.tsx";
 
 export default function MyLayout({ Component }: PageProps) {
   return (
@@ -23,12 +24,10 @@ export default function MyLayout({ Component }: PageProps) {
           })}
         </nav>
       </aside>
-      <main
+      <main class="py-5">
-        class="py-5"
-        style={{ fontFamily: "Work Sans" }}
-      >
         <Component />
       </main>
+      <KMenuButton />
     </div>
   );
 }

routes/admin/cache/index.tsx

@@ -20,7 +20,7 @@ export default function Greet(
     <MainLayout
       url={props.url}
       title="Recipes"
-      context={{ type: "recipe" }}
+      context={{ type: "recipes" }}
     >
       <code>
         <pre class="text-white">

routes/api/articles/create/index.ts

@@ -3,19 +3,78 @@ import { Defuddle } from "defuddle/node";
 import { AccessDeniedError, BadRequestError } from "@lib/errors.ts";
 import { createStreamResponse, isValidUrl } from "@lib/helpers.ts";
 import * as openai from "@lib/openai.ts";
+import * as unsplash from "@lib/unsplash.ts";
 import { getYoutubeVideoDetails } from "@lib/youtube.ts";
 import {
   extractYoutubeId,
+  formatDate,
   isYoutubeLink,
+  safeFileName,
   toUrlSafeString,
 } from "@lib/string.ts";
 import { createLogger } from "@lib/log/index.ts";
 import { createResource } from "@lib/marka/index.ts";
 import { webScrape } from "@lib/webScraper.ts";
 import { ArticleResource } from "@lib/marka/schema.ts";
+import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
 
 const log = createLogger("api/article");
 
+async function getUnsplashCoverImage(
+  content: string,
+  streamResponse: ReturnType<typeof createStreamResponse>,
+): Promise<string | undefined> {
+  try {
+    streamResponse.info("creating unsplash search term");
+    const searchTerm = await openai.createUnsplashSearchTerm(content);
+    if (!searchTerm) return;
+    streamResponse.info(`searching for ${searchTerm}`);
+    const unsplashUrl = await unsplash.getImageBySearchTerm(searchTerm);
+    return unsplashUrl;
+  } catch (e) {
+    log.error("Failed to get unsplash cover image", e);
+    return undefined;
+  }
+}
+
+function ext(str: string) {
+  try {
+    const u = new URL(str);
+    if (u.searchParams.has("fm")) {
+      return u.searchParams.get("fm")!;
+    }
+    return fileExtension(u.pathname);
+  } catch (_e) {
+    return fileExtension(str);
+  }
+}
+
+async function fetchAndStoreCover(
+  imageUrl: string | undefined,
+  title: string,
+  streamResponse?: ReturnType<typeof createStreamResponse>,
+): Promise<string | undefined> {
+  if (!imageUrl) return;
+  const imagePath = `articles/images/${safeFileName(title)}_cover.${
+    ext(imageUrl)
+  }`;
+  try {
+    streamResponse?.info("downloading image");
+    const res = await fetch(imageUrl);
+    streamResponse?.info("saving image");
+    if (!res.ok) {
+      console.log(`Failed to download remote image: ${imageUrl}`, res.status);
+      return;
+    }
+    const buffer = await res.arrayBuffer();
+    await createResource(imagePath, buffer);
+    return `resources/${imagePath}`;
+  } catch (err) {
+    console.log(`Failed to save image: ${imageUrl}`, err);
+    return;
+  }
+}
+
 async function processCreateArticle(
   { fetchUrl, streamResponse }: {
     fetchUrl: string;
@@ -24,36 +83,48 @@ async function processCreateArticle(
 ) {
   log.info("create article from url", { url: fetchUrl });
 
-  streamResponse.enqueue("downloading article");
+  streamResponse.info("downloading article");
 
-  const doc = await webScrape(fetchUrl, streamResponse);
+  const result = await webScrape(fetchUrl, streamResponse);
 
-  const result = await Defuddle(doc, fetchUrl, {
+  log.debug("downloaded and parse parsed", result);
-    markdown: true,
-  });
 
-  log.debug("downloaded and parse parsed", {
+  streamResponse.info("parsed article, creating tags with openai");
-    url: fetchUrl,
-    content: result.content,
-  });
 
-  streamResponse.enqueue("parsed article, creating tags with openai");
+  const aiMeta = await openai.extractArticleMetadata(result.markdown);
 
-  const aiMeta = await openai.extractArticleMetadata(result.content);
+  streamResponse.info("postprocessing article");
-
-  streamResponse.enqueue("postprocessing article");
 
   const title = result?.title || aiMeta?.headline || "";
-  const id = toUrlSafeString(title);
+
+  let coverImagePath: string | undefined = undefined;
+  if (result?.image?.length) {
+    log.debug("using local image for cover image", { image: result.image });
+    coverImagePath = await fetchAndStoreCover(
+      result.image,
+      title,
+      streamResponse,
+    );
+  } else {
+    const urlPath = await getUnsplashCoverImage(
+      result.markdown,
+      streamResponse,
+    );
+    coverImagePath = await fetchAndStoreCover(urlPath, title, streamResponse);
+    log.debug("using unsplash for cover image", { image: coverImagePath });
+  }
+
+  const url = toUrlSafeString(title);
 
   const newArticle: ArticleResource["content"] = {
     _type: "Article",
     headline: title,
-    articleBody: result.content,
+    articleBody: result.markdown,
     url: fetchUrl,
-    datePublished: result?.published || aiMeta?.datePublished ||
+    datePublished: formatDate(
-      new Date().toISOString(),
+      result?.published || aiMeta?.datePublished || undefined,
-    image: result?.image,
+    ),
+    image: coverImagePath,
     author: {
       _type: "Person",
       name: (result.schemaOrgData?.author?.name || aiMeta?.author || "")
@@ -64,11 +135,16 @@ async function processCreateArticle(
     },
   } as const;
 
-  streamResponse.enqueue("writing to disk");
+  streamResponse.info("writing to disk");
 
-  await createResource(`articles/${id}.md`, newArticle);
+  log.debug("writing to disk", {
+    ...newArticle,
+    articleBody: newArticle.articleBody?.slice(0, 200),
+  });
 
-  streamResponse.enqueue("id: " + id);
+  await createResource(`articles/${url}.md`, newArticle);
+
+  streamResponse.send({ type: "finished", url });
 }
 
 async function processCreateYoutubeVideo(
@@ -81,36 +157,48 @@ async function processCreateYoutubeVideo(
     url: fetchUrl,
   });
 
-  streamResponse.enqueue("getting video infos from youtube api");
+  streamResponse.info("getting video infos from youtube api");
 
   const youtubeId = extractYoutubeId(fetchUrl);
 
   const video = await getYoutubeVideoDetails(youtubeId);
 
-  streamResponse.enqueue("shortening title with openai");
+  streamResponse.info("shortening title with openai");
-  const newId = await openai.shortenTitle(video.snippet.title);
+  const videoTitle = await openai.shortenTitle(video.snippet.title) ||
+    video.snippet.title;
 
-  const id = newId || youtubeId;
+  const thumbnail = video?.snippet?.thumbnails?.maxres;
+  const coverImagePath = await fetchAndStoreCover(
+    thumbnail.url,
+    videoTitle || video.snippet.title,
+    streamResponse,
+  );
 
   const newArticle: ArticleResource["content"] = {
     _type: "Article",
     headline: video.snippet.title,
     articleBody: video.snippet.description,
+    image: coverImagePath,
     url: fetchUrl,
-    datePublished: new Date(video.snippet.publishedAt).toISOString(),
+    datePublished: formatDate(video.snippet.publishedAt),
     author: {
       _type: "Person",
       name: video.snippet.channelTitle,
     },
   };
 
-  streamResponse.enqueue("creating article");
+  streamResponse.info("creating article");
 
-  await createResource(`articles/${id}.md`, newArticle);
+  const filename = toUrlSafeString(videoTitle);
 
-  streamResponse.enqueue("finished");
+  await createResource(
+    `articles/${filename}.md`,
+    newArticle,
+  );
 
-  streamResponse.enqueue("id: " + id);
+  streamResponse.info("finished");
+
+  streamResponse.send({ type: "finished", url: filename });
 }
 
 export const handler: Handlers = {

routes/api/articles/enhance/[name].ts

@@ -0,0 +1,191 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
+import { formatDate, safeFileName } from "@lib/string.ts";
+import { createStreamResponse } from "@lib/helpers.ts";
+import {
+  AccessDeniedError,
+  BadRequestError,
+  NotFoundError,
+} from "@lib/errors.ts";
+import { createResource, fetchResource } from "@lib/marka/index.ts";
+import { ArticleResource } from "@lib/marka/schema.ts";
+import { webScrape } from "@lib/webScraper.ts";
+import * as openai from "@lib/openai.ts";
+import * as unsplash from "@lib/unsplash.ts";
+import { createLogger } from "@lib/log/index.ts";
+
+function ext(str: string) {
+  try {
+    const u = new URL(str);
+    if (u.searchParams.has("fm")) {
+      return u.searchParams.get("fm")!;
+    }
+    return fileExtension(u.pathname);
+  } catch (_e) {
+    return fileExtension(str);
+  }
+}
+
+const log = createLogger("api/article/enhance");
+
+async function getUnsplashCoverImage(
+  content: string,
+  streamResponse: ReturnType<typeof createStreamResponse>,
+): Promise<string | undefined> {
+  try {
+    streamResponse.info("creating unsplash search term");
+    const searchTerm = await openai.createUnsplashSearchTerm(content);
+    if (!searchTerm) return;
+    streamResponse.info(`searching for ${searchTerm}`);
+    const unsplashUrl = await unsplash.getImageBySearchTerm(searchTerm);
+    return unsplashUrl;
+  } catch (e) {
+    log.error("Failed to get unsplash cover image", e);
+    return undefined;
+  }
+}
+
+async function fetchAndStoreCover(
+  imageUrl: string | undefined,
+  title: string,
+  streamResponse: ReturnType<typeof createStreamResponse>,
+): Promise<string | undefined> {
+  if (!imageUrl) return;
+  const imagePath = `articles/images/${safeFileName(title)}_cover.${
+    ext(imageUrl)
+  }`;
+  try {
+    streamResponse.info("downloading cover");
+    const res = await fetch(imageUrl);
+    if (!res.ok) {
+      log.error(`Failed to download remote image: ${imageUrl}`, {
+        status: res.status,
+      });
+      return;
+    }
+    const buffer = await res.arrayBuffer();
+    streamResponse.info("saving cover");
+    await createResource(imagePath, buffer);
+    return `resources/${imagePath}`;
+  } catch (err) {
+    log.error(`Failed to save image: ${imageUrl}`, err);
+    return;
+  }
+}
+
+async function processEnhanceArticle(
+  name: string,
+  streamResponse: ReturnType<typeof createStreamResponse>,
+) {
+  const article = await fetchResource<ArticleResource>(
+    `articles/${name}`,
+  );
+  if (!article) {
+    throw new NotFoundError();
+  }
+
+  const fetchUrl = article.content?.url;
+  if (!fetchUrl) {
+    throw new BadRequestError("Article has no URL to enhance from.");
+  }
+
+  log.info("enhancing article from url", { url: fetchUrl });
+  streamResponse.info("scraping url");
+  const result = await webScrape(fetchUrl, streamResponse);
+
+  streamResponse.info("parsing content");
+
+  log.debug("downloaded and parsed", result);
+
+  streamResponse.info("extracting metadata with openai");
+  const aiMeta = await openai.extractArticleMetadata(result.markdown);
+
+  const title = result?.title || aiMeta?.headline ||
+    article.content?.headline || "";
+
+  article.content ??= {
+    _type: "Article",
+    headline: title,
+    url: fetchUrl,
+  };
+
+  article.content.articleBody = result.markdown;
+  article.content.datePublished ??= formatDate(
+    result?.published || aiMeta?.datePublished || undefined,
+  );
+
+  if (!article.content.author?.name || article.content.author.name === "") {
+    article.content.author = {
+      _type: "Person",
+      name: (result.schemaOrgData?.author?.name || aiMeta?.author || "")
+        .replace(
+          "@",
+          "twitter:",
+        ),
+    };
+  }
+
+  if (!article.content.image) {
+    let coverImagePath: string | undefined = undefined;
+    if (result?.image?.length) {
+      log.debug("using local image for cover image", { image: result.image });
+      coverImagePath = await fetchAndStoreCover(
+        result.image,
+        title,
+        streamResponse,
+      );
+    } else {
+      const urlPath = await getUnsplashCoverImage(
+        result.content,
+        streamResponse,
+      );
+      coverImagePath = await fetchAndStoreCover(urlPath, title, streamResponse);
+      log.debug("using unsplash for cover image", { image: coverImagePath });
+    }
+    if (coverImagePath) {
+      article.content.image = coverImagePath;
+    }
+  }
+
+  log.debug("writing to disk", {
+    name: name,
+    article: {
+      ...article,
+      content: {
+        ...article.content,
+        articleBody: article.content.articleBody?.slice(0, 200),
+      },
+    },
+  });
+
+  streamResponse.info("writing to disk");
+  await createResource(`articles/${name}`, article.content);
+  streamResponse.send({ type: "finished", url: name.replace(/$\.md/, "") });
+}
+
+const POST = (
+  _req: Request,
+  ctx: FreshContext,
+): Response => {
+  const session = ctx.state.session;
+  if (!session) {
+    throw new AccessDeniedError();
+  }
+
+  const streamResponse = createStreamResponse();
+
+  processEnhanceArticle(ctx.params.name, streamResponse)
+    .catch((err) => {
+      log.error(err);
+      streamResponse.error(err.message);
+    })
+    .finally(() => {
+      streamResponse.cancel();
+    });
+
+  return streamResponse.response;
+};
+
+export const handler: Handlers = {
+  POST,
+};

routes/api/index.ts

@@ -2,7 +2,7 @@ import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
 
 export const handler: Handlers = {
-  async GET() {
+  GET() {
     return json([]);
   },
 };

routes/api/movies/[name].ts

@@ -2,8 +2,13 @@ import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
 import * as tmdb from "@lib/tmdb.ts";
 import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
-import { isString, safeFileName } from "@lib/string.ts";
+import {
-import { AccessDeniedError } from "@lib/errors.ts";
+  formatDate,
+  isString,
+  safeFileName,
+  toUrlSafeString,
+} from "@lib/string.ts";
+import { AccessDeniedError, BadRequestError } from "@lib/errors.ts";
 import { createResource, fetchResource } from "@lib/marka/index.ts";
 import { ReviewResource } from "@lib/marka/schema.ts";
 
@@ -14,26 +19,22 @@ export const handler: Handlers = {
   },
   async POST(_, ctx) {
     const session = ctx.state.session;
-    if (!session) {
+    if (!session) throw new AccessDeniedError();
-      throw new AccessDeniedError();
-    }
 
     const tmdbId = parseInt(ctx.params.name);
+    if (Number.isNaN(tmdbId)) throw new BadRequestError();
 
-    const movieDetails = await tmdb.getMovie(tmdbId);
+    const [movieDetails, movieCredits] = await Promise.all([
-    const movieCredits = await tmdb.getMovieCredits(tmdbId);
+      tmdb.getMovie(tmdbId),
+      tmdb.getMovieCredits(tmdbId),
+    ]);
 
-    const releaseDate = movieDetails.release_date;
+    const name = movieDetails.title ||
-    const posterPath = movieDetails.poster_path;
+      movieDetails.original_title ||
-    const director = movieCredits?.crew?.filter?.((person) =>
-      person.job === "Director"
-    )[0];
-
-    movieDetails.overview;
-
-    let finalPath = "";
-    const name = movieDetails.title || movieDetails.original_title ||
       ctx.params.name;
+
+    const posterPath = movieDetails.poster_path;
+    let finalPath = "";
     if (posterPath) {
       const poster = await tmdb.getMoviePoster(posterPath);
       const extension = fileExtension(posterPath);
@@ -41,33 +42,32 @@ export const handler: Handlers = {
       await createResource(finalPath, poster);
     }
 
-    const tags: string[] = [];
+    const keywords = movieDetails.genres
-    if (movieDetails.genres) {
+      ?.map((g) => g.name?.toLowerCase())
-      tags.push(
+      .filter(isString) || [];
-        ...movieDetails.genres.map((g) => g.name?.toLowerCase()).filter(
-          isString,
-        ),
-      );
-    }
 
     const movie: ReviewResource["content"] = {
       _type: "Review",
       image: `resources/${finalPath}`,
-      datePublished: releaseDate,
+      datePublished: formatDate(movieDetails.release_date),
       tmdbId,
       author: {
         _type: "Person",
-        name: director?.name,
+        name: movieCredits.crew?.filter?.((person) =>
+          person.job === "Director"
+        )[0]?.name,
       },
       itemReviewed: {
-        name: name,
+        name,
       },
       reviewBody: "",
-      keywords: tags,
+      keywords,
     };
 
-    await createResource(`movies/${safeFileName(name)}.md`, movie);
+    const fileName = toUrlSafeString(name);
 
-    return json(movie);
+    await createResource(`movies/${fileName}.md`, movie);
+
+    return json({ name: fileName });
   },
 };

routes/api/movies/enhance/[name].ts

@@ -1,7 +1,12 @@
 import { FreshContext, Handlers } from "$fresh/server.ts";
 import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
 import * as tmdb from "@lib/tmdb.ts";
-import { formatDate, isString, safeFileName } from "@lib/string.ts";
+import {
+  formatDate,
+  isString,
+  safeFileName,
+  toUrlSafeString,
+} from "@lib/string.ts";
 import { json } from "@lib/helpers.ts";
 import {
   AccessDeniedError,
@@ -39,15 +44,16 @@ const POST = async (
   const movieCredits = !movie.content?.author &&
     await tmdb.getMovieCredits(tmdbId);
 
-  const releaseDate = movieDetails.release_date;
-  if (releaseDate && !movie.content?.datePublished) {
-    movie.content = movie.content || {};
-    movie.content.datePublished = formatDate(new Date(releaseDate));
-  }
   const director = movieCredits &&
     movieCredits?.crew?.filter?.((person) => person.job === "Director")[0];
+
+  movie.content ??= {
+    _type: "Review",
+  };
+
+  movie.content.datePublished ??= formatDate(movieDetails.release_date);
+
   if (director && !movie.content?.author) {
-    movie.content = movie.content || {};
     movie.content.author = {
       _type: "Person",
       name: director.name,
@@ -65,22 +71,19 @@ const POST = async (
     ];
   }
 
-  if (!movie.name) {
+  movie.content.tmdbId ??= tmdbId;
-    movie.name = tmdbId;
-  }
 
   let finalPath = "";
   const posterPath = movieDetails.poster_path;
-  if (posterPath && !movie.content?.image) {
+  if (posterPath && !movie.content.image) {
     const poster = await tmdb.getMoviePoster(posterPath);
     const extension = fileExtension(posterPath);
     finalPath = `movies/images/${safeFileName(name)}_cover.${extension}`;
     await createResource(finalPath, poster);
-    movie.content = movie.content || {};
     movie.content.image = finalPath;
   }
 
-  await createResource(`movies/${safeFileName(movie.name)}.md`, movie);
+  await createResource(`movies/${toUrlSafeString(movie.name)}.md`, movie);
 
   createRecommendationResource(movie, movieDetails.overview);
 

routes/api/query/index.ts

@@ -1,7 +1,7 @@
 import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
-import { AccessDeniedError } from "@lib/errors.ts";
+import { AccessDeniedError, BadRequestError } from "@lib/errors.ts";
-import { searchResource } from "@lib/search.ts";
+import { parseResourceUrl, searchResource } from "@lib/search.ts";
 
 export const handler: Handlers = {
   async GET(req, ctx) {
@@ -10,18 +10,13 @@ export const handler: Handlers = {
       throw new AccessDeniedError();
     }
 
-    const url = new URL(req.url);
+    const s = parseResourceUrl(req.url);
+    if (!s) {
+      throw new BadRequestError();
+    }
 
-    const types = url.searchParams.get("types")?.split(",");
+    console.log(s);
-    const tags = url.searchParams?.get("tags")?.split(",");
+    const resources = await searchResource(s);
-    const authors = url.searchParams?.get("authors")?.split(",");
-
-    const resources = await searchResource({
-      q: url.searchParams.get("q") || "",
-      types,
-      tags,
-      authors,
-    });
 
     return json(resources);
   },

routes/api/recipes/create/index.ts

@@ -5,12 +5,11 @@ import * as openai from "@lib/openai.ts";
 import { createLogger } from "@lib/log/index.ts";
 import recipeSchema from "@lib/recipeSchema.ts";
 import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
-import { safeFileName } from "@lib/string.ts";
+import { safeFileName, toUrlSafeString } from "@lib/string.ts";
 import { parseJsonLdToRecipeSchema } from "./parseJsonLd.ts";
 import z from "zod";
 import { createResource } from "@lib/marka/index.ts";
 import { webScrape } from "@lib/webScraper.ts";
-import { Defuddle } from "defuddle/node";
 import { RecipeResource } from "@lib/marka/schema.ts";
 
 const log = createLogger("api/article");
@@ -23,18 +22,14 @@ async function processCreateRecipeFromUrl(
 ) {
   log.info("create article from url", { url: fetchUrl });
 
-  streamResponse.enqueue("downloading article");
+  streamResponse.info("downloading article");
 
-  const doc = await webScrape(fetchUrl, streamResponse);
+  const result = await webScrape(fetchUrl, streamResponse);
 
-  const result = await Defuddle(doc, fetchUrl, {
+  streamResponse.info("download success");
-    markdown: true,
-  });
-
-  streamResponse.enqueue("download success");
 
   const jsonLds = Array.from(
-    doc?.querySelectorAll(
+    result.dom?.querySelectorAll(
       "script[type='application/ld+json']",
     ),
   ) as unknown as HTMLScriptElement[];
@@ -42,26 +37,26 @@ async function processCreateRecipeFromUrl(
   let recipe: z.infer<typeof recipeSchema> | undefined = undefined;
   if (jsonLds.length > 0) {
     for (const jsonLd of jsonLds) {
-      recipe = parseJsonLdToRecipeSchema(jsonLd.textContent || "");
+      if (jsonLd.textContent) {
-      if (recipe) break;
+        recipe = parseJsonLdToRecipeSchema(jsonLd.textContent);
+        if (recipe) break;
+      }
     }
   }
 
   if (!recipe) {
-    const res = await openai.extractRecipe(result.content);
+    const res = await openai.extractRecipe(result.markdown);
-    if (!res || "errorMessages" in res) {
+    if (!res || res === "none") {
-      const errorMessage = res?.errorMessages?.[0] ||
+      streamResponse.error(`failed to extract recipe: ${res}`);
-        "could not extract recipe";
-      streamResponse.enqueue(`failed to extract recipe: ${errorMessage}`);
       return;
     }
     recipe = res;
   }
 
-  const id = safeFileName(recipe?.name || "");
+  const id = toUrlSafeString(recipe?.name || "");
 
   if (!recipe) {
-    streamResponse.enqueue("failed to parse recipe");
+    streamResponse.error("failed to parse recipe");
     streamResponse.cancel();
     return;
   }
@@ -76,28 +71,26 @@ async function processCreateRecipeFromUrl(
   };
 
   if (newRecipe?.image && newRecipe.image.length > 5) {
-    const extension = fileExtension(new URL(newRecipe.image).pathname);
+    const extension = fileExtension(newRecipe.image);
-    const finalPath = `resources/recipes/images/${
+    const finalPath = `recipes/images/${safeFileName(id)}_cover.${extension}`;
-      safeFileName(id)
+    streamResponse.info("downloading image");
-    }_cover.${extension}`;
-    streamResponse.enqueue("downloading image");
     try {
-      streamResponse.enqueue("downloading image");
+      streamResponse.info("downloading image");
       const res = await fetch(newRecipe.image);
-      streamResponse.enqueue("saving image");
+      streamResponse.info("saving image");
       const buffer = await res.arrayBuffer();
       await createResource(finalPath, buffer);
-      newRecipe.image = finalPath;
+      newRecipe.image = `resources/${finalPath}`;
     } catch (err) {
       console.log("Failed to save image", err);
     }
   }
 
-  streamResponse.enqueue("finished processing, creating file");
+  streamResponse.info("finished processing, creating file");
 
   await createResource(`recipes/${id}.md`, newRecipe);
 
-  streamResponse.enqueue("id: " + id);
+  streamResponse.send({ type: "finished", url: id });
 }
 
 export const handler: Handlers = {
@@ -119,7 +112,7 @@ export const handler: Handlers = {
     processCreateRecipeFromUrl({ fetchUrl, streamResponse }).then((article) => {
       log.debug("created article from link", { article });
     }).catch((err) => {
-      streamResponse.enqueue(`error creating recipe: ${err}`);
+      streamResponse.error(`creating recipe: ${err}`);
       log.error(err);
     }).finally(() => {
       streamResponse.cancel();

routes/api/recipes/create/parseJsonLd.ts

@@ -1,5 +1,4 @@
-import recipeSchema from "@lib/recipeSchema.ts";
+import recipeSchema, { Recipe } from "@lib/recipeSchema.ts";
-import { parseIngredients } from "@lib/parseIngredient.ts";
 
 export function parseJsonLdToRecipeSchema(jsonLdContent: string) {
   try {
@@ -19,12 +18,7 @@ export function parseJsonLdToRecipeSchema(jsonLdContent: string) {
       return;
     }
 
-    // Map and parse ingredients into the new schema
+    const recipeInstructions = Array.isArray(data.recipeInstructions)
-    const ingredients = parseIngredients(
-      data?.recipeIngredient?.join("\n") || "",
-    );
-
-    const instructions = Array.isArray(data.recipeInstructions)
       ? data.recipeInstructions.map((instr: unknown) => {
         if (!instr) return "";
         if (typeof instr === "string") return instr;
@@ -36,43 +30,41 @@ export function parseJsonLdToRecipeSchema(jsonLdContent: string) {
       : [];
 
     // Parse servings
-    const servings = parseServings(data.recipeYield);
+    const recipeYield = parseServings(data.recipeYield);
 
     // Parse times
-    const prepTime = parseDuration(data.prepTime);
-    const cookTime = parseDuration(data.cookTime);
     const totalTime = parseDuration(data.totalTime);
 
     // Extract tags
-    const tags = data.keywords
+    const keywords = data.keywords
       ? Array.isArray(data.keywords)
         ? data.keywords
         : data.keywords.split(",").map((tag: string) => tag.trim())
       : [];
 
     // Build the recipe object
-    const recipe = {
+    const recipe: Recipe = {
       _type: "Recipe",
-      title: data.name || "Unnamed Recipe",
+      name: data.name || "Unnamed Recipe",
       image: pickImage(image || data.image || ""),
-      author: Array.isArray(data.author)
+      author: {
-        ? data.author.map((a: { name: string }) => a.name).join(", ")
+        "_type": "Person",
-        : data.author?.name || "",
+        name: Array.isArray(data.author)
+          ? data.author.map((a: { name: string }) => a.name).join(", ")
+          : data.author?.name || "",
+      },
       description: data.description || "",
-      ingredients,
+      recipeIngredient: data.recipeIngredient,
-      instructions,
+      recipeInstructions,
-      servings,
+      recipeYield,
-      prepTime,
-      cookTime,
       totalTime,
-      tags,
+      keywords,
-      notes: data.notes || [],
     };
 
     // Validate against the schema
     return recipeSchema.parse(recipe);
   } catch (error) {
-    console.error("Invalid JSON-LD content or parsing error:", error);
+    console.log("Invalid JSON-LD content or parsing error:", error);
     return undefined;
   }
 }

routes/api/recommendation/all.ts

@@ -21,7 +21,7 @@ async function processUpdateRecommendations(
     return true;
   }) as ReviewResource[];
 
-  streamResponse.enqueue("Fetched all movies");
+  streamResponse.info("fetched all movies");
 
   let done = 0;
   const total = movies.length;
@@ -41,7 +41,7 @@ async function processUpdateRecommendations(
       console.log(err);
     }
     done++;
-    streamResponse.enqueue(
+    streamResponse.info(
       `${Math.floor((done / total) * 100)}% [${
         done + 1
       }/${total}] ${movie.name}`,
@@ -50,7 +50,7 @@ async function processUpdateRecommendations(
     console.log(err);
   });
 
-  streamResponse.enqueue("100% Finished");
+  streamResponse.info("100% Finished");
 }
 
 export const handler: Handlers = {

routes/api/series/[name].ts

@@ -2,10 +2,19 @@ import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
 import * as tmdb from "@lib/tmdb.ts";
 import { fileExtension } from "https://deno.land/x/file_extension@v2.1.0/mod.ts";
-import { isString, safeFileName } from "@lib/string.ts";
+import { formatDate, isString, safeFileName } from "@lib/string.ts";
-import { AccessDeniedError } from "@lib/errors.ts";
+import { AccessDeniedError, BadRequestError } from "@lib/errors.ts";
 import { createResource, fetchResource } from "@lib/marka/index.ts";
 import { ReviewResource } from "@lib/marka/schema.ts";
+import { toUrlSafeString } from "@lib/string.ts";
+
+function pickDirector(
+  credits: Awaited<ReturnType<typeof tmdb.getSeriesCredits>>,
+  createdBy?: { name?: string }[],
+): string | undefined {
+  const crewDirector = credits?.crew?.find?.((p) => p.job === "Director");
+  return crewDirector?.name ?? createdBy?.[0]?.name;
+}
 
 export const handler: Handlers = {
   async GET(_, ctx) {
@@ -19,54 +28,54 @@ export const handler: Handlers = {
     }
 
     const tmdbId = parseInt(ctx.params.name);
+    if (Number.isNaN(tmdbId)) throw new BadRequestError();
 
-    const seriesDetails = await tmdb.getSeries(tmdbId);
+    const [seriesDetails, seriesCredits] = await Promise.all([
-    const seriesCredits = await tmdb.getSeriesCredits(tmdbId);
+      tmdb.getSeries(tmdbId),
+      tmdb.getSeriesCredits(tmdbId),
+    ]);
 
-    const releaseDate = seriesDetails.first_air_date;
+    const name = seriesDetails.name ||
-    const posterPath = seriesDetails.poster_path;
+      seriesDetails.original_name ||
-    const director =
+      ctx.params.name;
-      seriesCredits?.crew?.filter?.((person) => person.job === "Director")[0] ||
-      seriesDetails.created_by?.[0];
 
     let finalPath = "";
-    const name = seriesDetails.name || seriesDetails.original_name ||
+    const posterPath = seriesDetails.poster_path;
-      ctx.params.name;
     if (posterPath) {
       const poster = await tmdb.getMoviePoster(posterPath);
       const extension = fileExtension(posterPath);
-
+      const imagePath = `series/images/${
-      finalPath = `series/images/${safeFileName(name)}_cover.${extension}`;
+        safeFileName(name)
-      await createResource(finalPath, poster);
+      }_cover.${extension}`;
+      await createResource(imagePath, poster);
+      finalPath = imagePath;
     }
 
-    const tags: string[] = [];
+    const keywords = seriesDetails.genres
-    if (seriesDetails.genres) {
+      ?.map((g) => g.name?.toLowerCase())
-      tags.push(
+      .filter(isString) ??
-        ...seriesDetails.genres.map((g) => g.name?.toLowerCase()).filter(
+      [];
-          isString,
-        ),
-      );
-    }
 
     const series: ReviewResource["content"] = {
       _type: "Review",
       image: `resources/${finalPath}`,
-      datePublished: releaseDate,
+      datePublished: formatDate(seriesDetails.first_air_date),
       tmdbId,
       author: {
         _type: "Person",
-        name: director?.name,
+        name: pickDirector(seriesCredits, seriesDetails?.created_by),
       },
       itemReviewed: {
         name: name,
       },
       reviewBody: "",
-      keywords: tags,
+      keywords: keywords,
     };
 
-    await createResource(`series/${safeFileName(name)}.md`, series);
+    const fileName = toUrlSafeString(name);
 
-    return json(series);
+    await createResource(`series/${fileName}.md`, series);
+
+    return json({ name: fileName });
   },
 };

routes/api/tmdb/query.ts

@@ -19,9 +19,9 @@ const GET = async (
     throw new BadRequestError();
   }
 
-  const type = u.searchParams.get("type") || "movie";
+  const type = u.searchParams.get("type") || "movies";
 
-  const res = type === "movie"
+  const res = type === "movies"
     ? await searchMovie(query)
     : await searchTVShow(query);
 

routes/articles/[name].tsx

@@ -50,7 +50,7 @@ export default function Greet(
       context={article}
     >
       <RedirectSearchHandler />
-      <KMenu type="main" context={{ type: "article" }} />
+      <KMenu type="main" context={article} />
       <MetaTags resource={article} />
 
       <PageHero

routes/articles/index.tsx

@@ -17,7 +17,7 @@ export const handler: Handlers<
     const articles = await listResources<ArticleResource>("articles");
     const searchParams = parseResourceUrl(req.url);
     const searchResults = searchParams &&
-      await searchResource({ ...searchParams, types: ["article"] });
+      await searchResource({ ...searchParams, types: ["articles"] });
     return ctx.render({ articles, searchResults });
   },
 };
@@ -32,7 +32,7 @@ export default function Greet(
     <MainLayout
       url={props.url}
       title="Articles"
-      context={{ type: "article" }}
+      context={{ type: "articles" }}
       searchResults={searchResults}
     >
       <header class="flex gap-4 items-center mb-5 md:hidden">
@@ -47,10 +47,11 @@ export default function Greet(
         <h3 class="text-2xl text-white font-light">📝 Articles</h3>
       </header>
       <RedirectSearchHandler />
-      <KMenu type="main" context={{ type: "article" }} />
+      <KMenu type="main" context={{ type: "articles" }} />
       <Grid>
-        {articles?.map((doc) => (
+        {articles?.map((doc, i) => (
           <ResourceCard
+            key={doc.name || i}
             sublink="articles"
             res={doc}
           />

routes/index.tsx

@@ -12,14 +12,12 @@ export default function Home(props: PageProps) {
       <RedirectSearchHandler />
       <KMenu type="main" context={false} />
       <MainLayout url={props.url}>
-        <h1 class="text-4xl mb-4 mt-3 text-white flex gap-2">
-          <img src="/favicon.png" class="w-8 h-8 inline" />
-          Resources
-        </h1>
         <div class="flex flex-wrap items-center gap-4">
           {Object.values(resources).filter((v) => v.link !== "/").map((m) => {
             return (
               <Card
+                splotch
+                key={m.link}
                 title={`${m.name}`}
                 backgroundSize={80}
                 image={`${

routes/movies/[name].tsx

@@ -72,7 +72,7 @@ export default async function Greet(
       {movie.name && (
         <Recommendations
           id={movie.name}
-          type="movie"
+          type="movies"
         />
       )}
       <div class="px-8 text-white mt-10">

routes/movies/index.tsx

@@ -22,7 +22,7 @@ export default async function MovieIndex(
   const allMovies = await listResources<ReviewResource>("movies");
   const searchParams = parseResourceUrl(props.url);
   const searchResults = searchParams &&
-    await searchResource({ ...searchParams, types: ["movie"] });
+    await searchResource({ ...searchParams, types: ["movies"] });
   const movies = allMovies.sort((a, b) =>
     sortOptional(
       a.content.reviewRating?.ratingValue,
@@ -34,11 +34,11 @@ export default async function MovieIndex(
     <MainLayout
       url={props.url}
       title="Movies"
-      context={{ type: "movie" }}
+      context={{ type: "movies" }}
       searchResults={searchResults}
     >
       <RedirectSearchHandler />
-      <KMenu type="main" context={{ type: "movie" }} />
+      <KMenu type="main" context={{ type: "movies" }} />
       <header class="flex gap-4 items-center mb-5 md:hidden">
         <a
           class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
@@ -52,7 +52,7 @@ export default async function MovieIndex(
       </header>
       <Grid>
         {movies?.map((doc, i) => {
-          return <ResourceCard key={i} res={doc} />;
+          return <ResourceCard key={doc.name || i} res={doc} />;
         })}
       </Grid>
     </MainLayout>

routes/recipes/index.tsx

@@ -16,7 +16,7 @@ export const handler: Handlers<
     const recipes = await listResources<RecipeResource>("recipes");
     const searchParams = parseResourceUrl(req.url);
     const searchResults = searchParams &&
-      await searchResource({ ...searchParams, types: ["recipe"] });
+      await searchResource({ ...searchParams, types: ["recipes"] });
     return ctx.render({ recipes, searchResults });
   },
 };
@@ -32,10 +32,10 @@ export default function Greet(
       url={props.url}
       title="Recipes"
       searchResults={searchResults}
-      context={{ type: "recipe" }}
+      context={{ type: "recipes" }}
     >
       <RedirectSearchHandler />
-      <KMenu type="main" context={{ type: "recipe" }} />
+      <KMenu type="main" context={{ type: "recipes" }} />
       <header class="flex gap-4 items-center mb-2 lg:mb-5 md:hidden">
         <a
           class="px-4 lg:ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"

routes/series/[name].tsx

@@ -9,7 +9,7 @@ import { Star } from "@components/Stars.tsx";
 import { MetaTags } from "@components/MetaTags.tsx";
 import { parseRating } from "@lib/helpers.ts";
 import { fetchResource } from "@lib/marka/index.ts";
-import { ReviewResource } from "@lib/marka/schema.ts";
+import { getNameOfResource, ReviewResource } from "@lib/marka/schema.ts";
 
 export const handler: Handlers<{ serie: ReviewResource; session: unknown }> = {
   async GET(_, ctx) {
@@ -61,7 +61,7 @@ export default function Greet(
           )}
         </PageHero.Header>
         <PageHero.Footer>
-          <PageHero.Title>{serie.name}</PageHero.Title>
+          <PageHero.Title>{serie.content.itemReviewed?.name}</PageHero.Title>
           <PageHero.Subline
             entries={[
               author?.name &&

routes/series/index.tsx

@@ -50,7 +50,9 @@ export default function Greet(
       </header>
       <Grid>
         {series?.map((doc, i) => {
-          return <ResourceCard key={i} sublink="series" res={doc} />;
+          return (
+            <ResourceCard key={doc.name || i} sublink="series" res={doc} />
+          );
         })}
       </Grid>
     </MainLayout>

static/thumbhash.js

@@ -229,8 +229,9 @@ function rgbaToDataURL(w, h, rgba) {
 function updateThumbhashImages() {
   document.querySelectorAll("[data-thumb]").forEach((entry) => {
     const hash = entry.getAttribute("data-thumb");
-
+    if (entry.getAttribute("data-thumb-decoded")) return;
     if (!hash) return;
+    entry.setAttribute("data-thumb-decoded", true);
 
     const decodedString = atob(hash);