Skip to content

Commit 087d54b

Browse files
jviottiDarhkVoyd
jviotti
and
DarhkVoyd
authored
Create a /pro-help page to promote the Contractors program (#1015)
* [WIP] Create a `/pro-help` page to promote the Contractors program See: https://github.com/orgs/json-schema-org/discussions/779 Signed-off-by: Juan Cruz Viotti <[email protected]> * Attempt load JSON file Signed-off-by: Juan Cruz Viotti <[email protected]> * Get JSON data Signed-off-by: Juan Cruz Viotti <[email protected]> * Styling Signed-off-by: Juan Cruz Viotti <[email protected]> * Update copy Signed-off-by: Juan Cruz Viotti <[email protected]> * Add front-page link Signed-off-by: Juan Cruz Viotti <[email protected]> * Add nav-bar link Signed-off-by: Juan Cruz Viotti <[email protected]> * fix linting errors, mobile layout and minor changes * fix build error * Update community once more Signed-off-by: Juan Cruz Viotti <[email protected]> * Move /pro-help link to sidebar Signed-off-by: Juan Cruz Viotti <[email protected]> --------- Signed-off-by: Juan Cruz Viotti <[email protected]> Co-authored-by: D V <[email protected]>
1 parent 72ae168 commit 087d54b

File tree

5 files changed

+226
-3
lines changed

5 files changed

+226
-3
lines changed

‎_includes/community

‎components/Sidebar.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,7 @@ export const DocsNav = ({
380380
setOpen={setOpen}
381381
/>
382382
<DocLink uri='/overview/faq' label='FAQ' setOpen={setOpen} />
383+
<DocLink uri='/pro-help' label='Pro Help' setOpen={setOpen} />
383384
<DocLink
384385
uri='/overview/similar-technologies'
385386
label='Similar Technologies'

‎context.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const SectionContext = React.createContext<
2121
| 'reference'
2222
| 'roadmap'
2323
| 'ambassador'
24+
| 'pro-help'
2425
>(null);
2526
export const BlockContext = React.createContext<BlockContextValue | null>(null);
2627
export const FullMarkdownContext = React.createContext<string | null>(null);

‎pages/index.page.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -515,13 +515,17 @@ const Home = (props: any) => {
515515
className='border-b border-black'
516516
>
517517
sponsor
518-
</a>{' '}
519-
or a{' '}
518+
</a>
519+
, a{' '}
520520
<a
521521
href='https://json-schema.org/overview/sponsors#benefits-of-being-an-individual-backer'
522522
className='border-b border-black '
523523
>
524524
backer
525+
</a>{' '}
526+
or hiring our{' '}
527+
<a href='/pro-help' className='border-b border-black'>
528+
pro services
525529
</a>
526530
.
527531
</p>

‎pages/pro-help/index.page.tsx

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import React from 'react';
2+
import fs from 'fs';
3+
import { getLayout } from '~/components/SiteLayout';
4+
import Head from 'next/head';
5+
import { Headline1 } from '~/components/Headlines';
6+
import { SectionContext } from '~/context';
7+
import { DocsHelp } from '~/components/DocsHelp';
8+
9+
interface ContractorLink {
10+
title: string;
11+
url: string;
12+
}
13+
14+
interface Contractor {
15+
name: string;
16+
bio: string;
17+
email?: string;
18+
website?: string;
19+
github: string;
20+
x?: string;
21+
mastodon?: string;
22+
linkedin?: string;
23+
incorporatedIn: string[];
24+
type: string;
25+
links: ContractorLink[];
26+
}
27+
28+
export async function getStaticProps() {
29+
const contractorData = JSON.parse(
30+
fs.readFileSync(
31+
'_includes/community/programs/contractors/contractors.json',
32+
'utf-8',
33+
),
34+
) as Contractor[];
35+
36+
return {
37+
props: {
38+
contractorData,
39+
},
40+
};
41+
}
42+
43+
interface ProHelpPageProps {
44+
contractorData: Contractor[];
45+
}
46+
47+
export default function ProHelp({ contractorData }: ProHelpPageProps) {
48+
const newTitle = 'Need pro help with JSON Schema?';
49+
50+
return (
51+
<SectionContext.Provider value='pro-help'>
52+
<Head>
53+
<title>{newTitle}</title>
54+
</Head>
55+
<div
56+
className='max-w-screen-xl block px-4 sm:px-6 lg:px-8 mt-12 mx-auto w-full'
57+
data-testid='pro-help'
58+
>
59+
<br />
60+
<div className='mt-6'>
61+
<Headline1>{newTitle}</Headline1>
62+
<p>
63+
Whether you need training, personalized advice, or custom JSON
64+
Schema solutions, some members of the JSON Schema Technical Steering
65+
Committee (TSC) and Ambassadors programs offer pro services beyond
66+
community support. Don't hesitate in reaching out to discuss
67+
further.
68+
</p>
69+
<br />
70+
<p className='italic'>
71+
Hiring our top contributors also helps funding the JSON Schema
72+
open-source organization, and as a consequence, the specifications
73+
that build on top of it, such as{' '}
74+
<a href='https://www.openapis.org' className='underline'>
75+
OpenAPI
76+
</a>
77+
,
78+
<a href='https://www.asyncapi.com' className='underline'>
79+
AsyncAPI
80+
</a>
81+
,
82+
<a href='https://raml.org' className='underline'>
83+
RAML
84+
</a>
85+
,
86+
<a href='https://www.w3.org/WoT/' className='underline'>
87+
W3C WoT
88+
</a>
89+
, and many more.
90+
</p>
91+
<br />
92+
<span className='font-bold text-[1.3rem]'>Available Members</span>
93+
<div className='w-full lg:w-full my-[10px] mx-auto mt-8 mb-8'>
94+
{contractorData.map((contractor) => (
95+
<div
96+
className='border border-solid border-gray-300 px-5 py-3'
97+
key={contractor.github}
98+
>
99+
<h1 className='text-xl mb-3 font-semibold'>
100+
{contractor.name}
101+
<span className='ms-4 border border-gray-200 text-base uppercase bg-zinc-200 px-2 py-1 rounded'>
102+
{contractor.type}
103+
</span>
104+
</h1>
105+
<div>
106+
{contractor.website && (
107+
<a
108+
className='text-sm underline me-8'
109+
href={contractor.website}
110+
target='blank'
111+
>
112+
<svg
113+
xmlns='http://www.w3.org/2000/svg'
114+
fill='none'
115+
viewBox='0 0 24 24'
116+
strokeWidth={1.5}
117+
stroke='currentColor'
118+
className='w-5 inline-block me-1'
119+
>
120+
<path
121+
strokeLinecap='round'
122+
strokeLinejoin='round'
123+
d='M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418'
124+
/>
125+
</svg>
126+
<span className='max-sm:hidden'>
127+
{contractor.website}
128+
</span>
129+
<span className='sm:hidden'>Homepage</span>
130+
</a>
131+
)}
132+
{contractor.linkedin && (
133+
<a
134+
className='text-sm underline me-8'
135+
href={`https://www.linkedin.com/in/${contractor.linkedin}`}
136+
target='blank'
137+
>
138+
<svg
139+
xmlns='http://www.w3.org/2000/svg'
140+
viewBox='0 0 448 512'
141+
strokeWidth={1.5}
142+
stroke='currentColor'
143+
className='w-5 inline-block me-1'
144+
>
145+
<path d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z' />
146+
</svg>
147+
<span className='max-sm:hidden'>
148+
{`https://www.linkedin.com/in/${contractor.linkedin}`}
149+
</span>
150+
<span className='sm:hidden'>/{contractor.linkedin}</span>
151+
</a>
152+
)}
153+
{contractor.github && (
154+
<a
155+
className='text-sm underline me-8'
156+
href={`https://github.com/${contractor.github}`}
157+
target='blank'
158+
>
159+
<svg
160+
xmlns='http://www.w3.org/2000/svg'
161+
viewBox='0 0 496 512'
162+
strokeWidth={1.5}
163+
stroke='currentColor'
164+
className='w-5 inline-block me-1'
165+
>
166+
<path d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z' />
167+
</svg>
168+
<span className='max-sm:hidden'>
169+
{`https://github.com/${contractor.github}`}
170+
</span>
171+
<span className='sm:hidden'>/{contractor.github}</span>
172+
</a>
173+
)}
174+
</div>
175+
<div className='flex mt-3 max-sm:flex max-sm:flex-col max-sm:gap-2 '>
176+
<div className='me-4 max-sm:flex max-sm:flex-col max-sm:items-center max-sm:gap-2'>
177+
<img
178+
src={`https://github.com/${contractor.github}.png`}
179+
className='border border-gray-400 max-sm:w-44'
180+
/>
181+
<a
182+
href={`mailto:${contractor.email}`}
183+
className='text-center mt-3 mb-2 block px-4 py-1 text-sm text-blue-700 font-semibold border border-blue-700 hover:text-white hover:bg-blue-700 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 max-sm:px-16'
184+
>
185+
Reach out
186+
</a>
187+
</div>
188+
<div className='text-sm'>
189+
<p>{contractor.bio}</p>
190+
<p className='my-3 font-bold'>
191+
Previous work and relevant links
192+
</p>
193+
<ul className='list-disc ms-4'>
194+
{contractor.links.map((link) => (
195+
<li className='my-2' key={link.url}>
196+
<a className='underline' href={link.url}>
197+
{link.title}
198+
</a>
199+
</li>
200+
))}
201+
</ul>
202+
</div>
203+
</div>
204+
</div>
205+
))}
206+
<br />
207+
<br />
208+
<br />
209+
</div>
210+
</div>
211+
<DocsHelp />
212+
</div>
213+
</SectionContext.Provider>
214+
);
215+
}
216+
217+
ProHelp.getLayout = getLayout;

0 commit comments

Comments
 (0)