From 2cb1556c34914f6e0bd302bf2e4fcf3e49eee225 Mon Sep 17 00:00:00 2001
From: Jonatan Holmgren <jonatan@jontes.page>
Date: Fri, 26 Apr 2024 11:48:22 +0200
Subject: [PATCH 1/2] Introduce PotatoWebp

---
 blog/buildAssets.ts                 | 13 ++++++++++++-
 blog/src/components/PostPreview.tsx | 10 +++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/blog/buildAssets.ts b/blog/buildAssets.ts
index 2e41e6a..576d513 100644
--- a/blog/buildAssets.ts
+++ b/blog/buildAssets.ts
@@ -115,7 +115,6 @@ const getCoverImages = async () => {
                     format,
                     data,
                 });
-
                 foundImageFile = true;
                 break;
             } catch {
@@ -175,6 +174,15 @@ const handleCoverImages = async () => {
     for (const cover of covers) {
         result += `    '${cover.post}': {\n`;
 
+        const potatoImage = await sharp(cover.data)
+            .resize(64, 36)
+            .webp({
+                quality: 4,
+                effort: 6,
+                alphaQuality: 0,
+            })
+            .toBuffer();
+
         for (const settings of COVER_IMG_SETTINGS) {
             const { prefix, suffix, width, height, format } = settings;
 
@@ -194,6 +202,9 @@ const handleCoverImages = async () => {
                 format || 'webp'
             }') as Promise<{default: StaticImageData}>,\n`;
         }
+        result += `        'cover-potato': 'data:image/webp;base64,${potatoImage.toString(
+            'base64'
+        )}',\n`;
 
         result += '    },\n';
     }
diff --git a/blog/src/components/PostPreview.tsx b/blog/src/components/PostPreview.tsx
index 92a09df..9f7513a 100644
--- a/blog/src/components/PostPreview.tsx
+++ b/blog/src/components/PostPreview.tsx
@@ -26,6 +26,10 @@ export const BlogPostPreview = async ({ post, variant }: Properties) => {
               })
         : undefined;
 
+    const potato = Object.keys(covers).includes(post.file)
+        ? covers[post.file as keyof typeof covers]['cover-potato']
+        : undefined;
+
     const { readingTime } = (await import(
         `../../../content/${post.file}/readme.mdx`
     )) as {
@@ -46,8 +50,12 @@ export const BlogPostPreview = async ({ post, variant }: Properties) => {
                 {cover ? (
                     <Image
                         src={cover}
+                        width={1200}
+                        height={600}
                         className="aspect-cover h-full w-full object-cover"
                         alt={post.title}
+                        placeholder="blur"
+                        blurDataURL={potato}
                     />
                 ) : (
                     <img
@@ -59,7 +67,7 @@ export const BlogPostPreview = async ({ post, variant }: Properties) => {
             </span>
             <span
                 className={clsx(
-                    'flex h-full flex-col gap-2 p-5 md:p-6 max-h-[200px] my-auto',
+                    'my-auto flex h-full max-h-[200px] flex-col gap-2 p-5 md:p-6',
                     variant == 'horizontal'
                         ? 'border-t md:border-none'
                         : 'border-t'

From 3180d490ebcd52bd10952267ca184cef4c6c06ba Mon Sep 17 00:00:00 2001
From: Jonatan Holmgren <jonatan@jontes.page>
Date: Fri, 26 Apr 2024 18:24:34 +0200
Subject: [PATCH 2/2] Small bugfix

---
 blog/app/metadata/[slug]/route.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/blog/app/metadata/[slug]/route.ts b/blog/app/metadata/[slug]/route.ts
index 0d1383c..8469e96 100644
--- a/blog/app/metadata/[slug]/route.ts
+++ b/blog/app/metadata/[slug]/route.ts
@@ -41,6 +41,10 @@ export async function GET(_request: NextRequest, { params }: PageProperties) {
 
     if (cover_data) {
         for (const [key, cover] of Object.entries(cover_data)) {
+            if (typeof cover === 'string') {
+                continue;
+            }
+
             const awaitedData = await cover;
 
             data.assets.covers[key] = awaitedData.default.src || data['cover'];