feat: use sharp to transform image size

apps/nextjs/package.json

@@ -31,7 +31,6 @@
     "@types/react": "18.0.19",
     "@types/react-dom": "18.0.6",
     "@types/react-test-renderer": "18.0.0",
-    "@types/sharp": "0.31.0",
     "@vitejs/plugin-react": "2.1.0",
     "autoprefixer": "10.4.9",
     "eslint": "8.23.1",

libs/backend/infrastructure/controllers/images.controller.ts

@@ -1,6 +1,6 @@
 import assert from 'assert';
 import { NextApiRequest, NextApiResponse } from 'next';
-// import sharp from 'sharp';
+import sharp from 'sharp';
 import { findOneByNameBucket } from '../../application';
 
 export async function getImageByNameController(
@@ -19,16 +19,14 @@ export async function getImageByNameController(
     fileName.replace(/.webp$/, '.png')
   );
 
-  // const output = sharp().webp({ quality: 80 }).resize({
-  //   fit: 'contain',
-  //   width: 300,
-  //   height: 300,
-  // });
+  const output = sharp().webp({ quality: 80 }).resize({
+    fit: 'contain',
+    width: 300,
+    height: 300,
+  });
 
-  // res.setHeader('Content-Type', 'image/webp');
-  file
-    // .pipe(output)
-    .pipe(res);
+  res.setHeader('Content-Type', 'image/webp');
+  file.pipe(output).pipe(res);
 }
 
 export async function getCoverByNameController(
@@ -44,19 +42,17 @@ export async function getCoverByNameController(
     fileName.replace(/.webp$/, '.png')
   );
 
-  // const output = sharp()
-  //   .webp({ quality: 80 })
-  //   .resize({
-  //     fit: 'cover',
-  //     width: 1280,
-  //     height: 720,
-  //   })
-  //   .extend({
-  //     background: { r: 255, g: 255, b: 255, alpha: 0.8 },
-  //   });
-
-  // res.setHeader('Content-Type', 'image/webp');
-  file
-    // .pipe(output)
-    .pipe(res);
+  const output = sharp()
+    .webp({ quality: 80 })
+    .resize({
+      fit: 'cover',
+      width: 1280,
+      height: 720,
+    })
+    .extend({
+      background: { r: 255, g: 255, b: 255, alpha: 0.8 },
+    });
+
+  res.setHeader('Content-Type', 'image/webp');
+  file.pipe(output).pipe(res);
 }

libs/frontend/infrastructure/components/featured-card.tsx

@@ -14,7 +14,7 @@ export default function FeaturedCard() {
     <div className="contents lg:relative lg:w-full lg:max-w-5xl lg:mx-auto relative">
       <div className="absolute inset-0 ">
         <Image
-          // layout="fill"
+          layout="fill"
           className="w-full h-full"
           src={featuredCelebrity.picture
             .replace('/images/', '/cover/')
@@ -23,8 +23,6 @@ export default function FeaturedCard() {
           priority={true}
           objectFit="cover"
           objectPosition="right"
-          width={1280}
-          height={720}
         />
       </div>
 

libs/frontend/infrastructure/features/components/celebrity.tsx

@@ -33,10 +33,8 @@ export default function Celebrity({ celebrity, listOption }: CelebrityProps) {
             'sm:object-cover sm:w-full sm:h-full': isList,
           })}
           objectFit={isList ? 'contain' : 'fill'}
-          // layout="fill"
+          layout="fill"
           objectPosition={isList ? 'left' : 'center'}
-          width={300}
-          height={300}
         />
       </div>