fix: no-img-element lint warnings by using next/image

Author: justismailmemon

src/components/Layout/HomeContent.js

@@ -34,6 +34,7 @@ import CodeBlock from 'components/MDX/CodeBlock';
 import {ExternalLink} from 'components/ExternalLink';
 import sidebarBlog from '../../sidebarBlog.json';
 import * as React from 'react';
+import uwuLogo from '../../../public/images/uwu.png';
 import Image from 'next/image';
 
 function Section({children, background = null}) {
@@ -509,11 +510,11 @@ export function HomeContent() {
 
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <div className="uwu-visible flex justify-center">
-              <img
+              <Image
                 alt="logo by @sawaratsuki1004"
                 title="logo by @sawaratsuki1004"
                 className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
-                src="/images/uwu.png"
+                src={uwuLogo}
               />
             </div>
             <Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
@@ -789,24 +790,26 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
         <div
           key={i}
           className={cn(
-            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl`
+            'group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl'
           )}>
           <div
             className={cn(
-              'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100  transition-transform ease-in-out duration-300',
+              'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100 transition-transform ease-in-out duration-300',
               i % 2 === 0
                 ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110'
                 : 'group-hover:rotate-1 group-hover:scale-110 rotate-[-2deg]'
             )}>
             <div
               className={cn(
-                'overflow-clip relative before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
+                'overflow-clip relative aspect-[4/3] before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
               )}>
-              <img
+              <Image
                 loading={isLazy ? 'lazy' : 'eager'}
                 src={src}
                 alt={alt}
-                className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
+                fill
+                sizes="(min-width: 1024px) 25vw, 50vw"
+                className="object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
               />
             </div>
           </div>
@@ -1564,7 +1567,7 @@ function Cover({background, children}) {
       <div className="absolute inset-0 px-4 py-2 flex items-end bg-gradient-to-t from-black/40 via-black/0">
         {children}
       </div>
-      <img
+      <Image
         src={background}
         width={500}
         height={263}
@@ -1641,10 +1644,12 @@ function Thumbnail({video}) {
         <>
           <div className="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center">
             {image.speakers.map((src, i) => (
-              <img
+              <Image
                 key={i}
                 className="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full"
                 src={src}
+                width={32}
+                height={32}
                 alt=""
               />
             ))}

src/components/MDX/MDXComponents.tsx

@@ -13,6 +13,7 @@ import {Children, useContext, useMemo} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import type {HTMLAttributes} from 'react';
+import NextImage from 'next/image';
 
 import CodeBlock from './CodeBlock';
 import {CodeDiagram} from './CodeDiagram';
@@ -297,6 +298,21 @@ const IllustrationContext = React.createContext<{
   isInBlock: false,
 });
 
+function toNumber(value: unknown, fallback: number) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed) && parsed > 0) {
+      return parsed;
+    }
+  }
+
+  return fallback;
+}
+
 function Illustration({
   caption,
   src,
@@ -315,10 +331,12 @@ function Illustration({
   return (
     <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
-        <img
+        <NextImage
           src={src}
           alt={alt}
-          style={{maxHeight: 300}}
+          width={1200}
+          height={630}
+          style={{maxHeight: 300, width: 'auto', height: 'auto'}}
           className="rounded-lg"
         />
         {caption ? (
@@ -351,11 +369,13 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img
+        <NextImage
           className="text-primary"
           src={info.src}
           alt={info.alt}
-          height={info.height}
+          width={toNumber(info.width, 1200)}
+          height={toNumber(info.height, 630)}
+          style={{height: 'auto'}}
         />
       </div>
       {info.caption ? (
@@ -485,9 +505,19 @@ function YouTubeIframe(props: any) {
   );
 }
 
-function Image(props: any) {
-  const {alt, ...rest} = props;
-  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
+function MdxImage(props: any) {
+  const {alt = '', width, height, className, style, ...rest} = props;
+
+  return (
+    <NextImage
+      alt={alt}
+      width={toNumber(width, 1200)}
+      height={toNumber(height, 630)}
+      className={cn('max-w-[calc(min(700px,100%))]', className)}
+      style={{height: 'auto', ...style}}
+      {...rest}
+    />
+  );
 }
 
 export const MDXComponents = {
@@ -504,7 +534,7 @@ export const MDXComponents = {
   h5: H5,
   hr: Divider,
   a: Link,
-  img: Image,
+  img: MdxImage,
   BlogCard,
   code: InlineCode,
   pre: CodeBlock,