Skip to content

Improved docs page structure for better SEO and accessibility #1701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 14, 2025
Merged

Improved docs page structure for better SEO and accessibility #1701

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93ea674
Improved documentation page structure for better SEO and accessibility
Utkarsh-123github Jun 14, 2025
10d768a
Fixed linting issues
Utkarsh-123github Jun 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 64 additions & 42 deletions pages/docs/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,75 @@ import { SectionContext } from '~/context';
import Card from '~/components/Card';
import { DocsHelp } from '~/components/DocsHelp';

const cardsData = [
{
icon: '/icons/eye.svg',
title: 'Introduction',
body: 'Discover JSON Schema: its purpose and role in data validation.',
headerSize: 'medium',
bodyTextSize: 'small',
link: '/overview/what-is-jsonschema',
},
{
icon: '/icons/compass.svg',
title: 'Get started',
body: 'New to JSON Schema? Learn the basics of schema design.',
headerSize: 'medium',
bodyTextSize: 'small',
link: '/learn',
},
{
icon: '/icons/grad-cap.svg',
title: 'Guides',
body: 'Master advanced skills such as validation with our hands-on guides.',
headerSize: 'medium',
bodyTextSize: 'small',
link: '/learn/guides',
},
{
icon: '/icons/book.svg',
title: 'Reference',
body: 'Dive deeper into JSON Schema keywords with our clear explanations and usage examples.',
headerSize: 'medium',
bodyTextSize: 'small',
link: '/understanding-json-schema',
},
{
icon: '/icons/clipboard.svg',
title: 'Specification',
body: 'Understand the evolution of JSON Schema through its different versions',
headerSize: 'medium',
bodyTextSize: 'small',
link: '/specification',
},
];

export default function Welcome() {
const newTitle = 'Welcome';
const fileRenderType = 'tsx';
const renderCards = () => (
<div className='grid grid-cols-1 md:grid-cols-2 gap-6 mt-8'>
{cardsData.map((card) => (
<Card
key={card.title}
icon={card.icon}
title={card.title}
body={card.body}
headerSize='medium'
bodyTextSize='small'
link={card.link}
/>
))}
</div>
);
return (
<SectionContext.Provider value='docs'>
<Head>
<title>{newTitle}</title>
<meta
name='description'
content='JSON Schema - a declarative language for validating JSON documents'
/>
</Head>
<Headline1>{newTitle}</Headline1>
<p>
Expand All @@ -23,50 +85,10 @@ export default function Welcome() {
Our documentation will guide you through the basics and beyond of
defining and validating JSON data.
<br />
<br />
<span className='font-bold text-[1.3rem]'>Explore the docs</span>
</p>
<div className='w-full lg:w-full grid grid-cols-1 sm:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
<Card
icon='/icons/eye.svg'
title='Introduction'
body='Discover JSON Schema: its purpose and role in data validation.'
headerSize='medium'
bodyTextSize='small'
link='/overview/what-is-jsonschema'
/>
<Card
icon='/icons/compass.svg'
title='Get started'
body='New to JSON Schema? Learn the basics of schema design.'
headerSize='medium'
bodyTextSize='small'
link='/learn'
/>
<Card
icon='/icons/grad-cap.svg'
title='Guides'
body='Master advanced skills such as validation with our hands-on guides.'
headerSize='medium'
bodyTextSize='small'
link='/learn/guides'
/>
<Card
icon='/icons/book.svg'
title='Reference'
body='Dive deeper into JSON Schema keywords with our clear explanations and usage examples.'
headerSize='medium'
bodyTextSize='small'
link='/understanding-json-schema'
/>
<Card
icon='/icons/clipboard.svg'
title='Specification'
body='Understand the evolution of JSON Schema through its different versions'
headerSize='medium'
bodyTextSize='small'
link='/specification'
/>
</div>
{renderCards()}
<DocsHelp fileRenderType={fileRenderType} />
</SectionContext.Provider>
);
Expand Down