Change IMG tag to next/image

json-schema-org · Aug 2, 2024 · 0ab246c · 0ab246c
1 parent f6dff53
commit 0ab246c
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 62 deletions.
diff --git a/components/Card.tsx b/components/Card.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import TextTruncate from 'react-text-truncate';
+
 export interface CardProps {
   title: string;
   body: string;
@@ -36,13 +38,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'

diff --git a/components/DarkModeToggle.tsx b/components/DarkModeToggle.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
+import Image from 'next/image';
 import React from 'react';
 
 function ListItem({
@@ -46,7 +47,7 @@ export default function DarkModeToggle() {
         onClick={() => setShowSelect(!showSelect)}
         className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '
       >
-        <img
+        <Image
           src={activeThemeIcon}
           alt='Dark Mode'
           width={25}
@@ -66,8 +67,8 @@ export default function DarkModeToggle() {
         tabIndex={0}
       >
         <ListItem onClick={() => setTheme('system')}>
-          <img
-            src={'/icons/theme-switch.svg'}
+          <Image
+            src='/icons/theme-switch.svg'
             alt='System theme'
             width={18}
             height={18}
@@ -76,8 +77,8 @@ export default function DarkModeToggle() {
           System
         </ListItem>
         <ListItem onClick={() => setTheme('light')}>
-          <img
-            src={'/icons/sun.svg'}
+          <Image
+            src='/icons/sun.svg'
             alt='System theme'
             width={18}
             height={18}
@@ -86,8 +87,8 @@ export default function DarkModeToggle() {
           Light
         </ListItem>
         <ListItem onClick={() => setTheme('dark')}>
-          <img
-            src={'/icons/moon.svg'}
+          <Image
+            src='/icons/moon.svg'
             alt='System theme'
             width={18}
             height={18}

diff --git a/components/GettingStarted.tsx b/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,19 @@ 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'
+                width={20}
+                height={20}
+              />
             ) : (
-              <img src='/icons/red-cross.svg' alt='red cross' />
+              <Image
+                src='/icons/red-cross.svg'
+                alt='red cross'
+                width={20}
+                height={20}
+              />
             )}
           </div>
         </div>

diff --git a/components/JsonEditor.tsx b/components/JsonEditor.tsx
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import getPartsOfJson, { SyntaxPart } from '~/lib/getPartsOfJson';
 import jsonSchemaReferences from './jsonSchemaLinks';
 import { useRouter } from 'next/router';
+import Image from 'next/image';
 import { FullMarkdownContext } from '~/context';
 import getScopesOfParsedJsonSchema, {
   JsonSchemaPathWithScope,
@@ -279,21 +280,28 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
               setTimeout(() => setCopied(false), 2000);
             }}
           >
-            <img
+            <Image
               src='/icons/copy.svg'
+              alt='Copy to clipboard'
               title='Copy to clipboard'
               className={`opacity-50 hover:opacity-90 duration-150 ${copied ? 'hidden' : ''}`}
-            ></img>
-            <img
+            />
+            <Image
               src='/icons/copied.svg'
+              alt='Copied!'
               title='Copied!'
               className={copied ? '' : 'hidden'}
-            ></img>
+            />
           </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'>
             {isJsonSchema ? (
               <>
-                <img src='/logo-white.svg' className='h-4 mr-1.5' /> schema
+                <Image
+                  src='/logo-white.svg'
+                  alt='Logo'
+                  className='h-4 mr-1.5'
+                />
+                schema
               </>
             ) : (
               <>data</>
@@ -421,13 +429,21 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
 
         {validation === 'invalid' && (
           <div className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-red-500/30 text-sm'>
-            <img src='/icons/x-mark.svg' className='h-4 w-4 mr-2' />
+            <Image
+              src='/icons/x-mark.svg'
+              alt='X mark icon'
+              className='h-4 w-4 mr-2'
+            />
             not compliant to schema
           </div>
         )}
         {validation === 'valid' && (
           <div className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-slate-500/30 text-sm'>
-            <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>
         )}

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -10,6 +10,7 @@ import { useTheme } from 'next-themes';
 import DarkModeToggle from './DarkModeToggle';
 import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
 import ScrollButton from './ScrollButton';
+import Image from 'next/image';
 
 type Props = {
   children: React.ReactNode;
@@ -323,7 +324,11 @@ 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'
+          alt='Logo'
+          className='w-[150px] mb-6'
+        />
         <div className='flex flex-col text-center sm:text-left'>
           <a
             href='https://opencollective.com/json-schema'
@@ -344,8 +349,9 @@ const Footer = () => (
             href='https://json-schema.org/slack'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/slack_logo_small-white.svg'
+              alt='Slack Logo'
               className='w-4 h-4 mr-2'
             />
             Slack
@@ -356,7 +362,11 @@ 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'
+              alt='Twitter logo'
+              className='w-4 h-4 mr-2'
+            />
             Twitter
           </a>
         </div>
@@ -365,8 +375,9 @@ const Footer = () => (
             href='https://linkedin.com/company/jsonschema/'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/icons8-linkedin-2.svg'
+              alt='LinkedIn Icon'
               className='w-4 h-4 mr-2'
             />
             LinkedIn
@@ -377,7 +388,11 @@ 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'
+              alt='YouTube logo'
+              className='w-4 h-4 mr-2'
+            />
             Youtube
           </a>
         </div>
@@ -386,8 +401,9 @@ const Footer = () => (
             href='https://github.com/json-schema-org'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/github_logo-white.svg'
+              alt='GitHub logo'
               className='w-4 h-4 mr-2'
             />
             GitHub
@@ -419,7 +435,11 @@ const Logo = () => {
   return (
     <div>
       <Link href='/' className=''>
-        <img src={imageSrc} className='h-12 mr-2 ' />
+        <Image
+          src={imageSrc}
+          alt='Description of the image'
+          className='h-12 mr-2'
+        />
       </Link>
     </div>
   );

diff --git a/components/Sidebar.tsx b/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,
@@ -312,7 +313,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
@@ -386,7 +387,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
@@ -447,7 +448,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
@@ -630,7 +631,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

diff --git a/components/StyledMarkdown.tsx b/components/StyledMarkdown.tsx
@@ -378,7 +378,11 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
               component: ({ label }) => {
                 return (
                   <div className='flex flex-row items-center text-blue-500 text-lg font-semibold mb-6 mt-10'>
-                    <img src='/icons/star.svg' className='h-5 w-5 mr-2 mb-1' />
+                    <Image
+                      src='/icons/star.svg'
+                      alt='star icon'
+                      className='w-5 mr-2 mb-1'
+                    />
                     {label}
                   </div>
                 );
@@ -388,7 +392,11 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
               component: ({ label }) => {
                 return (
                   <div className='inline-flex flex-row items-center text-blue-500 font-semibold'>
-                    <img src='/icons/star.svg' className='h-3 w-3 mr-1' />
+                    <Image
+                      src='/icons/star.svg'
+                      alt='star icon'
+                      className='h-3 w-3 mr-1'
+                    />
                     {label}
                   </div>
                 );
@@ -404,7 +412,7 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                       </div>
                     )}
                     <div className='flex flex-row items-center mb-6 bg-amber-50 px-6 py-4 border border-amber-100 rounded text-slate-600 leading-7'>
-                      <img
+                      <Image
                         src='/icons/info-yellow.svg'
                         className='h-7 w-7 mr-3'
                         alt=''
@@ -425,7 +433,7 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                       </div>
                     )}
                     <div className='flex flex-row items-center mb-6 bg-blue-50 px-6 py-4 border border-blue-100 rounded dark:bg-slate-900 dark:text-slate-300 text-slate-600 leading-7'>
-                      <img
+                      <Image
                         src='/icons/info-blue.svg'
                         className='h-7 w-7 mr-3'
                         alt=''
@@ -446,7 +454,7 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                       </div>
                     )}
                     <div className='flex flex-row items-center mb-6 bg-green-50 px-6 py-4 border border-green-100 rounded text-slate-600 leading-7'>
-                      <img
+                      <Image
                         src='/icons/bulb.svg'
                         className='h-7 w-7 mr-3'
                         alt=''
@@ -467,7 +475,7 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                       </div>
                     )}
                     <div className='flex flex-row items-center mb-6 bg-red-50 px-6 py-4 border border-red-100 rounded text-slate-600 leading-7'>
-                      <img
+                      <Image
                         src='/icons/warning.svg'
                         className='h-7 w-7 mr-3'
                         alt=''