@@ -100,8 +124,8 @@ const StyledValidator = ({
Download Example
-
+
+
);
-};
-
-export default StyledValidator;
+}
+StyledValidator.getLayout = getLayout;
From 4d79def9cdd1f48edd62ac85901efb08c5d22a1d Mon Sep 17 00:00:00 2001
From: Dhairya Majmudar <2022kuec2045@iiitkota.ac.in>
Date: Thu, 30 May 2024 23:40:35 +0530
Subject: [PATCH 07/26] adjusting layout
---
data/getting-started-examples.json | 2 +-
.../index.page.tsx | 44 +++++++++----------
2 files changed, 22 insertions(+), 24 deletions(-)
diff --git a/data/getting-started-examples.json b/data/getting-started-examples.json
index f56c01cc8..ca52dda0e 100644
--- a/data/getting-started-examples.json
+++ b/data/getting-started-examples.json
@@ -1,6 +1,6 @@
[
{
- "name": "Getting Started example",
+ "name": "Getting started example",
"default": true,
"file": "./data/getting-started-examples/schemas/default.json",
"instances": [
diff --git a/pages/learn/getting-started-step-by-step/index.page.tsx b/pages/learn/getting-started-step-by-step/index.page.tsx
index 7e41a500b..f85989840 100644
--- a/pages/learn/getting-started-step-by-step/index.page.tsx
+++ b/pages/learn/getting-started-step-by-step/index.page.tsx
@@ -52,13 +52,11 @@ export default function StyledValidator({
-
-
- Select a JSON Schema Validator
-
+
+
JSON Schema
-
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam
- tinctio sint voluptate.
-
-
-
JSON Schema
-
-
-
- Select a JSON Schema Instance
-
+
+
Instance
-
Instance
-
Result
+
Result
-
This is a valid JSON instance for the provided JSON Schema
+ {data.map((data, id) => {
+ return (
+ <>
+
{data.instances[0].details}
-
+ {data.instances[0].valid ? (
+
+ ) : (
+
+ )}
+
+ );
+ })}
-
-
+
{selectedSchema}
+
@@ -83,27 +85,15 @@ export default function StyledValidator({
name='Select a JSON Schema Instance'
className='p-2 border dark:border-slate-300 border-slate-800 dark:bg-slate-900 rounded-md max-sm:text-[12px] '
id='Examples'
- >
- {data.map((data, id) => {
- return (
-
- );
- })}
-
+ >
-
+
Result
- {data.map((data, id) => {
+ {/* {data.map((data, id) => {
return (
<>
{data.instances[0].details}
@@ -115,7 +105,7 @@ export default function StyledValidator({
)}
);
- })}
+ })} */}
-
+
JSON Instance
+ >
+ {instances.map((instance: any, id: number) => (
+
+ ))}
+
-
-
+
-
Validation Result
-
- {/* {data.map((data, id) => {
- return (
- <>
-
{data.instances[0].details}
-
- {data.instances[0].valid ? (
-
- ) : (
-
- )}
-
- );
- })} */}
-
- {/*
-
-
*/}
);
diff --git a/public/getting-started-examples/schemas/default copy.json b/public/getting-started-examples/schemas/default copy.json
deleted file mode 100644
index c783e1b70..000000000
--- a/public/getting-started-examples/schemas/default copy.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "$schema": "https://json-schema.org/draft/2020-12/schema",
- "$id": "https://example.com/product.schema.json",
- "title": "Product",
- "description": "A product from Acme's catalog",
- "type": "object",
- "properties": {
- "productId": {
- "description": "The unique identifier for a product",
- "type": "integer"
- },
- "productName": {
- "description": "Name of the product",
- "type": "string"
- },
- "price": {
- "description": "The price of the product",
- "type": "number",
- "exclusiveMinimum": 0
- },
- "tags": {
- "description": "Tags for the product",
- "type": "array",
- "items": {
- "type": "string"
- },
- "minItems": 1,
- "uniqueItems": true
- }
- },
- "required": ["productId", "productName", "price"]
-}
diff --git a/public/getting-started-examples/schemas/default-extended.json b/public/getting-started-examples/schemas/default-extended.json
index 769c181b6..c783e1b70 100644
--- a/public/getting-started-examples/schemas/default-extended.json
+++ b/public/getting-started-examples/schemas/default-extended.json
@@ -26,25 +26,6 @@
},
"minItems": 1,
"uniqueItems": true
- },
- "dimensions": {
- "type": "object",
- "properties": {
- "length": {
- "type": "number"
- },
- "width": {
- "type": "number"
- },
- "height": {
- "type": "number"
- }
- },
- "required": ["length", "width", "height"]
- },
- "warehouseLocation": {
- "description": "Coordinates of the warehouse where the product is located.",
- "$ref": "https://example.com/geographical-location.schema.json"
}
},
"required": ["productId", "productName", "price"]
diff --git a/public/getting-started-examples/schemas/default.json b/public/getting-started-examples/schemas/default.json
index 31764cc97..769c181b6 100644
--- a/public/getting-started-examples/schemas/default.json
+++ b/public/getting-started-examples/schemas/default.json
@@ -1,52 +1,51 @@
{
- "$schema": "https://json-schema.org/draft/2020-12/schema",
- "$id": "https://example.com/product.schema.json",
- "title": "Product",
- "description": "A product from Acme's catalog",
- "type": "object",
- "properties": {
- "productId": {
- "description": "The unique identifier for a product",
- "type": "integer"
- },
- "productName": {
- "description": "Name of the product",
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
+ "$id": "https://example.com/product.schema.json",
+ "title": "Product",
+ "description": "A product from Acme's catalog",
+ "type": "object",
+ "properties": {
+ "productId": {
+ "description": "The unique identifier for a product",
+ "type": "integer"
+ },
+ "productName": {
+ "description": "Name of the product",
+ "type": "string"
+ },
+ "price": {
+ "description": "The price of the product",
+ "type": "number",
+ "exclusiveMinimum": 0
+ },
+ "tags": {
+ "description": "Tags for the product",
+ "type": "array",
+ "items": {
"type": "string"
},
- "price": {
- "description": "The price of the product",
- "type": "number",
- "exclusiveMinimum": 0
- },
- "tags": {
- "description": "Tags for the product",
- "type": "array",
- "items": {
- "type": "string"
+ "minItems": 1,
+ "uniqueItems": true
+ },
+ "dimensions": {
+ "type": "object",
+ "properties": {
+ "length": {
+ "type": "number"
},
- "minItems": 1,
- "uniqueItems": true
- },
- "dimensions": {
- "type": "object",
- "properties": {
- "length": {
- "type": "number"
- },
- "width": {
- "type": "number"
- },
- "height": {
- "type": "number"
- }
+ "width": {
+ "type": "number"
},
- "required": [ "length", "width", "height" ]
+ "height": {
+ "type": "number"
+ }
},
- "warehouseLocation": {
- "description": "Coordinates of the warehouse where the product is located.",
- "$ref": "https://example.com/geographical-location.schema.json"
- }
+ "required": ["length", "width", "height"]
},
- "required": [ "productId", "productName", "price" ]
- }
-
\ No newline at end of file
+ "warehouseLocation": {
+ "description": "Coordinates of the warehouse where the product is located.",
+ "$ref": "https://example.com/geographical-location.schema.json"
+ }
+ },
+ "required": ["productId", "productName", "price"]
+}
From cd0f5273d9716233f8d146a6262937bd3ddc9718 Mon Sep 17 00:00:00 2001
From: Dhairya Majmudar <2022kuec2045@iiitkota.ac.in>
Date: Thu, 6 Jun 2024 20:39:36 +0530
Subject: [PATCH 12/26] fixing workflow
---
pages/learn/getting-started-step-by-step/index.page.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/pages/learn/getting-started-step-by-step/index.page.tsx b/pages/learn/getting-started-step-by-step/index.page.tsx
index f33d67e03..6b069a43c 100644
--- a/pages/learn/getting-started-step-by-step/index.page.tsx
+++ b/pages/learn/getting-started-step-by-step/index.page.tsx
@@ -107,7 +107,6 @@ export default function StyledValidator({ blocks }: { blocks: any[] }) {
},
]);
- /* eslint-disable */
useEffect(() => {
fetchData().then((data) => setOptions(data));
}, []);
@@ -115,20 +114,21 @@ export default function StyledValidator({ blocks }: { blocks: any[] }) {
const handleChange = async (e: any) => {
setSelectedSchema(e.target.value);
const selectedSchemaObj = options.find(
+ // @ts-ignore
(schema) => schema.file === e.target.value,
);
if (selectedSchemaObj) {
+ // @ts-ignore
setInstances(selectedSchemaObj.instances);
const schemaResponse = await fetch(selectedSchema);
const schemaData = await schemaResponse.json();
setFetchedSchema(schemaData);
} else {
setInstances([]);
- setFetchedSchema(null);
+ setFetchedSchema(null!);
}
};
- /* eslint-enable */
return (
From 6cca80dfabc805d5c41f7376b16f7e69c15f8679 Mon Sep 17 00:00:00 2001
From: Dhairya Majmudar <2022kuec2045@iiitkota.ac.in>
Date: Thu, 6 Jun 2024 21:32:05 +0530
Subject: [PATCH 13/26] adding fetch testing
---
pages/learn/getting-started-step-by-step/index.page.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/pages/learn/getting-started-step-by-step/index.page.tsx b/pages/learn/getting-started-step-by-step/index.page.tsx
index 6b069a43c..db18cb213 100644
--- a/pages/learn/getting-started-step-by-step/index.page.tsx
+++ b/pages/learn/getting-started-step-by-step/index.page.tsx
@@ -155,6 +155,7 @@ export default function StyledValidator({ blocks }: { blocks: any[] }) {
{selectedSchema}
+
{JSON.stringify(fetchedSchema, null, 2)}
From 946f7b08c66fecd0345d2d8deaba656fea1caffd Mon Sep 17 00:00:00 2001
From: Dhairya Majmudar <2022kuec2045@iiitkota.ac.in>
Date: Fri, 7 Jun 2024 12:48:26 +0530
Subject: [PATCH 14/26] replacing code editor
---
.../index.page.tsx | 40 ++++++++++++++++---
1 file changed, 34 insertions(+), 6 deletions(-)
diff --git a/pages/learn/getting-started-step-by-step/index.page.tsx b/pages/learn/getting-started-step-by-step/index.page.tsx
index db18cb213..7b26f42fd 100644
--- a/pages/learn/getting-started-step-by-step/index.page.tsx
+++ b/pages/learn/getting-started-step-by-step/index.page.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
-import JsonEditor from '~/components/JsonEditor';
import fs from 'fs';
+import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
import { getLayout } from '~/components/Sidebar';
import Head from 'next/head';
@@ -9,6 +9,7 @@ import matter from 'gray-matter';
import StyledMarkdown from '~/components/StyledMarkdown';
import { SectionContext } from '~/context';
import { DocsHelp } from '~/components/DocsHelp';
+import Highlight from 'react-syntax-highlighter';
export async function getStaticProps() {
const block1 = fs.readFileSync(
@@ -154,11 +155,38 @@ export default function StyledValidator({ blocks }: { blocks: any[] }) {
))}
-
From bde43c5cded45356228344e4eedc46b9dca899c7 Mon Sep 17 00:00:00 2001
From: Dhairya Majmudar <2022kuec2045@iiitkota.ac.in>
Date: Fri, 7 Jun 2024 19:25:19 +0530
Subject: [PATCH 15/26] feat: enabling instnaces and moving to new component
---
components/GettingStarted.tsx | 227 ++++++++++++++++++
.../index.page.tsx | 177 +-------------
2 files changed, 230 insertions(+), 174 deletions(-)
create mode 100644 components/GettingStarted.tsx
diff --git a/components/GettingStarted.tsx b/components/GettingStarted.tsx
new file mode 100644
index 000000000..42c47074b
--- /dev/null
+++ b/components/GettingStarted.tsx
@@ -0,0 +1,227 @@
+import React, { useState, useEffect } from 'react';
+import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import Highlight from 'react-syntax-highlighter';
+
+async function fetchData() {
+ const response = await fetch('/getting-started-examples.json');
+ const data = await response.json();
+ return data;
+}
+
+const GettingStarted = () => {
+ const intitalSchemaData = {
+ $schema: 'https://json-schema.org/draft/2020-12/schema',
+ $id: 'https://example.com/product.schema.json',
+ title: 'Product',
+ description: 'A product from Acmes catalog',
+ type: 'object',
+ properties: {
+ productId: {
+ description: 'The unique identifier for a product',
+ type: 'integer',
+ },
+ productName: {
+ description: 'Name of the product',
+ type: 'string',
+ },
+ price: {
+ description: 'The price of the product',
+ type: 'number',
+ exclusiveMinimum: 0,
+ },
+ tags: {
+ description: 'Tags for the product',
+ type: 'array',
+ items: {
+ type: 'string',
+ },
+ minItems: 1,
+ uniqueItems: true,
+ },
+ dimensions: {
+ type: 'object',
+ properties: {
+ length: {
+ type: 'number',
+ },
+ width: {
+ type: 'number',
+ },
+ height: {
+ type: 'number',
+ },
+ },
+ required: ['length', 'width', 'height'],
+ },
+ warehouseLocation: {
+ description:
+ 'Coordinates of the warehouse where the product is located.',
+ $ref: 'https://example.com/geographical-location.schema.json',
+ },
+ },
+ required: ['productId', 'productName', 'price'],
+ };
+
+ const [options, setOptions] = useState([]);
+ const [fetchedSchema, setFetchedSchema] = useState(intitalSchemaData);
+ const [selectedSchema, setSelectedSchema] = useState(
+ '/getting-started-examples/schemas/default.json',
+ );
+ const [instances, setInstances] = useState([
+ {
+ name: 'Valid instance',
+ default: true,
+ valid: true,
+ file: '/getting-started-examples/instances/default-ok.json',
+ details: 'This is a valid JSON instance for the provided JSON Schema',
+ },
+ {
+ name: 'Invalid instance',
+ default: false,
+ valid: false,
+ file: '/getting-started-examples/instances/default-ko.json',
+ details: 'This is an invalid JSON instance for the provided JSON Schema',
+ },
+ ]);
+
+ const [selectedInstance, setSelectedInstance] = useState(
+ '/getting-started-examples/instances/default-ok.json',
+ );
+ const [fetchedInstance, setFetchedInstance] = useState({});
+
+ useEffect(() => {
+ fetchData().then((data) => setOptions(data));
+ }, []);
+
+ const handleChange = async (e: any) => {
+ setSelectedSchema(e.target.value);
+ const selectedSchemaObj = options.find(
+ // @ts-ignore
+ (schema) => schema.file === e.target.value,
+ );
+
+ if (selectedSchemaObj) {
+ // @ts-ignore
+ setInstances(selectedSchemaObj.instances);
+ const schemaResponse = await fetch(selectedSchema);
+ const schemaData = await schemaResponse.json();
+ setFetchedSchema(schemaData);
+ } else {
+ setInstances([]);
+ setFetchedSchema(null!);
+ }
+ };
+
+ const handleInstanceChange = async (e: any) => {
+ setSelectedInstance(e.target.value);
+
+ const instanceResponse = await fetch(selectedInstance);
+ const instanceData = await instanceResponse.json();
+ setFetchedInstance(instanceData);
+ };
+
+ return (
+ <>
+
+
+
JSON Schema
+
+
+
+
+ {
+ const isHighlighted = false;
+ return {
+ className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
+ };
+ }}
+ codeTagProps={{
+ className: 'mr-8',
+ }}
+ >
+ {JSON.stringify(fetchedSchema, null, 2)}
+
+
+
+
+
+
+
JSON Instance
+
+
+
+ {
+ const isHighlighted = false;
+ return {
+ className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
+ };
+ }}
+ codeTagProps={{
+ className: 'mr-8',
+ }}
+ >
+ {JSON.stringify(fetchedInstance, null, 2)}{' '}
+
+
+
+
+ );
+};
+
+export default GettingStarted;
diff --git a/pages/learn/getting-started-step-by-step/index.page.tsx b/pages/learn/getting-started-step-by-step/index.page.tsx
index 7b26f42fd..7ea5face8 100644
--- a/pages/learn/getting-started-step-by-step/index.page.tsx
+++ b/pages/learn/getting-started-step-by-step/index.page.tsx
@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
import fs from 'fs';
-import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
import { getLayout } from '~/components/Sidebar';
import Head from 'next/head';
@@ -9,7 +8,7 @@ import matter from 'gray-matter';
import StyledMarkdown from '~/components/StyledMarkdown';
import { SectionContext } from '~/context';
import { DocsHelp } from '~/components/DocsHelp';
-import Highlight from 'react-syntax-highlighter';
+import GettingStarted from '~/components/GettingStarted';
export async function getStaticProps() {
const block1 = fs.readFileSync(
@@ -24,113 +23,9 @@ export async function getStaticProps() {
};
}
-async function fetchData() {
- const response = await fetch('/getting-started-examples.json');
- const data = await response.json();
- return data;
-}
-
export default function StyledValidator({ blocks }: { blocks: any[] }) {
const newTitle = 'Creating your first schema';
- const intitalSchemaData = {
- $schema: 'https://json-schema.org/draft/2020-12/schema',
- $id: 'https://example.com/product.schema.json',
- title: 'Product',
- description: 'A product from Acmes catalog',
- type: 'object',
- properties: {
- productId: {
- description: 'The unique identifier for a product',
- type: 'integer',
- },
- productName: {
- description: 'Name of the product',
- type: 'string',
- },
- price: {
- description: 'The price of the product',
- type: 'number',
- exclusiveMinimum: 0,
- },
- tags: {
- description: 'Tags for the product',
- type: 'array',
- items: {
- type: 'string',
- },
- minItems: 1,
- uniqueItems: true,
- },
- dimensions: {
- type: 'object',
- properties: {
- length: {
- type: 'number',
- },
- width: {
- type: 'number',
- },
- height: {
- type: 'number',
- },
- },
- required: ['length', 'width', 'height'],
- },
- warehouseLocation: {
- description:
- 'Coordinates of the warehouse where the product is located.',
- $ref: 'https://example.com/geographical-location.schema.json',
- },
- },
- required: ['productId', 'productName', 'price'],
- };
-
- const [options, setOptions] = useState([]);
- const [fetchedSchema, setFetchedSchema] = useState(intitalSchemaData);
- const [selectedSchema, setSelectedSchema] = useState(
- '/getting-started-examples/schemas/default.json',
- );
- const [instances, setInstances] = useState([
- {
- name: 'Valid instance',
- default: true,
- valid: true,
- file: '/getting-started-examples/instances/default-ok.json',
- details: 'This is a valid JSON instance for the provided JSON Schema',
- },
- {
- name: 'Invalid instance',
- default: false,
- valid: false,
- file: '/getting-started-examples/instances/default-ko.json',
- details: 'This is an invalid JSON instance for the provided JSON Schema',
- },
- ]);
-
- useEffect(() => {
- fetchData().then((data) => setOptions(data));
- }, []);
-
- const handleChange = async (e: any) => {
- setSelectedSchema(e.target.value);
- const selectedSchemaObj = options.find(
- // @ts-ignore
- (schema) => schema.file === e.target.value,
- );
-
- if (selectedSchemaObj) {
- // @ts-ignore
- setInstances(selectedSchemaObj.instances);
- const schemaResponse = await fetch(selectedSchema);
- const schemaData = await schemaResponse.json();
- setFetchedSchema(schemaData);
- } else {
- setInstances([]);
- setFetchedSchema(null!);
- }
- };
-
return (
@@ -138,73 +33,7 @@ export default function StyledValidator({ blocks }: { blocks: any[] }) {
{newTitle}
-
-
-
-
JSON Schema
-
-
-
-
- {
- const isHighlighted = false;
- return {
- className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
- };
- }}
- codeTagProps={{
- className: 'mr-8',
- }}
- >
- {JSON.stringify(fetchedSchema, null, 2)}
-
-
-
-
-
JSON Instance
-
-
-
-
);
From 8b01252b63fb2498ad659a2c76b82e4e14018a2b Mon Sep 17 00:00:00 2001
From: Dhairya Majmudar <2022kuec2045@iiitkota.ac.in>
Date: Fri, 7 Jun 2024 21:31:31 +0530
Subject: [PATCH 16/26] fix: state rendering problem solved
---
components/GettingStarted.tsx | 21 ++++++---------------
1 file changed, 6 insertions(+), 15 deletions(-)
diff --git a/components/GettingStarted.tsx b/components/GettingStarted.tsx
index 42c47074b..fc835b4d9 100644
--- a/components/GettingStarted.tsx
+++ b/components/GettingStarted.tsx
@@ -63,10 +63,6 @@ const GettingStarted = () => {
};
const [options, setOptions] = useState([]);
- const [fetchedSchema, setFetchedSchema] = useState(intitalSchemaData);
- const [selectedSchema, setSelectedSchema] = useState(
- '/getting-started-examples/schemas/default.json',
- );
const [instances, setInstances] = useState([
{
name: 'Valid instance',
@@ -84,17 +80,14 @@ const GettingStarted = () => {
},
]);
- const [selectedInstance, setSelectedInstance] = useState(
- '/getting-started-examples/instances/default-ok.json',
- );
+ const [fetchedSchema, setFetchedSchema] = useState(intitalSchemaData);
const [fetchedInstance, setFetchedInstance] = useState({});
useEffect(() => {
fetchData().then((data) => setOptions(data));
}, []);
- const handleChange = async (e: any) => {
- setSelectedSchema(e.target.value);
+ const handleSchemaChange = async (e: any) => {
const selectedSchemaObj = options.find(
// @ts-ignore
(schema) => schema.file === e.target.value,
@@ -103,7 +96,7 @@ const GettingStarted = () => {
if (selectedSchemaObj) {
// @ts-ignore
setInstances(selectedSchemaObj.instances);
- const schemaResponse = await fetch(selectedSchema);
+ const schemaResponse = await fetch(e.target.value);
const schemaData = await schemaResponse.json();
setFetchedSchema(schemaData);
} else {
@@ -113,9 +106,7 @@ const GettingStarted = () => {
};
const handleInstanceChange = async (e: any) => {
- setSelectedInstance(e.target.value);
-
- const instanceResponse = await fetch(selectedInstance);
+ const instanceResponse = await fetch(e.target.value);
const instanceData = await instanceResponse.json();
setFetchedInstance(instanceData);
};
@@ -129,7 +120,7 @@ const GettingStarted = () => {
name='Select a JSON Schema Validator'
className='p-2 border dark:border-slate-300 border-slate-800 dark:bg-slate-900 rounded-md max-sm:text-[12px]'
id='Examples'
- onChange={handleChange}
+ onChange={handleSchemaChange}
>
{options.map((option: any, id: number) => (