Fixed #824 - img tags replaced by Image (#1197)

* img tags replace to Image * Refactor Card component to use Image component for displaying images * fix the prettier format * Refactor Card component to use Image component with updated width and className * Refactor image sizes and classNames in StyledMarkdown and index.page.tsx * Refactor image size in Sidebar component * Refactor image classNames in Layout and StyledMarkdown components * Refactor classNames in JsonEditor and StyledMarkdown components
json-schema-org · Jan 18, 2025 · ee7f95a · ee7f95a
1 parent d1040c5
commit ee7f95a
Show file tree

Hide file tree

Showing 13 changed files with 434 additions and 98 deletions.
diff --git a/components/Card.tsx b/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,8 +37,11 @@ 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
+          <Image
             src={image}
+            alt={title}
+            width={384}
+            height={128}
             className='h-32 p-2 object-contain'
             data-test='card-image'
           />
@@ -46,9 +50,11 @@ const CardBody = ({
       <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}
+              width={56}
+              height={56}
               className='h-full w-full'
               data-test='card-icon'
             />

diff --git a/components/DarkModeToggle.tsx b/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}

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={24}
+                height={24}
+              />
             ) : (
-              <img src='/icons/red-cross.svg' alt='red cross' />
+              <Image
+                src='/icons/red-cross.svg'
+                alt='red cross'
+                width={24}
+                height={24}
+              />
             )}
           </div>
         </div>

diff --git a/components/JsonEditor.tsx b/components/JsonEditor.tsx
@@ -6,6 +6,7 @@ import getPartsOfJson, { SyntaxPart } from '~/lib/getPartsOfJson';
 import jsonSchemaReferences from './jsonSchemaLinks';
 import { useRouter } from 'next/router';
 import { FullMarkdownContext } from '~/context';
+import Image from 'next/image';
 import getScopesOfParsedJsonSchema, {
   JsonSchemaPathWithScope,
   JsonSchemaScope,
@@ -294,24 +295,37 @@ 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'
+              width={20}
+              height={20}
               className={`opacity-50 hover:opacity-90 duration-150 ${copied ? 'hidden' : ''}`}
-            ></img>
-            <img
+            />
+            <Image
               src='/icons/copied.svg'
+              alt='Copied icon'
+              width={20}
+              height={20}
               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'
             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'
+                  width={16}
+                  height={16}
+                  className=' mr-1.5'
+                />{' '}
+                schema
               </>
             ) : (
               <>data</>
@@ -451,7 +465,13 @@ 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'
+              width={16}
+              height={16}
+              className=' mr-2'
+            />
             not compliant to schema
           </div>
         )}
@@ -460,7 +480,13 @@ 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'
+              width={20}
+              height={20}
+              className='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;
@@ -327,7 +328,13 @@ 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'
+          width={150}
+          height={100}
+          alt='logo-white'
+          className='mb-6'
+        />
         <div className='flex flex-col text-center sm:text-left'>
           <a
             href='https://opencollective.com/json-schema'
@@ -348,9 +355,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'
-              className='w-4 h-4 mr-2'
+              width={16}
+              height={16}
+              className=' mr-2'
+              alt='Slack logo'
             />
             Slack
           </a>
@@ -360,17 +370,27 @@ const Footer = () => (
             href='https://x.com/jsonschema'
             className='flex items-center text-white'
           >
-            <img src='/img/logos/x-twitter.svg' className='w-4 h-4 mr-2' />X
+            <Image
+              src='/img/logos/x-twitter.svg'
+              width={16}
+              height={16}
+              className=' mr-2'
+              alt='X logo'
+            />{' '}
+            X
           </a>
         </div>
         <div className=''>
           <a
             href='https://linkedin.com/company/jsonschema/'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/icons8-linkedin-2.svg'
-              className='w-4 h-4 mr-2'
+              width={16}
+              height={16}
+              className=' mr-2'
+              alt='LinkedIn logo'
             />
             LinkedIn
           </a>
@@ -380,7 +400,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}
+              height={16}
+              className='mr-2'
+              alt='YouTube logo'
+            />
             Youtube
           </a>
         </div>
@@ -389,9 +415,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'
-              className='w-4 h-4 mr-2'
+              width={16}
+              height={16}
+              className='mr-2'
+              alt='GitHub logo'
             />
             GitHub
           </a>
@@ -422,7 +451,13 @@ const Logo = () => {
   return (
     <div>
       <Link href='/' className=''>
-        <img src={imageSrc} className='h-12 mr-2 ' />
+        <Image
+          src={imageSrc}
+          width={170}
+          height={48}
+          className='mr-2'
+          alt='Dynamic image'
+        />
       </Link>
     </div>
   );

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -9,7 +9,7 @@ import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
 import CarbonAds from './CarbonsAds';
 import { useTheme } from 'next-themes';
 import ExternalLinkIcon from '../public/icons/external-link-black.svg';
-
+import Image from 'next/image';
 const DocLink = ({
   uri,
   label,
@@ -329,7 +329,13 @@ 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'
+              height={20}
+              width={22}
+              className='mr-2'
+            />
             <SegmentHeadline label='Overview' />
           </div>
           <svg
@@ -405,7 +411,13 @@ 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'
+              height={20}
+              width={20}
+              className='mr-2'
+            />
             <SegmentHeadline label='Getting Started' />
           </div>
           <svg
@@ -472,7 +484,13 @@ 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'
+              height={20}
+              width={20}
+              className='mr-2'
+            />
             <SegmentHeadline label='Reference' />
           </div>
           <svg
@@ -660,7 +678,13 @@ 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'
+              height={20}
+              width={20}
+              className='mr-2'
+            />
             <SegmentHeadline label='Specification' />
           </div>
           <svg