adding better messaging

json-schema-org · Jun 24, 2024 · 8345cd3 · 8345cd3
1 parent 7979703
commit 8345cd3
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 27 deletions.
diff --git a/components/GettingStarted.tsx b/components/GettingStarted.tsx
@@ -102,19 +102,22 @@ const GettingStarted = () => {
     <>
       <div className='flex flex-col'>
         <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
-          <h2 className='text-h5 font-semibold -mb-2'>JSON Schema</h2>
-          <select
-            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] plausible-event-name==activation-explore-tools'
-            id='Examples'
-            onChange={handleSchemaChange}
-          >
-            {options.map((option: any, id: number) => (
-              <option key={id} value={option.file}>
-                {option.name}
-              </option>
-            ))}
-          </select>
+          <h2 className='text-h5 font-semibold mb-1'>JSON Schema</h2>
+          <div className='select-wrap'>
+            <label className='mr-2'>Select a Schema:</label>
+            <select
+              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] plausible-event-name==activation-explore-tools'
+              id='Examples'
+              onChange={handleSchemaChange}
+            >
+              {options.map((option: any, id: number) => (
+                <option key={id} value={option.file}>
+                  {option.name}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
 
         <div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
@@ -152,19 +155,22 @@ const GettingStarted = () => {
 
       <div className='flex flex-col'>
         <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
-          <h2 className='text-h5 font-semibold -mb-2'>JSON Instance</h2>
-          <select
-            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] plausible-event-name==activation-explore-tools'
-            id='Examples'
-            onChange={handleInstanceChange}
-          >
-            {instances.map((instance: any, id: number) => (
-              <option key={id} value={instance.file}>
-                {instance.name}
-              </option>
-            ))}
-          </select>
+          <h2 className='text-h5 font-semibold mb-1'>JSON Instance</h2>
+          <div className='select-wrap'>
+            <label className='mr-2'>Select an Instance:</label>
+            <select
+              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] plausible-event-name==activation-explore-tools'
+              id='Examples'
+              onChange={handleInstanceChange}
+            >
+              {instances.map((instance: any, id: number) => (
+                <option key={id} value={instance.file}>
+                  {instance.name}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
         <div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
           <Highlight

diff --git a/pages/learn/getting-started-step-by-step/index.page.tsx b/pages/learn/getting-started-step-by-step/index.page.tsx
@@ -15,10 +15,15 @@ export async function getStaticProps() {
     'pages/learn/getting-started-step-by-step/getting-started-step-by-step.md',
     'utf-8',
   );
+  const block2 = fs.readFileSync(
+    'pages/learn/getting-started-step-by-step/next-steps.md',
+    'utf-8',
+  );
   const { content: block1Content } = matter(block1);
+  const { content: block2Content } = matter(block2);
   return {
     props: {
-      blocks: [block1Content],
+      blocks: [block1Content, block2Content],
     },
   };
 }
@@ -34,6 +39,7 @@ export default function StyledValidator({ blocks }: { blocks: any[] }) {
       <Headline1>{newTitle}</Headline1>
       <StyledMarkdown markdown={blocks[0]} />
       <GettingStarted />
+      <StyledMarkdown markdown={blocks[1]} />
       <DocsHelp />
     </SectionContext.Provider>
   );

diff --git a/pages/learn/getting-started-step-by-step/next-steps.md b/pages/learn/getting-started-step-by-step/next-steps.md
@@ -0,0 +1,12 @@
+---
+title: Getting Started Next Steps
+section: docs
+---
+
+## What Next?
+
+Now that you know how to create a JSON Schema and use it to validate JSON data, we'd invite you to continue your JSON Schema journey:
+* Learn more about JSON Schema by visiting the [reference documentation](../understanding-json-schema).
+* Explore the details of the current version of the Spec [2020-12](https://json-schema.org/specification).
+
+If you already know how to create JSON Schemas and you are looking for different JSON Schema use cases like schema generation, code generation, documentation, UI generation or JSON Schema processing or conversion, please visit <userevent type='plausible-event-name=activation-explore-tools'>[Tools](https://json-schema.org/implementations)</userevent> and explore the amazing tooling available in the JSON Schema Ecosystem.