Skip to content

Commit 5c0ef1b

Browse files
rishabhknowssbenjagm
rishabhknowss
and
benjagm
authored
Enhancement: Roadmap page for the Overview section (#1021)
* Roadmap page for the Overview section * added themes and fixed routing * build fix * changes * updated package.json * fix build * added safelist * changes ui * fix build * Update components/Sidebar.tsx Co-authored-by: Benjamin Granados <[email protected]> * Update pages/overview/roadmap/index.page.tsx Co-authored-by: Benjamin Granados <[email protected]> * updated ui * fixes purgeCSS * Change roadmap position in sidebar * Fix formatting --------- Co-authored-by: Benjamin Granados <[email protected]>
1 parent ee47a4e commit 5c0ef1b

File tree

6 files changed

+174
-34
lines changed

6 files changed

+174
-34
lines changed

‎components/Sidebar.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ const getDocsPath = [
109109
'/overview/use-cases',
110110
'/overview/code-of-conduct',
111111
'/overview/faq',
112+
'/overview/roadmap',
112113
];
113114
const getStartedPath = [
114115
'/learn',
@@ -362,6 +363,7 @@ export const DocsNav = ({
362363
label='What is JSON Schema?'
363364
setOpen={setOpen}
364365
/>
366+
<DocLink uri='/overview/roadmap' label='Roadmap' setOpen={setOpen} />
365367
<DocLink
366368
uri='/overview/sponsors'
367369
label='Sponsors'

‎context.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const SectionContext = React.createContext<
1919
| 'overview'
2020
| 'getting-started'
2121
| 'reference'
22+
| 'roadmap'
2223
>(null);
2324
export const BlockContext = React.createContext<BlockContextValue | null>(null);
2425
export const FullMarkdownContext = React.createContext<string | null>(null);

‎next-env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/basic-features/typescript for more information.
5+
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

‎pages/community/index.page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ export default function communityPages(props: any) {
216216
body='Explore our exciting plans and upcoming milestones. 🚀'
217217
headerSize='large'
218218
bodyTextSize='medium'
219-
link='https://github.com/orgs/json-schema-org/discussions/427'
219+
link='/overview/roadmap'
220220
/>
221221
<Card
222222
key='contribute'

‎pages/overview/roadmap/index.page.tsx

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React from 'react';
2+
import { DocsHelp } from '~/components/DocsHelp';
3+
import { getLayout } from '~/components/Sidebar';
4+
import Head from 'next/head';
5+
import { Headline1 } from '~/components/Headlines';
6+
import { SectionContext } from '~/context';
7+
import roadmap from '~/data/roadmap.json';
8+
9+
const statusColors = {
10+
'In Progress': 'bg-green-600 text-white dark:bg-green-500',
11+
Done: 'bg-purple-600 text-white dark:bg-purple-500',
12+
Planned: 'bg-blue-600 text-white dark:bg-blue-500',
13+
Paused: 'bg-red-600 text-white dark:bg-red-500',
14+
Deferred: 'bg-blue-600 text-white dark:bg-blue-500',
15+
Unknown: 'bg-gray-600 text-white dark:bg-gray-500',
16+
};
17+
18+
const effortColors = {
19+
Low: 'bg-green-600 text-white dark:bg-green-500',
20+
Medium: 'bg-yellow-600 text-white dark:bg-yellow-500',
21+
High: 'bg-red-600 text-white dark:bg-red-500',
22+
'Low-medium': 'bg-green-600 text-white dark:bg-green-500',
23+
Unknown: 'bg-gray-600 text-white dark:bg-gray-500',
24+
};
25+
26+
const impactColors = {
27+
Low: 'bg-red-600 text-white dark:bg-red-500',
28+
Medium: 'bg-yellow-600 text-white dark:bg-yellow-500',
29+
High: 'bg-green-600 text-white dark:bg-green-500',
30+
'Medium-high': 'bg-yellow-600 text-white dark:bg-yellow-500',
31+
'Low-medium': 'bg-red-600 text-white dark:bg-red-500',
32+
Unknown: 'bg-gray-600 text-white dark:bg-gray-500',
33+
};
34+
35+
export default function Roadmap() {
36+
const newTitle = 'JSON Schema Roadmap';
37+
const markdownFile = '_indexPage';
38+
39+
return (
40+
<SectionContext.Provider value='docs'>
41+
<Head>
42+
<title>{newTitle}</title>
43+
</Head>
44+
<Headline1>{newTitle}</Headline1>
45+
<div className='text-md'>
46+
Our "Roadmap" section displays our key objectives for the long term.
47+
While this roadmap provides a detailed outlook for the near future,
48+
please note that it might be subject to change. In fact, we are
49+
currently{' '}
50+
<a
51+
className='text-blue-600 underline'
52+
href='https://github.com/orgs/json-schema-org/discussions/813'
53+
>
54+
discussing
55+
</a>{' '}
56+
the new priorities for the next 24-month cycle, which will lead to
57+
relevant changes. Please consider joining the discussion to become an
58+
active part of JSON Schema's future!
59+
</div>
60+
<div className='text-gray-900 dark:text-white'>
61+
<div className='container mt-14 mx-auto px-4'>
62+
<div className='relative'>
63+
<div className='absolute left-0 top-0 bottom-0 w-0.5 bg-blue-600'></div>
64+
65+
{roadmap.map((item) => {
66+
const status =
67+
item.fieldValues.nodes.find(
68+
(node) => node.field?.name === 'Status',
69+
)?.name || 'Unknown';
70+
const category =
71+
item.fieldValues.nodes.find(
72+
(node) => node.field?.name === 'Category',
73+
)?.name || 'Uncategorized';
74+
const effort =
75+
item.fieldValues.nodes.find(
76+
(node) => node.field?.name === 'Effort',
77+
)?.name || 'Unknown';
78+
const impact =
79+
item.fieldValues.nodes.find(
80+
(node) => node.field?.name === 'Impact',
81+
)?.name || 'Unknown';
82+
83+
const effortClass =
84+
effortColors[effort as keyof typeof effortColors] ||
85+
effortColors['Unknown'];
86+
const impactClass =
87+
impactColors[impact as keyof typeof impactColors] ||
88+
impactColors['Unknown'];
89+
const statusClass =
90+
statusColors[status as keyof typeof statusColors] ||
91+
statusColors['Unknown'];
92+
93+
return (
94+
<div key={item.id} className='relative z-10 mb-12 pl-8'>
95+
<div className='absolute -left-4 top-6 w-8 h-8 bg-blue-600 rounded-full z-10 flex items-center justify-center'>
96+
<div className='w-4 h-4 bg-white dark:bg-gray-800 rounded-full'></div>
97+
</div>
98+
99+
<div className='bg-white dark:bg-gray-800 relative z-10 w-full rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-lg'>
100+
<div className='p-6'>
101+
<span className='inline-block px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded-full mb-4'>
102+
{category}
103+
</span>
104+
<h2 className='text-2xl font-bold mb-3'>
105+
{item.content.title}
106+
</h2>
107+
108+
<div className='flex flex-wrap items-center gap-2 text-sm'>
109+
<span
110+
className={`px-2 py-1 rounded whitespace-nowrap ${effortClass}`}
111+
>
112+
Effort: {effort}
113+
</span>
114+
<span
115+
className={`px-2 py-1 rounded whitespace-nowrap ${impactClass}`}
116+
>
117+
Impact: {impact}
118+
</span>
119+
</div>
120+
</div>
121+
<div className={`px-6 py-3 ${statusClass}`}>
122+
<span className='text-sm font-semibold text-white uppercase'>
123+
{status}
124+
</span>
125+
</div>
126+
</div>
127+
</div>
128+
);
129+
})}
130+
</div>
131+
</div>
132+
</div>
133+
<DocsHelp markdownFile={markdownFile} />
134+
</SectionContext.Provider>
135+
);
136+
}
137+
138+
Roadmap.getLayout = getLayout;

‎tailwind.config.js

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,81 +3,80 @@ module.exports = {
33
'./pages/**/*.{js,ts,jsx,tsx,md}',
44
'./components/**/*.{js,ts,jsx,tsx,md}',
55
],
6-
darkMode: "class",
6+
darkMode: 'class',
77
theme: {
88
screens: {
9-
'sm': '640px',
9+
sm: '640px',
1010
// => @media (min-width: 640px) { ... }
1111

12-
'md': '768px',
12+
md: '768px',
1313
// => @media (min-width: 768px) { ... }
1414

15-
'lg': '1024px',
15+
lg: '1024px',
1616
// => @media (min-width: 1024px) { ... }
1717

18-
'xl': '1280px',
18+
xl: '1280px',
1919
// => @media (min-width: 1280px) { ... }
2020

2121
'2xl': '1536px',
2222
// => @media (min-width: 1536px) { ... }
23-
'ab1':'890px'
24-
23+
ab1: '890px',
2524
},
2625
fontFamily: {
27-
'sans': ['Inter', 'ui-sans-serif', 'system-ui'],
28-
'serif': ['ui-serif', 'Georgia'],
29-
'mono': ['JetBrains Mono', 'monospace']
26+
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
27+
serif: ['ui-serif', 'Georgia'],
28+
mono: ['JetBrains Mono', 'monospace'],
3029
},
3130
fontSize: {
3231
sm: '0.8rem',
3332
base: '16px',
3433
xl: '20px',
35-
'h5': '20px',
36-
'h4': '25px',
37-
'h3': '35px',
38-
'h2': '45px',
39-
'h1': '60px',
40-
'h1mobile': '35px',
41-
'h2mobile': '28px',
42-
'h3mobile': '25px',
43-
'h4mobile': '22px',
44-
'h5mobile': '20px'
34+
h5: '20px',
35+
h4: '25px',
36+
h3: '35px',
37+
h2: '45px',
38+
h1: '60px',
39+
h1mobile: '35px',
40+
h2mobile: '28px',
41+
h3mobile: '25px',
42+
h4mobile: '22px',
43+
h5mobile: '20px',
4544
},
46-
45+
4746
extend: {
4847
backgroundImage: {
49-
'gradient-radial': 'linear-gradient(72.68deg, #002CC4 28.97%, #5468FF 145.47%)',
48+
'gradient-radial':
49+
'linear-gradient(72.68deg, #002CC4 28.97%, #5468FF 145.47%)',
5050
},
5151
colors: {
52-
5352
white: '#ffffff',
5453
black: '#000000',
5554
primary: '#002CC4',
5655
btnOrange: '#F47A08',
5756
btnGold: '#AB9700',
5857
startBlue: '#002CC4',
5958
endBlue: '#5468FF',
60-
linkBlue: '#3B82F6'
59+
linkBlue: '#3B82F6',
6160
},
6261
gradientColorStopPositions: {
6362
33: '145.47%',
6463
},
6564
lineHeight: {
66-
'base': '24px',
67-
'header': '74px',
65+
base: '24px',
66+
header: '74px',
6867
},
6968
boxShadow: {
7069
'3xl': ' 0px 0px 20px 5px rgba(0, 0, 0, 0.05)',
7170
'4xl': [
7271
'0 35px 35px rgba(0, 0, 0, 0.25)',
73-
'0 45px 65px rgba(0, 0, 0, 0.15)'
72+
'0 45px 65px rgba(0, 0, 0, 0.15)',
7473
],
75-
'xl': ' 0px 6px 10px -4px rgba(0, 0, 0, 0.25);'
76-
}
77-
}
74+
xl: ' 0px 6px 10px -4px rgba(0, 0, 0, 0.25);',
75+
},
76+
},
7877
},
7978
plugins: [],
80-
}
79+
};
8180

8281
/*
8382
FONT WEIGHT
@@ -88,4 +87,4 @@ module.exports = {
8887
font-semibold 600
8988
font-bold 700
9089
font-black 900
91-
*/
90+
*/

0 commit comments

Comments
 (0)