From 7caf67bf3dbb796afa9ed6649010595864d5cd3c Mon Sep 17 00:00:00 2001 From: Benjamin Granados Date: Thu, 25 Jan 2024 12:30:27 +0100 Subject: [PATCH] Add a new section for other JSON Schema resources --- components/Sidebar.tsx | 31 +++++++++++++++++++++ pages/implementers/interfaces.md | 1 - pages/learn/file-system.md | 3 +- pages/learn/getting-started-step-by-step.md | 1 - pages/learn/glossary.md | 3 +- pages/learn/json-schema-examples.md | 3 +- pages/learn/miscellaneous-examples.md | 3 +- pages/resources/[slug].page.tsx | 27 ++++++++++++++++++ pages/resources/_index.md | 18 ++++++++++++ pages/resources/index.page.tsx | 27 ++++++++++++++++++ public/icons/settings.svg | 11 ++++++++ 11 files changed, 118 insertions(+), 10 deletions(-) create mode 100644 pages/resources/[slug].page.tsx create mode 100644 pages/resources/_index.md create mode 100644 pages/resources/index.page.tsx create mode 100644 public/icons/settings.svg diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index ba2d1105d..abf41fdf5 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -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) &&

Specification

} + {getResourcesPath.includes(router.asPath) &&

Resources

} + {router.pathname === null &&

Docs

} @@ -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 = () => { + {/* Resources */} +
+
+
+ eye icon + +
+ + +
+
+ +
+
) diff --git a/pages/implementers/interfaces.md b/pages/implementers/interfaces.md index fa4d94fb8..a82c05786 100644 --- a/pages/implementers/interfaces.md +++ b/pages/implementers/interfaces.md @@ -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. diff --git a/pages/learn/file-system.md b/pages/learn/file-system.md index a408b70b1..fd7a1829a 100644 --- a/pages/learn/file-system.md +++ b/pages/learn/file-system.md @@ -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: diff --git a/pages/learn/getting-started-step-by-step.md b/pages/learn/getting-started-step-by-step.md index c55dd7e6f..f020a474a 100644 --- a/pages/learn/getting-started-step-by-step.md +++ b/pages/learn/getting-started-step-by-step.md @@ -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) diff --git a/pages/learn/glossary.md b/pages/learn/glossary.md index 66b4a3abc..35f87bf75 100644 --- a/pages/learn/glossary.md +++ b/pages/learn/glossary.md @@ -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. diff --git a/pages/learn/json-schema-examples.md b/pages/learn/json-schema-examples.md index d86b9656b..4d159ee1a 100644 --- a/pages/learn/json-schema-examples.md +++ b/pages/learn/json-schema-examples.md @@ -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) diff --git a/pages/learn/miscellaneous-examples.md b/pages/learn/miscellaneous-examples.md index abf2b8060..1ad4bda0e 100644 --- a/pages/learn/miscellaneous-examples.md +++ b/pages/learn/miscellaneous-examples.md @@ -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) diff --git a/pages/resources/[slug].page.tsx b/pages/resources/[slug].page.tsx new file mode 100644 index 000000000..649f3bd1b --- /dev/null +++ b/pages/resources/[slug].page.tsx @@ -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 ( + + + {newTitle} + + {frontmatter.title} + + + + ) +} +StaticMarkdownPage.getLayout = getLayout \ No newline at end of file diff --git a/pages/resources/_index.md b/pages/resources/_index.md new file mode 100644 index 000000000..8c28833dd --- /dev/null +++ b/pages/resources/_index.md @@ -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 + diff --git a/pages/resources/index.page.tsx b/pages/resources/index.page.tsx new file mode 100644 index 000000000..68e55a733 --- /dev/null +++ b/pages/resources/index.page.tsx @@ -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 ( + + + + + ) +} +ContentExample.getLayout = getLayout \ No newline at end of file diff --git a/public/icons/settings.svg b/public/icons/settings.svg new file mode 100644 index 000000000..c86dabec9 --- /dev/null +++ b/public/icons/settings.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +