feat: render images if available

nicholasgriffintn · Aug 25, 2024 · 07c54c4 · 07c54c4
1 parent bdb935e
commit 07c54c4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/apps/web/app/components/homepage/search-result-item.tsx b/apps/web/app/components/homepage/search-result-item.tsx
@@ -106,6 +106,18 @@ export const SearchResultItem = ({
       author?: string;
       published?: string;
       updated?: string;
+      thumbnail?: {
+        url: string;
+        width?: number;
+        height?: number;
+      };
+      media?: {
+        url: string;
+        type?: string;
+        width?: number;
+        height?: number;
+        credit?: string;
+      }[];
     };
     score: number;
   };
@@ -114,6 +126,11 @@ export const SearchResultItem = ({
   const matchPercentage = Math.round(result.score * 100);
   const badgeColor = getBadgeColor(matchPercentage);
 
+  const imageUrl =
+    result.metadata?.thumbnail?.url ||
+    result.metadata?.media?.[0]?.url ||
+    '/assets/placeholder.svg';
+
   return (
     <li>
       <Card className="overflow-hidden">
@@ -131,7 +148,7 @@ export const SearchResultItem = ({
           >
             <div className="relative h-full">
               <img
-                src="/assets/placeholder.svg"
+                src={imageUrl}
                 alt=""
                 className="w-full h-full object-cover"
               />

diff --git a/apps/web/test/fixtures/matches.json b/apps/web/test/fixtures/matches.json
@@ -8,7 +8,11 @@
         "title": "Secrets of hovering kestrels to help drones beat city winds",
         "description": "Researchers hope they could inspire new drone and plane designs able to better cope with turbulence.",
         "published": "Thu, 08 Aug 2024 13:53:17 GMT",
-        "image": null
+        "thumbnail": {
+          "url": "https://ichef.bbci.co.uk/news/976/cpsprodpb/acec/live/3b4c1b30-559b-11ef-aebc-6de4d31bf5cd.jpg",
+          "width": 1024,
+          "height": 576
+        }
       },
       "score": 0.617957476
     },
@@ -64,7 +68,14 @@
         "title": "Like ‘using Lego blocks’: record-breaking tunnel connecting Denmark and Germany takes shape",
         "description": "<p>Tunnel being built with innovative engineering is final step of project to connect Denmark – and the Nordics as a whole – to the rest of Europe</p><p>From the quayside of the Danish town of Rødbyhavn, the Baltic sea sparkling in the sunshine, Germany is so close you can see it – a cluster of wind turbines on the horizon.</p><p>The German town of Puttgarden is just 11 miles away, but getting there involves either a 45-minute ferry journey – plus time for embarking and disembarking – or a six-hour drive taking in much of Denmark.</p> <a href=\"https://www.theguardian.com/world/article/2024/aug/23/record-breaking-tunnel-denmark-germany-fehmarnbelt\">Continue reading...</a>",
         "published": "Fri, 23 Aug 2024 09:55:45 GMT",
-        "image": null
+        "media": [
+          {
+            "url": "https://i.guim.co.uk/img/media/416ce860b73ef1714b53930e172105aae0a52a29/0_6_7848_4709/master/7848.jpg?width=1900&dpr=2&s=none",
+            "type": "image",
+            "width": 1900,
+            "height": 1140
+          }
+        ]
       },
       "score": 0.591936666
     },