From 8345cd3554abd7e00081611522f0b3341847f882 Mon Sep 17 00:00:00 2001
From: Benjamin Granados <benjamin.granadosm@gmail.com>
Date: Tue, 25 Jun 2024 00:23:51 +0200
Subject: [PATCH] adding better messaging

---
 components/GettingStarted.tsx                 | 58 ++++++++++---------
 .../index.page.tsx                            |  8 ++-
 .../next-steps.md                             | 12 ++++
 3 files changed, 51 insertions(+), 27 deletions(-)
 create mode 100644 pages/learn/getting-started-step-by-step/next-steps.md

diff --git a/components/GettingStarted.tsx b/components/GettingStarted.tsx
index 624d707f6..2a4725aab 100644
--- 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
index 7ea5face8..b1b8b7eb2 100644
--- 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
new file mode 100644
index 000000000..a986de19d
--- /dev/null
+++ 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.
\ No newline at end of file