Skip to content

Commit ee7f95a

Browse files
29deepanshutyagi29deepanshutyagi
authored
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
1 parent d1040c5 commit ee7f95a

File tree

13 files changed

+434
-98
lines changed

13 files changed

+434
-98
lines changed

‎components/Card.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import Link from 'next/link';
33
import TextTruncate from 'react-text-truncate';
4+
import Image from 'next/image';
45
export interface CardProps {
56
title: string;
67
body: string;
@@ -36,8 +37,11 @@ const CardBody = ({
3637
<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'>
3738
<div className='flex justify-center '>
3839
{image && (
39-
<img
40+
<Image
4041
src={image}
42+
alt={title}
43+
width={384}
44+
height={128}
4145
className='h-32 p-2 object-contain'
4246
data-test='card-image'
4347
/>
@@ -46,9 +50,11 @@ const CardBody = ({
4650
<div className='flex flex-row items-start mb-6'>
4751
{icon && (
4852
<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'>
49-
<img
53+
<Image
5054
src={icon}
5155
alt={title}
56+
width={56}
57+
height={56}
5258
className='h-full w-full'
5359
data-test='card-icon'
5460
/>

‎components/DarkModeToggle.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useTheme } from 'next-themes';
22
import { useEffect, useState } from 'react';
33
import React from 'react';
4+
import Image from 'next/image';
45

56
function ListItem({
67
children,
@@ -52,7 +53,7 @@ export default function DarkModeToggle() {
5253
className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '
5354
data-test='dark-mode-toggle'
5455
>
55-
<img
56+
<Image
5657
src={activeThemeIcon}
5758
alt='Dark Mode'
5859
width={25}
@@ -77,7 +78,7 @@ export default function DarkModeToggle() {
7778
onClick={() => setTheme('system')}
7879
data-test='select-system-theme'
7980
>
80-
<img
81+
<Image
8182
src={'/icons/theme-switch.svg'}
8283
alt='System theme'
8384
width={18}
@@ -90,7 +91,7 @@ export default function DarkModeToggle() {
9091
onClick={() => setTheme('light')}
9192
data-test='select-light-theme'
9293
>
93-
<img
94+
<Image
9495
src={'/icons/sun.svg'}
9596
alt='System theme'
9697
width={18}
@@ -103,7 +104,7 @@ export default function DarkModeToggle() {
103104
onClick={() => setTheme('dark')}
104105
data-test='select-dark-theme'
105106
>
106-
<img
107+
<Image
107108
src={'/icons/moon.svg'}
108109
alt='System theme'
109110
width={18}

‎components/GettingStarted.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
33
import Highlight from 'react-syntax-highlighter';
44
import JSZip from 'jszip';
55
import { saveAs } from 'file-saver';
6+
import Image from 'next/image';
67

78
async function fetchData() {
89
const response = await fetch('/data/getting-started-examples.json');
@@ -237,9 +238,19 @@ const GettingStarted = () => {
237238
<p>{details[0]}</p>
238239

239240
{details[1] ? (
240-
<img src='/icons/green-tick.svg' alt='green tick' />
241+
<Image
242+
src='/icons/green-tick.svg'
243+
alt='green tick'
244+
width={24}
245+
height={24}
246+
/>
241247
) : (
242-
<img src='/icons/red-cross.svg' alt='red cross' />
248+
<Image
249+
src='/icons/red-cross.svg'
250+
alt='red cross'
251+
width={24}
252+
height={24}
253+
/>
243254
)}
244255
</div>
245256
</div>

‎components/JsonEditor.tsx‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import getPartsOfJson, { SyntaxPart } from '~/lib/getPartsOfJson';
66
import jsonSchemaReferences from './jsonSchemaLinks';
77
import { useRouter } from 'next/router';
88
import { FullMarkdownContext } from '~/context';
9+
import Image from 'next/image';
910
import getScopesOfParsedJsonSchema, {
1011
JsonSchemaPathWithScope,
1112
JsonSchemaScope,
@@ -294,24 +295,37 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
294295
}}
295296
data-test='copy-clipboard-button'
296297
>
297-
<img
298+
<Image
298299
src='/icons/copy.svg'
300+
alt='Copy icon'
299301
title='Copy to clipboard'
302+
width={20}
303+
height={20}
300304
className={`opacity-50 hover:opacity-90 duration-150 ${copied ? 'hidden' : ''}`}
301-
></img>
302-
<img
305+
/>
306+
<Image
303307
src='/icons/copied.svg'
308+
alt='Copied icon'
309+
width={20}
310+
height={20}
304311
title='Copied!'
305312
className={copied ? '' : 'hidden'}
306-
></img>
313+
/>
307314
</div>
308315
<div
309316
className='flex flex-row items-center text-white h-6 font-sans bg-white/20 text-xs px-3 rounded-bl-lg font-semibold'
310317
data-test='check-json-schema'
311318
>
312319
{isJsonSchema ? (
313320
<>
314-
<img src='/logo-white.svg' className='h-4 mr-1.5' /> schema
321+
<Image
322+
src='/logo-white.svg'
323+
alt=' logo-white'
324+
width={16}
325+
height={16}
326+
className=' mr-1.5'
327+
/>{' '}
328+
schema
315329
</>
316330
) : (
317331
<>data</>
@@ -451,7 +465,13 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
451465
className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-red-500/30 text-sm'
452466
data-test='not-compliant-to-schema'
453467
>
454-
<img src='/icons/x-mark.svg' className='h-4 w-4 mr-2' />
468+
<Image
469+
src='/icons/x-mark.svg'
470+
alt='Error icon'
471+
width={16}
472+
height={16}
473+
className=' mr-2'
474+
/>
455475
not compliant to schema
456476
</div>
457477
)}
@@ -460,7 +480,13 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
460480
className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-slate-500/30 text-sm'
461481
data-test='compliant-to-schema'
462482
>
463-
<img src='/icons/checkmark.svg' className='h-5 w-5 mr-2' />
483+
<Image
484+
src='/icons/checkmark.svg'
485+
alt='Checkmark icon'
486+
width={20}
487+
height={20}
488+
className='mr-2'
489+
/>
464490
compliant to schema
465491
</div>
466492
)}

‎components/Layout.tsx‎

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useTheme } from 'next-themes';
1010
import DarkModeToggle from './DarkModeToggle';
1111
import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
1212
import ScrollButton from './ScrollButton';
13+
import Image from 'next/image';
1314

1415
type Props = {
1516
children: React.ReactNode;
@@ -327,7 +328,13 @@ const Footer = () => (
327328
>
328329
<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 '>
329330
<div className=' my-6 m-auto md:mt-16'>
330-
<img src='/img/logos/logo-white.svg' className='w-[150px] mb-6' />
331+
<Image
332+
src='/img/logos/logo-white.svg'
333+
width={150}
334+
height={100}
335+
alt='logo-white'
336+
className='mb-6'
337+
/>
331338
<div className='flex flex-col text-center sm:text-left'>
332339
<a
333340
href='https://opencollective.com/json-schema'
@@ -348,9 +355,12 @@ const Footer = () => (
348355
href='https://json-schema.org/slack'
349356
className='flex items-center text-white'
350357
>
351-
<img
358+
<Image
352359
src='/img/logos/slack_logo_small-white.svg'
353-
className='w-4 h-4 mr-2'
360+
width={16}
361+
height={16}
362+
className=' mr-2'
363+
alt='Slack logo'
354364
/>
355365
Slack
356366
</a>
@@ -360,17 +370,27 @@ const Footer = () => (
360370
href='https://x.com/jsonschema'
361371
className='flex items-center text-white'
362372
>
363-
<img src='/img/logos/x-twitter.svg' className='w-4 h-4 mr-2' />X
373+
<Image
374+
src='/img/logos/x-twitter.svg'
375+
width={16}
376+
height={16}
377+
className=' mr-2'
378+
alt='X logo'
379+
/>{' '}
380+
X
364381
</a>
365382
</div>
366383
<div className=''>
367384
<a
368385
href='https://linkedin.com/company/jsonschema/'
369386
className='flex items-center text-white'
370387
>
371-
<img
388+
<Image
372389
src='/img/logos/icons8-linkedin-2.svg'
373-
className='w-4 h-4 mr-2'
390+
width={16}
391+
height={16}
392+
className=' mr-2'
393+
alt='LinkedIn logo'
374394
/>
375395
LinkedIn
376396
</a>
@@ -380,7 +400,13 @@ const Footer = () => (
380400
href='https://www.youtube.com/@JSONSchemaOrgOfficial'
381401
className='flex items-center text-white'
382402
>
383-
<img src='/img/logos/icons8-youtube.svg' className='w-4 h-4 mr-2' />
403+
<Image
404+
src='/img/logos/icons8-youtube.svg'
405+
width={16}
406+
height={16}
407+
className='mr-2'
408+
alt='YouTube logo'
409+
/>
384410
Youtube
385411
</a>
386412
</div>
@@ -389,9 +415,12 @@ const Footer = () => (
389415
href='https://github.com/json-schema-org'
390416
className='flex items-center text-white'
391417
>
392-
<img
418+
<Image
393419
src='/img/logos/github_logo-white.svg'
394-
className='w-4 h-4 mr-2'
420+
width={16}
421+
height={16}
422+
className='mr-2'
423+
alt='GitHub logo'
395424
/>
396425
GitHub
397426
</a>
@@ -422,7 +451,13 @@ const Logo = () => {
422451
return (
423452
<div>
424453
<Link href='/' className=''>
425-
<img src={imageSrc} className='h-12 mr-2 ' />
454+
<Image
455+
src={imageSrc}
456+
width={170}
457+
height={48}
458+
className='mr-2'
459+
alt='Dynamic image'
460+
/>
426461
</Link>
427462
</div>
428463
);

‎components/Sidebar.tsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
99
import CarbonAds from './CarbonsAds';
1010
import { useTheme } from 'next-themes';
1111
import ExternalLinkIcon from '../public/icons/external-link-black.svg';
12-
12+
import Image from 'next/image';
1313
const DocLink = ({
1414
uri,
1515
label,
@@ -329,7 +329,13 @@ export const DocsNav = ({
329329
onClick={handleClickDoc}
330330
>
331331
<div className='flex items-center align-middle'>
332-
<img src={`${overview_icon}`} alt='eye icon' className='mr-2' />
332+
<Image
333+
src={`${overview_icon}`}
334+
alt='eye icon'
335+
height={20}
336+
width={22}
337+
className='mr-2'
338+
/>
333339
<SegmentHeadline label='Overview' />
334340
</div>
335341
<svg
@@ -405,7 +411,13 @@ export const DocsNav = ({
405411
onClick={handleClickGet}
406412
>
407413
<div className='flex items-center align-middle'>
408-
<img src={`${learn_icon}`} alt='compass icon' className='mr-2' />
414+
<Image
415+
src={`${learn_icon}`}
416+
alt='compass icon'
417+
height={20}
418+
width={20}
419+
className='mr-2'
420+
/>
409421
<SegmentHeadline label='Getting Started' />
410422
</div>
411423
<svg
@@ -472,7 +484,13 @@ export const DocsNav = ({
472484
onClick={handleClickReference}
473485
>
474486
<div className='flex items-center align-middle'>
475-
<img src={`${reference_icon}`} alt='book icon' className='mr-2' />
487+
<Image
488+
src={`${reference_icon}`}
489+
alt='book icon'
490+
height={20}
491+
width={20}
492+
className='mr-2'
493+
/>
476494
<SegmentHeadline label='Reference' />
477495
</div>
478496
<svg
@@ -660,7 +678,13 @@ export const DocsNav = ({
660678
onClick={handleClickSpec}
661679
>
662680
<div className='flex items-center align-middle'>
663-
<img src={`${spec_icon}`} alt='clipboard icon' className='mr-2' />
681+
<Image
682+
src={`${spec_icon}`}
683+
alt='clipboard icon'
684+
height={20}
685+
width={20}
686+
className='mr-2'
687+
/>
664688
<SegmentHeadline label='Specification' />
665689
</div>
666690
<svg

0 commit comments

Comments
 (0)