Adding Tour of JSON Schema to the website (#859)

benjagm · JeelRajodiya · web-flow · commit 96305fb6f054 · 2024-08-14T17:40:11.000+02:00
* Adding Tour of JSON Schema

* Update pages/learn/index.page.tsx

Co-authored-by: Zeel Rajodiya &lt;jeelrajodiyajeel@gmail.com&gt;

---------

Co-authored-by: Zeel Rajodiya &lt;jeelrajodiyajeel@gmail.com&gt;
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -98,6 +98,7 @@ const getDocsPath = [
   '/overview/faq',
 ];
 const getStartedPath = [
+  '/learn',
   '/learn/json-schema-examples',
   '/learn/file-system',
   '/learn/miscellaneous-examples',
@@ -414,11 +415,17 @@ export const DocsNav = ({
           className={classnames('ml-6', { hidden: !active.getStarted })}
           id='getStarted'
         >
+          <DocLink uri='/learn' label='Overview' setOpen={setOpen} />
           <DocLink
             uri='/learn/getting-started-step-by-step'
             label='Creating your first schema'
             setOpen={setOpen}
           />
+          <DocLinkBlank
+            uri='https://tour.json-schema.org/'
+            label='Tour of JSON Schema'
+            setOpen={setOpen}
+          />
           <SegmentSubtitle label='Examples' />
           <div className='pl-4 pb-1 pt-1'>
             <DocLink
diff --git a/pages/docs/index.page.tsx b/pages/docs/index.page.tsx
@@ -39,7 +39,7 @@ export default function Welcome() {
           body='Our Getting Started guide walks you through the basics of JSON Schema.'
           headerSize='medium'
           bodyTextSize='small'
-          link='/learn/getting-started-step-by-step'
+          link='/learn'
         />
         <Card
           icon='/icons/book.svg'
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
@@ -257,7 +257,7 @@ const Home = (props: any) => {
 
             <div className='lg:w-[650px]  mx-auto my-10 grid grid-cols-1 lg:grid-cols-3 gap-8 justify-items-center '>
               <Link
-                href='/learn/getting-started-step-by-step'
+                href='/learn'
                 className='flex items-center justify-center rounded border-2 border-white dark:border-none hover:bg-blue-700 transition-all duration-300 ease-in-out text-white w-[194px] h-[40px] font-semibold bg-primary dark:shadow-2xl'
               >
                 Getting started
diff --git a/pages/learn/index.page.tsx b/pages/learn/index.page.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { getLayout } from '~/components/Sidebar';
+import Head from 'next/head';
+import { Headline1 } from '~/components/Headlines';
+import { SectionContext } from '~/context';
+import Card from '~/components/Card';
+import { DocsHelp } from '~/components/DocsHelp';
+
+export default function Welcome() {
+  const markdownFile = '_indexPage';
+
+  const newTitle = 'Getting Started';
+  return (
+    <SectionContext.Provider value='learn'>
+      <Head>
+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{newTitle}</Headline1>
+      <p>
+        New to JSON Schema and don't know where to start?
+        <br />
+        <br />
+      </p>
+      <div className='w-full lg:w-full grid grid-cols-1 sm:grid-cols-2 gap-6 my-[10px] mx-auto mt-8'>
+        <Card
+          title='Creating your first Schema'
+          body='Our Getting Started guide walks you through the basics of JSON Schema.'
+          headerSize='medium'
+          bodyTextSize='small'
+          extended={true}
+          link='/learn/getting-started-step-by-step'
+        />
+        <Card
+          title='Tour of JSON Schema'
+          body='An interactive introduction to JSON Schema. Each lesson concludes with an exercise, so you can practice what you have learned.'
+          headerSize='medium'
+          bodyTextSize='small'
+          extended={true}
+          link='https://tour.json-schema.org/'
+        />
+      </div>
+      <DocsHelp markdownFile={markdownFile} />
+    </SectionContext.Provider>
+  );
+}
+Welcome.getLayout = getLayout;

Original file line number	Diff line number	Diff line change
`@@ -257,7 +257,7 @@ const Home = (props: any) => {`
`257`	`257`
`258`	`258`	`<div className='lg:w-[650px] mx-auto my-10 grid grid-cols-1 lg:grid-cols-3 gap-8 justify-items-center '>`
`259`	`259`	`<Link`
`260`		`- href='/learn/getting-started-step-by-step'`
	`260`	`+ href='/learn'`
`261`	`261`	`className='flex items-center justify-center rounded border-2 border-white dark:border-none hover:bg-blue-700 transition-all duration-300 ease-in-out text-white w-[194px] h-[40px] font-semibold bg-primary dark:shadow-2xl'`
`262`	`262`	`>`
`263`	`263`	`Getting started`