feat: add kmenu icon for mobile

fix: make recipe crawling work
feat: correctly size search result items
2025-11-12 16:12:57 +01:00 · 2025-11-12 15:41:30 +01:00 · 2025-11-12 13:35:39 +01:00 · 2025-11-09 23:52:53 +01:00 · 2025-11-07 18:58:23 +01:00 · 2025-11-07 18:26:31 +01:00
128 changed files with 2417 additions and 1437 deletions
--- a/2
+++ b/2
@@ -15,7 +15,7 @@ COPY . .
 ENV DATA_DIR=/app/data

 RUN mkdir -p $DATA_DIR && \
-    deno install --allow-import --allow-ffi --allow-scripts=npm:sharp@0.33.5-rc.1 -e main.ts &&\
+    deno install --allow-import --allow-ffi --allow-scripts=npm:sharp -e main.ts &&\
    sed -i -e 's/"deno"/"no-deno"/' node_modules/@libsql/client/package.json &&\
    deno task build

--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -1,9 +1,9 @@
 import { isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
-import { GenericResource } from "@lib/types.ts";
 import { SmallRating } from "@components/Rating.tsx";
 import { Link } from "@islands/Link.tsx";
 import { parseRating } from "@lib/helpers.ts";
+import { GenericResource, getNameOfResource } from "@lib/marka/schema.ts";

 export function Card(
  {
@@ -11,13 +11,13 @@ export function Card(
    rating,
    title,
    image,
-    thumbnail,
+    thumbhash,
    backgroundColor,
    backgroundSize = 100,
  }: {
    backgroundSize?: number;
    backgroundColor?: string;
-    thumbnail?: string;
+    thumbhash?: string;
    link?: string;
    title?: string;
    image?: string;
@@ -39,13 +39,12 @@ export function Card(
    <Link
      href={link}
      style={backgroundStyle}
-      data-thumb={thumbnail}
+      data-thumb={thumbhash}
      class="text-white rounded-3xl shadow-md relative
  lg:w-56 lg:h-56 
  sm:w-48 sm:h-48
  w-[37vw] h-[37vw]"
    >
-      {true && (
      <span class="absolute top-0 left-0 overflow-hidden rounded-3xl w-full h-full">
        <img
          class="w-full h-full object-cover"
@@ -54,7 +53,6 @@ export function Card(
          src={image || "/placeholder.svg"}
        />
      </span>
-      )}
      <div
        class="p-4 flex flex-col justify-between relative z-10"
        style={{
@@ -97,19 +95,22 @@ export function Card(
 export function ResourceCard(
  { res, sublink = "movies" }: { sublink?: string; res: GenericResource },
 ) {
-  const img = res?.content?.image || res?.content?.cover;
+  const img = res?.image?.url;

  const imageUrl = img
    ? `/api/images?image=${img}&width=200&height=200`
    : "/placeholder.svg";

+  const rating = res.content.reviewRating?.ratingValue
+    ? parseRating(res.content.reviewRating.ratingValue)
+    : undefined;
+
  return (
    <Card
-      title={res.content?.name || res.content?.itemReviewed?.name || res.content?.headline ||
-        res?.name}
-      backgroundColor={res.meta?.average}
-      rating={parseRating(res.content?.reviewRating?.ratingValue)}
-      thumbnail={res.cover}
+      title={getNameOfResource(res)}
+      backgroundColor={res.image?.average}
+      thumbhash={res.image?.thumbhash}
+      rating={rating}
      image={imageUrl}
      link={`/${sublink}/${res.name.replace(/\.md$/g, "")}`}
    />
--- a/components/Emoji.tsx
+++ b/components/Emoji.tsx
@@ -10,5 +10,5 @@ export const Emoji = (props: { class?: string; name: string }) => {
        />
      )
      : <span>{props.name}</span>
-    : <></>;
+    : null;
 };
--- a/components/Image.tsx
+++ b/components/Image.tsx
@@ -1,5 +1,5 @@
 import { asset } from "$fresh/runtime.ts";
-import * as CSS from "https://esm.sh/csstype@3.1.2";
+import * as CSS from "csstype";

 interface ResponsiveAttributes {
  srcset: string;
@@ -34,7 +34,7 @@ const Image = (
    class: string;
    src: string;
    alt?: string;
-    thumbnail?: string;
+    thumbhash?: string;
    fill?: boolean;
    width?: number | string;
    height?: number | string;
@@ -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={{
@@ -55,16 +60,15 @@ const Image = (
        height: props.fill ? "100%" : "",
        zIndex: props.fill ? -1 : "",
      }}
-      data-thumb={props.thumbnail}
+      data-thumb={props.thumbhash}
    >
      <img
-        data-thumb={props.thumbnail}
        data-thumb-img
        loading="lazy"
        alt={props.alt}
        style={props.style}
-        srcset={responsiveAttributes.srcset}
-        sizes={responsiveAttributes.sizes}
+        sizes={sizes}
+        srcset={srcset}
        src={`/api/images?image=${asset(props.src)}${
          props.width ? `&width=${props.width}` : ""
        }${props.height ? `&height=${props.height}` : ""}`}
--- a/components/MetaTags.tsx
+++ b/components/MetaTags.tsx
@@ -1,5 +1,6 @@
-import { GenericResource } from "@lib/types.ts";
 import { Head } from "$fresh/runtime.ts";
+import { GenericResource, getNameOfResource } from "@lib/marka/schema.ts";
+import { formatDate } from "@lib/string.ts";

 function generateJsonLd(resource: GenericResource): string {
  const imageUrl = resource.content?.image
@@ -8,34 +9,34 @@ function generateJsonLd(resource: GenericResource): string {

  const baseSchema: Record<string, unknown> = {
    "@context": "https://schema.org",
-    "@type": resource.content?._type, // Converts type to PascalCase
+    "@type": resource.content?._type,
    name: resource.name,
-    description: resource.content || resource.meta?.average || "",
-    keywords: resource.tags?.join(", ") || "",
+    description: resource.content || "",
+    keywords: resource.content.keywords?.join(", ") || "",
    image: imageUrl,
  };

-  if (resource.meta?.author) {
+  if (resource.content?.author) {
    baseSchema.author = {
      "@type": "Person",
-      name: resource.meta.author,
+      name: resource.content.author,
    };
  }

-  if (resource.meta?.date) {
+  if (resource.content?.datePublished) {
    try {
-      baseSchema.datePublished = new Date(resource.meta.date).toISOString();
+      baseSchema.datePublished = formatDate(
+        resource.content.datePublished,
+      );
    } catch (_) {
      // Ignore invalid date
    }
  }

-  if (resource.meta?.rating) {
-    baseSchema.aggregateRating = {
-      "@type": "AggregateRating",
-      ratingValue: resource.meta.rating,
-      ratingCount: 1,
-      bestRating: 5, // Assuming a scale of 1 to 10
+  if (resource.content?.reviewRating) {
+    baseSchema.reviewRating = {
+      "@type": "Rating",
+      ...resource.content.reviewRating,
    };
  }

@@ -51,7 +52,7 @@ export function MetaTags({ resource }: { resource: GenericResource }) {
  return (
    <>
      <Head>
-        <meta property="og:title" content={resource.content?.name} />
+        <meta property="og:title" content={getNameOfResource(resource)} />
        <meta property="og:type" content={resource.content?._type} />
        <meta
          property="og:image"
--- a/components/PageHero.tsx
+++ b/components/PageHero.tsx
@@ -6,16 +6,16 @@ import { IconArrowNarrowLeft } from "@components/icons.tsx";
 import { IconEdit } from "@components/icons.tsx";
 import { useContext } from "preact/hooks";

-const HeroContext = createContext<{ image?: string; thumbnail?: string }>({
+const HeroContext = createContext<{ image?: string; thumbhash?: string }>({
  image: undefined,
-  thumbnail: undefined,
+  thumbhash: undefined,
 });

 function Wrapper(
-  { children, image, thumbnail }: {
+  { children, image, thumbhash }: {
    children: ComponentChildren;
    image?: string;
-    thumbnail?: string;
+    thumbhash?: string;
  },
 ) {
  return (
@@ -30,7 +30,7 @@ function Wrapper(
            <Image
              fill
              src={image}
-              thumbnail={thumbnail}
+              thumbhash={thumbhash}
              alt="Recipe Banner"
              // style={{ objectPosition: "0% 25%" }}
              class="absolute object-cover w-full h-full -z-10"
@@ -104,7 +104,7 @@ function Header({ children }: { children: ComponentChildren }) {
 function Subline(
  { entries, children }: {
    children?: ComponentChildren;
-    entries: (string | { href: string; title: string })[];
+    entries: (string | undefined | { href: string; title: string })[];
  },
 ) {
  const ctx = useContext(HeroContext);
@@ -117,10 +117,11 @@ function Subline(
      {entries.filter((s) =>
        s && (typeof s === "string" ? s?.length > 1 : true)
      ).map((s) => {
+        if (!s) return;
        if (typeof s === "string") {
-          return <span>{s}</span>;
+          return <span key={s}>{s}</span>;
        } else {
-          return <a href={s.href}>{s.title}</a>;
+          return <a key={s.href} href={s.href}>{s.title}</a>;
        }
      })}
    </div>
--- a/components/Rating.tsx
+++ b/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>
--- a/components/icons.tsx
+++ b/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";
--- a/components/layouts/main.tsx
+++ b/components/layouts/main.tsx
@@ -1,6 +1,6 @@
 import { ComponentChildren } from "preact";
 import Search from "@islands/Search.tsx";
-import { GenericResource } from "@lib/types.ts";
+import { GenericResource } from "@lib/marka/schema.ts";

 export type Props = {
  children: ComponentChildren;
@@ -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 hasSearch = _url?.search?.includes("q=");
+  const q = getQFromUrl(url);

-  if (hasSearch) {
+  if (typeof q === "string") {
    return (
      <Search
-        q={_url.searchParams.get("q")}
        {...context}
+        q={q}
        results={searchResults}
      />
    );
  }

-  return <>{children}</>;
+  return children;
 };
--- a/deno.json
+++ b/deno.json
@@ -22,15 +22,19 @@
    "@lib": "./lib",
    "@lib/": "./lib/",
    "@libsql/client": "npm:@libsql/client@^0.14.0",
+    "@openai/openai": "jsr:@openai/openai@^6.7.0",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "@std/http": "jsr:@std/http@^1.0.12",
    "@std/yaml": "jsr:@std/yaml@^1.0.5",
+    "csstype": "npm:csstype@^3.1.3",
    "defuddle": "npm:defuddle@^0.6.6",
    "drizzle-kit": "npm:drizzle-kit@^0.30.1",
    "drizzle-orm": "npm:drizzle-orm@^0.38.3",
    "fuzzysort": "npm:fuzzysort@^3.1.0",
    "jsdom": "npm:jsdom@^24.1.3",
+    "moviedb-promise": "npm:moviedb-promise@^4.0.7",
+    "parse-ingredient": "npm:parse-ingredient@^1.3.1",
    "playwright": "npm:playwright@^1.49.1",
    "playwright-extra": "npm:playwright-extra@^4.3.6",
    "preact": "https://esm.sh/preact@10.22.0",
@@ -42,7 +46,9 @@
    "tailwindcss/": "npm:/tailwindcss@^3.4.17/",
    "tailwindcss/plugin": "npm:/tailwindcss@^3.4.17/plugin.js",
    "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"
--- a/drizzle/0010_youthful_tyrannus.sql
+++ b/drizzle/0010_youthful_tyrannus.sql
@@ -0,0 +1 @@
+ALTER TABLE `image` RENAME COLUMN "blurhash" TO "thumbhash";
--- a/drizzle/meta/0010_snapshot.json
+++ b/drizzle/meta/0010_snapshot.json
@@ -0,0 +1,311 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "685b57ca-45e0-4373-baee-fc3abb4f2d74",
+  "prevId": "5694a345-e55c-4aa3-9f29-1045b28f5203",
+  "tables": {
+    "cache": {
+      "name": "cache",
+      "columns": {
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "json": {
+          "name": "json",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "binary": {
+          "name": "binary",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(current_timestamp)"
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "key_idx": {
+          "name": "key_idx",
+          "columns": [
+            "key"
+          ],
+          "isUnique": false
+        },
+        "scope_idx": {
+          "name": "scope_idx",
+          "columns": [
+            "scope"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "document": {
+      "name": "document",
+      "columns": {
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "last_modified": {
+          "name": "last_modified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "content_type": {
+          "name": "content_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size": {
+          "name": "size",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "perm": {
+          "name": "perm",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "name_idx": {
+          "name": "name_idx",
+          "columns": [
+            "name"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "image": {
+      "name": "image",
+      "columns": {
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(current_timestamp)"
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "average": {
+          "name": "average",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbhash": {
+          "name": "thumbhash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "mime": {
+          "name": "mime",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "performance": {
+      "name": "performance",
+      "columns": {
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "search": {
+          "name": "search",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time": {
+          "name": "time",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(STRFTIME('%s', 'now') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(current_timestamp)"
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(current_timestamp)"
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {
+      "\"image\".\"blurhash\"": "\"image\".\"thumbhash\""
+    }
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -71,6 +71,13 @@
      "when": 1736172911816,
      "tag": "0009_free_robin_chapel",
      "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "6",
+      "when": 1762099260474,
+      "tag": "0010_youthful_tyrannus",
+      "breakpoints": true
    }
  ]
 }
--- a/fresh.gen.ts
+++ b/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,
--- a/islands/IngredientsList.tsx
+++ b/islands/IngredientsList.tsx
@@ -2,7 +2,6 @@ import { Signal } from "@preact/signals";
 import type { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
 import { FunctionalComponent } from "preact";
 import { unitsOfMeasure } from "@lib/parseIngredient.ts";
-import { renderMarkdown } from "@lib/documents.ts";

 function formatAmount(num: number) {
  if (num === 0) return "";
@@ -10,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;
@@ -43,13 +39,13 @@ const Ingredient = (

  return (
    <tr key={key}>
-      <td class="pr-4 py-2">
+      <td class="pr-4 py-1">
        {formatAmount(finalAmount || 0)}
        <span class="ml-0.5 opacity-50">
          {formatUnit(unit, finalAmount || 0)}
        </span>
      </td>
-      <td class="px-4 py-2">{name}</td>
+      <td class="px-4 py-1">{name}</td>
    </tr>
  );
 };
@@ -66,16 +62,25 @@ export const IngredientsList: FunctionalComponent<
  return (
    <table class="w-full border-collapse table-auto">
      <tbody>
-          {ingredients.filter((s) => !!s?.length).map((item) => {
+        {ingredients.map((item) => {
+          if ("items" in item) {
+            return item.items.map((ing, i) => {
              return (
-              <div dangerouslySetInnerHTML={{ __html: renderMarkdown(item) }}>
-              </div>
+                <Ingredient
+                  key={i}
+                  ingredient={ing}
+                  amount={amount}
+                  portion={portion}
+                />
              );
-            // return (
-            //   <Ingredient ingredient={item} amount={amount} portion={portion} />
-            // );
+            });
+          } else {
+            return (
+              <Ingredient ingredient={item} amount={amount} portion={portion} />
+            );
+          }
        })}
      </tbody>
    </table>
  );
-  };
+};
--- a/islands/KMenu.tsx
+++ b/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";
@@ -103,8 +104,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;
      }

@@ -167,11 +169,13 @@ export const KMenu = (
        style={{ background: "#2B2930", color: "#818181" }}
      >
        <div
-          class={`grid h-12 text-gray-400 ${
-            activeState.value !== "loading" && "border-b"
+          class={`grid min-h-12 text-gray-400 ${
+            (activeState.value === "normal" || activeState.value === "input") &&
+            "border-b"
          } border-gray-500 `}
          style={{
-            gridTemplateColumns: activeState.value !== "loading"
+            gridTemplateColumns:
+              (activeState.value === "normal" || activeState.value === "input")
                ? "auto 1fr"
                : "1fr",
          }}
@@ -197,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>
-        {activeState.value === "normal" &&
+          )}
+        </div>
+        {(activeState.value === "normal" || activeState.value === "input") &&
          (
            <div
              class=""
--- a/islands/KMenu/commands.ts
+++ b/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,
    ],
  },
--- a/islands/KMenu/commands/add_movie_infos.ts
+++ b/islands/KMenu/commands/add_movie_infos.ts
@@ -1,15 +1,16 @@
-
-import { Movie } from "@lib/resource/movies.ts";
 import { TMDBMovie } from "@lib/types.ts";
 import { getCookie } from "@lib/string.ts";
+import { MenuEntry } from "../types.ts";
+import { ReviewResource } from "@lib/marka/schema.ts";

 export const addMovieInfos: MenuEntry = {
  title: "Add Movie infos",
  meta: "",
  icon: "IconReportSearch",
  cb: async (state, context) => {
+    try {
      state.activeState.value = "loading";
-    const movie = context as Movie;
+      const movie = context as ReviewResource;

      const query = movie.name;

@@ -17,6 +18,10 @@ export const addMovieInfos: MenuEntry = {
        `/api/tmdb/query?q=${encodeURIComponent(query)}`,
      );

+      if (!response.ok) {
+        throw new Error(await response.text());
+      }
+
      const json = await response.json() as TMDBMovie[];

      const menuID = `result/${movie.name}`;
@@ -26,6 +31,7 @@ export const addMovieInfos: MenuEntry = {
        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",
@@ -33,7 +39,11 @@ export const addMovieInfos: MenuEntry = {
              });
              state.visible.value = false;
              state.activeState.value = "normal";
-          window.location.reload();
+              globalThis.location.reload();
+            } catch (e) {
+              state.activeState.value = "error";
+              state.loadingText.value = e.message;
+            }
          },
        })),
      };
@@ -41,6 +51,10 @@ export const addMovieInfos: MenuEntry = {
      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"];
--- a/islands/KMenu/commands/add_series_infos.ts
+++ b/islands/KMenu/commands/add_series_infos.ts
@@ -1,15 +1,16 @@
 import { MenuEntry } from "@islands/KMenu/types.ts";
 import { TMDBSeries } from "@lib/types.ts";
 import { getCookie } from "@lib/string.ts";
-import { Series } from "@lib/resource/series.ts";
+import { ReviewResource } from "@lib/marka/schema.ts";

 export const addSeriesInfo: MenuEntry = {
  title: "Add Series infos",
  meta: "",
  icon: "IconReportSearch",
  cb: async (state, context) => {
+    try {
      state.activeState.value = "loading";
-    const series = context as Series;
+      const series = context as ReviewResource;

      const query = series.name;

@@ -17,6 +18,10 @@ export const addSeriesInfo: MenuEntry = {
        `/api/tmdb/query?q=${encodeURIComponent(query)}&type=serie`,
      );

+      if (!response.ok) {
+        throw new Error(await response.text());
+      }
+
      const json = await response.json() as TMDBSeries[];

      const menuID = `result/${series.name}`;
@@ -26,6 +31,7 @@ export const addSeriesInfo: MenuEntry = {
        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",
@@ -34,6 +40,10 @@ export const addSeriesInfo: MenuEntry = {
              state.visible.value = false;
              state.activeState.value = "normal";
              //window.location.reload();
+            } catch (e) {
+              state.activeState.value = "error";
+              state.loadingText.value = e.message;
+            }
          },
        })),
      };
@@ -41,6 +51,10 @@ export const addSeriesInfo: MenuEntry = {
      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"];
--- a/islands/KMenu/commands/create_article.ts
+++ b/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/" +
-                chunk.replace("id:", "").trim();
+              globalThis.location.href = "/articles/" + chunk.url;
            }, 500);
          } else {
-            state.loadingText.value = chunk;
+            state.loadingText.value = chunk.message;
          }
        });
      }
--- a/islands/KMenu/commands/create_movie.ts
+++ b/islands/KMenu/commands/create_movie.ts
@@ -1,8 +1,8 @@
 import { MenuEntry } from "@islands/KMenu/types.ts";
 import { TMDBMovie } from "@lib/types.ts";
 import { debounce } from "@lib/helpers.ts";
-import { Movie } from "@lib/resource/movies.ts";
 import { getCookie } from "@lib/string.ts";
+import { ReviewResource } from "@lib/marka/schema.ts";

 export const createNewMovie: MenuEntry = {
  title: "Create new movie",
@@ -31,6 +31,7 @@ export const createNewMovie: MenuEntry = {

    let currentQuery: string;
    const search = debounce(async function search(query: string) {
+      try {
        currentQuery = query;
        if (query.length < 2) {
          return;
@@ -38,6 +39,10 @@ export const createNewMovie: MenuEntry = {

        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;
@@ -48,18 +53,30 @@ export const createNewMovie: MenuEntry = {
            return {
              title: `${r.title} - ${r.release_date}`,
              cb: async () => {
+                try {
                  state.activeState.value = "loading";
                  const response = await fetch("/api/movies/" + r.id, {
                    method: "POST",
                  });
-              const movie = await response.json() as Movie;
+                  if (!response.ok) {
+                    throw new Error(await response.text());
+                  }
+                  const movie = await response.json() as ReviewResource;
                  unsub();
-              window.location.href = "/movies/" + movie.name;
+                  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;
+      }
    }, 500);

    const unsub = state.commandInput.subscribe((value) => {
--- a/islands/KMenu/commands/create_recipe.ts
+++ b/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) => {
-          if (chunk.startsWith("id:")) {
+        fetchStream("/api/recipes/create?url=" + value, (msg) => {
+          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/" +
-                chunk.replace("id:", "").trim();
+              globalThis.location.href = "/recipes/" + msg.url;
            }, 500);
          } else {
-            state.loadingText.value = chunk;
+            state.loadingText.value = msg.message;
          }
        });
      }
--- a/islands/KMenu/commands/create_recommendations.ts
+++ b/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;
      }
    });
  },
--- a/islands/KMenu/commands/create_series.ts
+++ b/islands/KMenu/commands/create_series.ts
@@ -1,8 +1,8 @@
 import { MenuEntry } from "@islands/KMenu/types.ts";
 import { TMDBSeries } from "@lib/types.ts";
 import { debounce } from "@lib/helpers.ts";
-import { Series } from "@lib/resource/series.ts";
 import { getCookie } from "@lib/string.ts";
+import { ReviewResource } from "@lib/marka/schema.ts";

 export const createNewSeries: MenuEntry = {
  title: "Create new series",
@@ -31,6 +31,7 @@ export const createNewSeries: MenuEntry = {

    let currentQuery: string;
    const search = debounce(async function search(query: string) {
+      try {
        currentQuery = query;
        if (query.length < 2) {
          return;
@@ -40,6 +41,10 @@ export const createNewSeries: MenuEntry = {
          "/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;
@@ -50,19 +55,31 @@ export const createNewSeries: MenuEntry = {
            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",
                  });
-              const series = await response.json() as Series;
+                  if (!response.ok) {
+                    throw new Error(await response.text());
+                  }
+                  const series = await response.json() as ReviewResource;
                  unsub();
-              window.location.href = "/series/" + series.name;
+                  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;
+      }
    }, 500);

    const unsub = state.commandInput.subscribe((value) => {
--- a/islands/KMenu/commands/enhance_article_infos.ts
+++ b/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"));
+  },
+};
--- a/islands/KMenu/types.ts
+++ b/islands/KMenu/types.ts
@@ -6,7 +6,7 @@ type IconKey = keyof typeof icons;
 export type MenuState = {
  activeMenu: Signal<string>;
  activeState: Signal<"input" | "error" | "normal" | "loading">;
-  loadingText:Signal<string>;
+  loadingText: Signal<string>;
  commandInput: Signal<string>;
  visible: Signal<boolean>;
  menus: Record<string, Menu>;
--- a/islands/KMenuButton.tsx
+++ b/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>
+  );
+}
--- a/islands/Link.tsx
+++ b/islands/Link.tsx
@@ -1,18 +1,20 @@
 import { useEffect } from "preact/hooks";

 declare global {
-  // deno-lint-ignore no-var
  var loadingTimeout: ReturnType<typeof setTimeout> | undefined;
 }

 export function Link(
-  { href, children, class: _class, style }: {
+  props: {
    href?: string;
    class?: string;
    style?: preact.JSX.CSSProperties;
    children: preact.ComponentChildren;
+    "data-thumb"?: string;
  },
 ) {
+  const { href, children, class: _class, style } = props;
+  const thumbhash = props["data-thumb"];
  function handleClick() {
    if (globalThis.loadingTimeout) {
      return;
@@ -41,6 +43,7 @@ export function Link(
      href={href}
      style={style}
      onClick={handleClick}
+      data-thumb={thumbhash}
      class={_class}
    >
      {children}
--- a/islands/Recommendations.tsx
+++ b/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"
          >
--- a/islands/Search.tsx
+++ b/islands/Search.tsx
@@ -2,7 +2,6 @@ import { useEffect, useRef } from "preact/hooks";
 import useDebouncedCallback from "@lib/hooks/useDebouncedCallback.ts";
 import { IconLoader2, IconSearch } from "@components/icons.tsx";
 import { useEventListener } from "@lib/hooks/useEventListener.ts";
-import { GenericResource } from "@lib/types.ts";
 import { resources } from "@lib/resources.ts";
 import { getCookie } from "@lib/string.ts";
 import { IS_BROWSER } from "$fresh/runtime.ts";
@@ -11,6 +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, getNameOfResource } from "@lib/marka/schema.ts";

 export async function fetchQueryResource(url: URL, type = "") {
  const query = url.searchParams.get("q");
@@ -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();
@@ -33,28 +33,30 @@ export async function fetchQueryResource(url: URL, type = "") {
  }
 }

-export const RedirectSearchHandler = () => {
-  if (getCookie("session_cookie")) {
+export function RedirectSearchHandler() {
  useEventListener("keydown", (e: KeyboardEvent) => {
-      if (e?.target?.nodeName == "INPUT") return;
+    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);

+  // deno-lint-ignore jsx-no-useless-fragment
  return <></>;
-};
+}

 const SearchResultImage = ({ src }: { src: string }) => {
  return (
    <Image
      class="object-cover w-12 h-12 rounded-full"
-      width="50"
-      height="50"
+      width={100}
+      height={100}
      src={src}
      alt="preview image"
    />
@@ -67,8 +69,9 @@ export const SearchResultItem = (
    showEmoji?: boolean;
  },
 ) => {
-  const resourceType = resources[item.type];
-  const href = resourceType ? `${resourceType.link}/${item.id}` : "";
+  const resourceType =
+    resources[item.content._type.toLowerCase() as keyof typeof resources];
+  const href = item?.path.replace("/resources", "").replace(/\.md$/, "");
  return (
    <a
      href={href}
@@ -77,8 +80,8 @@ export const SearchResultItem = (
      {showEmoji && resourceType
        ? <Emoji class="w-7 h-7" name={resourceType.emoji} />
        : ""}
-      {item.meta?.image && <SearchResultImage src={item.meta?.image} />}
-      {item?.name}
+      {item.image && <SearchResultImage src={item.image?.url} />}
+      {getNameOfResource(item)}
    </a>
  );
 };
@@ -111,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);

@@ -119,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");
    }
@@ -159,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();
@@ -184,8 +190,12 @@ const Search = (
            onInput={handleInputChange}
          />
        </div>
-        <Checkbox label="seen" checked={showSeenStatus} />
-        <Rating rating={4} />
+        <Checkbox label="unrated" checked={showSeenStatus} />
+        <div
+          class={showSeenStatus.value ? "opacity-10" : ""}
+        >
+          <Rating rating={rating} />
+        </div>
      </header>
      {data.value?.length && !isLoading.value
        ? <SearchResultList showEmoji={!type} result={data.value} />
--- a/lib/db/schema.ts
+++ b/lib/db/schema.ts
@@ -47,7 +47,7 @@ export const imageTable = sqliteTable("image", {
  ),
  url: text().notNull(),
  average: text().notNull(),
-  blurhash: text().notNull(),
+  thumbhash: text().notNull(),
  mime: text().notNull(),
 });

--- a/lib/env.ts
+++ b/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");

--- a/lib/helpers.ts
+++ b/lib/helpers.ts
@@ -31,19 +31,54 @@ export const fixRenderedMarkdown = (content: string) => {
    });
 };

-export async function fetchStream(url: string, cb: (chunk: string) => void) {
-  const response = await fetch(url);
-  const reader = response?.body?.getReader();
-  if (reader) {
+type StreamMessage = {
+  type: "info";
+  message: string;
+} | {
+  type: "error";
+  message: string;
+} | {
+  type: "warning";
+  message: string;
+} | {
+  type: "finished";
+  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) return;
-      const data = new TextDecoder().decode(value);
-      data
-        .split("$")
-        .filter((d) => d && d.length)
-        .map((d) => cb(Array.isArray(d) ? d[0] : d));
-    }
+    if (done) break;
+    cb(JSON.parse(value));
  }
 }

@@ -58,32 +93,53 @@ export function hashString(message: string) {
 }

 export const createStreamResponse = () => {
-  let controller: ReadableStreamController<ArrayBufferView>;
-  const body = new ReadableStream({
-    start(cont) {
-      controller = cont;
+  const encoder = new TextEncoder();
+  let controller: ReadableStreamDefaultController<Uint8Array>;
+
+  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() {
-    controller.close();
+  const send = (obj: unknown) => {
+    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) {
-    controller?.enqueue(new TextEncoder().encode("$" + chunk));
+  function error(message: string) {
+    return send({ type: "error", message });
+  }
+
+  function warning(message: string) {
+    return send({ type: "warning", message });
  }

  return {
    response,
    cancel,
-    enqueue,
+    send,
+    info,
+    error,
+    warning,
  };
 };

@@ -102,16 +158,14 @@ export function debounce<T extends (...args: Parameters<T>) => void>(
 }

 export function parseRating(rating: string | number) {
-  if (typeof rating === "string") {
+  if (typeof rating == "number") return rating;
  try {
-      return parseInt(rating);
+    const res = parseInt(rating);
+    if (!Number.isNaN(res)) return res;
  } catch (_e) {
    // This is okay
  }
-
-    return [...rating.matchAll(/⭐/g)].length;
-  }
-  return rating;
+  return rating.length / 2;
 }

 export async function convertOggToMp3(
--- a/lib/hooks/useDebouncedCallback.ts
+++ b/lib/hooks/useDebouncedCallback.ts
@@ -1,286 +1,93 @@
 import { useEffect, useMemo, useRef } from "preact/hooks";

-export interface CallOptions {
-  /**
-   * Controls if the function should be invoked on the leading edge of the timeout.
-   */
-  leading?: boolean;
-  /**
-   * Controls if the function should be invoked on the trailing edge of the timeout.
-   */
-  trailing?: boolean;
-}
-
-export interface Options extends CallOptions {
-  /**
-   * The maximum time the given function is allowed to be delayed before it's invoked.
-   */
-  maxWait?: number;
-}
-
-export interface ControlFunctions {
-  /**
-   * Cancel pending function invocations
-   */
+type Debounced<T extends (...args: unknown[]) => unknown> =
+  & ((
+    ...args: Parameters<T>
+  ) => void)
+  & {
    cancel: () => void;
-  /**
-   * Immediately invoke pending function invocations
-   */
    flush: () => void;
-  /**
-   * Returns `true` if there are any pending function invocations
-   */
-  isPending: () => boolean;
-}
+    pending: () => boolean;
+  };

-/**
- * Subsequent calls to the debounced function `debounced.callback` return the result of the last func invocation.
- * Note, that if there are no previous invocations it's mean you will get undefined. You should check it in your code properly.
- */
-export interface DebouncedState<T extends (...args: any) => ReturnType<T>>
-  extends ControlFunctions {
-  (...args: Parameters<T>): ReturnType<T> | undefined;
-}
-
-/**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked, or until the next browser frame is drawn.
- *
- * The debounced function comes with a `cancel` method to cancel delayed `func`
- * invocations and a `flush` method to immediately invoke them.
- *
- * Provide `options` to indicate whether `func` should be invoked on the leading
- * and/or trailing edge of the `wait` timeout. The `func` is invoked with the
- * last arguments provided to the debounced function.
- *
- * Subsequent calls to the debounced function return the result of the last
- * `func` invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
- * invocation will be deferred until the next frame is drawn (typically about
- * 16ms).
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `debounce` and `throttle`.
- *
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0]
- *  The number of milliseconds to delay; if omitted, `requestAnimationFrame` is
- *  used (if available, otherwise it will be setTimeout(...,0)).
- * @param {Object} [options={}] The options object.
- *  Controls if `func` should be invoked on the leading edge of the timeout.
- * @param {boolean} [options.leading=false]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {number} [options.maxWait]
- *  Controls if `func` should be invoked the trailing edge of the timeout.
- * @param {boolean} [options.trailing=true]
- * @returns {Function} Returns the new debounced function.
- * @example
- *
- * // Avoid costly calculations while the window size is in flux.
- * const resizeHandler = useDebouncedCallback(calculateLayout, 150);
- * window.addEventListener('resize', resizeHandler)
- *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * const clickHandler = useDebouncedCallback(sendMail, 300, {
- *   leading: true,
- *   trailing: false,
- * })
- * <button onClick={clickHandler}>click me</button>
- *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * const debounced = useDebouncedCallback(batchLog, 250, { 'maxWait': 1000 })
- * const source = new EventSource('/stream')
- * source.addEventListener('message', debounced)
- *
- * // Cancel the trailing debounced invocation.
- * window.addEventListener('popstate', debounced.cancel)
- *
- * // Check for pending invocations.
- * const status = debounced.pending() ? "Pending..." : "Ready"
- */
 export default function useDebouncedCallback<
-  T extends (...args: any) => ReturnType<T>,
+  T extends (...args: unknown[]) => unknown,
 >(
-  func: T,
-  wait?: number,
-  options?: Options,
-): DebouncedState<T> {
-  const lastCallTime = useRef(null);
-  const lastInvokeTime = useRef(0);
-  const timerId = useRef(null);
-  const lastArgs = useRef<unknown[]>([]);
-  const lastThis = useRef<unknown>();
-  const result = useRef<ReturnType<T>>();
-  const funcRef = useRef(func);
-  const mounted = useRef(true);
+  callback: T,
+  delay: number,
+  options?: {
+    /** Call on the leading edge. Default: false */
+    leading?: boolean;
+    /** Call on the trailing edge. Default: true */
+    trailing?: boolean;
+  },
+): Debounced<T> {
+  const callbackRef = useRef(callback);
+  const timerRef = useRef<number | null>(null);
+  const argsRef = useRef<Parameters<T> | null>(null);

+  // Always use the latest callback without re-creating the debounced fn
  useEffect(() => {
-    funcRef.current = func;
-  }, [func]);
+    callbackRef.current = callback;
+  }, [callback]);

-  // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
-  const useRAF = !wait && wait !== 0 && typeof window !== "undefined";
+  const leading = !!options?.leading;
+  const trailing = options?.trailing !== false; // default true

-  if (typeof func !== "function") {
-    throw new TypeError("Expected a function");
+  const debounced = useMemo<Debounced<T>>(() => {
+    const clear = () => {
+      if (timerRef.current != null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
      }
-
-  wait = +wait || 0;
-  options = options || {};
-
-  const leading = !!options.leading;
-  const trailing = "trailing" in options ? !!options.trailing : true; // `true` by default
-  const maxing = "maxWait" in options;
-  const maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : null;
-
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-
-  // You may have a question, why we have so many code under the useMemo definition.
-  //
-  // This was made as we want to escape from useCallback hell and
-  // not to initialize a number of functions each time useDebouncedCallback is called.
-  //
-  // It means that we have less garbage for our GC calls which improves performance.
-  // Also, it makes this library smaller.
-  //
-  // And the last reason, that the code without lots of useCallback with deps is easier to read.
-  // You have only one place for that.
-  const debounced = useMemo(() => {
-    const invokeFunc = (time: number) => {
-      const args = lastArgs.current;
-      const thisArg = lastThis.current;
-
-      lastArgs.current = lastThis.current = null;
-      lastInvokeTime.current = time;
-      return (result.current = funcRef.current.apply(thisArg, args));
    };

-    const startTimer = (pendingFunc: () => void, wait: number) => {
-      if (useRAF) cancelAnimationFrame(timerId.current);
-      timerId.current = useRAF
-        ? requestAnimationFrame(pendingFunc)
-        : setTimeout(pendingFunc, wait);
-    };
-
-    const shouldInvoke = (time: number) => {
-      if (!mounted.current) return false;
-
-      const timeSinceLastCall = time - lastCallTime.current;
-      const timeSinceLastInvoke = time - lastInvokeTime.current;
-
-      // Either this is the first call, activity has stopped and we're at the
-      // trailing edge, the system time has gone backwards and we're treating
-      // it as the trailing edge, or we've hit the `maxWait` limit.
-      return (
-        !lastCallTime.current ||
-        timeSinceLastCall >= wait ||
-        timeSinceLastCall < 0 ||
-        (maxing && timeSinceLastInvoke >= maxWait)
-      );
-    };
-
-    const trailingEdge = (time: number) => {
-      timerId.current = null;
-
-      // Only invoke if we have `lastArgs` which means `func` has been
-      // debounced at least once.
-      if (trailing && lastArgs.current) {
-        return invokeFunc(time);
+    const invoke = () => {
+      const a = argsRef.current;
+      argsRef.current = null;
+      if (a) {
+        callbackRef.current(...a);
      }
-      lastArgs.current = lastThis.current = null;
-      return result.current;
    };

-    const timerExpired = () => {
-      const time = Date.now();
-      if (shouldInvoke(time)) {
-        return trailingEdge(time);
-      }
-      // https://github.com/xnimorz/use-debounce/issues/97
-      if (!mounted.current) {
-        return;
-      }
-      // Remaining wait calculation
-      const timeSinceLastCall = time - lastCallTime.current;
-      const timeSinceLastInvoke = time - lastInvokeTime.current;
-      const timeWaiting = wait - timeSinceLastCall;
-      const remainingWait = maxing
-        ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
-        : timeWaiting;
+    const fn = ((...args: Parameters<T>) => {
+      const shouldCallLeading = leading && timerRef.current == null;

-      // Restart the timer
-      startTimer(timerExpired, remainingWait);
+      argsRef.current = args;
+
+      if (timerRef.current != null) clearTimeout(timerRef.current);
+
+      timerRef.current = globalThis.setTimeout(() => {
+        timerRef.current = null;
+        if (trailing) invoke();
+      }, delay);
+
+      if (shouldCallLeading) {
+        // Leading edge call happens immediately
+        invoke();
+      }
+    }) as Debounced<T>;
+
+    fn.cancel = () => {
+      argsRef.current = null;
+      clear();
    };

-    const func: DebouncedState<T> = (...args: Parameters<T>): ReturnType<T> => {
-      const time = Date.now();
-      const isInvoking = shouldInvoke(time);
-
-      lastArgs.current = args;
-      lastThis.current = this;
-      lastCallTime.current = time;
-
-      if (isInvoking) {
-        if (!timerId.current && mounted.current) {
-          // Reset any `maxWait` timer.
-          lastInvokeTime.current = lastCallTime.current;
-          // Start the timer for the trailing edge.
-          startTimer(timerExpired, wait);
-          // Invoke the leading edge.
-          return leading ? invokeFunc(lastCallTime.current) : result.current;
+    fn.flush = () => {
+      if (timerRef.current != null) {
+        clear();
+        invoke();
      }
-        if (maxing) {
-          // Handle invocations in a tight loop.
-          startTimer(timerExpired, wait);
-          return invokeFunc(lastCallTime.current);
-        }
-      }
-      if (!timerId.current) {
-        startTimer(timerExpired, wait);
-      }
-      return result.current;
    };

-    func.cancel = () => {
-      if (timerId.current) {
-        useRAF
-          ? cancelAnimationFrame(timerId.current)
-          : clearTimeout(timerId.current);
-      }
-      lastInvokeTime.current = 0;
-      lastArgs.current =
-        lastCallTime.current =
-        lastThis.current =
-        timerId.current =
-          null;
-    };
+    fn.pending = () => timerRef.current != null;

-    func.isPending = () => {
-      return !!timerId.current;
-    };
+    return fn;
+    // Recreate only if timing/edge behavior changes
+  }, [delay, leading, trailing]);

-    func.flush = () => {
-      return !timerId.current ? result.current : trailingEdge(Date.now());
-    };
-
-    return func;
-  }, [leading, maxing, wait, maxWait, trailing, useRAF]);
+  // Cancel on unmount
+  useEffect(() => () => debounced.cancel(), [debounced]);

  return debounced;
 }
-
--- a/lib/hooks/useEventListener.ts
+++ b/lib/hooks/useEventListener.ts
@@ -6,7 +6,7 @@ export function useEventListener<T extends Event>(
  element: typeof globalThis | HTMLElement = globalThis,
 ) {
  // Create a ref that stores handler
-  const savedHandler = useRef<(event: Event) => void>();
+  const savedHandler = useRef<(event: T) => void>();

  // Update ref.current value if handler changes.
  // This allows our effect below to always get latest handler ...
@@ -27,11 +27,11 @@ export function useEventListener<T extends Event>(
      const eventListener = (event: T) => savedHandler?.current?.(event);

      // Add event listener
-      element.addEventListener(eventName, eventListener);
+      element.addEventListener(eventName, (ev) => eventListener(ev as T));

      // Remove event listener on cleanup
      return () => {
-        element.removeEventListener(eventName, eventListener);
+        element.removeEventListener(eventName, (ev) => eventListener(ev as T));
      };
    },
    [eventName, element], // Re-run if eventName or element changes
--- a/lib/hooks/useThrottledCallback.ts
+++ b/lib/hooks/useThrottledCallback.ts
@@ -6,7 +6,7 @@ type ThrottleOptions = {
 };

 const useThrottledCallback = (
-  callback: (...args: any[]) => void,
+  callback: (...args: unknown[]) => void,
  delay: number,
  options: ThrottleOptions = {},
 ) => {
@@ -24,7 +24,7 @@ const useThrottledCallback = (
    };
  }, [timer]);

-  const throttledCallback = (...args: any[]) => {
+  const throttledCallback = (...args: unknown[]) => {
    const now = Date.now();

    if (leading && !isLeading) {
@@ -52,4 +52,3 @@ const useThrottledCallback = (
 };

 export default useThrottledCallback;
-
--- a/lib/hooks/useTraceProps.ts
+++ b/lib/hooks/useTraceProps.ts
@@ -1,14 +1,17 @@
 import { useEffect, useRef } from "preact/hooks";

-export function useTraceUpdate(props) {
+export function useTraceUpdate(props: Record<string, unknown>) {
  const prev = useRef(props);
  useEffect(() => {
-    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+    const changedProps = Object.entries(props).reduce(
+      (ps: Record<string, unknown>, [k, v]) => {
        if (prev.current[k] !== v) {
          ps[k] = [prev.current[k], v];
        }
        return ps;
-    }, {});
+      },
+      {},
+    );
    if (Object.keys(changedProps).length > 0) {
      console.log("Changed props:", changedProps);
    }
--- a/lib/image.ts
+++ b/lib/image.ts
@@ -3,7 +3,7 @@ import { createLogger } from "@lib/log/index.ts";
 import { generateThumbhash } from "@lib/thumbhash.ts";
 import { parseMediaType } from "https://deno.land/std@0.224.0/media_types/parse_media_type.ts";
 import path from "node:path";
-import { ensureDir } from "fs";
+import { mkdir } from "node:fs/promises";
 import { DATA_DIR } from "@lib/env.ts";
 import { db } from "@lib/db/sqlite.ts";
 import { imageTable } from "@lib/db/schema.ts";
@@ -13,7 +13,7 @@ import sharp from "npm:sharp@next";
 const log = createLogger("cache/image");

 const imageDir = path.join(DATA_DIR, "images");
-await ensureDir(imageDir);
+await mkdir(imageDir, { recursive: true });

 async function getRemoteImage(imageUrl: string) {
  try {
@@ -100,7 +100,7 @@ async function getLocalImagePath(
    hostname,
    pathname.split("/").filter((s) => s.length).join("-"),
  );
-  await ensureDir(imagePath);
+  await mkdir(imagePath, { recursive: true });

  if (width || height) {
    imagePath = path.join(imagePath, `${width ?? "-"}x${height ?? "-"}`);
@@ -134,7 +134,7 @@ async function getLocalImage(
 */
 async function storeLocalImage(
  url: string,
-  content: ArrayBuffer,
+  content: Uint8Array<ArrayBuffer> | ArrayBuffer,
  { width, height }: { width?: number; height?: number } = {},
 ) {
  const isValid = await verifyImage(new Uint8Array(content));
@@ -249,7 +249,7 @@ async function verifyImage(imageBuffer: Uint8Array): Promise<boolean> {
 export async function getImageContent(
  url: string,
  { width, height }: { width?: number; height?: number } = {},
-): Promise<{ content: ArrayBuffer; mimeType: string }> {
+): Promise<{ content: Uint8Array<ArrayBuffer>; mimeType: string }> {
  log.debug("Getting image content", { url, width, height });

  // Check if we have the image metadata in database
@@ -267,8 +267,8 @@ export async function getImageContent(
  // Fetch and cache original if needed
  if (!originalImage) {
    const fetchedImage = await getRemoteImage(url);
-    await storeLocalImage(url, fetchedImage.buffer);
    originalImage = new Uint8Array(fetchedImage.buffer);
+    await storeLocalImage(url, originalImage);
  }

  // Resize image
@@ -313,7 +313,7 @@ export async function getImage(url: string) {
    // Store in database
    const [newImage] = await db.insert(imageTable).values({
      url: url,
-      blurhash: thumbhash.hash,
+      thumbhash: thumbhash.hash,
      average: thumbhash.average,
      mime: imageContent.mediaType,
    }).returning();
--- a/lib/kmenu.ts
+++ b/lib/kmenu.ts
@@ -0,0 +1,3 @@
+import { signal } from "@preact/signals";
+
+export const isKMenuOpen = signal(false);
--- a/lib/log/constants.ts
+++ b/lib/log/constants.ts
@@ -1,12 +1,12 @@
 import * as env from "@lib/env.ts";
-import { ensureDir } from "fs";
 import { join } from "node:path";
 import { getLogLevel, LOG_LEVEL } from "@lib/log/types.ts";
+import { mkdir } from "node:fs/promises";

 export const LOG_DIR = join(env.DATA_DIR, "logs");

 // Ensure the log directory exists
-await ensureDir(LOG_DIR);
+await mkdir(LOG_DIR, { recursive: true });

 export let logLevel = getLogLevel(env.LOG_LEVEL);
 export function setLogLevel(level: LOG_LEVEL) {
--- a/lib/log/fs.ts
+++ b/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());
--- a/lib/log/index.ts
+++ b/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]}`),
  };
 }

--- a/lib/marka.ts
+++ b/lib/marka.ts
@@ -1,35 +0,0 @@
-import { MARKA_API_KEY } from "./env.ts";
-const url = `https://marka.max-richter.dev/resources`;
-//const url = "http://localhost:8080/resources";
-
-export async function fetchResource(resource: string) {
-  try {
-    const response = await fetch(
-      `${url}/${resource}`,
-    );
-    return response.json();
-  } catch (_e) {
-    return [];
-  }
-}
-
-export async function createResource(
-  path: string,
-  content: string | object | ArrayBuffer,
-) {
-  const isJson = typeof content === "object" &&
-    !(content instanceof ArrayBuffer);
-  const fetchUrl = `${url}/${path}`;
-  const response = await fetch(fetchUrl, {
-    method: "POST",
-    headers: {
-      "Content-Type": isJson ? "application/json" : "",
-      "Authentication": MARKA_API_KEY,
-    },
-    body: isJson ? JSON.stringify(content) : content,
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to create resource: ${response.status}`);
-  }
-  return response.json();
-}
--- a/lib/marka/index.ts
+++ b/lib/marka/index.ts
@@ -0,0 +1,117 @@
+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";
+
+async function addImageToResource<T extends GenericResource>(
+  resource: GenericResource,
+): Promise<T> {
+  const imageUrl = resource?.content?.image;
+  if (imageUrl) {
+    try {
+      const absoluteImageUrl = (imageUrl.startsWith("https://") ||
+          imageUrl.startsWith("http://"))
+        ? imageUrl
+        : `${MARKA_API_URL}/${imageUrl}`;
+      const image = await getImage(absoluteImageUrl);
+      return { ...resource, image } as T;
+    } catch (e) {
+      console.log(`Failed to fetch image: ${imageUrl}`, e);
+    }
+  }
+  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 d = `${MARKA_API_URL}/resources/${resource}`;
+    const res = await cachedFetch(d);
+    if (!res) return;
+    return addImageToResource<T>(res);
+  } catch (_e) {
+    return;
+  }
+}
+
+export async function listResources<T extends GenericResource>(
+  resource: string,
+): Promise<T[]> {
+  try {
+    const d = `${MARKA_API_URL}/resources/${resource}`;
+    const list = await cachedFetch(d);
+    if (!list) return [];
+    return Promise.all(
+      list?.content
+        .filter((a) => a?.content?._type)
+        .map((res) => addImageToResource(res) as Promise<T>),
+    );
+  } catch (_e) {
+    console.log(`Failed to fetch resource: ${resource}`, _e);
+    return [];
+  }
+}
+
+export async function createResource(
+  path: string,
+  content: string | object | ArrayBuffer,
+) {
+  const isJson = typeof content === "object" &&
+    !(content instanceof ArrayBuffer);
+  const fetchUrl = `${MARKA_API_URL}/resources/${path}`;
+  const headers = new Headers();
+  headers.append("Content-Type", isJson ? "application/json" : "");
+  if (MARKA_API_KEY) {
+    headers.append("Authentication", MARKA_API_KEY);
+  }
+  const response = await fetch(fetchUrl, {
+    method: "POST",
+    headers,
+    body: isJson ? JSON.stringify(content) : content,
+  });
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(
+      `failed to create resource (resources/${path}): ${
+        text || response.status
+      }`,
+    );
+  }
+  return response.json();
+}
--- a/lib/marka/schema.ts
+++ b/lib/marka/schema.ts
@@ -0,0 +1,140 @@
+import { z } from "zod";
+import { imageTable } from "../db/schema.ts";
+
+export const PersonSchema = z.object({
+  _type: z.literal("Person"),
+  name: z.string().optional(),
+});
+
+export const ReviewRatingSchema = z.object({
+  bestRating: z.number().optional(),
+  worstRating: z.number().optional(),
+  // Accept number or string (e.g., "⭐️⭐️⭐️⭐️⭐️")
+  ratingValue: z.union([z.number(), z.string()]).optional(),
+});
+
+const WithAuthor = z.object({ author: PersonSchema.optional() });
+const WithKeywords = z.object({ keywords: z.array(z.string()).optional() });
+const WithImage = z.object({ image: z.string().optional() });
+const WithDatePublished = z.object({ datePublished: z.string().optional() });
+
+const BaseContent = WithAuthor.merge(WithKeywords)
+  .merge(WithImage)
+  .merge(WithDatePublished);
+
+export const BaseFileSchema = z.object({
+  type: z.literal("file"),
+  name: z.string(),
+  path: z.string(),
+  modTime: z.string(), // ISO timestamp string
+  mime: z.string(),
+  size: z.number().int().nonnegative(),
+});
+
+const makeContentSchema = <
+  TName extends "Article" | "Review" | "Recipe",
+  TShape extends z.ZodRawShape,
+>(
+  name: TName,
+  shape: TShape,
+) =>
+  z
+    .object({
+      _type: z.literal(name),
+      keywords: z.array(z.string()).optional(),
+    })
+    .merge(BaseContent)
+    .extend(shape);
+
+export const ArticleContentSchema = makeContentSchema("Article", {
+  headline: z.string().optional(),
+  articleBody: z.string().optional(),
+  url: z.string().optional(),
+  reviewRating: ReviewRatingSchema.optional(),
+});
+
+export const ReviewContentSchema = makeContentSchema("Review", {
+  tmdbId: z.number().optional(),
+  link: z.string().optional(),
+  reviewRating: ReviewRatingSchema.optional(),
+  reviewBody: z.string().optional(),
+  itemReviewed: z
+    .object({
+      name: z.string().optional(),
+    })
+    .optional(),
+});
+
+export const RecipeContentSchema = makeContentSchema("Recipe", {
+  description: z.string().optional(),
+  name: z.string().optional(),
+  reviewRating: ReviewRatingSchema.optional(),
+  recipeIngredient: z.array(z.string()).optional(),
+  recipeInstructions: z.array(z.string()).optional(),
+  totalTime: z.string().optional(),
+  recipeYield: z.number().optional(),
+  url: z.string().optional(),
+});
+
+export const articleMetadataSchema = z.object({
+  headline: z.union([z.null(), z.string()]).describe("Headline of the article"),
+  author: z.union([z.null(), z.string()]).describe("Author of the article"),
+  datePublished: z.union([z.null(), z.string()]).describe(
+    "Date the article was published",
+  ),
+  keywords: z.union([z.null(), z.array(z.string())]).describe(
+    "Keywords for the article",
+  ),
+});
+
+export const ArticleSchema = BaseFileSchema.extend({
+  content: ArticleContentSchema,
+});
+
+export const ReviewSchema = BaseFileSchema.extend({
+  content: ReviewContentSchema,
+});
+
+export const RecipeSchema = BaseFileSchema.extend({
+  content: RecipeContentSchema,
+});
+
+export const GenericResourceSchema = z.union([
+  ArticleSchema,
+  ReviewSchema,
+  RecipeSchema,
+]);
+
+export type Person = z.infer<typeof PersonSchema>;
+export type ReviewRating = z.infer<typeof ReviewRatingSchema>;
+
+export type BaseFile = z.infer<typeof BaseFileSchema>;
+
+export type ArticleResource = z.infer<typeof ArticleSchema> & {
+  image?: typeof imageTable.$inferSelect;
+};
+
+export type ReviewResource = z.infer<typeof ReviewSchema> & {
+  image?: typeof imageTable.$inferSelect;
+};
+
+export type RecipeResource = z.infer<typeof RecipeSchema> & {
+  image?: typeof imageTable.$inferSelect;
+};
+
+export type GenericResource = z.infer<typeof GenericResourceSchema> & {
+  image?: typeof imageTable.$inferSelect;
+};
+
+export function getNameOfResource(res: GenericResource): string {
+  if (res.content?._type === "Article" && res.content.headline) {
+    return res.content.headline;
+  }
+  if (res.content?._type === "Review" && res.content.itemReviewed?.name) {
+    return res.content.itemReviewed.name;
+  }
+  if (res.content?._type === "Recipe" && res.content.name) {
+    return res.content.name;
+  }
+  return "Unnamed Resource";
+}
--- a/lib/documents.ts
+++ b/lib/documents.ts
@@ -44,11 +44,3 @@ export function renderMarkdown(doc: string) {
    allowMath: true,
  });
 }
-
-export function createDocument(
-  path: string,
-  entry: string,
-  mimetype = "image/jpeg",
-) {
-  console.log("creating", { path, entry, mimetype });
-}
--- a/lib/openai.ts
+++ b/lib/openai.ts
@@ -1,10 +1,10 @@
-import OpenAI from "https://deno.land/x/openai@v4.69.0/mod.ts";
-import { zodResponseFormat } from "https://deno.land/x/openai@v4.69.0/helpers/zod.ts";
+import OpenAI, { toFile } from "@openai/openai";
+import { zodResponseFormat } from "@openai/openai/helpers/zod";
 import { OPENAI_API_KEY } from "@lib/env.ts";
 import { hashString } from "@lib/helpers.ts";
 import { createCache } from "@lib/cache.ts";
 import { recipeResponseSchema } from "@lib/recipeSchema.ts";
-import { articleMetadataSchema } from "./resource/articles.ts";
+import { articleMetadataSchema } from "./marka/schema.ts";

 const openAI = OPENAI_API_KEY && new OpenAI({ apiKey: OPENAI_API_KEY });

@@ -35,7 +35,8 @@ export async function summarize(content: string) {
      {
        role: "user",
        content:
-          `Please summarize the article in one sentence as short as possible: ${content.slice(0, 2000)
+          `Please summarize the article in one sentence as short as possible: ${
+            content.slice(0, 2000)
          }`,
      },
    ],
@@ -102,7 +103,8 @@ export async function createGenres(
      {
        role: "system",
        content:
-          `you create some keywords that can be used in a recommendation system. The keywords are based on a ${type} description or title. If you do not know the title, take into account the description aswell. Create a range of keywords from very specific ones that describe the general vibe. ${title ? `The name of the ${type} is ${title}` : ""
+          `you create some keywords that can be used in a recommendation system. The keywords are based on a ${type} description or title. If you do not know the title, take into account the description aswell. Create a range of keywords from very specific ones that describe the general vibe. ${
+            title ? `The name of the ${type} is ${title}` : ""
          }. Return a list of around 20 keywords seperated by commas`,
      },
      {
@@ -166,7 +168,8 @@ export const getMovieRecommendations = async (

 ${keywords} 

-The movies should be similar to but not include ${exclude.join(", ")
+The movies should be similar to but not include ${
+            exclude.join(", ")
          } or remakes of that.

 respond with a plain unordered list each item starting with the year the movie was released and then the title of the movie seperated by a -`,
@@ -192,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({
@@ -213,7 +233,7 @@ export async function createTags(content: string) {

 export async function extractRecipe(content: string) {
  if (!openAI) return;
-  const completion = await openAI.beta.chat.completions.parse({
+  const completion = await openAI.chat.completions.parse({
    model: model,
    temperature: 0.1,
    messages: [
@@ -231,7 +251,7 @@ export async function extractRecipe(content: string) {

 export async function extractArticleMetadata(content: string) {
  if (!openAI) return;
-  const completion = await openAI.beta.chat.completions.parse({
+  const completion = await openAI.chat.completions.parse({
    model: model,
    temperature: 0.1,
    messages: [
@@ -256,7 +276,7 @@ export async function transcribe(
 ): Promise<string | undefined> {
  if (!openAI) return;

-  const file = new File([mp3Data], "audio.mp3", {
+  const file = await toFile(mp3Data, "audio.mp3", {
    type: "audio/mpeg",
  });

--- a/lib/parseIngredient.ts
+++ b/lib/parseIngredient.ts
@@ -1,7 +1,7 @@
 import {
  parseIngredient,
  unitsOfMeasure as _unitsOfMeasure,
-} from "https://esm.sh/parse-ingredient@1.2.1";
+} from "parse-ingredient";
 import { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
 import { removeMarkdownFormatting } from "@lib/string.ts";

@@ -77,7 +77,7 @@ export function parseIngredients(
      };

      const unit = ingredient.unit.toLowerCase() as keyof typeof unitsOfMeasure;
-      if (unit in unitsOfMeasure && unit !== "cup") {
+      if (unit in unitsOfMeasure) {
        ingredient.unit = unitsOfMeasure[unit].short;
      }

--- a/lib/playwright.ts
+++ b/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 {
--- a/lib/recipeSchema.ts
+++ b/lib/recipeSchema.ts
@@ -1,4 +1,5 @@
 import { z } from "npm:zod";
+import { RecipeResource } from "./marka/schema.ts";

 export const IngredientSchema = z.object({
  quantity: z.string().describe(
@@ -19,7 +20,7 @@ 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",
@@ -29,6 +30,9 @@ const recipeSchema = z.object({
    _type: z.literal("Person"),
    name: z.string().describe("author of the Recipe (optional)"),
  }),
+  keywords: z.array(z.string()).describe(
+    "List of keywords that match the recipe",
+  ),
  recipeIngredient: z.array(z.string())
    .describe("List of ingredients"),
  recipeInstructions: z.array(z.string()).describe("List of instructions"),
@@ -38,17 +42,13 @@ const recipeSchema = z.object({

 export type Recipe = z.infer<typeof recipeSchema>;

-const noRecipeSchema = z.object({
-  errorMessages: z.array(z.string()).describe(
-    "List of error messages, if no recipe was found",
-  ),
-});
+const noRecipeSchema = z.literal("none").describe("No Recipe found");

 export const recipeResponseSchema = z.union([recipeSchema, noRecipeSchema]);

 export function isValidRecipe(
  recipe:
-    | Recipe
+    | RecipeResource
    | null
    | undefined,
 ) {
--- a/lib/recommendation.ts
+++ b/lib/recommendation.ts
@@ -1,10 +1,10 @@
 import * as openai from "@lib/openai.ts";
 import * as tmdb from "@lib/tmdb.ts";
-import { GenericResource } from "@lib/types.ts";
 import { parseRating } from "@lib/helpers.ts";
 import { createCache } from "@lib/cache.ts";
+import { ReviewResource } from "./marka/schema.ts";

-type RecommendationResource = {
+export type RecommendationResource = {
  id: string;
  type: string;
  rating: number;
@@ -18,42 +18,48 @@ type RecommendationResource = {
 const cache = createCache<RecommendationResource>("recommendations");

 export async function createRecommendationResource(
-  res: GenericResource,
+  res: ReviewResource,
  description?: string,
 ) {
-  const cacheId = `${res.type}:${res.id.replaceAll(":", "")}`;
+  const cacheId = `${res.type}:${res.name.replaceAll(":", "")}`;
  const resource = cache.get(cacheId) || {
-    id: res.id,
+    id: res.name,
    type: res.type,
    rating: -1,
  };
  if (description && !resource.keywords) {
-    const keywords = await openai.createKeywords(res.type, description, res.id);
+    const keywords = await openai.createKeywords(
+      res.type,
+      description,
+      res.name,
+    );
    if (keywords?.length) {
      resource.keywords = keywords;
    }
  }

-  const { author, date, rating } = res.meta || {};
+  const { author, datePublished, reviewRating } = res.content;

-  if (res?.tags) {
-    resource.tags = res.tags;
+  if (res?.content?.keywords) {
+    resource.keywords = res.content.keywords;
  }

-  if (typeof rating !== "undefined") {
-    resource.rating = parseRating(rating);
+  if (typeof reviewRating?.ratingValue !== "undefined") {
+    resource.rating = parseRating(reviewRating?.ratingValue);
  }

-  if (author) {
-    resource.author = author;
+  if (author?.name) {
+    resource.author = author.name;
  }

  if (description) {
    resource.description = description;
  }

-  if (date) {
-    const d = typeof date === "string" ? new Date(date) : date;
+  if (datePublished) {
+    const d = typeof datePublished === "string"
+      ? new Date(datePublished)
+      : datePublished;
    resource.year = d.getFullYear();
  }

@@ -68,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(
@@ -90,5 +96,5 @@ export async function getAllRecommendations(): Promise<
 > {
  const keys = cache.keys();
  const res = await Promise.all(keys.map((k) => cache.get(k)));
-  return res.map((r) => JSON.parse(r));
+  return res.filter((s) => !!s).map((r) => JSON.parse(r));
 }
--- a/lib/resource/articles.ts
+++ b/lib/resource/articles.ts
@@ -1,30 +0,0 @@
-import { z } from "zod";
-export type Article = {
-  _type: "Article";
-  headline?: string;
-  datePublished?: string;
-  articleBody?: string;
-  keywords?: string[];
-  image?: string;
-  url?: string;
-  reviewRating?: {
-    bestRating?: number;
-    worstRating?: number;
-    ratingValue?: number;
-  };
-  author?: {
-    _type: "Person";
-    name?: string;
-  };
-};
-
-export const articleMetadataSchema = z.object({
-  headline: z.union([z.null(), z.string()]).describe("Headline of the article"),
-  author: z.union([z.null(), z.string()]).describe("Author of the article"),
-  datePublished: z.union([z.null(), z.string()]).describe(
-    "Date the article was published",
-  ),
-  keywords: z.union([z.null(), z.array(z.string())]).describe(
-    "Keywords for the article",
-  ),
-});
--- a/lib/resource/movies.ts
+++ b/lib/resource/movies.ts
@@ -1,21 +0,0 @@
-export type Movie = {
-  _type: "Review";
-  tmdbId?: number;
-  link?: string;
-  author?: {
-    _type: "Person";
-    name?: string;
-  };
-  datePublished?: string;
-  reviewRating?: {
-    bestRating?: number;
-    worstRating?: number;
-    ratingValue?: number;
-  };
-  reviewBody?: string;
-  itemReviewed?: {
-    name?: string;
-  };
-  keywords?: string[];
-  image?: string;
-};
--- a/lib/resource/recipes.ts
+++ b/lib/resource/recipes.ts
@@ -1,17 +0,0 @@
-export type Recipe = {
-  _type: "Recipe";
-  author?: {
-    _type: "Person";
-    name?: string;
-  };
-  description?: string;
-  image?: string;
-  name?: string;
-  recipeIngredient?: string[];
-  recipeInstructions?: string[];
-  datePublished?: string;
-  totalTime?: string;
-  recipeYield?: number;
-  url?: string;
-  keywords?: string[];
-};
--- a/lib/resource/series.ts
+++ b/lib/resource/series.ts
@@ -1,3 +0,0 @@
-import { Movie } from "./movies.ts";
-
-export type Series = Movie;
--- a/lib/resources.ts
+++ b/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",
  },
--- a/lib/search.ts
+++ b/lib/search.ts
@@ -1,12 +1,9 @@
 import { resources } from "@lib/resources.ts";
-import fuzzysort from "npm:fuzzysort";
-import { GenericResource } from "@lib/types.ts";
+import fuzzysort from "fuzzysort";
 import { extractHashTags } from "@lib/string.ts";
-import { Movie } from "@lib/resource/movies.ts";
-import { Article } from "@lib/resource/articles.ts";
-import { Recipe } from "@lib/resource/recipes.ts";
-import { Series } from "@lib/resource/series.ts";
-import { fetchResource } from "./marka.ts";
+import { listResources } from "./marka/index.ts";
+import { GenericResource } from "./marka/schema.ts";
+import { parseRating } from "./helpers.ts";

 type ResourceType = keyof typeof resources;

@@ -22,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);
@@ -48,8 +45,8 @@ export function parseResourceUrl(_url: string | URL): SearchParams | undefined {
 }

 const isResource = (
-  item: Movie | Series | Article | Recipe | boolean,
-): item is Movie | Series | Article | Recipe => {
+  item: GenericResource | boolean | undefined,
+): item is GenericResource => {
  return !!item;
 };

@@ -57,38 +54,59 @@ export async function searchResource(
  { q, tags = [], types, rating }: SearchParams,
 ): Promise<GenericResource[]> {
  const resources = (await Promise.all([
-    (!types || types.includes("movie")) && fetchResource("movies"),
-    (!types || types.includes("series")) && fetchResource("series"),
-    (!types || types.includes("article")) && fetchResource("articles"),
-    (!types || types.includes("recipe")) && fetchResource("recipes"),
+    (!types || types.includes("movies")) && listResources("movies"),
+    (!types || types.includes("series")) && listResources("series"),
+    (!types || types.includes("articles")) && listResources("articles"),
+    (!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) {
    if (
      !(resource.name in results) &&
-      tags?.length && resource.tags.length &&
-      tags.every((t) => resource.tags.includes(t))
+      tags?.length && resource.content.keywords?.length &&
+      tags.every((t) => resource.content.keywords?.includes(t))
    ) {
-      results[resource.id] = resource;
+      results[resource.name] = resource;
+    }
+
+    // Select not-rated resources
+    if (
+      rating === 0 &&
+      resource.content?.reviewRating?.ratingValue === undefined
+    ) {
+      results[resource.name] = resource;
    }

    if (
-      !(resource.id in results) &&
-      rating && resource?.meta?.rating && resource.meta.rating >= rating
+      typeof rating === "number" &&
+      rating !== 0 &&
+      resource.content.reviewRating?.ratingValue &&
+      parseRating(resource.content.reviewRating.ratingValue) >= rating
    ) {
-      results[resource.id] = resource;
+      results[resource.name] = resource;
    }
  }

  if (q.length && q !== "*") {
+    q = decodeURIComponent(q);
    const fuzzyResult = fuzzysort.go(q, resources, {
-      keys: ["content", "name", "description", "meta.author"],
+      keys: [
+        "name",
+        "content.articleBody",
+        "content.reviewBody",
+        "content.name",
+        "content.description",
+        "content.author.name",
+      ],
      threshold: 0.3,
    });
+    console.log({ fuzzyResult });
    for (const result of fuzzyResult) {
-      results[result.obj.id] = result.obj;
+      results[result.obj.name] = result.obj;
    }
  }

--- a/lib/string.ts
+++ b/lib/string.ts
@@ -1,25 +1,37 @@
-import { resources } from "@lib/resources.ts";
-
-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 {
-  let fileName = inputString.toLowerCase();
-  fileName = fileName.replace(/ /g, "_");
-  fileName = fileName.replace(/[^\w.-]/g, "");
-  fileName = fileName.replaceAll(":", "");
-  return fileName;
+export function safeFileName(input: string): string {
+  return input
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[\s-]+/g, "_")
+    .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
-    .toLowerCase() // Convert to lowercase
-    .replace(/[^a-z0-9\s-]/g, "") // Remove non-alphanumeric characters except spaces and hyphens
-    .replace(/\s+/g, "-") // Replace spaces with hyphens
-    .replace(/-+/g, "-"); // Remove consecutive hyphens
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^A-Za-z0-9 _-]+/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
 }

 export function extractHashTags(inputString: string) {
--- a/lib/taskManager.ts
+++ b/lib/taskManager.ts
@@ -1,5 +1,5 @@
 import { transcribe } from "@lib/openai.ts";
-import { createDocument } from "@lib/documents.ts";
+import { createResource } from "@lib/marka/index.ts";
 import { createLogger } from "./log/index.ts";
 import { convertOggToMp3 } from "./helpers.ts";

@@ -62,13 +62,13 @@ export async function endTask(chatId: string): Promise<string | null> {

  try {
    for (const entry of photoTasks) {
-      await createDocument(entry.path, entry.content, "image/jpeg");
+      await createResource(entry.path, entry.content);
    }
  } catch (err) {
    log.error("Error creating photo document:", err);
  }
  try {
-    await createDocument(task.noteName, finalNote, "text/markdown");
+    await createResource(task.noteName, finalNote);
  } catch (error) {
    log.error("Error creating document:", error);
    return error instanceof Error
--- a/lib/thumbhash.ts
+++ b/lib/thumbhash.ts
@@ -1,4 +1,4 @@
-import * as thumbhash from "https://esm.sh/thumbhash@0.1.1";
+import * as thumbhash from "thumbhash";

 export function generateThumbhash(buffer: Uint8Array, w: number, h: number) {
  const hash = thumbhash.rgbaToThumbHash(w, h, buffer);
--- a/lib/tmdb.ts
+++ b/lib/tmdb.ts
@@ -5,7 +5,7 @@ import {
  MovieResultsResponse,
  ShowResponse,
  TvResultsResponse,
-} from "https://esm.sh/moviedb-promise@3.4.1";
+} from "moviedb-promise";
 import { createCache } from "@lib/cache.ts";
 const moviedb = new MovieDb(Deno.env.get("TMDB_API_KEY") || "");

--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,4 +1,4 @@
-import { resources } from "@lib/resources.ts";
+import { GenericResource } from "./marka/schema.ts";

 export interface TMDBMovie {
  adult: boolean;
@@ -33,35 +33,19 @@ export interface TMDBSeries {
  vote_count: number;
 }

-export type GenericResource = {
-  name: string;
-  id: string;
-  tags?: string[];
-  type: keyof typeof resources;
-  content?: string;
-  meta?: {
-    image?: string;
-    author?: string;
-    rating?: number;
-    average?: string;
-    date?: Date | string;
-    thumbnail?: string;
-  };
-};
-
 export interface GiteaOauthUser {
  sub: string;
  name: string;
  preferred_username: string;
  email: string;
  picture: string;
-  groups: any;
+  groups: unknown;
 }

 export type SearchResult = {
  id: string;
  name: string;
-  type: keyof typeof resources;
+  type: GenericResource["content"]["_type"];
  date?: string;
  rating: number;
  tags: string[];
--- a/lib/unsplash.ts
+++ b/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;
+}
--- a/lib/webScraper.ts
+++ b/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
@@ -11,12 +13,14 @@ export function absolutizeDomUrls(dom: JSDOM, domain: string): void {
  const base = toBase(domain);

  const rewrite = (selector: string, attr: string) => {
-    document.querySelectorAll<HTMLElement>(selector).forEach((el) => {
+    document.querySelectorAll<HTMLElement>(selector).forEach(
+      (el: HTMLElement) => {
        const v = el.getAttribute(attr);
        if (!v) return;
        const abs = toAbsolute(v, base);
        if (abs !== v) el.setAttribute(attr, abs);
-    });
+      },
+    );
  };

  // Common URL attributes
@@ -41,35 +45,35 @@ export function absolutizeDomUrls(dom: JSDOM, domain: string): void {
  rewrite("form[action]", "action");
  rewrite("video[poster]", "poster");

-  // srcset (img, source)
  document
-    .querySelectorAll<HTMLElement>("img[srcset], source[srcset]")
-    .forEach((el) => {
+    .querySelectorAll("img[srcset], source[srcset]")
+    .forEach((el: HTMLImageElement) => {
      const v = el.getAttribute("srcset");
      if (!v) return;
      const abs = absolutizeSrcset(v, base);
      if (abs !== v) el.setAttribute("srcset", abs);
    });

-  // Inline CSS in style attributes: url(...)
-  document.querySelectorAll<HTMLElement>("[style]").forEach((el) => {
+  document.querySelectorAll("[style]").forEach(
+    (el: HTMLElement) => {
      const v = el.getAttribute("style");
      if (!v) return;
      const abs = absolutizeCssUrls(v, base);
      if (abs !== v) el.setAttribute("style", abs);
-  });
+    },
+  );

-  // <style> blocks (inline CSS): url(...)
-  document.querySelectorAll<HTMLStyleElement>("style").forEach((styleEl) => {
+  document.querySelectorAll("style").forEach(
+    (styleEl: HTMLStyleElement) => {
      const css = styleEl.textContent ?? "";
      const abs = absolutizeCssUrls(css, base);
      if (abs !== css) styleEl.textContent = abs;
-  });
+    },
+  );

-  // <meta http-equiv="refresh" content="5; url=/path">
  document
-    .querySelectorAll<HTMLMetaElement>('meta[http-equiv="refresh" i][content]')
-    .forEach((meta) => {
+    .querySelectorAll('meta[http-equiv="refresh" i][content]')
+    .forEach((meta: HTMLMetaElement) => {
      const content = meta.getAttribute("content") || "";
      const abs = absolutizeMetaRefresh(content, base);
      if (abs !== content) meta.setAttribute("content", abs);
@@ -162,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>,
@@ -170,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),
+  };
 }
--- a/lib/youtube.ts
+++ b/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];
 }
--- a/routes/_404.tsx
+++ b/routes/_404.tsx
@@ -7,7 +7,7 @@ export default function Error404() {
      <Head>
        <title>404 - Page not found</title>
      </Head>
-      <MainLayout>
+      <MainLayout url="">
        <div class="px-8 text-white mt-10">
          <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
            <h1 class="text-4xl font-bold">404 - Page not found</h1>
--- a/routes/_app.tsx
+++ b/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
-    .readTextFileSync("./static/global.css")
-    .replaceAll("\n", "");
+  const globalCss = Deno.readTextFileSync("./static/global.css");

  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>
@@ -29,7 +39,7 @@ export default function App({ Component }: PageProps) {
          <Component />
        </Partial>
      </body>
-      <script src="/thumbnails.js" type="module" async defer />
+      <script src="/thumbhash.js" type="module" async defer />
    </html>
  );
 }
--- a/routes/_layout.tsx
+++ b/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
-        class="py-5"
-        style={{ fontFamily: "Work Sans" }}
-      >
+      <main class="py-5">
        <Component />
      </main>
+      <KMenuButton />
    </div>
  );
 }
--- a/routes/admin/cache/index.tsx
+++ b/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">
--- a/routes/admin/log/index.tsx
+++ b/routes/admin/log/index.tsx
@@ -3,7 +3,7 @@ import { Handlers, PageProps } from "$fresh/server.ts";
 import { AccessDeniedError } from "@lib/errors.ts";
 import { getLogs, Log } from "@lib/log/index.ts";
 import { formatDate } from "@lib/string.ts";
-import { renderMarkdown } from "@lib/documents.ts";
+import { renderMarkdown } from "@lib/markdown.ts";

 const renderLog = (t: unknown) =>
  renderMarkdown(`\`\`\`js
@@ -16,7 +16,6 @@ export const handler: Handlers = {
    if (!("session" in ctx.state)) {
      throw new AccessDeniedError();
    }
-    console.log({ logs });
    return ctx.render({
      logs: logs.map((l) => {
        return {
@@ -30,7 +29,7 @@ export const handler: Handlers = {

 function LogLine(
  { log }: {
-    log: Log;
+    log: Log & { html?: string };
  },
 ) {
  return (
@@ -53,7 +52,8 @@ function LogLine(
      </div>
      <div
        class="text-white"
-        dangerouslySetInnerHTML={{ __html: log.html }}
+        // deno-lint-ignore react-no-danger
+        dangerouslySetInnerHTML={{ __html: log.html ?? "" }}
      />
    </div>
  );
--- a/routes/api/articles/[name].ts
+++ b/routes/api/articles/[name].ts
@@ -1,6 +1,6 @@
 import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";

 export const handler: Handlers = {
  async GET(_, ctx) {
--- a/routes/api/articles/create/index.ts
+++ b/routes/api/articles/create/index.ts
@@ -3,20 +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 { Article } from "@lib/resource/articles.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.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;
@@ -25,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, {
-    markdown: true,
-  });
+  log.debug("downloaded and parse parsed", result);

-  log.debug("downloaded and parse parsed", {
-    url: fetchUrl,
-    content: result.content,
-  });
+  streamResponse.info("parsed article, creating tags with openai");

-  streamResponse.enqueue("parsed article, creating tags with openai");
+  const aiMeta = await openai.extractArticleMetadata(result.markdown);

-  const aiMeta = await openai.extractArticleMetadata(result.content);
-
-  streamResponse.enqueue("postprocessing article");
+  streamResponse.info("postprocessing article");

  const title = result?.title || aiMeta?.headline || "";
-  const id = toUrlSafeString(title);

-  const newArticle: Article = {
+  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 ||
-      new Date().toISOString(),
-    image: result?.image,
+    datePublished: formatDate(
+      result?.published || aiMeta?.datePublished || undefined,
+    ),
+    image: coverImagePath,
    author: {
      _type: "Person",
      name: (result.schemaOrgData?.author?.name || aiMeta?.author || "")
@@ -65,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(
@@ -82,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");
-  const newId = await openai.shortenTitle(video.snippet.title);
+  streamResponse.info("shortening title with openai");
+  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: Article = {
+  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 = {
--- a/routes/api/articles/enhance/[name].ts
+++ b/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,
+};
--- a/routes/api/articles/index.ts
+++ b/routes/api/articles/index.ts
@@ -1,6 +1,6 @@
 import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";

 export const handler: Handlers = {
  async GET() {
--- a/routes/api/images/index.ts
+++ b/routes/api/images/index.ts
@@ -60,9 +60,10 @@ function parseParams(reqUrl: URL): ImageParams | string {
  }
 }
 // Helper function to generate ETag
-async function generateETag(content: ArrayBuffer): Promise<string> {
+async function generateETag(content: Uint8Array<ArrayBuffer>): Promise<string> {
  const hashBuffer = await crypto.subtle.digest("SHA-256", content);
-  return `"${Array.from(new Uint8Array(hashBuffer))
+  return `"${
+    Array.from(new Uint8Array(hashBuffer))
      .map((b) => b.toString(16).padStart(2, "0"))
      .join("")
  }"`;
@@ -80,13 +81,9 @@ async function GET(req: Request, _ctx: FreshContext): Promise<Response> {
      });
    }

-    const imageUrl = params.image.startsWith("resources")
-      ? `https://marka.max-richter.dev/${params.image.replace(/^\//, "")}`
-      : params.image;
+    log.debug("Processing image request:", { params });

-    log.debug("Processing image request:", { imageUrl, params });
-
-    const image = await getImageContent(imageUrl, params);
+    const image = await getImageContent(params.image, params);

    // Generate ETag based on image content
    const eTag = await generateETag(image.content);
--- a/routes/api/index.ts
+++ b/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([]);
  },
 };
--- a/routes/api/movies/[name].ts
+++ b/routes/api/movies/[name].ts
@@ -1,11 +1,16 @@
 import { Handlers } from "$fresh/server.ts";
-import { Movie } from "@lib/resource/movies.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 { AccessDeniedError } from "@lib/errors.ts";
-import { createResource, fetchResource } from "@lib/marka.ts";
+import {
+  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";

 export const handler: Handlers = {
  async GET(_, ctx) {
@@ -14,26 +19,22 @@ export const handler: Handlers = {
  },
  async POST(_, ctx) {
    const session = ctx.state.session;
-    if (!session) {
-      throw new AccessDeniedError();
-    }
+    if (!session) throw new AccessDeniedError();

    const tmdbId = parseInt(ctx.params.name);
+    if (Number.isNaN(tmdbId)) throw new BadRequestError();

-    const movieDetails = await tmdb.getMovie(tmdbId);
-    const movieCredits = await tmdb.getMovieCredits(tmdbId);
+    const [movieDetails, movieCredits] = await Promise.all([
+      tmdb.getMovie(tmdbId),
+      tmdb.getMovieCredits(tmdbId),
+    ]);

-    const releaseDate = movieDetails.release_date;
-    const posterPath = movieDetails.poster_path;
-    const director = movieCredits?.crew?.filter?.((person) =>
-      person.job === "Director"
-    )[0];
-
-    movieDetails.overview;
-
-    let finalPath = "";
-    const name = movieDetails.title || movieDetails.original_title ||
+    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[] = [];
-    if (movieDetails.genres) {
-      tags.push(
-        ...movieDetails.genres.map((g) => g.name?.toLowerCase()).filter(
-          isString,
-        ),
-      );
-    }
+    const keywords = movieDetails.genres
+      ?.map((g) => g.name?.toLowerCase())
+      .filter(isString) || [];

-    const movie: Movie = {
+    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 });
  },
 };
--- a/routes/api/movies/enhance/[name].ts
+++ b/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 { isString, safeFileName } from "@lib/string.ts";
+import {
+  formatDate,
+  isString,
+  safeFileName,
+  toUrlSafeString,
+} from "@lib/string.ts";
 import { json } from "@lib/helpers.ts";
 import {
  AccessDeniedError,
@@ -9,7 +14,8 @@ import {
  NotFoundError,
 } from "@lib/errors.ts";
 import { createRecommendationResource } from "@lib/recommendation.ts";
-import { createResource, fetchResource } from "@lib/marka.ts";
+import { createResource, fetchResource } from "@lib/marka/index.ts";
+import { ReviewResource } from "@lib/marka/schema.ts";

 const POST = async (
  req: Request,
@@ -20,7 +26,9 @@ const POST = async (
    throw new AccessDeniedError();
  }

-  const movie = await fetchResource(`movies/${ctx.params.name}`);
+  const movie = await fetchResource<ReviewResource>(
+    `movies/${ctx.params.name}`,
+  );
  if (!movie) {
    throw new NotFoundError();
  }
@@ -33,27 +41,29 @@ const POST = async (
  }

  const movieDetails = await tmdb.getMovie(tmdbId);
-  const movieCredits = !movie.meta?.author &&
+  const movieCredits = !movie.content?.author &&
    await tmdb.getMovieCredits(tmdbId);

-  const releaseDate = movieDetails.release_date;
-  if (releaseDate && !movie.meta?.date) {
-    movie.meta = movie.meta || {};
-    movie.meta.date = new Date(releaseDate);
-  }
+  const director = movieCredits &&
+    movieCredits?.crew?.filter?.((person) => person.job === "Director")[0];

-  const director = movieCredits?.crew?.filter?.((person) =>
-    person.job === "Director"
-  )[0];
-  if (director && !movie.meta?.author) {
-    movie.meta = movie.meta || {};
-    movie.meta.author = director.name;
+  movie.content ??= {
+    _type: "Review",
+  };
+
+  movie.content.datePublished ??= formatDate(movieDetails.release_date);
+
+  if (director && !movie.content?.author) {
+    movie.content.author = {
+      _type: "Person",
+      name: director.name,
+    };
  }

  if (movieDetails.genres) {
-    movie.tags = [
+    movie.content.keywords = [
      ...new Set([
-        ...(movie.tags?.map((g) => g.toLowerCase()) || []),
+        ...(movie.content.keywords?.map((g) => g.toLowerCase()) || []),
        ...movieDetails.genres.map((g) =>
          g.name?.toLowerCase().replaceAll(" ", "-")
        ),
@@ -61,22 +71,19 @@ const POST = async (
    ];
  }

-  if (!movie.id) {
-    movie.id = tmdbId;
-  }
+  movie.content.tmdbId ??= tmdbId;

  let finalPath = "";
  const posterPath = movieDetails.poster_path;
-  if (posterPath && !movie.meta?.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.meta = movie.meta || {};
-    movie.meta.image = finalPath;
+    movie.content.image = finalPath;
  }

-  await createResource(`movies/${safeFileName(movie.id)}.md`, movie);
+  await createResource(`movies/${toUrlSafeString(movie.name)}.md`, movie);

  createRecommendationResource(movie, movieDetails.overview);

--- a/routes/api/movies/index.ts
+++ b/routes/api/movies/index.ts
@@ -1,6 +1,6 @@
 import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";

 export const handler: Handlers = {
  async GET() {
--- a/routes/api/query/index.ts
+++ b/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 { searchResource } from "@lib/search.ts";
+import { AccessDeniedError, BadRequestError } from "@lib/errors.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(",");
-    const tags = url.searchParams?.get("tags")?.split(",");
-    const authors = url.searchParams?.get("authors")?.split(",");
-
-    const resources = await searchResource({
-      q: url.searchParams.get("q") || "",
-      types,
-      tags,
-      authors,
-    });
+    console.log(s);
+    const resources = await searchResource(s);

    return json(resources);
  },
--- a/routes/api/recipes/[name].ts
+++ b/routes/api/recipes/[name].ts
@@ -1,6 +1,6 @@
 import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";

 export const handler: Handlers = {
  async GET(_, ctx) {
--- a/routes/api/recipes/create/index.ts
+++ b/routes/api/recipes/create/index.ts
@@ -3,15 +3,14 @@ import { AccessDeniedError, BadRequestError } from "@lib/errors.ts";
 import { createStreamResponse, isValidUrl } from "@lib/helpers.ts";
 import * as openai from "@lib/openai.ts";
 import { createLogger } from "@lib/log/index.ts";
-import { Recipe } from "@lib/resource/recipes.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.ts";
+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, {
-    markdown: true,
-  });
-
-  streamResponse.enqueue("download success");
+  streamResponse.info("download success");

  const jsonLds = Array.from(
-    doc?.querySelectorAll(
+    result.dom?.querySelectorAll(
      "script[type='application/ld+json']",
    ),
  ) as unknown as HTMLScriptElement[];
@@ -42,64 +37,60 @@ 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) {
+        recipe = parseJsonLdToRecipeSchema(jsonLd.textContent);
        if (recipe) break;
      }
    }
-
-  if (!recipe) {
-    recipe = await openai.extractRecipe(result.content);
  }

-  const id = safeFileName(recipe?.title || "");
+  if (!recipe) {
+    const res = await openai.extractRecipe(result.markdown);
+    if (!res || res === "none") {
+      streamResponse.error(`failed to extract recipe: ${res}`);
+      return;
+    }
+    recipe = res;
+  }
+
+  const id = toUrlSafeString(recipe?.name || "");

  if (!recipe) {
-    streamResponse.enqueue("failed to parse recipe");
+    streamResponse.error("failed to parse recipe");
    streamResponse.cancel();
    return;
  }

-  const newRecipe: Recipe = {
+  const newRecipe: RecipeResource["content"] = {
+    ...recipe,
    _type: "Recipe",
-    name: recipe?.title,
-    description: recipe?.description,
-    recipeIngredient: recipe?.ingredients || [],
-    recipeInstructions: recipe?.instructions || [],
-    keywords: recipe.tags || [],
-    image: recipe?.image,
    totalTime: recipe?.totalTime
      ? `${recipe?.totalTime?.toString()} minutes`
      : undefined,
    url: fetchUrl,
-    author: {
-      _type: "Person",
-      name: recipe?.author,
-    },
-    recipeYield: recipe?.servings,
  };

  if (newRecipe?.image && newRecipe.image.length > 5) {
-    const extension = fileExtension(new URL(newRecipe.image).pathname);
-    const finalPath = `resources/recipes/images/${safeFileName(id)
-      }_cover.${extension}`;
-    streamResponse.enqueue("downloading image");
+    const extension = fileExtension(newRecipe.image);
+    const finalPath = `recipes/images/${safeFileName(id)}_cover.${extension}`;
+    streamResponse.info("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 = {
@@ -121,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();
--- a/routes/api/recipes/create/parseJsonLd.ts
+++ b/routes/api/recipes/create/parseJsonLd.ts
@@ -1,5 +1,4 @@
-import recipeSchema from "@lib/recipeSchema.ts";
-import { parseIngredients } from "@lib/parseIngredient.ts";
+import recipeSchema, { Recipe } from "@lib/recipeSchema.ts";

 export function parseJsonLdToRecipeSchema(jsonLdContent: string) {
  try {
@@ -19,57 +18,53 @@ export function parseJsonLdToRecipeSchema(jsonLdContent: string) {
      return;
    }

-    // Map and parse ingredients into the new schema
-    const ingredients = parseIngredients(
-      data?.recipeIngredient?.join("\n") || "",
-    );
-
-    const instructions = Array.isArray(data.recipeInstructions)
-      ? data.recipeInstructions.map((instr) => {
+    const recipeInstructions = Array.isArray(data.recipeInstructions)
+      ? data.recipeInstructions.map((instr: unknown) => {
+        if (!instr) return "";
        if (typeof instr === "string") return instr;
-        if (typeof instr === "object" && instr.text) return instr.text;
+        if (typeof instr === "object" && "text" in instr && instr.text) {
+          return instr.text;
+        }
        return "";
-      }).filter((instr) => instr.trim() !== "")
+      }).filter((instr: string) => instr.trim() !== "")
      : [];

    // 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)
-        ? data.author.map((a: any) => a.name).join(", ")
+      author: {
+        "_type": "Person",
+        name: Array.isArray(data.author)
+          ? data.author.map((a: { name: string }) => a.name).join(", ")
          : data.author?.name || "",
+      },
      description: data.description || "",
-      ingredients,
-      instructions,
-      servings,
-      prepTime,
-      cookTime,
+      recipeIngredient: data.recipeIngredient,
+      recipeInstructions,
+      recipeYield,
      totalTime,
-      tags,
-      notes: data.notes || [],
+      keywords,
    };

    // 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;
  }
 }
@@ -81,7 +76,7 @@ function pickImage(images: string | string[]): string {
  return images;
 }

-function parseServings(servingsData: any): number {
+function parseServings(servingsData: unknown): number {
  if (typeof servingsData === "string") {
    const match = servingsData.match(/\d+/);
    return match ? parseInt(match[0], 10) : 1;
--- a/routes/api/recipes/index.ts
+++ b/routes/api/recipes/index.ts
@@ -1,6 +1,6 @@
 import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";

 export const handler: Handlers = {
  async GET() {
--- a/routes/api/recommendation/all.ts
+++ b/routes/api/recommendation/all.ts
@@ -1,54 +1,56 @@
 import { Handlers } from "$fresh/server.ts";
 import { createStreamResponse } from "@lib/helpers.ts";
-import { Movie } from "@lib/resource/movies.ts";
 import * as tmdb from "@lib/tmdb.ts";
 import {
  createRecommendationResource,
  getRecommendation,
 } from "@lib/recommendation.ts";
 import { AccessDeniedError } from "@lib/errors.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { listResources } from "@lib/marka/index.ts";
+import { ReviewResource } from "@lib/marka/schema.ts";

 async function processUpdateRecommendations(
  streamResponse: ReturnType<typeof createStreamResponse>,
 ) {
-  const allMovies = await fetchResource("movies");
+  const allMovies = await listResources<ReviewResource>("movies");

-  const movies = allMovies?.content.filter((m) => {
+  const movies = allMovies?.filter((m: ReviewResource) => {
    if (!m?.content) return false;
    if (!m.content.reviewRating) return false;
    if (!m.content.tmdbId) return false;
    return true;
-  }) as Movie[];
+  }) as ReviewResource[];

-  streamResponse.enqueue("Fetched all movies");
+  streamResponse.info("fetched all movies");

  let done = 0;
  const total = movies.length;

  await Promise.all(movies.map(async (movie) => {
-    if (!movie.meta.tmdbId) return;
-    if (!movie.meta.rating) return;
-    const recommendation = getRecommendation(movie.id, movie.type);
+    if (!movie.content.tmdbId) return;
+    if (!movie.content.reviewRating) return;
+    const recommendation = getRecommendation(movie.name, movie.type);
    if (recommendation) {
      done++;
      return;
    }
    try {
-      const movieDetails = await tmdb.getMovie(movie.meta.tmdbId);
+      const movieDetails = await tmdb.getMovie(movie.content.tmdbId);
      await createRecommendationResource(movie, movieDetails.overview);
    } catch (err) {
      console.log(err);
    }
    done++;
-    streamResponse.enqueue(
-      `${Math.floor((done / total) * 100)}% [${done + 1}/${total}] ${movie.id}`,
+    streamResponse.info(
+      `${Math.floor((done / total) * 100)}% [${
+        done + 1
+      }/${total}] ${movie.name}`,
    );
  })).catch((err) => {
    console.log(err);
  });

-  streamResponse.enqueue("100% Finished");
+  streamResponse.info("100% Finished");
 }

 export const handler: Handlers = {
--- a/routes/api/recommendation/movie/[id].ts
+++ b/routes/api/recommendation/movie/[id].ts
@@ -11,7 +11,6 @@ export const handler: Handlers = {
    }

    const recommendations = await getSimilarMovies(ctx.params.id);
-    console.log({ recommendations });

    return json(recommendations);
  },
--- a/routes/api/series/[name].ts
+++ b/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 { AccessDeniedError } from "@lib/errors.ts";
-import { Series } from "@lib/resource/series.ts";
-import { createResource, fetchResource } from "@lib/marka.ts";
+import { formatDate, isString, safeFileName } 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";
+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 seriesCredits = await tmdb.getSeriesCredits(tmdbId);
+    const [seriesDetails, seriesCredits] = await Promise.all([
+      tmdb.getSeries(tmdbId),
+      tmdb.getSeriesCredits(tmdbId),
+    ]);

-    const releaseDate = seriesDetails.first_air_date;
-    const posterPath = seriesDetails.poster_path;
-    const director =
-      seriesCredits?.crew?.filter?.((person) => person.job === "Director")[0] ||
-      seriesDetails.created_by?.[0];
+    const name = seriesDetails.name ||
+      seriesDetails.original_name ||
+      ctx.params.name;

    let finalPath = "";
-    const name = seriesDetails.name || seriesDetails.original_name ||
-      ctx.params.name;
+    const posterPath = seriesDetails.poster_path;
    if (posterPath) {
      const poster = await tmdb.getMoviePoster(posterPath);
      const extension = fileExtension(posterPath);
-
-      finalPath = `series/images/${safeFileName(name)}_cover.${extension}`;
-      await createResource(finalPath, poster);
+      const imagePath = `series/images/${
+        safeFileName(name)
+      }_cover.${extension}`;
+      await createResource(imagePath, poster);
+      finalPath = imagePath;
    }

-    const tags: string[] = [];
-    if (seriesDetails.genres) {
-      tags.push(
-        ...seriesDetails.genres.map((g) => g.name?.toLowerCase()).filter(
-          isString,
-        ),
-      );
-    }
+    const keywords = seriesDetails.genres
+      ?.map((g) => g.name?.toLowerCase())
+      .filter(isString) ??
+      [];

-    const series: Series = {
+    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 });
  },
 };
--- a/routes/api/series/enhance/[name].ts
+++ b/routes/api/series/enhance/[name].ts
@@ -1,5 +1,4 @@
 import { FreshContext, Handlers } from "$fresh/server.ts";
-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 { safeFileName } from "@lib/string.ts";
@@ -9,7 +8,7 @@ import {
  BadRequestError,
  NotFoundError,
 } from "@lib/errors.ts";
-import { createResource, fetchResource } from "@lib/marka.ts";
+import { createResource, fetchResource } from "@lib/marka/index.ts";

 const isString = (input: string | undefined): input is string => {
  return typeof input === "string";
@@ -37,42 +36,43 @@ const POST = async (
  }

  const seriesDetails = await tmdb.getSeries(tmdbId);
-  const seriesCredits = !series.meta?.author &&
+  const seriesCredits = !series?.content?.author &&
    await tmdb.getSeriesCredits(tmdbId);

  const releaseDate = seriesDetails.first_air_date;
-  if (releaseDate && series.meta?.date) {
-    series.meta.date = new Date(releaseDate);
+  if (releaseDate && series.content?.datePublished) {
+    series.content.datePublished = new Date(releaseDate).toISOString();
  }
  const posterPath = seriesDetails.poster_path;
  const director = seriesCredits &&
      seriesCredits.crew?.filter?.((person) => person.job === "Director")[0] ||
    seriesDetails?.created_by?.[0];
-  if (director && director.name && !series.meta?.author) {
-    series.author = series.author || {};
-    series.author["_type"] = "Person";
-    series.author.name = director.name;
+  if (director && director.name && !series.content?.author) {
+    series.content.author = series.content.author || {
+      _type: "Person",
+      name: director.name,
+    };
  }

  if (seriesDetails.genres) {
-    series.keywords = [
+    series.content.keywords = [
      ...new Set([
-        ...(series.tags?.map((t) => t.toLowerCase()) || []),
+        ...(series.content.keywords?.map((t) => t.toLowerCase()) || []),
        ...seriesDetails.genres.map((g) => g.name?.toLowerCase()),
      ].filter(isString)),
    ];
  }

  let finalPath = "";
-  if (posterPath && !series.meta?.image) {
+  if (posterPath && !series.content?.image) {
    const poster = await tmdb.getMoviePoster(posterPath);
    const extension = fileExtension(posterPath);

    finalPath = `series/images/${safeFileName(name)}_cover.${extension}`;
    await createResource(finalPath, poster);
-    series.image = finalPath;
+    series.content.image = finalPath;
  }
-  await createResource(`series/${safeFileName(series.id)}.md`, series);
+  await createResource(`series/${safeFileName(series.name)}.md`, series);

  return json(series);
 };
--- a/routes/api/series/index.ts
+++ b/routes/api/series/index.ts
@@ -1,6 +1,6 @@
 import { Handlers } from "$fresh/server.ts";
 import { json } from "@lib/helpers.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";

 export const handler: Handlers = {
  async GET() {
--- a/routes/api/tmdb/query.ts
+++ b/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);

--- a/routes/articles/[name].tsx
+++ b/routes/articles/[name].tsx
@@ -1,39 +1,47 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
-import { Article } from "@lib/resource/articles.ts";
 import { KMenu } from "@islands/KMenu.tsx";
 import { YoutubePlayer } from "@components/Youtube.tsx";
 import { HashTags } from "@components/HashTags.tsx";
 import { isYoutubeLink } from "@lib/string.ts";
-import { removeImage, renderMarkdown } from "@lib/documents.ts";
+import { removeImage, renderMarkdown } from "@lib/markdown.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import PageHero from "@components/PageHero.tsx";
 import { Star } from "@components/Stars.tsx";
 import { MetaTags } from "@components/MetaTags.tsx";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";
+import { ArticleResource } from "@lib/marka/schema.ts";
+import { parseRating } from "@lib/helpers.ts";

-export const handler: Handlers<{ article: Article; session: unknown }> = {
+export const handler: Handlers<{ article: ArticleResource; session: unknown }> =
+  {
    async GET(_, ctx) {
-    const article = await fetchResource(`articles/${ctx.params.name}.md`);
+      const article = await fetchResource<ArticleResource>(
+        `articles/${ctx.params.name}.md`,
+      );
      if (!article) {
        return ctx.renderNotFound();
      }
      return ctx.render({ article, session: ctx.state.session });
    },
-};
+  };

 export default function Greet(
-  props: PageProps<{ article: Article; session: Record<string, string> }>,
+  props: PageProps<
+    { article: ArticleResource; session: Record<string, string> }
+  >,
 ) {
  const { article, session } = props.data;

-  const { author = "", date = "", articleBody = "" } = article?.content || {};
+  const { author, datePublished, reviewRating, articleBody = "" } =
+    article?.content || {};

  const content = renderMarkdown(
-    removeImage(articleBody, article.content.image),
+    removeImage(articleBody, article.image?.url),
  );

-  console.log({ article });
+  const rating = reviewRating?.ratingValue &&
+    parseRating(reviewRating.ratingValue);

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

      <PageHero
-        image={article.content.image}
-        thumbnail={article.content.thumbnail}
+        image={article.image?.url}
+        thumbhash={article.image?.thumbhash}
      >
        <PageHero.Header>
          <PageHero.BackLink href="/articles" />
@@ -63,36 +71,35 @@ export default function Greet(
          </PageHero.Title>
          <PageHero.Subline
            entries={[
-              author && {
-                title: author,
-                href: `/?q=${encodeURIComponent(author)}`,
+              author?.name && {
+                title: author.name,
+                href: `/?q=${encodeURIComponent(author?.name)}`,
              },
-              date.toString(),
+              datePublished?.toString(),
            ]}
          >
-            {article.content.rating && <Star rating={article.content.rating} />}
+            {rating && <Star rating={rating} />}
          </PageHero.Subline>
        </PageHero.Footer>
      </PageHero>
-      {article.content?.tags?.length > 0 && (
+      {article.content?.keywords?.length && (
        <>
          <br />
-          <HashTags tags={article.content.tags} />
+          <HashTags tags={article.content.keywords} />
        </>
      )}

      <div class="px-8 text-white mt-10">
-        {isYoutubeLink(article.content.url) && (
+        {(article.content.url && isYoutubeLink(article.content.url)) && (
          <YoutubePlayer link={article.content.url} />
        )}
        <pre
          class="whitespace-break-spaces markdown-body"
          data-color-mode="dark"
          data-dark-theme="dark"
+          // deno-lint-ignore react-no-danger
          dangerouslySetInnerHTML={{ __html: content || "" }}
-        >
-          {content || ""}
-        </pre>
+        />
      </div>
    </MainLayout>
  );
--- a/routes/articles/index.tsx
+++ b/routes/articles/index.tsx
@@ -1,31 +1,30 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
-import { Article } from "@lib/resource/articles.ts";
+import { type ArticleResource, GenericResource } from "@lib/marka/schema.ts";
 import { KMenu } from "@islands/KMenu.tsx";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { parseResourceUrl, searchResource } from "@lib/search.ts";
-import { GenericResource } from "@lib/types.ts";
 import { ResourceCard } from "@components/Card.tsx";
 import { Link } from "@islands/Link.tsx";
-import { fetchResource } from "@lib/marka.ts";
+import { listResources } from "@lib/marka/index.ts";

 export const handler: Handlers<
-  { articles: Article[] | null; searchResults?: GenericResource[] }
+  { articles: ArticleResource[] | null; searchResults?: GenericResource[] }
 > = {
  async GET(req, ctx) {
-    const { content: articles } = await fetchResource("articles");
+    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 });
  },
 };

 export default function Greet(
  props: PageProps<
-    { articles: Article[] | null; searchResults: GenericResource[] }
+    { articles: ArticleResource[] | null; searchResults: GenericResource[] }
  >,
 ) {
  const { articles, searchResults } = props.data;
@@ -33,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">
@@ -48,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}
          />
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -12,17 +12,16 @@ 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={`${m.emoji.endsWith(".png")
+                image={`${
+                  m.emoji.endsWith(".png")
                    ? `/emojis/${encodeURIComponent(m.emoji)}`
                    : "/placeholder.svg"
                }`}
--- a/routes/movies/[name].tsx
+++ b/routes/movies/[name].tsx
@@ -1,7 +1,7 @@
 import { PageProps, RouteContext } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
-import { Movie } from "@lib/resource/movies.ts";
-import { removeImage, renderMarkdown } from "@lib/documents.ts";
+import { ReviewResource } from "@lib/marka/schema.ts";
+import { removeImage, renderMarkdown } from "@lib/markdown.ts";
 import { KMenu } from "@islands/KMenu.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { Recommendations } from "@islands/Recommendations.tsx";
@@ -9,33 +9,39 @@ import PageHero from "@components/PageHero.tsx";
 import { Star } from "@components/Stars.tsx";
 import { MetaTags } from "@components/MetaTags.tsx";
 import { parseRating } from "@lib/helpers.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";

 export default async function Greet(
-  props: PageProps<{ movie: Movie; session: Record<string, string> }>,
+  props: PageProps<{ movie: ReviewResource; session: Record<string, string> }>,
  ctx: RouteContext,
 ) {
-  const movie = await fetchResource(`movies/${ctx.params.name}.md`);
+  const movie = await fetchResource<ReviewResource>(
+    `movies/${ctx.params.name}.md`,
+  );
  const session = ctx.state.session;

  if (!movie) {
    return ctx.renderNotFound();
  }

-  const { author = "", date = "" } = movie.content;
+  const { author, datePublished, reviewBody = "", reviewRating } =
+    movie.content;

  const content = renderMarkdown(
-    removeImage(movie.content.reviewBody || "", movie.content.image),
+    removeImage(reviewBody, movie.content.image),
  );

+  const rating = reviewRating?.ratingValue &&
+    parseRating(reviewRating.ratingValue);
+
  return (
    <MainLayout url={props.url} title={`Movie > ${movie.name}`} context={movie}>
      <RedirectSearchHandler />
      <KMenu type="main" context={movie} />
      <MetaTags resource={movie} />
      <PageHero
-        image={movie.content.image}
-        thumbnail={movie.content.thumbnail}
+        image={movie.image?.url}
+        thumbhash={movie.image?.thumbhash}
      >
        <PageHero.Header>
          <PageHero.BackLink href="/movies" />
@@ -51,37 +57,33 @@ export default async function Greet(
          </PageHero.Title>
          <PageHero.Subline
            entries={[
-              author && {
-                title: author?.name,
+              author?.name &&
+              {
+                title: author.name,
                href: `/?q=${encodeURIComponent(author?.name)}`,
              },
-              date.toString(),
+              datePublished?.toString(),
            ]}
          >
-            {movie.content.reviewRating && (
-              <Star
-                rating={parseRating(movie.content.reviewRating?.ratingValue)}
-              />
-            )}
+            {rating && <Star rating={rating} />}
          </PageHero.Subline>
        </PageHero.Footer>
      </PageHero>
-      {false && (
+      {movie.name && (
        <Recommendations
-          id={movie.id}
-          type="movie"
+          id={movie.name}
+          type="movies"
        />
      )}
      <div class="px-8 text-white mt-10">
-        {movie?.content?.reviewBody?.length > 80
-          ? <h2 class="text-4xl font-bold mb-4">Review</h2>
-          : <></>}
+        {reviewBody?.length > 80 && (
+          <h2 class="text-4xl font-bold mb-4">Review</h2>
+        )}
        <pre
          class="whitespace-break-spaces"
+          // deno-lint-ignore react-no-danger
          dangerouslySetInnerHTML={{ __html: content || "" }}
-        >
-          {content}
-        </pre>
+        />
      </div>
    </MainLayout>
  );
--- a/routes/movies/index.tsx
+++ b/routes/movies/index.tsx
@@ -1,40 +1,44 @@
 import { MainLayout } from "@components/layouts/main.tsx";
-import { Movie } from "@lib/resource/movies.ts";
+import { GenericResource, ReviewResource } from "@lib/marka/schema.ts";
 import { ResourceCard } from "@components/Card.tsx";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
-import { GenericResource } from "@lib/types.ts";
 import { PageProps } from "$fresh/server.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { listResources } from "@lib/marka/index.ts";
 import { parseResourceUrl, searchResource } from "@lib/search.ts";
+import { parseRating } from "@lib/helpers.ts";

-export default async function Greet(
+function sortOptional(a: number | string = 0, b: number | string = 0) {
+  return (parseRating(a) > parseRating(b)) ? 1 : -1;
+}
+
+export default async function MovieIndex(
  props: PageProps<
-    { movies: Movie[] | null; searchResults: GenericResource[] }
+    { movies: ReviewResource[] | null; searchResults: GenericResource[] }
  >,
 ) {
-  const { content: allMovies } = await fetchResource("movies");
+  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) =>
-    a?.content?.reviewRating?.ratingValue >
-      b?.content?.reviewRating?.ratingValue
-      ? -1
-      : 1
+    sortOptional(
+      a.content.reviewRating?.ratingValue,
+      b.content.reviewRating?.ratingValue,
+    )
  );

  return (
    <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"
@@ -47,8 +51,8 @@ export default async function Greet(
        <h3 class="text-2xl text-white font-light">🍿 Movies</h3>
      </header>
      <Grid>
-        {movies?.map((doc) => {
-          return <ResourceCard res={doc} />;
+        {movies?.map((doc, i) => {
+          return <ResourceCard key={doc.name || i} res={doc} />;
        })}
      </Grid>
    </MainLayout>
--- a/routes/recipes/[name].tsx
+++ b/routes/recipes/[name].tsx
@@ -3,20 +3,26 @@ import { IngredientsList } from "@islands/IngredientsList.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import Counter from "@islands/Counter.tsx";
 import { Signal, useSignal } from "@preact/signals";
-import { Recipe } from "@lib/recipeSchema.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import PageHero from "@components/PageHero.tsx";
 import { Star } from "@components/Stars.tsx";
-import { renderMarkdown } from "@lib/documents.ts";
+import { renderMarkdown } from "@lib/markdown.ts";
 import { isValidRecipe } from "@lib/recipeSchema.ts";
 import { MetaTags } from "@components/MetaTags.tsx";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";
+import { RecipeResource } from "@lib/marka/schema.ts";
+import { parseIngredients } from "@lib/parseIngredient.ts";
+import { parseRating } from "@lib/helpers.ts";

-export const handler: Handlers<{ recipe: Recipe; session: unknown } | null> = {
+export const handler: Handlers<
+  { recipe: RecipeResource; session: unknown } | null
+> = {
  async GET(_, ctx) {
    try {
-      const recipe = await fetchResource(`recipes/${ctx.params.name}.md`);
+      const recipe = await fetchResource<RecipeResource>(
+        `recipes/${ctx.params.name}.md`,
+      );
      if (!recipe) {
        return ctx.renderNotFound();
      }
@@ -31,7 +37,11 @@ function ValidRecipe({
  recipe,
  amount,
  portion,
-}: { recipe: Recipe; amount: Signal<number>; portion: number }) {
+}: { recipe: RecipeResource; amount: Signal<number>; portion: number }) {
+  const ingredients = parseIngredients(
+    recipe.content.recipeIngredient?.join("\n") || "",
+  );
+
  return (
    <>
      <div class="flex items-center gap-8">
@@ -39,7 +49,7 @@ function ValidRecipe({
        {portion && <Counter count={amount} />}
      </div>
      <IngredientsList
-        ingredients={recipe.content.recipeIngredient}
+        ingredients={ingredients}
        amount={amount}
        portion={portion}
      />
@@ -47,10 +57,12 @@ function ValidRecipe({
      <div class="pl-2">
        <ol class="list-decimal grid gap-4">
          {recipe.content.recipeInstructions &&
-            (recipe.content.recipeInstructions.filter((inst) => !!inst?.length)
+            (recipe.content.recipeInstructions
+              .filter((inst) => !!inst?.length)
              .map((instruction) => {
                return (
                  <li
+                    // deno-lint-ignore react-no-danger
                    dangerouslySetInnerHTML={{
                      __html: renderMarkdown(instruction),
                    }}
@@ -64,17 +76,20 @@ function ValidRecipe({
 }

 export default function Page(
-  props: PageProps<{ recipe: Recipe; session: Record<string, string> }>,
+  props: PageProps<{ recipe: RecipeResource; session: Record<string, string> }>,
 ) {
  const { recipe, session } = props.data;

-  const portion = recipe.recipeYield;
+  const portion = recipe.content.recipeYield;
  const amount = useSignal(portion || 1);

  const subline = [
-    recipe?.content?.prepTime && `Duration ${recipe?.content?.prepTime}`,
+    recipe?.content?.totalTime && `Duration ${recipe?.content?.totalTime}`,
  ].filter(Boolean) as string[];

+  const rating = recipe.content.reviewRating?.ratingValue &&
+    parseRating(recipe.content.reviewRating.ratingValue);
+
  return (
    <MainLayout
      url={props.url}
@@ -86,8 +101,8 @@ export default function Page(
      <MetaTags resource={recipe} />

      <PageHero
-        image={recipe.content?.image}
-        thumbnail={recipe.content?.thumbnail}
+        image={recipe.image?.url}
+        thumbhash={recipe.image?.thumbhash}
      >
        <PageHero.Header>
          <PageHero.BackLink href="/recipes" />
@@ -98,13 +113,13 @@ export default function Page(
          )}
        </PageHero.Header>
        <PageHero.Footer>
-          <PageHero.Title link={recipe.content?.link}>
+          <PageHero.Title link={recipe.content?.url}>
            {recipe.content.name}
          </PageHero.Title>
          <PageHero.Subline
            entries={subline}
          >
-            {recipe.meta?.rating && <Star rating={recipe.meta?.rating} />}
+            {rating && <Star rating={rating} />}
          </PageHero.Subline>
        </PageHero.Footer>
      </PageHero>
--- a/routes/recipes/index.tsx
+++ b/routes/recipes/index.tsx
@@ -1,30 +1,29 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
-import { Recipe } from "@lib/recipeSchema.ts";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
-import { GenericResource } from "@lib/types.ts";
 import { ResourceCard } from "@components/Card.tsx";
-import { fetchResource } from "@lib/marka.ts";
+import { listResources } from "@lib/marka/index.ts";
 import { parseResourceUrl, searchResource } from "@lib/search.ts";
+import { GenericResource, RecipeResource } from "@lib/marka/schema.ts";

 export const handler: Handlers<
-  { recipes: Recipe[] | null; searchResults?: GenericResource[] }
+  { recipes: RecipeResource[] | null; searchResults?: GenericResource[] }
 > = {
  async GET(req, ctx) {
-    const { content: recipes } = await fetchResource("recipes");
+    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 });
  },
 };

 export default function Greet(
  props: PageProps<
-    { recipes: Recipe[] | null; searchResults: GenericResource[] }
+    { recipes: RecipeResource[] | null; searchResults: GenericResource[] }
  >,
 ) {
  const { recipes, searchResults } = props.data;
@@ -33,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"
--- a/routes/series/[name].tsx
+++ b/routes/series/[name].tsx
@@ -1,19 +1,21 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { HashTags } from "@components/HashTags.tsx";
-import { removeImage, renderMarkdown } from "@lib/documents.ts";
-import { Series } from "@lib/resource/series.ts";
+import { removeImage, renderMarkdown } from "@lib/markdown.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import PageHero from "@components/PageHero.tsx";
 import { Star } from "@components/Stars.tsx";
 import { MetaTags } from "@components/MetaTags.tsx";
 import { parseRating } from "@lib/helpers.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { fetchResource } from "@lib/marka/index.ts";
+import { getNameOfResource, ReviewResource } from "@lib/marka/schema.ts";

-export const handler: Handlers<{ serie: Series; session: unknown }> = {
+export const handler: Handlers<{ serie: ReviewResource; session: unknown }> = {
  async GET(_, ctx) {
-    const serie = await fetchResource(`series/${ctx.params.name}.md`);
+    const serie = await fetchResource<ReviewResource>(
+      `series/${ctx.params.name}.md`,
+    );

    if (!serie) {
      return ctx.renderNotFound();
@@ -23,20 +25,23 @@ export const handler: Handlers<{ serie: Series; session: unknown }> = {
 };

 export default function Greet(
-  props: PageProps<{ serie: Series; session: Record<string, string> }>,
+  props: PageProps<{ serie: ReviewResource; session: Record<string, string> }>,
 ) {
  const { serie, session } = props.data;

-  const { author = "", date = "" } = serie?.content || {};
+  const { author, datePublished, reviewBody = "" } = serie?.content || {};

  const content = renderMarkdown(
-    removeImage(serie.description || "", serie.content?.image),
+    removeImage(reviewBody, serie.image?.url),
  );

+  const rating = serie.content.reviewRating?.ratingValue &&
+    parseRating(serie.content.reviewRating.ratingValue);
+
  return (
    <MainLayout
      url={props.url}
-      title={`Serie > ${serie.content?.name}`}
+      title={`Serie > ${serie.content?.itemReviewed?.name}`}
      context={serie}
    >
      <RedirectSearchHandler />
@@ -44,8 +49,8 @@ export default function Greet(

      <MetaTags resource={serie} />
      <PageHero
-        image={serie.content?.image}
-        thumbnail={serie.content?.thumbnail}
+        image={serie.image?.url}
+        thumbhash={serie.image?.thumbhash}
      >
        <PageHero.Header>
          <PageHero.BackLink href="/series" />
@@ -56,40 +61,36 @@ 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 && {
-                title: author,
-                href: `/?q=${encodeURIComponent(author)}`,
+              author?.name &&
+              {
+                title: author.name,
+                href: `/?q=${encodeURIComponent(author?.name)}`,
              },
-              date.toString(),
+              datePublished?.toString(),
            ]}
          >
-            {serie.content?.reviewRating && (
-              <Star
-                rating={parseRating(serie.content?.reviewRating?.ratingValue)}
-              />
-            )}
+            {rating && <Star rating={rating} />}
          </PageHero.Subline>
        </PageHero.Footer>
      </PageHero>
-      {serie.content?.tags?.length > 0 && (
+      {serie.content?.keywords?.length && (
        <>
          <br />
-          <HashTags tags={serie.content?.tags} />
+          <HashTags tags={serie.content?.keywords} />
        </>
      )}
      <div class="px-8 text-white mt-10">
-        {serie?.content?.reviewBody?.length > 80
-          ? <h2 class="text-4xl font-bold mb-4">Review</h2>
-          : <></>}
+        {serie?.content?.reviewBody?.length && (
+          <h2 class="text-4xl font-bold mb-4">Review</h2>
+        )}
        <pre
          class="whitespace-break-spaces"
+          // deno-lint-ignore react-no-danger
          dangerouslySetInnerHTML={{ __html: content || "" }}
-        >
-          {content}
-        </pre>
+        />
      </div>
    </MainLayout>
  );
--- a/routes/series/index.tsx
+++ b/routes/series/index.tsx
@@ -2,19 +2,18 @@ import { Handlers, PageProps } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
-import { Series } from "@lib/resource/series.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { ResourceCard } from "@components/Card.tsx";
-import { GenericResource } from "@lib/types.ts";
-import { fetchResource } from "@lib/marka.ts";
+import { listResources } from "@lib/marka/index.ts";
 import { parseResourceUrl, searchResource } from "@lib/search.ts";
+import { GenericResource, ReviewResource } from "@lib/marka/schema.ts";

 export const handler: Handlers<
-  { series: Series[] | null; searchResults?: GenericResource[] }
+  { series: ReviewResource[] | null; searchResults?: GenericResource[] }
 > = {
  async GET(req, ctx) {
-    const { content: series } = await fetchResource("series");
+    const series = await listResources<ReviewResource>("series");
    const searchParams = parseResourceUrl(req.url);
    const searchResults = searchParams &&
      await searchResource({ ...searchParams, types: ["series"] });
@@ -24,7 +23,7 @@ export const handler: Handlers<

 export default function Greet(
  props: PageProps<
-    { series: Series[] | null; searchResults: GenericResource[] }
+    { series: ReviewResource[] | null; searchResults: GenericResource[] }
  >,
 ) {
  const { series, searchResults } = props.data;
@@ -50,8 +49,10 @@ export default function Greet(
        <h3 class="text-2xl text-white font-light">🎥 Series</h3>
      </header>
      <Grid>
-        {series?.map((doc) => {
-          return <ResourceCard sublink="series" res={doc} />;
+        {series?.map((doc, i) => {
+          return (
+            <ResourceCard key={doc.name || i} sublink="series" res={doc} />
+          );
        })}
      </Grid>
    </MainLayout>
--- a/static/browserconfig.xml
+++ b/static/browserconfig.xml
@@ -2,7 +2,7 @@
 <browserconfig>
  <msapplication>
    <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
+      <square150x150logo src="/mstile-150x150.png" />
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Max Richter	7dda2dd60d	feat: add kmenu icon for mobile	2025-11-12 16:12:57 +01:00
Max Richter	7ad08daf80	fix: make recipe crawling work	2025-11-12 15:41:30 +01:00
Max Richter	92126882b6	feat: correctly size search result items	2025-11-12 13:35:39 +01:00
Max Richter	655fc648e6	feat: fallback to unsplash cover when article contains no image	2025-11-09 23:52:53 +01:00
Max Richter	6c6b69a46a	fix: make search work	2025-11-07 18:58:23 +01:00
Max Richter	97c5b7f93c	fix: better position covers	2025-11-07 18:26:31 +01:00
Max Richter	bf3483019c	fix: make unseen search work	2025-11-07 18:18:39 +01:00
Max Richter	5502c17c28	fix: correctly display noise gradient	2025-11-07 17:54:56 +01:00
Max Richter	581f1c1926	fix: make search usable again	2025-11-05 00:42:53 +01:00
Max Richter	7664abe089	fix: actually write image	2025-11-04 16:04:51 +01:00
Max Richter	bed7d1a11b	feat: better log article creations	2025-11-04 13:57:32 +01:00
Max Richter	56a104c8b9	feat: use better names for md files	2025-11-04 13:26:49 +01:00
Max Richter	3103ed19fb	fix: correctly fetch marka pi in background	2025-11-04 12:58:26 +01:00
Max Richter	fea9b69d4d	feat: cache marka api responses	2025-11-04 12:09:17 +01:00
Max Richter	bb4e895770	fix: display correct name for series	2025-11-03 01:06:27 +01:00
Max Richter	28e9de4dc8	fix: make sure to only decode thumbhash once	2025-11-03 00:57:44 +01:00
Max Richter	ebb897dca4	fix: correctly embed styles.css	2025-11-03 00:46:49 +01:00
Max Richter	696082250d	fix: soo many lint errors	2025-11-03 00:03:27 +01:00
Max Richter	c13420c3ab	chore: deno fmt	2025-11-02 21:58:02 +01:00
Max Richter	21124dfe00	fix: remove unused imports	2025-11-02 21:56:26 +01:00
Max Richter	928782c453	fix: accessing nonexistant variable	2025-11-02 21:14:41 +01:00
Max Richter	098da12ac4	fix: make recipe ingredinets interactive	2025-11-02 20:01:01 +01:00
Max Richter	d4a7763b15	fix: accessing nonexistant variable	2025-11-02 19:19:57 +01:00
Max Richter	21841b4dc4	fix: use correct url	2025-11-02 19:03:34 +01:00
Max Richter	e6b90cb785	feat: refactor whole bunch of stuff	2025-11-02 19:03:11 +01:00
				`@@ -0,0 +1 @@`
				ALTER TABLE `image` RENAME COLUMN "blurhash" TO "thumbhash";