From f7cf226d63e458e94ff33c95f01d7f73aa2bfff5 Mon Sep 17 00:00:00 2001
From: ertrzyiks <mateusz.derks@gmail.com>
Date: Sun, 5 Jan 2025 15:22:54 +0100
Subject: [PATCH] Generate blur image on import

---
 .../20230527140804_init/migration.sql         |  1 +
 prisma/schema.prisma                          |  1 +
 scripts/import.mjs                            | 24 +++++++++++++++++++
 src/app/[categorySlug]/[recipeSlug]/page.tsx  |  1 +
 src/components/recipe/recipe.tsx              |  8 +++++--
 5 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/prisma/migrations/20230527140804_init/migration.sql b/prisma/migrations/20230527140804_init/migration.sql
index 08ce838..608a1e8 100644
--- 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
index 899b82b..eadd54c 100644
--- 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
index 833a731..c101e08 100644
--- 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
index e715da7..7058ee7 100644
--- 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
index 6fb36df..c4954a6 100644
--- a/src/components/recipe/recipe.tsx
+++ b/src/components/recipe/recipe.tsx
@@ -4,6 +4,7 @@ import { markdownToHtml } from "@/lib/markdown";
 interface Props {
   title: string;
   coverImage: string;
+  coverImageBlurDataUrl: string | null;
   ingredients: { id: number; content: string }[];
   instructions: { id: number; content: string }[];
 }
@@ -11,18 +12,21 @@ interface Props {
 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}