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

@@ -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:
+
+<NextPrevButton prevLabel={frontmatter.prev.label} prevURL={frontmatter.prev.url} nextLabel={frontmatter.next.label} nextURL={frontmatter.next.url} />
+*/
+
+export default function NextPrevButton({
+  prevLabel,
+  prevURL,
+  nextLabel,
+  nextURL,
+}: any) {
+  return (
+    <div className='mb-4 flex flex-row gap-4'>
+      {prevURL && prevLabel ? (
+        <div className='h-auto w-1/2'>
+          <div
+            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 
+          lg:text-left'
+          >
+            <Link href={prevURL}>
+              <div className='text-primary dark:text-slate-300 flex flex-row gap-5 text-[18px]'>
+                <Image
+                  src={'/icons/arrow.svg'}
+                  height={10}
+                  width={10}
+                  alt='prev icon'
+                  className='rotate-180 w-5 '
+                />
+                <div className='my-auto inline font-bold uppercase'>
+                  Go Back
+                </div>
+              </div>
+              <div className='my-2 text-base font-medium text-slate-600 dark:text-slate-300'>
+                {prevLabel}
+              </div>
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <div className='h-auto w-1/2'></div>
+      )}
+
+      {nextURL && nextLabel ? (
+        <div className='h-auto w-1/2'>
+          <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'>
+            <Link href={nextURL}>
+              <div className='text-primary  dark:text-slate-300 flex flex-row-reverse gap-5 text-[18px]'>
+                <Image
+                  src={'/icons/arrow.svg'}
+                  height={10}
+                  width={10}
+                  alt='next icon '
+                  className='w-5'
+                />
+                <div className='my-auto inline font-bold uppercase '>
+                  Up Next
+                </div>
+              </div>
+              <div className='my-2 text-base font-medium text-slate-600 dark:text-slate-300'>
+                {nextLabel}
+              </div>
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <div className='h-auto w-1/2'></div>
+      )}
+    </div>
+  );
+}

components/StyledMarkdown.tsx

@@ -519,8 +519,8 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                     <div className='flex flex-row gap-2 text-slate-600 dark:text-slate-300 text-h5 max-sm:text-[1rem]  items-center'>
                       <Image
                         src={'/icons/toc-menu.svg'}
-                        height={15}
-                        width={15}
+                        height={'15'}
+                        width={'15'}
                         alt='menu-icon'
                         className='max-sm:w-3 max-sm:h-3'
                       />

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({
       </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/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. 

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.

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.

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({
       </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/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() {
           />
         ))}
       </div>
+      <NextPrevButton
+        prevLabel='Use Cases'
+        prevURL='/overview/use-cases'
+        nextLabel='FAQs'
+        nextURL='/overview/faq'
+      />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );

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[] }) {
         <title>{newTitle}</title>
       </Head>
       <StyledMarkdown markdown={blocks[0]} />
+      <NextPrevButton
+        prevLabel='Similar-Technologies'
+        prevURL='/overview/similar-technologies'
+        nextLabel='What is JSON Schema'
+        nextURL='/overview/what-is-jsonschema'
+      />
       <DocsHelp />
     </SectionContext.Provider>
   );

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.
       </p>
+
       <Faq category='general' />
+      <NextPrevButton
+        prevLabel='Case Studies'
+        prevURL='/overview/case-studies'
+        nextLabel='Similar Technologies'
+        nextURL='/overview/similar-technologies'
+      />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );

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() {
           </div>
         </div>
       </div>
+      <NextPrevButton
+        prevLabel='What is JSON Schema'
+        prevURL='/overview/what-is-jsonschema'
+        nextLabel='Sponsors'
+        nextURL='/overview/sponsors'
+      />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );

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:

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[] }) {
       </Head>
       <Headline1>{newTitle}</Headline1>
       <StyledMarkdown markdown={blocks[0]} />
+      <NextPrevButton
+        prevLabel='Roadmap'
+        prevURL='/overview/roadmap'
+        nextLabel='Use Cases'
+        nextURL='/overview/use-cases'
+      />
       <DocsHelp />
     </SectionContext.Provider>
   );