Docs release 4 : Rebuild the Spec docs

components/DocTable.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+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'>
+          <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
+              </td>
+              <td className='border border-slate-400 dark:border-slate-500 p-2'>
+                <Link
+                  href={frontmatter.Specification}
+                  className='text-linkBlue'
+                  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}
+              </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
+              </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>
+            </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>
+              <td className='border border-slate-400 dark:border-slate-500 p-2 '>
+                <Link
+                  href={frontmatter.Metaschema}
+                  className='text-linkBlue'
+                  target='_blank'
+                >
+                  {frontmatter.Metaschema}
+                </Link>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
+
+export default DocTable;

components/NextPrevButton.tsx

@@ -0,0 +1,81 @@
+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'>
+      <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 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>
+  );
+}

components/Sidebar.tsx

@@ -133,15 +133,17 @@ const getReferencePath = [
   '/implementers/interfaces',
 ];
 const getSpecificationPath = [
-  '/draft/2020-12/release-notes',
-  '/draft/2019-09/release-notes',
-  '/draft-07/json-schema-release-notes',
-  '/draft-06/json-schema-release-notes',
-  '/draft-05/readme',
-  '/draft-07/json-hyper-schema-release-notes',
-  '/draft-06/json-hyper-schema-release-notes',
+  '/draft/2020-12',
+  '/draft/2019-09',
+  '/draft-07',
+  '/draft-06',
+  '/draft-05',
   '/specification-links',
+  '/specification/migration',
+  '/specification/release-notes',
+  '/specification/json-hyper-schema',
   '/specification',
+  '/specification-links',
 ];
 
 export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
@@ -660,54 +662,39 @@ export const DocsNav = ({
           id='specification'
         >
           <DocLink uri='/specification' label='Overview' setOpen={setOpen} />
+
+          <SegmentSubtitle label='Versions' />
+          <div className='pl-4 pb-1 pt-1'>
+            <DocLink uri='/draft/2020-12' label='2020-12' setOpen={setOpen} />
+
+            <DocLink uri='/draft/2019-09' label='2019-09' setOpen={setOpen} />
+            <DocLink uri='/draft-07' label='draft-07' setOpen={setOpen} />
+            <DocLink uri='/draft-06' label='draft-06' setOpen={setOpen} />
+            <DocLink uri='/draft-05' label='draft-05' setOpen={setOpen} />
+          </div>
+
           <DocLink
             uri='/specification-links'
             label='Specification Links'
             setOpen={setOpen}
           />
+
           <DocLink
-            uri='/draft/2020-12/release-notes'
-            label='2020-12 notes'
-            setOpen={setOpen}
-          />
-          <DocLink
-            uri='/draft/2019-09/release-notes'
-            label='2019-09 notes'
-            setOpen={setOpen}
-          />
-          <DocLink
-            uri='/draft-07/json-schema-release-notes'
-            label='draft-07 notes'
+            uri='/specification/migration'
+            label='Migration'
             setOpen={setOpen}
           />
           <DocLink
-            uri='/draft-06/json-schema-release-notes'
-            label='draft-06 notes'
+            uri='/specification/release-notes'
+            label='Release Notes'
             setOpen={setOpen}
           />
+
           <DocLink
-            uri='/draft-05/readme'
-            label='draft-05 notes'
+            uri='/specification/json-hyper-schema'
+            label='JSON Hyper-Schema'
             setOpen={setOpen}
           />
-          <SegmentSubtitle label='JSON Hyper-Schema' />
-          <div className='pl-4 pb-1 pt-1'>
-            <DocLink
-              uri='/draft/2019-09/release-notes#hyper-schema-vocabulary'
-              label='2019-09 notes'
-              setOpen={setOpen}
-            />
-            <DocLink
-              uri='/draft-07/json-hyper-schema-release-notes'
-              label='draft-07 notes'
-              setOpen={setOpen}
-            />
-            <DocLink
-              uri='/draft-06/json-hyper-schema-release-notes'
-              label='draft-06 notes'
-              setOpen={setOpen}
-            />
-          </div>
         </div>
       </div>
     </div>

pages/draft-05/index.md

@@ -0,0 +1,16 @@
+---
+title: 'Draft-05'
+Published: '13 October 2016'
+type: docs
+authors: ['Austin Wright']
+Metaschema: 'https://json-schema.org/draft-04/schema'
+Specification: 'https://json-schema.org/draft-05/draft-wright-json-schema-00.pdf'
+---
+
+### Draft-05 Documents
+
+- Core: [draft-wright-json-schema-00](https://json-schema.org/draft-05/draft-wright-json-schema-00.pdf) ([changes](https://json-schema.org/draft-05/draft-wright-json-schema-00.pdf#appendix-B))
+- Validation: [draft-wright-json-schema-validation-00](https://json-schema.org/draft-05/draft-wright-json-schema-validation-00.pdf) ([changes](https://json-schema.org/draft-05/draft-wright-json-schema-validation-00.pdf#appendix-B))
+- Hyper-Schema: [draft-wright-json-schema-hyperschema-00](https://json-schema.org/draft-05/draft-wright-json-schema-hyperschema-00.pdf) ([changes](https://json-schema.org/draft-05/draft-wright-json-schema-hyperschema-00.pdf#appendix-B))
+- Draft 5 was primarily a cleanup of Draft 4 and continued to use the Draft 4 meta-schemas.
+- Published: 13-October-2016

pages/draft-05/index.page.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { getLayout } from '~/components/Sidebar';
+import fs from 'fs';
+import matter from 'gray-matter';
+import StyledMarkdown from '~/components/StyledMarkdown';
+import { SectionContext } from '~/context';
+import DocTable from '~/components/DocTable';
+import { Headline1 } from '~/components/Headlines';
+import { DocsHelp } from '~/components/DocsHelp';
+
+export async function getStaticProps() {
+  const index = fs.readFileSync('pages/draft-05/index.md', 'utf-8');
+  const main = fs.readFileSync('pages/draft-05/release-notes.md', 'utf-8');
+  const { content: indexContent, data: indexData } = matter(index);
+  const { content: bodyContent } = matter(main);
+
+  const frontmatter = { ...indexData };
+  return {
+    props: {
+      blocks: {
+        index: indexContent,
+        body: bodyContent,
+      },
+      frontmatter,
+    },
+  };
+}
+
+export default function ImplementationsPages({
+  blocks,
+  frontmatter,
+}: {
+  blocks: any;
+  frontmatter: any;
+}) {
+  return (
+    <SectionContext.Provider value={null}>
+      <Headline1>{frontmatter.title}</Headline1>
+      <DocTable frontmatter={frontmatter} />
+      <StyledMarkdown markdown={blocks.index} />
+      <StyledMarkdown markdown={blocks.body} />
+      <DocsHelp />
+    </SectionContext.Provider>
+  );
+}
+ImplementationsPages.getLayout = getLayout;

pages/draft-05/readme.md → pages/draft-05/release-notes.md

@@ -1,10 +1,7 @@
----
-title: Explanation for lack of draft-05 meta-schemas
-section: docs
----
+### Explanation for lack of draft-05 meta-schemas
 
-“Draft-05” in the sequential meta-schema numbering would have referred to the draft-wright-jsonschema*-00 specifications.
+“Draft-05” in the sequential meta-schema numbering would have referred to the draft-wright-jsonschema\*-00 specifications.
 
 These specifications were intended as modernized and tidied versions of the specifications referenced by the “Draft-04” meta-schemas, so those draft-04 meta-schemas should continue to be used.
 
-“Draft-06” meta-schemas will be published for the next set of specifications.
+“Draft-06” meta-schemas will be published for the next set of specifications.