max/memorium
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: fix recipe hero layout

Browse Source
This commit is contained in:
max_richter 2023-08-02 00:23:51 +02:00
parent ea11495d1a
commit ff3e7f6667
2 changed files with 19 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/RecipeHero.tsx
View File

@ -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} />}

6
routes/api/images/index.ts
View File

@ -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 });