refactor: use cloudinary for images on blog page

asyncapi · Sep 9, 2023 · 6e5342c · 6e5342c
1 parent 5527d5b
commit 6e5342c
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 7 deletions.
diff --git a/components/AuthorAvatars.js b/components/AuthorAvatars.js
@@ -1,13 +1,34 @@
 import React from 'react'
+import { setConfig, buildImageUrl } from 'cloudinary-build-url';
+
+setConfig({
+  cloudName: 'dimfh6eps'
+});
+
 export default function AuthorAvatars({ authors = [] }) {
   return (
     authors.map((author, index) => {
+      let authorPhoto = `https://www.asyncapi.com${author.photo}`
+      authorPhoto = buildImageUrl(authorPhoto, {
+        cloud: {
+          storageType: 'fetch'
+        },
+        transformations: {
+          resize: {
+            type: 'fill',
+            width: 40,
+            height: 40,
+          },
+          radius: 'max',
+        }
+      });
+
       let avatar = (
         <img
           key={index}
           title={author.name}
-          className={`${index > 0 ? `absolute left-${index * 7} top-0` : `relative mr-${(authors.length - 1) * 7}`} z-${(authors.length - 1 - index) * 10} h-10 w-10 border-2 border-white rounded-full object-cover hover:z-50`}
-          src={author.photo}
+          className={`${index > 0 ? `absolute left-${index * 7} top-0` : `relative mr-${(authors.length - 1) * 7}`} z-${(authors.length - 1 - index) * 10} border-2 border-white object-cover hover:z-50`}
+          src={authorPhoto}
           loading="lazy"
           data-testid="AuthorAvatars-img"
         />

diff --git a/components/navigation/BlogPostItem.js b/components/navigation/BlogPostItem.js
@@ -6,7 +6,7 @@ import Heading from '../typography/Heading'
 import Paragraph from '../typography/Paragraph'
 import Link from 'next/link'
 
-export default forwardRef(function BlogPostItem({ post, className = '', id=''}, ref) {
+export default forwardRef(function BlogPostItem({ post, coverImage, className = '', id=''}, ref) {
   let typeColors = ['bg-indigo-100', 'text-indigo-800']
 
   switch (post.type.toLowerCase()) {
@@ -29,7 +29,7 @@ export default forwardRef(function BlogPostItem({ post, className = '', id=''},
       <article className='h-full rounded-lg'>
           <Link href={post.slug} passHref>
             <a className={`h-full flex flex-col border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden cursor-pointer`} data-testid="BlogPostItem-Link">
-              <img className="h-48 w-full object-cover" src={post.cover} alt="" loading="lazy" data-testid="BlogPostItem-Img"/>
+              <img className="object-cover" src={coverImage} alt="" loading="lazy" data-testid="BlogPostItem-Img"/>
               <div className="flex-1 bg-white p-6 flex flex-col justify-between">
                 <div className="flex-1">
                   <Paragraph typeStyle="body-sm" textColor="text-indigo-500">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "ajv-formats": "^2.1.1",
     "autoprefixer": "^10.4.7",
     "axios": "^0.27.2",
+    "cloudinary-build-url": "^0.2.4",
     "clsx": "^1.1.1",
     "cssnano": "^5.1.12",
     "dotenv": "^8.2.0",

diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -8,6 +8,11 @@ import Heading from "../../components/typography/Heading";
 import Paragraph from "../../components/typography/Paragraph";
 import TextLink from "../../components/typography/TextLink";
 import GenericLayout from "../../components/layout/GenericLayout";
+import { setConfig,buildImageUrl } from 'cloudinary-build-url';
+
+setConfig({
+  cloudName: 'dimfh6eps'
+});
 
 export default function BlogIndexPage() {
   const router = useRouter();
@@ -117,9 +122,22 @@ export default function BlogIndexPage() {
               </div>
             ) : (
               <ul className="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
-                {router.isReady && posts.map((post, index) => (
-                  <BlogPostItem key={index} post={post} />
-                ))}
+                {router.isReady && posts.map((post, index) => {
+                  const coverUrl = `https://www.asyncapi.com${post.cover}`;
+                  const coverImage = buildImageUrl(coverUrl, {
+                    cloud: {
+                      storageType: 'fetch'
+                    },
+                    transformations: {
+                      resize: {
+                        type: 'fill',
+                        width: 412,
+                        height: 192
+                      }
+                    }
+                  });
+                  return <BlogPostItem key={index} post={post} coverImage={coverImage}/>
+                })}
               </ul>
             )}
           </div>