From ff3e7f66670ec66acdd9849fd5db4fe4ed5ddf6b Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Wed, 2 Aug 2023 00:23:51 +0200
Subject: [PATCH] feat: fix recipe hero layout

---
 components/RecipeHero.tsx  | 37 ++++++++++++++++---------------------
 routes/api/images/index.ts |  6 +++---
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/components/RecipeHero.tsx b/components/RecipeHero.tsx
index 754d01a..6ab92e0 100644
--- a/components/RecipeHero.tsx
+++ b/components/RecipeHero.tsx
@@ -16,7 +16,7 @@ export function RecipeHero(
 
   return (
     <div
-      class={`relative w-full h-[${
+      class={`flex justify-between flex-col relative w-full min-h-[${
         imageUrl ? 400 : 200
       }px] rounded-3xl overflow-hidden`}
     >
@@ -25,37 +25,21 @@ export function RecipeHero(
           <img
             src={imageUrl}
             alt="Recipe Banner"
-            class="object-cover w-full h-full"
+            class="absolute object-cover w-full h-full -z-10"
           />
         )}
 
-      <div class="absolute top-8 left-8 ">
+      <div class="flex justify-between mx-8 mt-8">
         <a
-          class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg block"
+          class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg"
           href={backlink}
         >
           Back
         </a>
       </div>
 
-      {data.meta?.link &&
-        (
-          <div class="absolute top-8 right-8 ">
-            <a
-              href={data.meta.link}
-              target="__blank"
-              class="p-2 ml-4 bg-gray-300 text-gray-800 rounded-lg flex"
-              name="Link to Original recipe"
-            >
-              <IconExternalLink />
-            </a>
-          </div>
-        )}
-
       <div
-        class={`absolute inset-x-0 bottom-0 py-4 px-8 ${
-          imageUrl ? "py-8" : ""
-        } `}
+        class={`inset-x-0 py-4 px-8 ${imageUrl ? "py-8" : ""} `}
       >
         <div
           class={`${imageUrl ? "noisy-gradient" : ""} flex gap-4 items-center ${
@@ -67,6 +51,17 @@ export function RecipeHero(
             style={{ color: imageUrl ? "#1F1F1F" : "white" }}
           >
             {data.name}
+            {data.meta?.link &&
+              (
+                <a
+                  href={data.meta.link}
+                  target="__blank"
+                  class="p-2 inline-flex"
+                  name="Link to Original recipe"
+                >
+                  <IconExternalLink />
+                </a>
+              )}
           </h2>
 
           {data.meta?.rating && <Star rating={data.meta.rating} />}
diff --git a/routes/api/images/index.ts b/routes/api/images/index.ts
index 3a7b3ea..2e2bc91 100644
--- a/routes/api/images/index.ts
+++ b/routes/api/images/index.ts
@@ -1,14 +1,14 @@
 import { HandlerContext, Handlers } from "$fresh/server.ts";
 import {
   ImageMagick,
-  initializeImageMagick,
+  initialize,
   MagickGeometry,
-} from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
+} from "https://deno.land/x/imagemagick_deno@0.0.25/mod.ts";
 import { parseMediaType } from "https://deno.land/std@0.175.0/media_types/parse_media_type.ts";
 import * as cache from "@lib/cache/image.ts";
 import { SILVERBULLET_SERVER } from "@lib/env.ts";
 
-await initializeImageMagick();
+await initialize();
 
 async function getRemoteImage(image: string) {
   console.log("[api/image] fetching", { image });