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 ( return (
<div <div
class={`relative w-full h-[${ class={`flex justify-between flex-col relative w-full min-h-[${
imageUrl ? 400 : 200 imageUrl ? 400 : 200
}px] rounded-3xl overflow-hidden`} }px] rounded-3xl overflow-hidden`}
> >
@ -25,37 +25,21 @@ export function RecipeHero(
<img <img
src={imageUrl} src={imageUrl}
alt="Recipe Banner" 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 <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} href={backlink}
> >
Back Back
</a> </a>
</div> </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 <div
class={`absolute inset-x-0 bottom-0 py-4 px-8 ${ class={`inset-x-0 py-4 px-8 ${imageUrl ? "py-8" : ""} `}
imageUrl ? "py-8" : ""
} `}
> >
<div <div
class={`${imageUrl ? "noisy-gradient" : ""} flex gap-4 items-center ${ class={`${imageUrl ? "noisy-gradient" : ""} flex gap-4 items-center ${
@ -67,6 +51,17 @@ export function RecipeHero(
style={{ color: imageUrl ? "#1F1F1F" : "white" }} style={{ color: imageUrl ? "#1F1F1F" : "white" }}
> >
{data.name} {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> </h2>
{data.meta?.rating && <Star rating={data.meta.rating} />} {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 { HandlerContext, Handlers } from "$fresh/server.ts";
import { import {
ImageMagick, ImageMagick,
initializeImageMagick, initialize,
MagickGeometry, 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 { parseMediaType } from "https://deno.land/std@0.175.0/media_types/parse_media_type.ts";
import * as cache from "@lib/cache/image.ts"; import * as cache from "@lib/cache/image.ts";
import { SILVERBULLET_SERVER } from "@lib/env.ts"; import { SILVERBULLET_SERVER } from "@lib/env.ts";
await initializeImageMagick(); await initialize();
async function getRemoteImage(image: string) { async function getRemoteImage(image: string) {
console.log("[api/image] fetching", { image }); console.log("[api/image] fetching", { image });