Added Use-cases page (#589)

* added use-cases page, modified card component * fix * Added some changes to better merge with the dev branch. --------- Co-authored-by: Benjamin Granados <benjamin.granadosm@gmail.com>
json-schema-org · Apr 8, 2024 · 3647457 · 3647457
1 parent 8a32db3
commit 3647457
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 17 deletions.
diff --git a/components/Card.tsx b/components/Card.tsx
@@ -7,9 +7,29 @@ interface CardProps {
   icon?: string;
   link?: string;
   image?: string;
+  headerSize?: 'small' | 'medium' | 'large';
+  bodyTextSize?: 'small' | 'medium' | 'large';
 }
 
-const CardBody = ({ title, body, icon, link, image }: CardProps) => {
+const CardBody = ({
+  title,
+  body,
+  icon,
+  link,
+  image,
+  headerSize,
+  bodyTextSize,
+}: CardProps) => {
+  const headerSizeClasses: Record<string, string> = {
+    small: 'text-[0.9rem]',
+    medium: 'text-[1.3rem]',
+    large: 'text-[2rem]',
+  };
+  const bodyTextSizeClasses: Record<string, string> = {
+    small: 'text-[0.85rem]',
+    medium: 'text-[1rem]',
+    large: 'text-[1.5rem]',
+  };
   return (
     <div className='group relative h-full w-full max-w-lg rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl transition-colors delay-[150ms] ease-in-out hover:bg-slate-100'>
       <div className='flex justify-center '>
@@ -21,12 +41,16 @@ const CardBody = ({ title, body, icon, link, image }: CardProps) => {
             <img src={icon} alt={title} className='h-full w-full' />
           </span>
         )}
-        <p className='mt-1 items-center text-[0.9rem] font-bold text-gray-900'>
+        <p
+          className={`mb-1 mt-1 items-center font-bold text-gray-900 ${headerSizeClasses[headerSize || 'medium']}`}
+        >
           {title}
         </p>
       </div>
       <hr className='mb-4 mt-3.5 h-px border-0 bg-gray-400' />
-      <p className='text-lg mb-8 mt-5 dark:text-gray-800'>
+      <p
+        className={`mb-8 mt-5 ${bodyTextSizeClasses[bodyTextSize || 'medium']} `}
+      >
         <TextTruncate element='span' line={3} text={body} />
       </p>
       {link && (
@@ -38,15 +62,27 @@ const CardBody = ({ title, body, icon, link, image }: CardProps) => {
   );
 };
 
-const Card: React.FC<CardProps> = ({ title, body, icon, link, image }) => {
+const Card: React.FC<CardProps> = ({
+  title,
+  body,
+  icon,
+  link,
+  image,
+  headerSize,
+  bodyTextSize,
+}) => {
   return (
     <>
       {link ? (
         <Link href={link}>
-          <CardBody {...{ title, body, icon, link, image }} />
+          <CardBody
+            {...{ title, body, icon, link, image, headerSize, bodyTextSize }}
+          />
         </Link>
       ) : (
-        <CardBody {...{ title, body, icon, link, image }} />
+        <CardBody
+          {...{ title, body, icon, link, image, headerSize, bodyTextSize }}
+        />
       )}
     </>
   );

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -75,8 +75,9 @@ const getDocsPath = [
   '/overview/welcome',
   '/overview/what-is-jsonschema',
   '/overview/sponsors',
-  '/overview/casestudies',
+  '/overview/case-studies',
   '/overview/similar-technologies',
+  '/overview/use-cases',
   '/overview/code-of-conduct',
   '/overview/FAQ',
 ];
@@ -335,14 +336,19 @@ export const DocsNav = () => {
           id='overview'
         >
           <DocLink uri='/overview/welcome' label='Welcome' />
+          <DocLink
+            uri='/overview/what-is-jsonschema'
+            label='What is JSON Schema?'
+          />
           <DocLink uri='/overview/sponsors' label='Sponsors' />
-          <DocLink uri='/overview/casestudies' label='Case Studies' />
+          <DocLink uri='/overview/use-cases' label='Use Cases' />
+          <DocLink uri='/overview/case-studies' label='Case Studies' />
+          <DocLink uri='/overview/faq' label='FAQ' />
           <DocLink
             uri='/overview/similar-technologies'
             label='Similar Technologies'
           />
           <DocLink uri='/overview/code-of-conduct' label='Code of Conduct' />
-          <DocLink uri='/overview/faq' label='FAQ' />
         </div>
       </div>
       {/* Get Started */}
@@ -377,10 +383,6 @@ export const DocsNav = () => {
           className={classnames('ml-6', { hidden: !active.getStarted })}
           id='getStarted'
         >
-          <DocLink
-            uri='/overview/what-is-jsonschema'
-            label='What is JSON Schema?'
-          />
           <DocLink
             uri='/learn/getting-started-step-by-step'
             label='Creating your first schema'
@@ -617,7 +619,7 @@ export const DocsNav = () => {
               alt='eye icon'
               className='mr-2 w-6'
             />
-            <SegmentHeadline label='Resources' />
+            <SegmentHeadline label='Other Resources' />
           </div>
           <svg
             id='arrow'

diff --git a/data/casestudies.json → data/case-studies.json b/data/casestudies.json → data/case-studies.json
diff --git a/data/use-cases.json b/data/use-cases.json
@@ -0,0 +1,36 @@
+[
+  {
+    "title": "JSON Schema oihgfewrnrnvon ",
+    "summary": "At GitHub's Docs Engineering team, while shipping releases to production 20 times per day."
+  },
+  {
+    "title": "How JSON Schema",
+    "summary": "Explore the powerful impact of JSON Schema on 6 River Systems' fulfillment operations.",
+    "logo": "/img/logos/6river-logo.svg"
+  },
+  {
+    "title": "Transform the Schema",
+    "summary": "Explore the powerful impact of JSON Schema on 6 River Systems' fulfillment operations.",
+    "logo": "/img/logos/manfred-color.svg"
+  },
+  {
+    "title": "How Postman uses JSON Schema",
+    "summary": "Learn how JSON Schema continues to be a crucial component of the Postman API Platform and the API ecosystem.",
+    "logo": "/img/logos/sponsors/Postman_logo-orange.svg"
+  },
+  {
+    "title": "Using JSON Schema at Remote to",
+    "summary": "Using JSON Schema at Remote was the first step to solving data validation and form generation problems across all levels at Remote.",
+    "logo": "/img/logos/remote-logo.png"
+  },
+  {
+    "title": "How Tyler Technologies reduced ",
+    "summary": "Using JSON Schema at Tyler Technologies meant showing added value to clients could take minutes rather than days or in some cases weeks.",
+    "logo": "/img/logos/tyler-tech-logo.svg"
+  },
+  {
+    "title": "How the W3C Web of Things brings JSON Schema to the Internet of Things",
+    "summary": "Using JSON Schema at the W3C Web of Things to create an interoperability layer so that different IoT platforms, protocols and standards can operate together",
+    "logo": "/img/logos/wot-logo.png"
+  }
+]
diff --git a/pages/overview/casestudies/index.page.tsx → pages/overview/case-studies/index.page.tsx b/pages/overview/casestudies/index.page.tsx → pages/overview/case-studies/index.page.tsx
@@ -3,7 +3,7 @@ import { getLayout } from '~/components/Sidebar';
 import Head from 'next/head';
 import { Headline1 } from '~/components/Headlines';
 import { SectionContext } from '~/context';
-import data from 'data/casestudies.json';
+import data from 'data/case-studies.json';
 import Card from '~/components/Card';
 
 export default function ContentExample() {

diff --git a/pages/overview/use-cases/index.page.tsx b/pages/overview/use-cases/index.page.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { getLayout } from '~/components/Sidebar';
+import Head from 'next/head';
+import { SectionContext } from '~/context';
+import { Headline1 } from '~/components/Headlines';
+import Card from '~/components/Card';
+import data from '~/data/use-cases.json';
+
+export default function Content() {
+  const newTitle = 'Use Cases';
+
+  return (
+    <SectionContext.Provider value='docs'>
+      <Head>
+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{newTitle}</Headline1>
+      <p>
+        Welcome to the land of streamlined data! JSON Schema unlocks incredible
+        potential for all your projects. Explore real-world applications
+        showcasing how this powerful tool simplifies data management, ensures
+        consistency, and fosters seamless data exchange across applications. See
+        how JSON Schema empowers you to build robust data structures, saving
+        time and minimizing errors.
+      </p>
+      <div className='w-full lg:w-full grid grid-cols-1 md:grid-cols-3 gap-6 my-[10px] mx-auto mt-8'>
+        {data.map((element, index) => (
+          <Card
+            key={index}
+            title={element.title}
+            body={element.summary}
+            headerSize={'medium'}
+            bodyTextSize={'small'}
+          />
+        ))}
+      </div>
+    </SectionContext.Provider>
+  );
+}
+Content.getLayout = getLayout;
diff --git a/pages/overview/welcome/index.page.tsx b/pages/overview/welcome/index.page.tsx
@@ -48,6 +48,16 @@ export default function Welcome() {
         url: '/specification',
       },
     },
+    {
+      title: 'Other Resources',
+      summary:
+        'Deserunt et fugiat do adipisicing enim in nostrud Lorem anim ut amet enim.',
+      logo: '/icons/bookshelf.svg',
+      links: {
+        lang: 'URL1',
+        url: '/resources/books',
+      },
+    },
   ];
   return (
     <SectionContext.Provider value='docs'>

diff --git a/pages/resources/[slug].page.tsx b/pages/resources/[slug].page.tsx
@@ -87,11 +87,11 @@ export default function ResourcePageComponent({ data }: { data: DataProps }) {
                 href={item.url}
                 target='_blank'
                 rel='noreferrer'
-                className='text-xl text-blue-500 underline mb-2'
+                className='text-[14px] text-blue-500 underline mb-2'
               >
                 {item.title}
               </a>
-              <p className='mt-2'>{item.summary}</p>
+              <p className='text-[14px] mt-2'>{item.summary}</p>
             </div>
           ))}
       </div>