From 5114356e866007739acb58d2f4140ba30ee26b05 Mon Sep 17 00:00:00 2001 From: Ronak Surana <100184606+RonakSurana-2001@users.noreply.github.com> Date: Fri, 27 Dec 2024 15:29:05 +0530 Subject: [PATCH] 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 --- components/NavigationButtons.tsx | 93 +++++++++++++++++++ components/NextPrevButton.tsx | 81 ---------------- components/StyledMarkdown.tsx | 4 +- pages/learn/[slug].page.tsx | 7 ++ pages/learn/file-system.md | 6 ++ pages/learn/json-schema-examples.md | 6 ++ pages/learn/miscellaneous-examples.md | 3 + pages/overview/[slug].page.tsx | 7 ++ pages/overview/case-studies/index.page.tsx | 7 ++ pages/overview/code-of-conduct/index.page.tsx | 15 ++- pages/overview/faq/index.page.tsx | 8 ++ pages/overview/roadmap/index.page.tsx | 7 ++ pages/overview/similar-technologies.md | 6 ++ pages/overview/sponsors/index.page.tsx | 7 ++ pages/overview/use-cases/index.page.tsx | 17 +++- pages/overview/what-is-jsonschema.md | 3 + 16 files changed, 188 insertions(+), 89 deletions(-) create mode 100644 components/NavigationButtons.tsx delete mode 100644 components/NextPrevButton.tsx diff --git a/components/NavigationButtons.tsx b/components/NavigationButtons.tsx new file mode 100644 index 000000000..8e8747577 --- /dev/null +++ b/components/NavigationButtons.tsx @@ -0,0 +1,93 @@ +import Image from 'next/image'; +import React from 'react'; +import Link from 'next/link'; + +/* +To use this component: +1) Add prev and next metadata to the markdown page following this format: + +--- +title: Creating your first schema +section: docs +prev: + label: prev + url: '#1' +next: + label: Miscellaneous examples + url: '#2' +--- + +2) Add the component to the typescript page: + +import NextPrevButton from '~/components/NextPrevButton'; + +3) Add the component to the body of the page: + + +*/ + +export default function NextPrevButton({ + prevLabel, + prevURL, + nextLabel, + nextURL, +}: any) { + return ( +
+ {prevURL && prevLabel ? ( +
+
+ +
+ prev icon +
+ Go Back +
+
+
+ {prevLabel} +
+ +
+
+ ) : ( +
+ )} + + {nextURL && nextLabel ? ( +
+
+ +
+ next icon +
+ Up Next +
+
+
+ {nextLabel} +
+ +
+
+ ) : ( +
+ )} +
+ ); +} diff --git a/components/NextPrevButton.tsx b/components/NextPrevButton.tsx deleted file mode 100644 index 6c88b641c..000000000 --- a/components/NextPrevButton.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import Image from 'next/image'; -import React from 'react'; -import Link from 'next/link'; - -/* -To use this component: -1) Add prev and next metadata to the markdown page following this format: - ---- -title: Creating your first schema -section: docs -prev: - label: prev - url: '#1' -next: - label: Miscellaneous examples - url: '#2' ---- - -2) Add the component to the typescript page: - -import NextPrevButton from '~/components/NextPrevButton'; - -3) Add the component to the body of the page: - - -*/ - -export default function NextPrevButton({ - prevLabel, - prevURL, - nextLabel, - nextURL, -}: any) { - return ( -
-
-
- -
- prev icon -
Go Back
-
-
- {prevLabel} -
- -
-
- -
-
- -
- next icon -
Up Next
-
-
- {nextLabel} -
- -
-
-
- ); -} diff --git a/components/StyledMarkdown.tsx b/components/StyledMarkdown.tsx index e856d5010..53f771545 100644 --- a/components/StyledMarkdown.tsx +++ b/components/StyledMarkdown.tsx @@ -519,8 +519,8 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
menu-icon diff --git a/pages/learn/[slug].page.tsx b/pages/learn/[slug].page.tsx index f110ff75d..7065699f3 100644 --- a/pages/learn/[slug].page.tsx +++ b/pages/learn/[slug].page.tsx @@ -7,6 +7,7 @@ import getStaticMarkdownProps from '~/lib/getStaticMarkdownProps'; import { Headline1 } from '~/components/Headlines'; import { SectionContext } from '~/context'; import { DocsHelp } from '~/components/DocsHelp'; +import NextPrevButton from '~/components/NavigationButtons'; export async function getStaticPaths() { return getStaticMarkdownPaths('pages/learn'); @@ -31,6 +32,12 @@ export default function StaticMarkdownPage({ {frontmatter.title} + ); diff --git a/pages/learn/file-system.md b/pages/learn/file-system.md index a408b70b1..f6ae14331 100644 --- a/pages/learn/file-system.md +++ b/pages/learn/file-system.md @@ -1,6 +1,12 @@ --- section: docs title: Modeling a file system with JSON Schema +prev: + label: Miscellaneous examples + url: /learn/miscellaneous-examples +next: + label: Other examples + url: /learn/json-schema-examples --- In this step-by-step guide you will learn how to design a JSON Schema that mirrors the structure of an `/etc/fstab` file. diff --git a/pages/learn/json-schema-examples.md b/pages/learn/json-schema-examples.md index d86b9656b..c91259267 100644 --- a/pages/learn/json-schema-examples.md +++ b/pages/learn/json-schema-examples.md @@ -1,6 +1,12 @@ --- section: docs title: JSON Schema examples +prev: + label: Modeling a file system + url: /learn/file-system +next: + label: Miscellaneous examples + url: /learn/miscellaneous-examples --- 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. diff --git a/pages/learn/miscellaneous-examples.md b/pages/learn/miscellaneous-examples.md index ba63f03b1..d943e77b7 100644 --- a/pages/learn/miscellaneous-examples.md +++ b/pages/learn/miscellaneous-examples.md @@ -1,6 +1,9 @@ --- section: docs title: Miscellaneous Examples +next: + label: Modelling a file system + url: /learn/file-system --- 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. diff --git a/pages/overview/[slug].page.tsx b/pages/overview/[slug].page.tsx index e4d5476d7..72db35309 100644 --- a/pages/overview/[slug].page.tsx +++ b/pages/overview/[slug].page.tsx @@ -7,6 +7,7 @@ import getStaticMarkdownProps from '~/lib/getStaticMarkdownProps'; import { Headline1 } from '~/components/Headlines'; import { SectionContext } from '~/context'; import { DocsHelp } from '~/components/DocsHelp'; +import NextPrevButton from '~/components/NavigationButtons'; export async function getStaticPaths() { return getStaticMarkdownPaths('pages/overview'); @@ -32,6 +33,12 @@ export default function StaticMarkdownPage({ {frontmatter.title} + ); diff --git a/pages/overview/case-studies/index.page.tsx b/pages/overview/case-studies/index.page.tsx index 81c761ca6..b79b1352d 100644 --- a/pages/overview/case-studies/index.page.tsx +++ b/pages/overview/case-studies/index.page.tsx @@ -7,6 +7,7 @@ import data from 'data/case-studies.json'; import Card from '~/components/Card'; import { DocsHelp } from '~/components/DocsHelp'; import { useTheme } from 'next-themes'; +import NextPrevButton from '~/components/NavigationButtons'; export default function ContentExample() { const newTitle = 'Case Studies'; @@ -47,6 +48,12 @@ export default function ContentExample() { /> ))}
+ ); diff --git a/pages/overview/code-of-conduct/index.page.tsx b/pages/overview/code-of-conduct/index.page.tsx index c4d74033e..f4ebff025 100644 --- a/pages/overview/code-of-conduct/index.page.tsx +++ b/pages/overview/code-of-conduct/index.page.tsx @@ -6,6 +6,7 @@ import matter from 'gray-matter'; import StyledMarkdown from '~/components/StyledMarkdown'; import { SectionContext } from '~/context'; import { DocsHelp } from '~/components/DocsHelp'; +import NextPrevButton from '~/components/NavigationButtons'; export async function getStaticProps() { const block = fs.readFileSync( @@ -20,7 +21,13 @@ export async function getStaticProps() { }; } -export default function Content({ blocks }: { blocks: any[] }) { +export default function Content({ + blocks, +}: { + blocks: any[]; + frontmatter: any; + content: any; +}) { const newTitle = 'Code of Conduct'; return ( @@ -29,6 +36,12 @@ export default function Content({ blocks }: { blocks: any[] }) { {newTitle} + ); diff --git a/pages/overview/faq/index.page.tsx b/pages/overview/faq/index.page.tsx index 283edf29e..b47a3f570 100644 --- a/pages/overview/faq/index.page.tsx +++ b/pages/overview/faq/index.page.tsx @@ -5,6 +5,7 @@ import { SectionContext } from '~/context'; import Faq from '~/components/Faq'; import { Headline1 } from '~/components/Headlines'; import { DocsHelp } from '~/components/DocsHelp'; +import NextPrevButton from '~/components/NavigationButtons'; export default function Content() { const newTitle = 'FAQ'; @@ -20,7 +21,14 @@ export default function Content() { Below you'll find answers to questions we get asked the most about JSON Schema.

+ + ); diff --git a/pages/overview/roadmap/index.page.tsx b/pages/overview/roadmap/index.page.tsx index 8f3c0d92a..ed360f9af 100644 --- a/pages/overview/roadmap/index.page.tsx +++ b/pages/overview/roadmap/index.page.tsx @@ -5,6 +5,7 @@ import Head from 'next/head'; import { Headline1 } from '~/components/Headlines'; import { SectionContext } from '~/context'; import roadmap from '~/data/roadmap.json'; +import NextPrevButton from '~/components/NavigationButtons'; const statusColors = { 'In Progress': 'bg-green-600 text-white dark:bg-green-500', @@ -130,6 +131,12 @@ export default function Roadmap() { + ); diff --git a/pages/overview/similar-technologies.md b/pages/overview/similar-technologies.md index c4693704f..7867a54e5 100644 --- a/pages/overview/similar-technologies.md +++ b/pages/overview/similar-technologies.md @@ -1,6 +1,12 @@ --- section: docs title: Similar Technologies +prev: + label: FAQs + url: '/overview/faq' +next: + label: Code of Conduct + url: '/overview/code-of-conduct' --- While we think that JSON Schema has a unique value proposition, we'd like to provide visibility to other technologies that share similar goals: diff --git a/pages/overview/sponsors/index.page.tsx b/pages/overview/sponsors/index.page.tsx index a26f1dfe7..a3ab3dba9 100644 --- a/pages/overview/sponsors/index.page.tsx +++ b/pages/overview/sponsors/index.page.tsx @@ -7,6 +7,7 @@ import matter from 'gray-matter'; import StyledMarkdown from '~/components/StyledMarkdown'; import { SectionContext } from '~/context'; import { DocsHelp } from '~/components/DocsHelp'; +import NextPrevButton from '~/components/NavigationButtons'; export async function getStaticProps() { const block1 = fs.readFileSync('pages/overview/sponsors/_index.md', 'utf-8'); @@ -28,6 +29,12 @@ export default function ContentExample({ blocks }: { blocks: any[] }) { {newTitle} + ); diff --git a/pages/overview/use-cases/index.page.tsx b/pages/overview/use-cases/index.page.tsx index 6e2811a51..1c77df4cc 100644 --- a/pages/overview/use-cases/index.page.tsx +++ b/pages/overview/use-cases/index.page.tsx @@ -6,6 +6,7 @@ import { Headline1 } from '~/components/Headlines'; import Card from '~/components/Card'; import data from '~/data/use-cases.json'; import { DocsHelp } from '~/components/DocsHelp'; +import NextPrevButton from '~/components/NavigationButtons'; export default function Content() { const newTitle = 'Use Cases'; @@ -19,8 +20,8 @@ export default function Content() { {newTitle}

Discover everything you can do with JSON Schema. This section presents - the most common use cases for JSON Schema, but but there may be many - more applications waiting to be discovered. + the most common use cases for JSON Schema, but there may be many more + applications waiting to be discovered.

{data.map((element, index) => ( @@ -29,12 +30,18 @@ export default function Content() { title={element.title} body={element.summary} icon='/icons/bulb2.svg' - headerSize={'medium'} - extended={true} - bodyTextSize={'small'} + headerSize='medium' + extended + bodyTextSize='small' /> ))}
+ ); diff --git a/pages/overview/what-is-jsonschema.md b/pages/overview/what-is-jsonschema.md index 4c1ccc826..b5c48c16e 100644 --- a/pages/overview/what-is-jsonschema.md +++ b/pages/overview/what-is-jsonschema.md @@ -1,6 +1,9 @@ --- section: docs title: What is JSON Schema? +next: + label: Roadmap + url: '/overview/roadmap' --- > JSON Schema is a declarative language for defining structure and constraints for JSON data.