Generate blur image on import

yummy-recipes · Jan 5, 2025 · f7cf226 · f7cf226
1 parent 14b22f7
commit f7cf226
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 2 deletions.
diff --git a/prisma/migrations/20230527140804_init/migration.sql b/prisma/migrations/20230527140804_init/migration.sql
@@ -17,6 +17,7 @@ CREATE TABLE "Recipe" (
     "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
     "slug" TEXT NOT NULL,
     "coverImage" TEXT NOT NULL,
+    "coverImageBlurDataUrl" TEXT,
     "title" TEXT NOT NULL,
     "headline" TEXT NOT NULL,
     "preparationTime" INTEGER NOT NULL,

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -42,6 +42,7 @@ model Recipe {
   id              Int                      @id @default(autoincrement())
   slug            String                   @unique
   coverImage      String
+  coverImageBlurDataUrl      String?
   title           String
   headline        String
   preparationTime Int

diff --git a/scripts/import.mjs b/scripts/import.mjs
@@ -98,6 +98,7 @@ async function createOrUpdateRecipes({
   slug,
   category,
   coverImage,
+  coverImageBlurDataUrl,
   headline,
   preparationTime,
   publishedAt,
@@ -134,6 +135,7 @@ async function createOrUpdateRecipes({
         headline,
         preparationTime,
         coverImage,
+        coverImageBlurDataUrl,
         publishedAt,
         category: {
           connect: {
@@ -160,6 +162,7 @@ async function createOrUpdateRecipes({
       slug,
       headline,
       coverImage,
+      coverImageBlurDataUrl,
       preparationTime,
       publishedAt,
       category: {
@@ -206,6 +209,15 @@ function loadRecipes(after = null, limit) {
           }
           cover {
             url
+            blurPlaceholder: url(
+              transformation: {
+                document: { output: { format: jpg } }
+                image: {
+                  resize: { width: 30, height: 30 }
+                  blur: { amount: 20 }
+                }
+              }
+            )
           }
           category {
             id
@@ -226,6 +238,15 @@ function loadRecipes(after = null, limit) {
   );
 }
 
+async function imageToDataUrl(url) {
+  const res = await fetch(url);
+  const blob = await res.blob();
+  const buffer = await blob.arrayBuffer();
+  const base64 = Buffer.from(buffer).toString("base64");
+  const mimeType = blob.type;
+  return `data:${mimeType};base64,${base64}`;
+}
+
 async function main() {
   const { data, errors } = await loadCategories();
   const categoryMap = {};
@@ -273,6 +294,9 @@ async function main() {
         coverImage:
           recipe.cover?.url ??
           "https://media.graphassets.com/eiXZ15TaNlZO4H8DQQQB",
+        coverImageBlurDataUrl: recipe.cover?.blurPlaceholder
+          ? await imageToDataUrl(recipe.cover.blurPlaceholder)
+          : null,
         headline: recipe.headline,
         preparationTime: recipe.preparationTime,
         category: { id: categoryMap[recipe.category.slug].id },

diff --git a/src/app/[categorySlug]/[recipeSlug]/page.tsx b/src/app/[categorySlug]/[recipeSlug]/page.tsx
@@ -42,6 +42,7 @@ export default async function Page({ params }: Props) {
       <Recipe
         title={recipe.title}
         coverImage={recipe.coverImage}
+        coverImageBlurDataUrl={recipe.coverImageBlurDataUrl}
         ingredients={recipe.ingredients}
         instructions={recipe.instructions}
       />

diff --git a/src/components/recipe/recipe.tsx b/src/components/recipe/recipe.tsx
@@ -4,25 +4,29 @@ import { markdownToHtml } from "@/lib/markdown";
 interface Props {
   title: string;
   coverImage: string;
+  coverImageBlurDataUrl: string | null;
   ingredients: { id: number; content: string }[];
   instructions: { id: number; content: string }[];
 }
 
 export async function Recipe({
   title,
   coverImage,
+  coverImageBlurDataUrl,
   ingredients,
   instructions,
 }: Props) {
   return (
     <div className="flex flex-col w-full">
-      <div className="my-12">
+      <div className="mt-8 mb-8">
         <h1 className="text-gradient uppercase inline text-4xl">{title}</h1>
       </div>
 
-      <div className="md:w-1/2">
+      <div className="mb-4 md:w-1/2">
         <Image
           className="w-full max-h-32 object-cover"
+          placeholder={coverImageBlurDataUrl ? "blur" : "empty"}
+          blurDataURL={coverImageBlurDataUrl ?? undefined}
           src={coverImage}
           width={600}
           height={400}