✨ Enhancement: Replace <img> tags with Next.js Image Component #824

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     es2021: true,
     node: true,
     browser: true,
-    "cypress/globals": true
+    'cypress/globals': true
   },
   settings: {
     react: {
@@ -53,7 +53,8 @@ module.exports = {
     'keyword-spacing': ['error', { before: true, after: true }],
     'comma-spacing': ['error', { before: false, after: true }],
     'key-spacing': ['error', { beforeColon: false, afterColon: true }],
-    '@next/next/no-img-element': 'off',
+    // Change this rule from 'off' to 'error'
+    '@next/next/no-img-element': 'error',
     'no-multi-spaces': 'error',
     'space-infix-ops': 'error',
     'space-before-blocks': 'error',

components/Card.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import TextTruncate from 'react-text-truncate';
+import Image from 'next/image';
 export interface CardProps {
   title: string;
   body: string;
@@ -36,13 +37,18 @@ const CardBody = ({
     <div className='group relative h-full w-full rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors ease-in-out hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30'>
       <div className='flex justify-center '>
         {image && (
-          <img src={image} className='h-32 p-2' data-test='card-image' />
+          <Image
+            src={image}
+            alt={title}
+            className='h-32 p-2'
+            data-test='card-image'
+          />
         )}
       </div>
       <div className='flex flex-row items-start mb-6'>
         {icon && (
           <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900 dark:text-white'>
-            <img
+            <Image
               src={icon}
               alt={title}
               className='h-full w-full'

components/DarkModeToggle.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import React from 'react';
+import Image from 'next/image';
 
 function ListItem({
   children,
@@ -52,7 +53,7 @@ export default function DarkModeToggle() {
         className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '
         data-test='dark-mode-toggle'
       >
-        <img
+        <Image
           src={activeThemeIcon}
           alt='Dark Mode'
           width={25}
@@ -77,7 +78,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('system')}
           data-test='select-system-theme'
         >
-          <img
+          <Image
             src={'/icons/theme-switch.svg'}
             alt='System theme'
             width={18}
@@ -90,7 +91,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('light')}
           data-test='select-light-theme'
         >
-          <img
+          <Image
             src={'/icons/sun.svg'}
             alt='System theme'
             width={18}
@@ -103,7 +104,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('dark')}
           data-test='select-dark-theme'
         >
-          <img
+          <Image
             src={'/icons/moon.svg'}
             alt='System theme'
             width={18}

components/GettingStarted.tsx

@@ -3,6 +3,7 @@ import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import Highlight from 'react-syntax-highlighter';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
+import Image from 'next/image';
 
 async function fetchData() {
   const response = await fetch('/data/getting-started-examples.json');
@@ -237,9 +238,9 @@ const GettingStarted = () => {
             <p>{details[0]}</p>
 
             {details[1] ? (
-              <img src='/icons/green-tick.svg' alt='green tick' />
+              <Image src='/icons/green-tick.svg' alt='green tick' />
             ) : (
-              <img src='/icons/red-cross.svg' alt='red cross' />
+              <Image src='/icons/red-cross.svg' alt='red cross' />
             )}
           </div>
         </div>

components/JsonEditor.tsx

@@ -10,6 +10,7 @@ import getScopesOfParsedJsonSchema, {
   JsonSchemaPathWithScope,
   JsonSchemaScope,
 } from '~/lib/getScopesOfParsedJsonSchema';
+import Image from 'next/image';
 
 type CustomElement = CustomNode | CustomText;
 type CustomNode = { type: 'paragraph'; children: CustomText[] };
@@ -294,24 +295,31 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             }}
             data-test='copy-clipboard-button'
           >
-            <img
+            <Image
               src='/icons/copy.svg'
+              alt='Copy icon'
               title='Copy to clipboard'
               className={`opacity-50 hover:opacity-90 duration-150 ${copied ? 'hidden' : ''}`}
-            ></img>
-            <img
+            ></Image>
+            <Image
               src='/icons/copied.svg'
+              alt='Copied icon'
               title='Copied!'
               className={copied ? '' : 'hidden'}
-            ></img>
+            ></Image>
           </div>
           <div
             className='flex flex-row items-center text-white h-6 font-sans bg-white/20 text-xs px-3 rounded-bl-lg font-semibold'
             data-test='check-json-schema'
           >
             {isJsonSchema ? (
               <>
-                <img src='/logo-white.svg' className='h-4 mr-1.5' /> schema
+                <Image
+                  src='/logo-white.svg'
+                  alt=' logo-white'
+                  className='h-4 mr-1.5'
+                />{' '}
+                schema
               </>
             ) : (
               <>data</>
@@ -451,7 +459,11 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-red-500/30 text-sm'
             data-test='not-compliant-to-schema'
           >
-            <img src='/icons/x-mark.svg' className='h-4 w-4 mr-2' />
+            <Image
+              src='/icons/x-mark.svg'
+              alt='Error icon'
+              className='h-4 w-4 mr-2'
+            />
             not compliant to schema
           </div>
         )}
@@ -460,7 +472,11 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-slate-500/30 text-sm'
             data-test='compliant-to-schema'
           >
-            <img src='/icons/checkmark.svg' className='h-5 w-5 mr-2' />
+            <Image
+              src='/icons/checkmark.svg'
+              alt='Checkmark icon'
+              className='h-5 w-5 mr-2'
+            />
             compliant to schema
           </div>
         )}

components/Layout.tsx

@@ -10,6 +10,8 @@ import { useTheme } from 'next-themes';
 import DarkModeToggle from './DarkModeToggle';
 import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
 import ScrollButton from './ScrollButton';
+import Image from 'next/image';
+import { title } from 'process';
 
 type Props = {
   children: React.ReactNode;
@@ -319,7 +321,14 @@ const Footer = () => (
   >
     <div className='max-w-[1400px] mx-auto mt-8 md:mt-4 grid grid-cols-1 md:grid-cols-2 md:w-1/2 lg:w-1/3 justify-center '>
       <div className=' my-6 m-auto md:mt-16'>
-        <img src='/img/logos/logo-white.svg' className='w-[150px] mb-6' />
+        <Image
+          src='/img/logos/logo-white.svg'
+          layout='intrinsic'
+          width={150}
+          height={100}
+          alt={title}
+          className='mb-6'
+        />
         <div className='flex flex-col text-center sm:text-left'>
           <a
             href='https://opencollective.com/json-schema'
@@ -340,9 +349,12 @@ const Footer = () => (
             href='https://json-schema.org/slack'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/slack_logo_small-white.svg'
+              width={16} // Corresponds to 'w-4' in Tailwind
+              height={16} // Corresponds to 'h-4' in Tailwind
               className='w-4 h-4 mr-2'
+              alt='' // Empty alt is fine, but consider adding a meaningful description for accessibility
             />
             Slack
           </a>
@@ -352,7 +364,13 @@ const Footer = () => (
             href='https://twitter.com/jsonschema'
             className='flex items-center text-white'
           >
-            <img src='/img/logos/x-twitter.svg' className='w-4 h-4 mr-2' />
+            <Image
+              src='/img/logos/x-twitter.svg'
+              width={16} // Corresponds to 'w-4' in Tailwind (4 * 4 = 16px)
+              height={16} // Corresponds to 'h-4' in Tailwind
+              className='w-4 h-4 mr-2'
+              alt='Twitter logo' // Consider adding an alt for accessibility
+            />
             Twitter
           </a>
         </div>
@@ -361,9 +379,12 @@ const Footer = () => (
             href='https://linkedin.com/company/jsonschema/'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/icons8-linkedin-2.svg'
+              width={16} // Corresponds to 'w-4' in Tailwind (4 * 4 = 16px)
+              height={16} // Corresponds to 'h-4' in Tailwind
               className='w-4 h-4 mr-2'
+              alt='LinkedIn logo' // Always good to have alt text for accessibility
             />
             LinkedIn
           </a>
@@ -373,7 +394,13 @@ const Footer = () => (
             href='https://www.youtube.com/@JSONSchemaOrgOfficial'
             className='flex items-center text-white'
           >
-            <img src='/img/logos/icons8-youtube.svg' className='w-4 h-4 mr-2' />
+            <Image
+              src='/img/logos/icons8-youtube.svg'
+              width={16} // Corresponds to 'w-4' in Tailwind (4 * 4 = 16px)
+              height={16} // Corresponds to 'h-4' in Tailwind
+              className='w-4 h-4 mr-2'
+              alt='YouTube logo' // Consider adding alt text for accessibility
+            />
             Youtube
           </a>
         </div>
@@ -382,9 +409,12 @@ const Footer = () => (
             href='https://github.com/json-schema-org'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/github_logo-white.svg'
+              width={16} // Corresponds to 'w-4' in Tailwind (4 * 4 = 16px)
+              height={16} // Corresponds to 'h-4' in Tailwind
               className='w-4 h-4 mr-2'
+              alt='GitHub logo' // Adding alt text for accessibility
             />
             GitHub
           </a>
@@ -415,7 +445,13 @@ const Logo = () => {
   return (
     <div>
       <Link href='/' className=''>
-        <img src={imageSrc} className='h-12 mr-2 ' />
+        <Image
+          src={imageSrc}
+          width={128} // You can set an appropriate width based on the desired size
+          height={48} // Matches 'h-12' in Tailwind (12 * 4 = 48px)
+          className='h-12 mr-2'
+          alt='Dynamic image' // Consider adding alt text for accessibility
+        />
       </Link>
     </div>
   );

components/Sidebar.tsx

@@ -8,6 +8,7 @@ import { SegmentHeadline } from './Layout';
 import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
 import CarbonAds from './CarbonsAds';
 import { useTheme } from 'next-themes';
+import Image from 'next/image';
 
 const DocLink = ({
   uri,
@@ -314,7 +315,7 @@ export const DocsNav = ({
           onClick={handleClickDoc}
         >
           <div className='flex  items-center align-middle'>
-            <img src={`${overview_icon}`} alt='eye icon' className='mr-2' />
+            <Image src={`${overview_icon}`} alt='eye icon' className='mr-2' />
             <SegmentHeadline label='Overview' />
           </div>
           <svg
@@ -388,7 +389,7 @@ export const DocsNav = ({
           onClick={handleClickGet}
         >
           <div className='flex  items-center align-middle'>
-            <img src={`${learn_icon}`} alt='compass icon' className='mr-2' />
+            <Image src={`${learn_icon}`} alt='compass icon' className='mr-2' />
             <SegmentHeadline label='Getting Started' />
           </div>
           <svg
@@ -455,7 +456,7 @@ export const DocsNav = ({
           onClick={handleClickReference}
         >
           <div className='flex  items-center align-middle'>
-            <img src={`${reference_icon}`} alt='book icon' className='mr-2' />
+            <Image src={`${reference_icon}`} alt='book icon' className='mr-2' />
             <SegmentHeadline label='Reference' />
           </div>
           <svg
@@ -643,7 +644,7 @@ export const DocsNav = ({
           onClick={handleClickSpec}
         >
           <div className='flex  items-center align-middle'>
-            <img src={`${spec_icon}`} alt='clipboard icon' className='mr-2' />
+            <Image src={`${spec_icon}`} alt='clipboard icon' className='mr-2' />
             <SegmentHeadline label='Specification' />
           </div>
           <svg