Skip to content

Commit 5114356

Browse files
RonakSurana-2001RonakSurana-2001
authored
Add next prev button in Docs-->Overview (#1084)
* Added Next Prev Button in docs/Overview * Changed local host to public hosted URL * Made Changes for Build * Made Changes to the Overview * Added Navigation in Docs/ Getting Started * Added NavButton in learn * Correct NavButtons Build Error
1 parent 7e80c14 commit 5114356

16 files changed

+188
-89
lines changed

‎components/NavigationButtons.tsx

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import Image from 'next/image';
2+
import React from 'react';
3+
import Link from 'next/link';
4+
5+
/*
6+
To use this component:
7+
1) Add prev and next metadata to the markdown page following this format:
8+
9+
---
10+
title: Creating your first schema
11+
section: docs
12+
prev:
13+
label: prev
14+
url: '#1'
15+
next:
16+
label: Miscellaneous examples
17+
url: '#2'
18+
---
19+
20+
2) Add the component to the typescript page:
21+
22+
import NextPrevButton from '~/components/NextPrevButton';
23+
24+
3) Add the component to the body of the page:
25+
26+
<NextPrevButton prevLabel={frontmatter.prev.label} prevURL={frontmatter.prev.url} nextLabel={frontmatter.next.label} nextURL={frontmatter.next.url} />
27+
*/
28+
29+
export default function NextPrevButton({
30+
prevLabel,
31+
prevURL,
32+
nextLabel,
33+
nextURL,
34+
}: any) {
35+
return (
36+
<div className='mb-4 flex flex-row gap-4'>
37+
{prevURL && prevLabel ? (
38+
<div className='h-auto w-1/2'>
39+
<div
40+
className='cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md transition-all duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg dark:shadow-xl dark:hover:shadow-2xl dark:drop-shadow-lg
41+
lg:text-left'
42+
>
43+
<Link href={prevURL}>
44+
<div className='text-primary dark:text-slate-300 flex flex-row gap-5 text-[18px]'>
45+
<Image
46+
src={'/icons/arrow.svg'}
47+
height={10}
48+
width={10}
49+
alt='prev icon'
50+
className='rotate-180 w-5 '
51+
/>
52+
<div className='my-auto inline font-bold uppercase'>
53+
Go Back
54+
</div>
55+
</div>
56+
<div className='my-2 text-base font-medium text-slate-600 dark:text-slate-300'>
57+
{prevLabel}
58+
</div>
59+
</Link>
60+
</div>
61+
</div>
62+
) : (
63+
<div className='h-auto w-1/2'></div>
64+
)}
65+
66+
{nextURL && nextLabel ? (
67+
<div className='h-auto w-1/2'>
68+
<div className='h-full cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md transition-all duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg dark:shadow-xl dark:drop-shadow-lg dark:hover:shadow-2xl lg:text-right'>
69+
<Link href={nextURL}>
70+
<div className='text-primary dark:text-slate-300 flex flex-row-reverse gap-5 text-[18px]'>
71+
<Image
72+
src={'/icons/arrow.svg'}
73+
height={10}
74+
width={10}
75+
alt='next icon '
76+
className='w-5'
77+
/>
78+
<div className='my-auto inline font-bold uppercase '>
79+
Up Next
80+
</div>
81+
</div>
82+
<div className='my-2 text-base font-medium text-slate-600 dark:text-slate-300'>
83+
{nextLabel}
84+
</div>
85+
</Link>
86+
</div>
87+
</div>
88+
) : (
89+
<div className='h-auto w-1/2'></div>
90+
)}
91+
</div>
92+
);
93+
}

‎components/NextPrevButton.tsx

Lines changed: 0 additions & 81 deletions
This file was deleted.

‎components/StyledMarkdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -519,8 +519,8 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
519519
<div className='flex flex-row gap-2 text-slate-600 dark:text-slate-300 text-h5 max-sm:text-[1rem] items-center'>
520520
<Image
521521
src={'/icons/toc-menu.svg'}
522-
height={15}
523-
width={15}
522+
height={'15'}
523+
width={'15'}
524524
alt='menu-icon'
525525
className='max-sm:w-3 max-sm:h-3'
526526
/>

‎pages/learn/[slug].page.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import getStaticMarkdownProps from '~/lib/getStaticMarkdownProps';
77
import { Headline1 } from '~/components/Headlines';
88
import { SectionContext } from '~/context';
99
import { DocsHelp } from '~/components/DocsHelp';
10+
import NextPrevButton from '~/components/NavigationButtons';
1011

1112
export async function getStaticPaths() {
1213
return getStaticMarkdownPaths('pages/learn');
@@ -31,6 +32,12 @@ export default function StaticMarkdownPage({
3132
</Head>
3233
<Headline1>{frontmatter.title}</Headline1>
3334
<StyledMarkdown markdown={content} />
35+
<NextPrevButton
36+
prevLabel={frontmatter?.prev?.label}
37+
prevURL={frontmatter?.prev?.url}
38+
nextLabel={frontmatter?.next?.label}
39+
nextURL={frontmatter?.next?.url}
40+
/>
3441
<DocsHelp markdownFile={markdownFile} />
3542
</SectionContext.Provider>
3643
);

‎pages/learn/file-system.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
---
22
section: docs
33
title: Modeling a file system with JSON Schema
4+
prev:
5+
label: Miscellaneous examples
6+
url: /learn/miscellaneous-examples
7+
next:
8+
label: Other examples
9+
url: /learn/json-schema-examples
410
---
511

612
In this step-by-step guide you will learn how to design a JSON Schema that mirrors the structure of an `/etc/fstab` file.

‎pages/learn/json-schema-examples.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
---
22
section: docs
33
title: JSON Schema examples
4+
prev:
5+
label: Modeling a file system
6+
url: /learn/file-system
7+
next:
8+
label: Miscellaneous examples
9+
url: /learn/miscellaneous-examples
410
---
511

612
In this page, you will find examples illustrating different use cases to help you get the most out of your JSON Schemas. These examples cover a wide range of scenarios, and each example comes with accompanying JSON data and explanation, showcasing how JSON Schemas can be applied to various domains. You can modify these examples to suit your specific needs, as this is just one of the many ways you can utilize JSON Schemas.

‎pages/learn/miscellaneous-examples.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
---
22
section: docs
33
title: Miscellaneous Examples
4+
next:
5+
label: Modelling a file system
6+
url: /learn/file-system
47
---
58

69
In this page, you will find miscellaneous examples illustrating different uses cases to help you get the most out of your JSON Schemas. Each example comes with accompanying JSON data and explanation.

‎pages/overview/[slug].page.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import getStaticMarkdownProps from '~/lib/getStaticMarkdownProps';
77
import { Headline1 } from '~/components/Headlines';
88
import { SectionContext } from '~/context';
99
import { DocsHelp } from '~/components/DocsHelp';
10+
import NextPrevButton from '~/components/NavigationButtons';
1011

1112
export async function getStaticPaths() {
1213
return getStaticMarkdownPaths('pages/overview');
@@ -32,6 +33,12 @@ export default function StaticMarkdownPage({
3233
</Head>
3334
<Headline1>{frontmatter.title}</Headline1>
3435
<StyledMarkdown markdown={content} />
36+
<NextPrevButton
37+
prevLabel={frontmatter.prev?.label}
38+
prevURL={frontmatter.prev?.url}
39+
nextLabel={frontmatter.next.label}
40+
nextURL={frontmatter.next.url}
41+
/>
3542
<DocsHelp markdownFile={markdownFile} />
3643
</SectionContext.Provider>
3744
);

‎pages/overview/case-studies/index.page.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import data from 'data/case-studies.json';
77
import Card from '~/components/Card';
88
import { DocsHelp } from '~/components/DocsHelp';
99
import { useTheme } from 'next-themes';
10+
import NextPrevButton from '~/components/NavigationButtons';
1011

1112
export default function ContentExample() {
1213
const newTitle = 'Case Studies';
@@ -47,6 +48,12 @@ export default function ContentExample() {
4748
/>
4849
))}
4950
</div>
51+
<NextPrevButton
52+
prevLabel='Use Cases'
53+
prevURL='/overview/use-cases'
54+
nextLabel='FAQs'
55+
nextURL='/overview/faq'
56+
/>
5057
<DocsHelp markdownFile={markdownFile} />
5158
</SectionContext.Provider>
5259
);

‎pages/overview/code-of-conduct/index.page.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import matter from 'gray-matter';
66
import StyledMarkdown from '~/components/StyledMarkdown';
77
import { SectionContext } from '~/context';
88
import { DocsHelp } from '~/components/DocsHelp';
9+
import NextPrevButton from '~/components/NavigationButtons';
910

1011
export async function getStaticProps() {
1112
const block = fs.readFileSync(
@@ -20,7 +21,13 @@ export async function getStaticProps() {
2021
};
2122
}
2223

23-
export default function Content({ blocks }: { blocks: any[] }) {
24+
export default function Content({
25+
blocks,
26+
}: {
27+
blocks: any[];
28+
frontmatter: any;
29+
content: any;
30+
}) {
2431
const newTitle = 'Code of Conduct';
2532

2633
return (
@@ -29,6 +36,12 @@ export default function Content({ blocks }: { blocks: any[] }) {
2936
<title>{newTitle}</title>
3037
</Head>
3138
<StyledMarkdown markdown={blocks[0]} />
39+
<NextPrevButton
40+
prevLabel='Similar-Technologies'
41+
prevURL='/overview/similar-technologies'
42+
nextLabel='What is JSON Schema'
43+
nextURL='/overview/what-is-jsonschema'
44+
/>
3245
<DocsHelp />
3346
</SectionContext.Provider>
3447
);

0 commit comments

Comments
 (0)