Skip to content

Commit a58bd36

Browse files
benjagmMichael-ObeleAkshaybagai52TamannaVerma99ayushnau
authored
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]>
1 parent aacf741 commit a58bd36

File tree

101 files changed

+2021
-102
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+2021
-102
lines changed

‎components/Accordion.tsx

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { useRouter } from 'next/router';
3+
4+
interface AccordionItem {
5+
question: string;
6+
answer: string;
7+
id: number;
8+
}
9+
10+
interface AccordionProps {
11+
items: AccordionItem[];
12+
}
13+
14+
const Accordion: React.FC<AccordionProps> = ({ items }) => {
15+
const [activeIndex, setActiveIndex] = useState<number | null>(null);
16+
const router = useRouter();
17+
18+
const handleToggle = (index: number) => {
19+
setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
20+
};
21+
22+
useEffect(() => {
23+
const hash = router.asPath.split('#')[1];
24+
if (hash) {
25+
const id = parseInt(hash, 10);
26+
const index = items.findIndex((item) => item.id === id);
27+
if (index !== -1) {
28+
setActiveIndex(index);
29+
30+
setTimeout(() => {
31+
const element = document.getElementById(hash);
32+
if (element) {
33+
const navbarHeight = 150;
34+
const offset = element.offsetTop - navbarHeight;
35+
window.scrollTo({ top: offset, behavior: 'smooth' });
36+
}
37+
}, 0);
38+
}
39+
}
40+
}, [items, router.asPath]);
41+
42+
const handleLinkClick = (id: number) => {
43+
const index = items.findIndex((item) => item.id === id);
44+
setActiveIndex(index);
45+
46+
const newUrl = `#${id}`;
47+
router.push(newUrl, undefined, { shallow: true });
48+
};
49+
50+
return (
51+
<div>
52+
{items.map((item, index) => (
53+
<div
54+
key={item.id || index}
55+
className={`overflow-hidden transition-max-height border-t-2 ${
56+
activeIndex === index ? 'max-h-96' : 'max-h-20'
57+
} ${index === items.length - 1 ? 'border-b-2' : ''}`}
58+
>
59+
<div className='flex justify-between p-4 pl-2 cursor-pointer'>
60+
<div className='text-[20px]'>
61+
<a
62+
href={`#${item.id}`}
63+
onClick={(e) => {
64+
e.preventDefault();
65+
handleLinkClick(item.id);
66+
}}
67+
>
68+
{item.question}
69+
</a>
70+
</div>
71+
<div
72+
className={`transform transition-transform duration-200 max-h-7 text-[20px] ${
73+
activeIndex === index ? 'rotate-45' : ''
74+
}`}
75+
onClick={() => handleToggle(index)}
76+
>
77+
&#43;
78+
</div>
79+
</div>
80+
{activeIndex === index && (
81+
<div
82+
id={`${item.id}`}
83+
className='p-2 text-gray-500 dark:text-slate-200 pb-4'
84+
>
85+
{item.answer}
86+
</div>
87+
)}
88+
</div>
89+
))}
90+
</div>
91+
);
92+
};
93+
94+
export default Accordion;

‎components/Card.tsx

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
import Link from 'next/link';
3+
import TextTruncate from 'react-text-truncate';
4+
interface CardProps {
5+
title: string;
6+
body: string;
7+
icon?: string;
8+
link?: string;
9+
image?: string;
10+
extended?: boolean;
11+
headerSize?: 'small' | 'medium' | 'large';
12+
bodyTextSize?: 'small' | 'medium' | 'large';
13+
}
14+
15+
const CardBody = ({
16+
title,
17+
body,
18+
icon,
19+
link,
20+
image,
21+
extended,
22+
headerSize,
23+
bodyTextSize,
24+
}: CardProps) => {
25+
const headerSizeClasses: Record<string, string> = {
26+
small: 'text-[0.9rem]',
27+
medium: 'text-[1.3rem]',
28+
large: 'text-[2rem]',
29+
};
30+
const bodyTextSizeClasses: Record<string, string> = {
31+
small: 'text-[0.85rem]',
32+
medium: 'text-[1rem]',
33+
large: 'text-[1.5rem]',
34+
};
35+
return (
36+
<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'>
37+
<div className='flex justify-center '>
38+
{image && <img src={image} className='h-32 p-2' />}
39+
</div>
40+
<div className='flex flex-row items-start mb-6'>
41+
{icon && (
42+
<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'>
43+
<img src={icon} alt={title} className='h-full w-full' />
44+
</span>
45+
)}
46+
<p
47+
className={`mb-1 mt-1 items-center font-bold text-gray-900 dark:text-white ${headerSizeClasses[headerSize || 'medium']}`}
48+
>
49+
{title}
50+
</p>
51+
</div>
52+
<hr className='mb-4 mt-3.5 h-px border-0 bg-gray-400' />
53+
<p
54+
className={`mb-8 text-black mt-5 dark:text-white ${bodyTextSizeClasses[bodyTextSize || 'medium']} `}
55+
>
56+
{extended && <span dangerouslySetInnerHTML={{ __html: body }} />}
57+
{!extended && <TextTruncate element='span' line={3} text={body} />}
58+
</p>
59+
{link && (
60+
<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 '>
61+
Read More
62+
</p>
63+
)}
64+
</div>
65+
);
66+
};
67+
68+
const Card: React.FC<CardProps> = ({
69+
title,
70+
body,
71+
icon,
72+
link,
73+
image,
74+
extended,
75+
headerSize,
76+
bodyTextSize,
77+
}) => {
78+
return (
79+
<>
80+
{link ? (
81+
<Link href={link}>
82+
<CardBody
83+
{...{
84+
title,
85+
body,
86+
icon,
87+
link,
88+
image,
89+
extended,
90+
headerSize,
91+
bodyTextSize,
92+
}}
93+
/>
94+
</Link>
95+
) : (
96+
<CardBody
97+
{...{
98+
title,
99+
body,
100+
icon,
101+
link,
102+
image,
103+
extended,
104+
headerSize,
105+
bodyTextSize,
106+
}}
107+
/>
108+
)}
109+
</>
110+
);
111+
};
112+
113+
export default Card;

‎components/Faq.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import faqData from '../data/faq.json';
3+
import Accordion from '~/components/Accordion';
4+
5+
export default function Faq({ category }: { category: string }) {
6+
const filteredFAQs = faqData.filter((item) => item.category === category);
7+
8+
return (
9+
<section>
10+
<div className='max-w-screen-md mx-auto p-8 px-0 ml-0'>
11+
<h2 className='text-2xl font-bold text-[24px] mb-4'>
12+
{category.toUpperCase()}
13+
</h2>
14+
<Accordion items={filteredFAQs} />
15+
</div>
16+
</section>
17+
);
18+
}

‎components/Layout.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ export default function Layout({
4141
);
4242

4343
useEffect(() => {
44-
// Check if the URL contains "#community"
45-
if (window.location.hash === '#community') {
44+
// Check if the URL contains "community"
45+
if (window.location.hash === 'community') {
4646
// Find the anchor element by its ID
4747
const target = document.getElementById('community');
4848

@@ -198,7 +198,7 @@ const MainNavigation = () => {
198198
/>
199199
<MainNavLink
200200
className='hidden lg:block hover:underline'
201-
uri='/learn/getting-started-step-by-step'
201+
uri='/docs'
202202
label='Docs'
203203
isActive={section === 'docs'}
204204
/>
@@ -217,12 +217,12 @@ const MainNavigation = () => {
217217
/>
218218
<MainNavLink
219219
className='hidden lg:block hover:underline'
220-
uri='/#community'
220+
uri='/community'
221221
label='Community'
222222
isActive={section === 'community'}
223223
/>
224224

225-
<div className='flex items-center max-sm:ml-4 mr-8 gap-6 md:gap-4 dark:bg-slate-800'>
225+
<div className='flex items-center max-sm:ml-4 mr-8 gap-6 md:gap-4 dark:bg-slate-800'>
226226
<div
227227
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}`}
228228
onClick={() => {
@@ -301,7 +301,7 @@ const MobileNav = () => {
301301
/>
302302
<MainNavLink uri='/blog' label='Blog' isActive={section === 'blog'} />
303303
<MainNavLink
304-
uri='/#community'
304+
uri='/community'
305305
label='Community'
306306
isActive={section === 'community'}
307307
/>

‎components/Sidebar.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,11 @@ const SegmentSubtitle = ({ label }: { label: string }) => {
9191
const getDocsPath = [
9292
'/overview/what-is-jsonschema',
9393
'/overview/sponsors',
94+
'/overview/case-studies',
9495
'/overview/similar-technologies',
96+
'/overview/use-cases',
9597
'/overview/code-of-conduct',
98+
'/overview/faq',
9699
];
97100
const getStartedPath = [
98101
'/learn/json-schema-examples',
@@ -140,6 +143,7 @@ const getSpecificationPath = [
140143
'/specification-links',
141144
'/specification',
142145
];
146+
143147
export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
144148
const router = useRouter();
145149
const [open, setOpen] = useState(false);
@@ -214,7 +218,6 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
214218
<DocsNav open={open} setOpen={setOpen} />
215219
</div>
216220
</div>
217-
218221
<div className='dark:bg-slate-800 max-w-[1400px] grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12'>
219222
<div className='hidden lg:block mt-24'>
220223
<DocsNav open={open} setOpen={setOpen} />
@@ -287,7 +290,6 @@ export const DocsNav = ({
287290
const [reference_icon, setReference_icon] = useState('');
288291
const [spec_icon, setSpec_icon] = useState('');
289292
const [overview_icon, setOverview_icon] = useState('');
290-
291293
useEffect(() => {
292294
if (resolvedTheme === 'dark') {
293295
setOverview_icon('/icons/eye-dark.svg');
@@ -348,6 +350,17 @@ export const DocsNav = ({
348350
label='Sponsors'
349351
setOpen={setOpen}
350352
/>
353+
<DocLink
354+
uri='/overview/use-cases'
355+
label='Use Cases'
356+
setOpen={setOpen}
357+
/>
358+
<DocLink
359+
uri='/overview/case-studies'
360+
label='Case Studies'
361+
setOpen={setOpen}
362+
/>
363+
<DocLink uri='/overview/faq' label='FAQ' setOpen={setOpen} />
351364
<DocLink
352365
uri='/overview/similar-technologies'
353366
label='Similar Technologies'

‎data/case-studies.json

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
[
2+
{
3+
"title": "How JSON Schema Was an Obvious Choice at GitHub",
4+
"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.",
5+
"logo": "/img/logos/github-logo.png",
6+
"links": {
7+
"lang": "URL1",
8+
"url": "/blog/posts/github-case-study"
9+
}
10+
},
11+
{
12+
"title": "How 6 River Systems saves time and boosts collaboration with JSON Schema",
13+
"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.",
14+
"logo": "/img/logos/6river-logo.svg",
15+
"links": {
16+
"lang": "URL1",
17+
"url": "/blog/posts/6-river-systems-case-study"
18+
}
19+
},
20+
{
21+
"title": "Transforming the technical recruiting industry with JSON Schema",
22+
"summary": "Learn how Manfred used JSON Schema to transform the technical recruiting industry.",
23+
"logo": "/img/logos/manfred-color.svg",
24+
"links": {
25+
"lang": "URL1",
26+
"url": "/blog/posts/manfred-case-study"
27+
}
28+
},
29+
{
30+
"title": "How Postman uses JSON Schema",
31+
"summary": "Learn how JSON Schema continues to be a crucial component of the Postman API Platform and the API ecosystem.",
32+
"logo": "/img/logos/sponsors/postman_logo-orange.svg",
33+
"links": {
34+
"lang": "URL1",
35+
"url": "/blog/posts/postman-case-study"
36+
}
37+
},
38+
{
39+
"title": "Using JSON Schema at Remote to scale forms and data validations",
40+
"summary": "Using JSON Schema at Remote was the first step to solving data validation and form generation problems across all levels at Remote.",
41+
"logo": "/img/logos/remote-logo.png",
42+
"links": {
43+
"lang": "URL1",
44+
"url": "/blog/posts/remote-case-study"
45+
}
46+
},
47+
{
48+
"title": "How Tyler Technologies reduced its client feedback loop with JSON Schema",
49+
"summary": "Using JSON Schema at Tyler Technologies meant showing added value to clients could take minutes rather than days or in some cases weeks.",
50+
"logo": "/img/logos/tyler-tech-logo.svg",
51+
"links": {
52+
"lang": "URL1",
53+
"url": "/blog/posts/tyler-technologies-case-study"
54+
}
55+
},
56+
{
57+
"title": "How the W3C Web of Things brings JSON Schema to the Internet of Things",
58+
"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.",
59+
"logo": "/img/logos/wot-logo.png",
60+
"links": {
61+
"lang": "URL1",
62+
"url": "/blog/posts/w3c-wot-case-study"
63+
}
64+
}
65+
]

0 commit comments

Comments
 (0)