fix: image perf for substack newsletter

thedaviddias · Aug 5, 2023 · dc417fe · dc417fe · vercel · Aug 5, 2023
1 parent 4a3255f
commit dc417fe
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/apps/blog/next.config.js b/apps/blog/next.config.js
@@ -31,6 +31,7 @@ const nextConfig = withPlugins([plugins, nextTranslate], {
       'i.gr-assets.com',
       'i.ytimg.com',
       'github.com',
+      'substack-post-media.s3.amazonaws.com',
     ],
     formats: ['image/avif', 'image/webp'],
   },

diff --git a/apps/blog/src/components/BuyMeACoffee/BuyMeACoffee.tsx b/apps/blog/src/components/BuyMeACoffee/BuyMeACoffee.tsx
@@ -20,9 +20,10 @@ export const BuyMeACoffee = () => {
             rel="noopener noreferrer"
             target="_blank"
             className="external-link plausible-event-name=kofi"
+            aria-label="Buy me a coffee on Ko-fi"
           >
             <Image
-              className="inline-block h-auto max-w-xl pt-2 w-auto h-auto"
+              className="inline-block h-auto max-w-xl pt-2 w-auto"
               src="/images/kofi.png"
               width={40}
               height={40}

diff --git a/apps/blog/src/components/SubstackFeed/SubstackFeed.tsx b/apps/blog/src/components/SubstackFeed/SubstackFeed.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import useTranslation from 'next-translate/useTranslation'
 import React, { FC, useCallback, useEffect } from 'react'
 
@@ -33,26 +34,32 @@ export const SubstackFeed: FC = () => {
           <ul>
             {feed?.items.map((item: any, index: any) => (
               <li
-                className="relative bg-cover"
+                className="relative overflow-hidden"
                 key={index}
                 style={{
-                  backgroundImage: `url(${item.enclosures[0].url})`,
-                  backgroundSize: `cover`,
                   height: '300px',
                   width: '300px',
-                  backgroundPosition: `center center`,
                 }}
               >
-                <div className="absolute inset-0 bg-black bg-opacity-60"></div>
-                <div className="relative flex flex-col items-center justify-center w-full px-4 py-3 sm:justify-between">
-                  <div className="items-center justify-center w-full sm:flex">
-                    <div className="max-w-lg">
-                      <a href={item.link}>
-                        <header className="text-white text-2xl font-bold">{item.title}</header>
-                        <p className="mb-4 font-medium text-white sm:mb-0 md:mb-0">
-                          {item.description}
-                        </p>
-                      </a>
+                <div className="absolute inset-0 flex flex-col">
+                  <Image
+                    src={item.enclosures[0].url}
+                    fill={true}
+                    style={{ objectFit: 'cover' }}
+                    aria-hidden="true"
+                    alt=""
+                  />
+                  <div className="absolute inset-0 bg-black bg-opacity-60"></div>
+                  <div className="relative flex flex-col items-center justify-center w-full px-4 py-3 sm:justify-between">
+                    <div className="items-center justify-center w-full sm:flex">
+                      <div className="max-w-lg">
+                        <a href={item.link}>
+                          <header className="text-white text-2xl font-bold">{item.title}</header>
+                          <p className="mb-4 font-medium text-white sm:mb-0 md:mb-0">
+                            {item.description}
+                          </p>
+                        </a>
+                      </div>
                     </div>
                   </div>
                 </div>