json-schema-org · benjagm · Jan 25, 2024
@@ -97,6 +97,9 @@ const getSpecificationPath = [
   '/specification-links',
   '/specification'
 ]
+const getResourcesPath = [
+  '/resources',
+]
 export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter()
   const [open, setOpen] = useState(false)
@@ -117,6 +120,8 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
 
             {getSpecificationPath.includes(router.asPath) && <h3 className='text-white ml-12'>Specification</h3>}
 
+            {getResourcesPath.includes(router.asPath) && <h3 className='text-white ml-12'>Resources</h3>}
+
             {router.pathname === null && <h3 className='text-white ml-12'>Docs</h3>}
             <svg style={{ marginRight: '50px', color: 'white', transform: rotate, transition: 'all 0.2s linear' }} xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 256 512'><path d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z' id='mainIconPathAttribute' fill='#ffffff'></path></svg>
           </div>
@@ -152,6 +157,7 @@ export const DocsNav = () => {
     getStarted: false,
     getReference: false,
     getSpecification: false,
+    getResources: false,
   })
   useEffect(() => {
     if (getDocsPath.includes(router.asPath)) {
@@ -162,6 +168,8 @@ export const DocsNav = () => {
       setActive({ ...active, getReference: true })
     } else if (getSpecificationPath.includes(router.asPath)) {
       setActive({ ...active, getSpecification: true })
+    } else if (getResourcesPath.includes(router.asPath)) {
+      setActive({ ...active, getResources: true })
     }
   }, [router.asPath])
 
@@ -181,10 +189,16 @@ export const DocsNav = () => {
     setActive({ ...active, getSpecification: !active.getSpecification })
   }
 
+  const handleClickResources = () => {
+    setActive({ ...active, getResources: !active.getResources })
+  }
+
   const rotate = active.getDocs ? 'rotate(180deg)' : 'rotate(0)'
   const rotateG = active.getStarted ? 'rotate(180deg)' : 'rotate(0)'
   const rotateR = active.getReference ? 'rotate(180deg)' : 'rotate(0)'
   const rotateSpec = active.getSpecification ? 'rotate(180deg)' : 'rotate(0)'
+  const rotateResources = active.getResources ? 'rotate(180deg)' : 'rotate(0)'
+
 
   return (
 
@@ -308,6 +322,23 @@ export const DocsNav = () => {
           <DocLink uri='/specification-links' label='Specification Links' />
         </div>
       </div>
+      {/* Resources */}
+      <div className='mb-2 bg-slate-200 p-2 rounded'>
+        <div className='flex justify-between w-full items-center' onClick={handleClickResources}>
+          <div className='flex  items-center align-middle'>
+            <img src='/icons/settings.svg' alt='eye icon' className='mr-2' />
+            <SegmentHeadline label='Resources' />
+          </div>
+          <svg id='arrow' className='arrow' style={{ transform: rotateResources, transition: 'all 0.2s linear' }} xmlns='http://www.w3.org/2000/svg' fill='none' height='32' viewBox='0 0 24 24' width='24'><path clipRule='evenodd' d='m16.5303 8.96967c.2929.29289.2929.76777 0 1.06063l-4 4c-.2929.2929-.7677.2929-1.0606 0l-4.00003-4c-.29289-.29286-.29289-.76774 0-1.06063s.76777-.29289 1.06066 0l3.46967 3.46963 3.4697-3.46963c.2929-.29289.7677-.29289 1.0606 0z' fill='#707070' fillRule='evenodd' /></svg>
+
+        </div>
+        <div
+          className={classnames( 'ml-6', { 'hidden': !active.getResources })}
+          id='resources'
+        >
+          <DocLink uri='/resources' label='Overview' />
+        </div>
+      </div>
     </div>
 
   )

@@ -2,7 +2,6 @@
 title: Common Interfaces across JSON Schema Implementations
 section: implementers
 ---
-
 JSON Schema is extremely widely used and nearly equally widely implemented.
 There are implementations of JSON Schema validation for [over 20 languages](https://json-schema.org/implementations.html) or environments.
 This prevalence is fantastic for user choice -- as someone wishing to use JSON Schema you can be almost certain you'll find an implementation suitable for your target environment.

@@ -1,8 +1,7 @@
 ---
 section: docs
-title: Modeling a file system with JSON Schema
+title: Modeling a file system
 ---
-
 In this step-by-step guide you will learn how to design a JSON Schema that mirrors the structure of an `/etc/fstab` file. 
 
 This guide is divided into the following sections:

@@ -2,7 +2,6 @@
 title: Creating your first schema
 section: docs
 ---
-
 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 document, including:
 
 * [Creating a schema definition](#create)

@@ -1,8 +1,7 @@
 ---
-title: JSON Schema Glossary
+title: Glossary
 section: docs
 ---
-
 This document collects short explanations of terminology one may encounter within the JSON Schema community.
 
 Whilst many of the entries below have precise technical definitions, preference is given to explanations of their conversational use, with additional references linked for further information.

@@ -1,8 +1,7 @@
 ---
 section: docs
-title: JSON Schema examples
+title: 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.
 
 - [Address](#address)

@@ -1,8 +1,7 @@
 ---
 section: docs
-title: Miscellaneous Examples
+title: Miscellaneous examples
 ---
-
 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.
 
 - [A typical minimum schema](#basic)

@@ -0,0 +1,27 @@
+import React from 'react'
+import Head from 'next/head'
+import StyledMarkdown from '~/components/StyledMarkdown'
+import { getLayout } from '~/components/Sidebar'
+import getStaticMarkdownPaths from '~/lib/getStaticMarkdownPaths'
+import getStaticMarkdownProps from '~/lib/getStaticMarkdownProps'
+import { Headline1 } from '~/components/Headlines'
+import { SectionContext } from '~/context'
+import { Remember } from '~/components/Remember'
+
+export async function getStaticPaths() { return getStaticMarkdownPaths('pages/resources') }
+export async function getStaticProps(args: any) { return getStaticMarkdownProps(args, 'pages/resources') }
+
+export default function StaticMarkdownPage ({ frontmatter, content }: { frontmatter: any, content: any }) {
+  const newTitle = 'JSON Schema - ' + frontmatter.title
+  return (
+    <SectionContext.Provider value={frontmatter.section || null}>
+      <Head>
+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{frontmatter.title}</Headline1>
+      <StyledMarkdown markdown={content} />
+      <Remember />
+    </SectionContext.Provider>
+  )
+}
+StaticMarkdownPage.getLayout = getLayout
@@ -0,0 +1,18 @@
+---
+title: "Resources"
+section: docs
+---
+
+Resources
+=========================
+
+Welcome to the **Resources** section! A curated list of the JSON Schema resources available out there 🌐.
+
+What you'll find in this section?
+* Articles
+* Books
+* Courses
+* Videos
+* Podcasts
+* Papers
+
@@ -0,0 +1,27 @@
+import React from 'react'
+import { getLayout } from '~/components/Sidebar'
+import fs from 'fs'
+import matter from 'gray-matter'
+import StyledMarkdown from '~/components/StyledMarkdown'
+import { Remember } from '~/components/Remember'
+import { SectionContext } from '~/context'
+
+export async function getStaticProps() {
+  const block1 = fs.readFileSync('pages/resources/_index.md', 'utf-8')
+  const { content: block1Content } = matter(block1)
+  return {
+    props: {
+      blocks: [block1Content]
+    }
+  }
+}
+
+export default function ContentExample ({ blocks }: { blocks: any[] }) {
+  return (
+    <SectionContext.Provider value='docs'>
+      <StyledMarkdown markdown={blocks[0]} />
+      <Remember />
+    </SectionContext.Provider>
+  )
+}
+ContentExample.getLayout = getLayout