Merge branch 'main' into add-tooling-java-json-validator

json-schema-org · Dec 31, 2024 · 2a9fd47 · 2a9fd47
2 parents 7bd5bfb + 5114356
commit 2a9fd47
Show file tree

Hide file tree

Showing 22 changed files with 237 additions and 124 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -64,7 +64,7 @@ jobs:
         run: yarn run test:coverage:all
 
       - name: Upload coverage report to Codecov
-        uses: codecov/[email protected].1
+        uses: codecov/[email protected].2
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           name: ${{ env.CODECOV_UNIQUE_NAME }}

diff --git a/components/DocTable.tsx b/components/DocTable.tsx
@@ -4,50 +4,53 @@ import Link from 'next/link';
 const DocTable = ({ frontmatter }: any) => {
   return (
     <>
-      <div className='max-w-full mx-auto overflow-auto'>
-        <table className='table-auto border-collapse w-full bg-slate-200 dark:bg-slate-900 text-slate-700 dark:text-slate-300'>
+      <div className='max-w-full mx-auto overflow-auto rounded-lg shadow-lg border-2 border-primary'>
+        <div className='h-14 bg-primary text-white flex items-center p-6 font-semibold text-xl'>
+          <h5>Specification Details</h5>
+        </div>
+        <table className='table-auto w-full bg-slate-200 dark:bg-slate-900 text-slate-700 dark:text-slate-300'>
           <tbody>
-            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300'>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
-                Specification
+            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 border-b border-slate-300'>
+              <td className='p-4 text-start font-medium'>
+                <span className='font-semibold'>Specification</span>
               </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2'>
+              <td className='p-4'>
                 <Link
                   href={frontmatter.Specification}
-                  className='text-linkBlue'
+                  className='text-linkBlue hover:underline'
                   target='_blank'
                 >
-                  {' '}
                   {frontmatter.Specification}
                 </Link>
               </td>
             </tr>
-            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300'>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
-                Published
-              </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2'>
-                {frontmatter.Published}
+            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 border-b border-slate-300'>
+              <td className='p-4 text-start font-medium'>
+                <span className='font-semibold'>Published</span>
               </td>
+              <td className='p-4'>{frontmatter.Published}</td>
             </tr>
-            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 '>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
-                Authors
+            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 border-b border-slate-300'>
+              <td className='p-4 text-start font-medium'>
+                <span className='font-semibold'>Authors</span>
               </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2'>
-                {frontmatter.authors.map((author: string, index: number) => {
-                  return <div key={index}>{author}</div>;
-                })}
+              <td className='p-4'>
+                {frontmatter.authors.map((author: string, index: number) => (
+                  <span key={index}>
+                    {author}
+                    {index < frontmatter.authors.length - 1 ? ', ' : ''}
+                  </span>
+                ))}
               </td>
             </tr>
             <tr className='dark:hover:bg-slate-950 hover:bg-slate-300'>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
-                Metaschema
+              <td className='p-4 text-start font-medium'>
+                <span className='font-semibold'>Metaschema</span>
               </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 '>
+              <td className='p-4'>
                 <Link
                   href={frontmatter.Metaschema}
-                  className='text-linkBlue'
+                  className='text-linkBlue hover:underline'
                   target='_blank'
                 >
                   {frontmatter.Metaschema}

diff --git a/components/NavigationButtons.tsx 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:
+
+<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>
+  );
+}
diff --git a/components/NextPrevButton.tsx b/components/NextPrevButton.tsx
diff --git a/components/StyledMarkdown.tsx b/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'
                       />

diff --git a/data/tooling-data.yaml b/data/tooling-data.yaml
@@ -3051,3 +3051,17 @@
   supportedDialects:
     draft: ['4', '6', '7', '2019-09', '2020-12']
   lastUpdated: '2024-10-01'
+
+- name: protoc-gen-jsonschema
+  description: 'JsonSchema generator plugin for Google Protocol Buffers'
+  toolingTypes: ['model-to-schema']
+  languages: ['Protocol Buffers']
+  maintainers:
+    - name: 'Uanid'
+      username: 'uanid'
+      platform: 'github'
+  license: 'Apache-2.0'
+  source: 'https://github.com/pubg/protoc-gen-jsonschema'
+  supportedDialects:
+    draft: ['4', '6', '7', '2019-09', '2020-12']
+
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "react-syntax-highlighter": "^15.6.1",
     "react-text-truncate": "^0.19.0",
     "reading-time": "^1.5.0",
-    "slate": "^0.110.2",
+    "slate": "^0.112.0",
     "slate-react": "^0.108.0",
     "slugify": "^1.6.5",
     "yarn": "1.22.22",

diff --git 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({
       </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>
   );

diff --git 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
@@ -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
@@ -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
@@ -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>
   );