feat: make author clickable

components/Card.tsx

@@ -1,9 +1,11 @@
-import { isYoutubeLink } from "@lib/string.ts";
+import { isLocalImage, isYoutubeLink } from "@lib/string.ts";
 import { IconBrandYoutube } from "@components/icons.tsx";
+import { GenericResource } from "@lib/types.ts";
 
 export function Card(
-  { link, title, image, thumbnail, backgroundSize = 100 }: {
+  { link, title, image, thumbnail, backgroundColor, backgroundSize = 100 }: {
     backgroundSize?: number;
+    backgroundColor?: string;
     thumbnail?: string;
     link?: string;
     title?: string;
@@ -12,7 +14,7 @@ export function Card(
 ) {
   const backgroundStyle = {
     backgroundSize: "cover",
-    boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
+    backgroundColor: backgroundColor,
   };
 
   if (backgroundSize !== 100) {
@@ -26,18 +28,20 @@ export function Card(
       href={link}
       style={backgroundStyle}
       data-thumb={thumbnail}
-      class="text-white rounded-3xl shadow-md relative 
+      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 && (
-        <img
-          class="absolute rounded-3xl top-0 left-0 object-cover w-full h-full"
-          data-thumb-img
-          loading="lazy"
-          src={image || "/placeholder.svg"}
-        />
+        <span class="absolute top-0 left-0 overflow-hidden rounded-3xl w-full h-full">
+          <img
+            class="w-full h-full object-cover"
+            data-thumb-img
+            loading="lazy"
+            src={image || "/placeholder.svg"}
+          />
+        </span>
       )}
       <div
         class="p-4 flex flex-col justify-between relative z-10"
@@ -48,7 +52,7 @@ export function Card(
           width: "calc(100% + 0.5px)",
           marginTop: "-0.5px",
           marginLeft: "-0.5px",
-          boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
+          boxShadow: "0px -60px 40px black inset, 0px 10px 20px #fff1 inset",
         }}
       >
         <div>
@@ -63,3 +67,23 @@ export function Card(
     </a>
   );
 }
+
+export function ResourceCard(
+  { res, sublink = "movies" }: { sublink?: string; res: GenericResource },
+) {
+  const { meta: { image = "/placeholder.svg" } = {} } = res;
+
+  const imageUrl = isLocalImage(image)
+    ? `/api/images?image=${image}&width=200&height=200`
+    : image;
+
+  return (
+    <Card
+      title={res.name}
+      backgroundColor={res.meta?.average}
+      thumbnail={res.meta?.thumbnail}
+      image={imageUrl}
+      link={`/${sublink}/${res.id}`}
+    />
+  );
+}

components/Image.tsx

@@ -36,6 +36,7 @@ const Image = (
     src: string;
     alt?: string;
     thumbnail?: string;
+    fill?: boolean;
     width?: number | string;
     height?: number | string;
     style?: CSS.HtmlAttributes;
@@ -48,10 +49,10 @@ const Image = (
   return (
     <span
       style={{
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        zIndex: -1,
+        position: props.fill ? "absolute" : "",
+        width: props.fill ? "100%" : "",
+        height: props.fill ? "100%" : "",
+        zIndex: props.fill ? -1 : "",
       }}
       data-thumb={props.thumbnail}
     >

components/MovieCard.tsx

@@ -1,23 +0,0 @@
-import { Card } from "@components/Card.tsx";
-import { Movie } from "@lib/resource/movies.ts";
-import { Series } from "@lib/resource/series.ts";
-import { isLocalImage } from "@lib/string.ts";
-
-export function MovieCard(
-  { movie, sublink = "movies" }: { sublink?: string; movie: Movie | Series },
-) {
-  const { meta: { image = "/placeholder.svg" } = {} } = movie;
-
-  const imageUrl = isLocalImage(image)
-    ? `/api/images?image=${image}&width=200&height=200`
-    : image;
-
-  return (
-    <Card
-      title={movie.name}
-      thumbnail={movie.meta.thumbnail}
-      image={imageUrl}
-      link={`/${sublink}/${movie.id}`}
-    />
-  );
-}

components/RecipeCard.tsx

@@ -1,20 +0,0 @@
-import { Card } from "@components/Card.tsx";
-import { Recipe } from "@lib/resource/recipes.ts";
-import { isLocalImage } from "@lib/string.ts";
-
-export function RecipeCard({ recipe }: { recipe: Recipe }) {
-  const { meta: { image = "/placeholder.svg" } = {} } = recipe;
-
-  const imageUrl = isLocalImage(image)
-    ? `/api/images?image=${image}&width=200&height=200`
-    : image;
-
-  return (
-    <Card
-      title={recipe.name}
-      image={imageUrl}
-      thumbnail={recipe?.meta?.thumbnail}
-      link={`/recipes/${recipe.id}`}
-    />
-  );
-}

components/RecipeHero.tsx

@@ -5,20 +5,20 @@ import {
   IconExternalLink,
 } from "@components/icons.tsx";
 import Image from "@components/Image.tsx";
+import { GenericResource } from "@lib/types.ts";
 
 export function RecipeHero(
   { data, subline, backlink, editLink }: {
     backlink: string;
-    subline?: string[];
+    subline?: (string | { title: string; href: string })[];
     editLink?: string;
-    data: {
-      meta?: { thumbnail?: string; image?: string; link?: string };
-      name: string;
-    };
+    data: GenericResource;
   },
 ) {
   const { meta: { image } = {} } = data;
 
+  console.log({ meta: data.meta });
+
   return (
     <div
       class={`flex justify-between flex-col relative w-full min-h-[${
@@ -28,6 +28,7 @@ export function RecipeHero(
       {image &&
         (
           <Image
+            fill
             src={image}
             thumbnail={data.meta?.thumbnail}
             alt="Recipe Banner"
@@ -90,8 +91,14 @@ export function RecipeHero(
               class={`relative z-50 flex gap-5 font-sm text-light mt-3`}
               style={{ color: image ? "#1F1F1F" : "white" }}
             >
-              {subline.filter((s) => s && s?.length > 1).map((s) => {
-                return <span>{s}</span>;
+              {subline.filter((s) =>
+                s && (typeof s === "string" ? s?.length > 1 : true)
+              ).map((s) => {
+                if (typeof s === "string") {
+                  return <span>{s}</span>;
+                } else {
+                  return <a href={s.href}>{s.title}</a>;
+                }
               })}
             </div>
           )}