Added navigation buttons in other sections of website (#1218)

Author: Utkarsh-123github

pages/[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');
@@ -31,6 +32,12 @@ export default function StaticMarkdownPage({
       </Head>
       <Headline1>{frontmatter.title}</Headline1>
       <StyledMarkdown markdown={content} />
+      <NextPrevButton
+        prevLabel={frontmatter?.prev?.label}
+        prevURL={frontmatter?.prev?.url}
+        nextLabel={frontmatter?.next?.label}
+        nextURL={frontmatter?.next?.url}
+      />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );

pages/implementers/[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/implementers');
@@ -31,6 +32,12 @@ export default function StaticMarkdownPage({
       </Head>
       <Headline1>{frontmatter.title}</Headline1>
       <StyledMarkdown markdown={content} />
+      <NextPrevButton
+        prevLabel={frontmatter?.prev?.label}
+        prevURL={frontmatter?.prev?.url}
+        nextLabel={frontmatter?.next?.label}
+        nextURL={frontmatter?.next?.url}
+      />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );

pages/implementers/_index.md

@@ -1,6 +1,12 @@
 ---
 title: "For Implementers"
 section: docs
+prev: 
+  label: Structuring a complex schema
+  url: /understanding-json-schema/structuring
+next: 
+  label: Common Interfaces across Implementations
+  url: /implementers/interfaces
 ---
 
 For Implementers

pages/implementers/index.page.tsx

@@ -6,6 +6,7 @@ import StyledMarkdown from '~/components/StyledMarkdown';
 import { DocsHelp } from '~/components/DocsHelp';
 import { SectionContext } from '~/context';
 import Card from '~/components/Card';
+import NextPrevButton from '~/components/NavigationButtons';
 
 export async function getStaticProps() {
   const block1 = fs.readFileSync('pages/implementers/_index.md', 'utf-8');
@@ -17,13 +18,19 @@ export async function getStaticProps() {
   };
 }
 
-export default function ContentExample({ blocks }: { blocks: any[] }) {
+export default function ContentExample({
+  blocks,
+}: {
+  blocks: any[];
+  frontmatter: any;
+  content: any;
+}) {
   const markdownFile = '_indexPage';
 
   return (
     <SectionContext.Provider value='docs'>
       <StyledMarkdown markdown={blocks[0]} />
-      <section className='mt-10'>
+      <section className='my-10'>
         <div className='grid grid-cols-1 md:grid-cols-2 gap-4 w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12 m-auto'>
           <Card
             key='common-interfaces'
@@ -45,6 +52,12 @@ export default function ContentExample({ blocks }: { blocks: any[] }) {
           />
         </div>
       </section>
+      <NextPrevButton
+        prevLabel='Structuring a complex schema'
+        prevURL='/understanding-json-schema/structuring'
+        nextLabel='Common Interfaces across Implementations'
+        nextURL='/implementers/interfaces'
+      />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );

pages/implementers/interfaces.md

@@ -1,6 +1,12 @@
 ---
 title: Common Interfaces across JSON Schema Implementations
 section: implementers
+prev: 
+  label: For Implementers
+  url: /implementers
+next: 
+  label: Specification
+  url: /specification
 ---
 
 JSON Schema is extremely widely used and nearly equally widely implemented.

pages/learn/getting-started-step-by-step/getting-started-step-by-step.md

@@ -1,6 +1,12 @@
 ---
 title: Creating your first schema
 section: docs
+prev: 
+  label: Overview
+  url: /learn
+next: 
+  label: Miscellaneous examples
+  url: /learn/miscellaneous-examples
 ---
 
 JSON Schema is a vocabulary that you can use to annotate and validate JSON documents. This tutorial guides you through the process of creating a JSON Schema.

pages/learn/getting-started-step-by-step/index.page.tsx

@@ -9,6 +9,7 @@ import StyledMarkdown from '~/components/StyledMarkdown';
 import { SectionContext } from '~/context';
 import { DocsHelp } from '~/components/DocsHelp';
 import GettingStarted from '~/components/GettingStarted';
+import NextPrevButton from '~/components/NavigationButtons';
 
 export async function getStaticProps() {
   const block1 = fs.readFileSync(
@@ -28,7 +29,13 @@ export async function getStaticProps() {
   };
 }
 
-export default function StyledValidator({ blocks }: { blocks: any[] }) {
+export default function StyledValidator({
+  blocks,
+}: {
+  blocks: any[];
+  frontmatter: any;
+  content: any;
+}) {
   const newTitle = 'Creating your first schema';
 
   return (
@@ -40,6 +47,12 @@ export default function StyledValidator({ blocks }: { blocks: any[] }) {
       <StyledMarkdown markdown={blocks[0]} />
       <GettingStarted />
       <StyledMarkdown markdown={blocks[1]} />
+      <NextPrevButton
+        prevLabel='Overview'
+        prevURL='/learn'
+        nextLabel='Miscellaneous examples'
+        nextURL='/learn/miscellaneous-examples'
+      />
       <DocsHelp />
     </SectionContext.Provider>
   );

pages/learn/glossary.md

@@ -1,6 +1,12 @@
 ---
 title: JSON Schema Glossary
 section: docs
+prev: 
+  label: Other Examples
+  url: /learn/json-schema-examples
+next: 
+  label: JSON Schema Keywords
+  url: /understanding-json-schema/keywords
 ---
 
 This document collects short explanations of terminology one may encounter within the JSON Schema community.

pages/learn/index.page.tsx

@@ -5,6 +5,7 @@ import { Headline1 } from '~/components/Headlines';
 import { SectionContext } from '~/context';
 import Card from '~/components/Card';
 import { DocsHelp } from '~/components/DocsHelp';
+import NextPrevButton from '~/components/NavigationButtons';
 
 export default function Welcome() {
   const markdownFile = '_indexPage';
@@ -39,6 +40,12 @@ export default function Welcome() {
           link='https://tour.json-schema.org/'
         />
       </div>
+      <NextPrevButton
+        prevLabel='Code of Conduct'
+        prevURL='/overview/code-of-conduct'
+        nextLabel='Creating your first Schema'
+        nextURL='/learn/getting-started-step-by-step'
+      />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );

pages/learn/json-schema-examples.md

@@ -5,8 +5,8 @@ prev:
   label: Modeling a file system
   url: /learn/file-system
 next: 
-  label: Miscellaneous examples
-  url: /learn/miscellaneous-examples
+  label: JSON Scehma Glossary
+  url: /learn/glossary
 ---
 
 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.