Web release 3 (#655)

* Standardize List Display with Card Component (#433) (#460) * Standardize List Display with Card Component (#433) * Addressed comments, added images, and implemented new styles * Increased padding on the x-axis * feat: added Faq section (#534) * Fix faq * Added Case Studies page in Overview Section (#473) * updated UI of blog-page * Added Case Studies Page * fixed linting errors * Added casestudies * changing index.page.tsx * Delete components/CustomComponent.tsx * Delete pages/overview/casestudies.md * removed unnecessary changes * removed unnecessary files * fixed bug * removed changes * removed unnecessary files * Pushing last changes. --------- Co-authored-by: Benjamin Granados <[email protected]> * feat: added resource section (#509) * fixed * feat: added resource section * feat: added resource section * revert changes cd6d848 * revert changes 65e9f3e * revert changes 877b0f0 * revert changes 74711cd * fix: fixed the width issue * revert change * fix: added resource icon * Tiny changes to adjust look and feel. * Last changes to fix dark theme --------- Co-authored-by: Benjamin Granados <[email protected]> * Feat: Add the Newsletter feature to the website. (#489) * initialize the Test directory. * Added the subscribe button. * Added the subscribe page. * Added the newsletter page. * changed name to newsletter. * removed the unwated code. * removed the unwated components. * decreased the horizontal width and changed the color. * decreased the font size. * Added the changes for the newsletter banner. * Added the newletter component to landing page. * added the color for input. * Added the required horizontal padding. * Added the required horizontal padding. for newsletter page. * Add changes to make it work with mailchimp * added the yarn file back. * Added yarn.lock file. * Update yarn.lock * linted the newsletter.tsx * linted newsletter * fix the index.page * Small improvement in page layout. * Fix dark theme behavior * . --------- Co-authored-by: AyushNautiyalDeveloper <[email protected]> Co-authored-by: Benjamin Granados <[email protected]> * Added welcome page (#566) * added welcome page * Pushed some changes to changes - Better location in sidebar - Changes to move what is json schema into getting started - move page inside overview --------- Co-authored-by: Benjamin Granados <[email protected]> * 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 <[email protected]> * Change docs link * fix: spacing between buttons (#575) * docs: added definition of json hyper-schema * fixed * fix: spacing b/w buttons * fix: added spacing in mobile design * fix: spacing on tablet screen * fix: spacing on less than 300px screen * community-page (#646) * community-page * Some final changes for the community page --------- Co-authored-by: Benjamin Granados <[email protected]> * Update Sidebar.tsx * Add resources file * Update Sidebar.tsx * Update case-studies.json * Text colours for dark theme * New version of the implementers page * Feat: Replacing Axios to fs fetching in resources page (#657) * cleaning * changing axios to fs * Remove articles from sidebar --------- Co-authored-by: Benjamin Granados <[email protected]> * Improve Case Studies and Use Cases welcome messages * adding codeowners * Fixing bugs and adding back lost files * fix sidebar dropdown for FAQ * community page major changes and faq bug fix * community page bug fixes and responsive issues in several pages * Update index.page.tsx (#684) * Update index.page.tsx Edited the placeholder texts for the welcome page. * fixed lint error * Edited wordings for the Welcome page of release 3 * Update pages/overview/welcome/index.page.tsx Co-authored-by: Benjamin Granados <[email protected]> * Update pages/overview/welcome/index.page.tsx Co-authored-by: Benjamin Granados <[email protected]> * Remove data duplication and fix intro text --------- Co-authored-by: Benjamin Granados <[email protected]> Co-authored-by: Benjamin Granados <[email protected]> * Feat: Removing resources and newletter from web-release-3 branch (#698) * removing newsletter * removing resources * removing resources.yml file * removing resources from welcomee page --------- Co-authored-by: Benjamin Granados <[email protected]> * case-studies bug fix and hover delay fix * adding ts comment * Small corrections * Update blogs link * Ambassadors button aligned to the left * Feat: Fixing responsive bugs from community page * community page bug fixes * Added uses cases texts * Last changes to use-cases * Add html to the use cases definition * feat:adding html parser for use-cases page * removing links from images * improved FAQ description text (#709) * improved FAQ description text * Updated FAQ general questions * Updated FAQ description text for fix one-sentence bug * Update data/faq.json Co-authored-by: Benjamin Granados <[email protected]> * Update data/faq.json Co-authored-by: Benjamin Granados <[email protected]> * Update data/faq.json Co-authored-by: Benjamin Granados <[email protected]> * Update pages/overview/faq/index.page.tsx --------- Co-authored-by: Benjamin Granados <[email protected]> * Improvement for case studies * merge confilts * removing merge conflicts * Fix:community card gap * Align with main branch * Align with main branch * Align with main branch * Update pages/overview/what-is-jsonschema.md Co-authored-by: Ben Hutton <[email protected]> * Remove welcome data file * Move welcome outside overview section * Change welcome text * Feat: Replaced axios with fetch * moved path to function * Updating community filters * Update pages/community/index.page.tsx Co-authored-by: Ben Hutton <[email protected]> * Fix the menu links * Update the JSON Schema calendar link * Change ambassadors image --------- Co-authored-by: Michael Obubelebra Amachree <[email protected]> Co-authored-by: Akshay Bagai <[email protected]> Co-authored-by: Tamanna <[email protected]> Co-authored-by: Ayush Nautiyal <[email protected]> Co-authored-by: AyushNautiyalDeveloper <[email protected]> Co-authored-by: VivekJaiswal18 <[email protected]> Co-authored-by: Neeraj Saini <[email protected]> Co-authored-by: Dhairya Majmudar <[email protected]> Co-authored-by: Dhairya Majmudar <[email protected]> Co-authored-by: Blessing Ene Anyebe <[email protected]> Co-authored-by: Ben Hutton <[email protected]>
json-schema-org · Jul 24, 2024 · a58bd36 · a58bd36
1 parent aacf741
commit a58bd36
Show file tree

Hide file tree

Showing 101 changed files with 2,021 additions and 102 deletions.
diff --git a/components/Accordion.tsx b/components/Accordion.tsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+interface AccordionItem {
+  question: string;
+  answer: string;
+  id: number;
+}
+
+interface AccordionProps {
+  items: AccordionItem[];
+}
+
+const Accordion: React.FC<AccordionProps> = ({ items }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const router = useRouter();
+
+  const handleToggle = (index: number) => {
+    setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  useEffect(() => {
+    const hash = router.asPath.split('#')[1];
+    if (hash) {
+      const id = parseInt(hash, 10);
+      const index = items.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        setActiveIndex(index);
+
+        setTimeout(() => {
+          const element = document.getElementById(hash);
+          if (element) {
+            const navbarHeight = 150;
+            const offset = element.offsetTop - navbarHeight;
+            window.scrollTo({ top: offset, behavior: 'smooth' });
+          }
+        }, 0);
+      }
+    }
+  }, [items, router.asPath]);
+
+  const handleLinkClick = (id: number) => {
+    const index = items.findIndex((item) => item.id === id);
+    setActiveIndex(index);
+
+    const newUrl = `#${id}`;
+    router.push(newUrl, undefined, { shallow: true });
+  };
+
+  return (
+    <div>
+      {items.map((item, index) => (
+        <div
+          key={item.id || index}
+          className={`overflow-hidden transition-max-height border-t-2 ${
+            activeIndex === index ? 'max-h-96' : 'max-h-20'
+          } ${index === items.length - 1 ? 'border-b-2' : ''}`}
+        >
+          <div className='flex justify-between p-4 pl-2 cursor-pointer'>
+            <div className='text-[20px]'>
+              <a
+                href={`#${item.id}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleLinkClick(item.id);
+                }}
+              >
+                {item.question}
+              </a>
+            </div>
+            <div
+              className={`transform transition-transform duration-200 max-h-7 text-[20px] ${
+                activeIndex === index ? 'rotate-45' : ''
+              }`}
+              onClick={() => handleToggle(index)}
+            >
+              &#43;
+            </div>
+          </div>
+          {activeIndex === index && (
+            <div
+              id={`${item.id}`}
+              className='p-2 text-gray-500 dark:text-slate-200 pb-4'
+            >
+              {item.answer}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Accordion;
diff --git a/components/Card.tsx b/components/Card.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import Link from 'next/link';
+import TextTruncate from 'react-text-truncate';
+interface CardProps {
+  title: string;
+  body: string;
+  icon?: string;
+  link?: string;
+  image?: string;
+  extended?: boolean;
+  headerSize?: 'small' | 'medium' | 'large';
+  bodyTextSize?: 'small' | 'medium' | 'large';
+}
+
+const CardBody = ({
+  title,
+  body,
+  icon,
+  link,
+  image,
+  extended,
+  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 rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors ease-in-out hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30'>
+      <div className='flex justify-center '>
+        {image && <img src={image} className='h-32 p-2' />}
+      </div>
+      <div className='flex flex-row items-start mb-6'>
+        {icon && (
+          <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900 dark:text-white'>
+            <img src={icon} alt={title} className='h-full w-full' />
+          </span>
+        )}
+        <p
+          className={`mb-1 mt-1 items-center font-bold text-gray-900 dark:text-white ${headerSizeClasses[headerSize || 'medium']}`}
+        >
+          {title}
+        </p>
+      </div>
+      <hr className='mb-4 mt-3.5 h-px border-0 bg-gray-400' />
+      <p
+        className={`mb-8 text-black mt-5 dark:text-white  ${bodyTextSizeClasses[bodyTextSize || 'medium']} `}
+      >
+        {extended && <span dangerouslySetInnerHTML={{ __html: body }} />}
+        {!extended && <TextTruncate element='span' line={3} text={body} />}
+      </p>
+      {link && (
+        <p className='absolute bottom-3 right-5 font-medium opacity-0 transition-opacity delay-150 ease-in-out group-hover:opacity-100 text-black dark:text-white '>
+          Read More
+        </p>
+      )}
+    </div>
+  );
+};
+
+const Card: React.FC<CardProps> = ({
+  title,
+  body,
+  icon,
+  link,
+  image,
+  extended,
+  headerSize,
+  bodyTextSize,
+}) => {
+  return (
+    <>
+      {link ? (
+        <Link href={link}>
+          <CardBody
+            {...{
+              title,
+              body,
+              icon,
+              link,
+              image,
+              extended,
+              headerSize,
+              bodyTextSize,
+            }}
+          />
+        </Link>
+      ) : (
+        <CardBody
+          {...{
+            title,
+            body,
+            icon,
+            link,
+            image,
+            extended,
+            headerSize,
+            bodyTextSize,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default Card;
diff --git a/components/Faq.tsx b/components/Faq.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import faqData from '../data/faq.json';
+import Accordion from '~/components/Accordion';
+
+export default function Faq({ category }: { category: string }) {
+  const filteredFAQs = faqData.filter((item) => item.category === category);
+
+  return (
+    <section>
+      <div className='max-w-screen-md mx-auto p-8 px-0 ml-0'>
+        <h2 className='text-2xl font-bold text-[24px] mb-4'>
+          {category.toUpperCase()}
+        </h2>
+        <Accordion items={filteredFAQs} />
+      </div>
+    </section>
+  );
+}
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -41,8 +41,8 @@ export default function Layout({
   );
 
   useEffect(() => {
-    // Check if the URL contains "#community"
-    if (window.location.hash === '#community') {
+    // Check if the URL contains "community"
+    if (window.location.hash === 'community') {
       // Find the anchor element by its ID
       const target = document.getElementById('community');
 
@@ -198,7 +198,7 @@ const MainNavigation = () => {
       />
       <MainNavLink
         className='hidden lg:block hover:underline'
-        uri='/learn/getting-started-step-by-step'
+        uri='/docs'
         label='Docs'
         isActive={section === 'docs'}
       />
@@ -217,12 +217,12 @@ const MainNavigation = () => {
       />
       <MainNavLink
         className='hidden lg:block hover:underline'
-        uri='/#community'
+        uri='/community'
         label='Community'
         isActive={section === 'community'}
       />
 
-      <div className='flex items-center max-sm:ml-4 mr-8  gap-6 md:gap-4 dark:bg-slate-800'>
+      <div className='flex items-center max-sm:ml-4 mr-8 gap-6 md:gap-4 dark:bg-slate-800'>
         <div
           className={`rounded-md dark:hover:bg-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150  md:block border-gray-100 ml-0  ${icon}`}
           onClick={() => {
@@ -301,7 +301,7 @@ const MobileNav = () => {
       />
       <MainNavLink uri='/blog' label='Blog' isActive={section === 'blog'} />
       <MainNavLink
-        uri='/#community'
+        uri='/community'
         label='Community'
         isActive={section === 'community'}
       />

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -91,8 +91,11 @@ const SegmentSubtitle = ({ label }: { label: string }) => {
 const getDocsPath = [
   '/overview/what-is-jsonschema',
   '/overview/sponsors',
+  '/overview/case-studies',
   '/overview/similar-technologies',
+  '/overview/use-cases',
   '/overview/code-of-conduct',
+  '/overview/faq',
 ];
 const getStartedPath = [
   '/learn/json-schema-examples',
@@ -140,6 +143,7 @@ const getSpecificationPath = [
   '/specification-links',
   '/specification',
 ];
+
 export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -214,7 +218,6 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
             <DocsNav open={open} setOpen={setOpen} />
           </div>
         </div>
-
         <div className='dark:bg-slate-800 max-w-[1400px] grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12'>
           <div className='hidden lg:block mt-24'>
             <DocsNav open={open} setOpen={setOpen} />
@@ -287,7 +290,6 @@ export const DocsNav = ({
   const [reference_icon, setReference_icon] = useState('');
   const [spec_icon, setSpec_icon] = useState('');
   const [overview_icon, setOverview_icon] = useState('');
-
   useEffect(() => {
     if (resolvedTheme === 'dark') {
       setOverview_icon('/icons/eye-dark.svg');
@@ -348,6 +350,17 @@ export const DocsNav = ({
             label='Sponsors'
             setOpen={setOpen}
           />
+          <DocLink
+            uri='/overview/use-cases'
+            label='Use Cases'
+            setOpen={setOpen}
+          />
+          <DocLink
+            uri='/overview/case-studies'
+            label='Case Studies'
+            setOpen={setOpen}
+          />
+          <DocLink uri='/overview/faq' label='FAQ' setOpen={setOpen} />
           <DocLink
             uri='/overview/similar-technologies'
             label='Similar Technologies'

diff --git a/data/case-studies.json b/data/case-studies.json
@@ -0,0 +1,65 @@
+[
+  {
+    "title": "How JSON Schema Was an Obvious Choice at GitHub",
+    "summary": "At GitHub's Docs Engineering team, while shipping releases to production 20 times per day or more, JSON Schema is critical in increasing confidence in changes to data, content and APIs.",
+    "logo": "/img/logos/github-logo.png",
+    "links": {
+      "lang": "URL1",
+      "url": "/blog/posts/github-case-study"
+    }
+  },
+  {
+    "title": "How 6 River Systems saves time and boosts collaboration with JSON Schema",
+    "summary": "Explore the powerful impact of JSON Schema on 6 River Systems' fulfillment operations. Discover how they enabled enhanced collaboration, time savings, and data quality assurance, propelling their successful scaling journey.",
+    "logo": "/img/logos/6river-logo.svg",
+    "links": {
+      "lang": "URL1",
+      "url": "/blog/posts/6-river-systems-case-study"
+    }
+  },
+  {
+    "title": "Transforming the technical recruiting industry with JSON Schema",
+    "summary": "Learn how Manfred used JSON Schema to transform the technical recruiting industry.",
+    "logo": "/img/logos/manfred-color.svg",
+    "links": {
+      "lang": "URL1",
+      "url": "/blog/posts/manfred-case-study"
+    }
+  },
+  {
+    "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",
+    "links": {
+      "lang": "URL1",
+      "url": "/blog/posts/postman-case-study"
+    }
+  },
+  {
+    "title": "Using JSON Schema at Remote to scale forms and data validations",
+    "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",
+    "links": {
+      "lang": "URL1",
+      "url": "/blog/posts/remote-case-study"
+    }
+  },
+  {
+    "title": "How Tyler Technologies reduced its client feedback loop with JSON Schema",
+    "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",
+    "links": {
+      "lang": "URL1",
+      "url": "/blog/posts/tyler-technologies-case-study"
+    }
+  },
+  {
+    "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",
+    "links": {
+      "lang": "URL1",
+      "url": "/blog/posts/w3c-wot-case-study"
+    }
+  }
+]