From 402166e9b2a3a907ef85b47dcaa61fb593a3ea0f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 23 Mar 2023 20:18:54 +0800
Subject: [PATCH] If there's no image, use blurhash "image"

---
 src/components/status.jsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 95a4b79d..aa689a8d 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -8,6 +8,7 @@ import {
   MenuHeader,
   MenuItem,
 } from '@szhsin/react-menu';
+import { decodeBlurHash } from 'fast-blurhash';
 import mem from 'mem';
 import pThrottle from 'p-throttle';
 import { memo } from 'preact/compat';
@@ -1159,18 +1160,32 @@ function Card({ card, instance }) {
   //   );
   // }
 
-  if (hasText && image) {
+  if (hasText && (image || (!type !== 'photo' && blurhash))) {
     const domain = new URL(url).hostname.replace(/^www\./, '');
+    let blurhashImage;
+    if (!image) {
+      const w = 44;
+      const h = 44;
+      const blurhashPixels = decodeBlurHash(blurhash, w, h);
+      const canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      const imageData = ctx.createImageData(w, h);
+      imageData.data.set(blurhashPixels);
+      ctx.putImageData(imageData, 0, 0);
+      blurhashImage = canvas.toDataURL();
+    }
     return (
       <a
         href={cardStatusURL || url}
         target={cardStatusURL ? null : '_blank'}
         rel="nofollow noopener noreferrer"
-        class={`card link ${size}`}
+        class={`card link ${blurhashImage ? '' : size}`}
       >
         <div class="card-image">
           <img
-            src={image}
+            src={image || blurhashImage}
             width={width}
             height={height}
             loading="lazy"