json-schema-org · benjagm · Oct 24, 2024 · Oct 12, 2024 · Oct 13, 2024 · Oct 13, 2024
@@ -109,6 +109,7 @@ const getDocsPath = [
   '/overview/use-cases',
   '/overview/code-of-conduct',
   '/overview/faq',
+  '/overview/roadmap',
 ];
 const getStartedPath = [
   '/learn',
@@ -393,6 +394,7 @@ export const DocsNav = ({
             label='Code of Conduct'
             setOpen={setOpen}
           />
+          <DocLink uri='/overview/roadmap' label='Roadmap' setOpen={setOpen} />
         </div>
       </div>
       {/* Get Started */}

@@ -19,6 +19,7 @@ export const SectionContext = React.createContext<
   | 'overview'
   | 'getting-started'
   | 'reference'
+  | 'roadmap'
 >(null);
 export const BlockContext = React.createContext<BlockContextValue | null>(null);
 export const FullMarkdownContext = React.createContext<string | null>(null);
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
@@ -216,7 +216,7 @@ export default function communityPages(props: any) {
               body='Explore our exciting plans and upcoming milestones. 🚀'
               headerSize='large'
               bodyTextSize='medium'
-              link='https://github.com/orgs/json-schema-org/discussions/427'
+              link='/overview/roadmap'
             />
             <Card
               key='contribute'

@@ -0,0 +1,138 @@
+import React from 'react';
+import { DocsHelp } from '~/components/DocsHelp';
+import { getLayout } from '~/components/Sidebar';
+import Head from 'next/head';
+import { Headline1 } from '~/components/Headlines';
+import { SectionContext } from '~/context';
+import roadmap from '~/data/roadmap.json';
+
+const statusColors = {
+  'In Progress': 'bg-green-600 text-white dark:bg-green-500',
+  Done: 'bg-purple-600 text-white dark:bg-purple-500',
+  Planned: 'bg-blue-600 text-white dark:bg-blue-500',
+  Paused: 'bg-red-600 text-white dark:bg-red-500',
+  Deferred: 'bg-blue-600 text-white dark:bg-blue-500',
+  Unknown: 'bg-gray-600 text-white dark:bg-gray-500',
+};
+
+const effortColors = {
+  Low: 'bg-green-600 text-white dark:bg-green-500',
+  Medium: 'bg-yellow-600 text-white dark:bg-yellow-500',
+  High: 'bg-red-600 text-white dark:bg-red-500',
+  'Low-medium': 'bg-green-600 text-white dark:bg-green-500',
+  Unknown: 'bg-gray-600 text-white dark:bg-gray-500',
+};
+
+const impactColors = {
+  Low: 'bg-red-600 text-white dark:bg-red-500',
+  Medium: 'bg-yellow-600 text-white dark:bg-yellow-500',
+  High: 'bg-green-600 text-white dark:bg-green-500',
+  'Medium-high': 'bg-yellow-600 text-white dark:bg-yellow-500',
+  'Low-medium': 'bg-red-600 text-white dark:bg-red-500',
+  Unknown: 'bg-gray-600 text-white dark:bg-gray-500',
+};
+
+export default function Roadmap() {
+  const newTitle = 'JSON Schema Roadmap';
+  const markdownFile = '_indexPage';
+
+  return (
+    <SectionContext.Provider value='docs'>
+      <Head>
+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{newTitle}</Headline1>
+      <div className='text-md'>
+        Our "Roadmap" section displays our key objectives for the long term.
+        While this roadmap provides a detailed outlook for the near future,
+        please note that it might be subject to change. In fact, we are
+        currently{' '}
+        <a
+          className='text-blue-600 underline'
+          href='https://github.com/orgs/json-schema-org/discussions/813'
+        >
+          discussing
+        </a>{' '}
+        the new priorities for the next 24-month cycle, which will lead to
+        relevant changes. Please consider joining the discussion to become an
+        active part of JSON Schema's future!
+      </div>
+      <div className='text-gray-900 dark:text-white'>
+        <div className='container mt-14 mx-auto px-4'>
+          <div className='relative'>
+            <div className='absolute left-0 top-0 bottom-0 w-0.5 bg-blue-600'></div>
+
+            {roadmap.map((item) => {
+              const status =
+                item.fieldValues.nodes.find(
+                  (node) => node.field?.name === 'Status',
+                )?.name || 'Unknown';
+              const category =
+                item.fieldValues.nodes.find(
+                  (node) => node.field?.name === 'Category',
+                )?.name || 'Uncategorized';
+              const effort =
+                item.fieldValues.nodes.find(
+                  (node) => node.field?.name === 'Effort',
+                )?.name || 'Unknown';
+              const impact =
+                item.fieldValues.nodes.find(
+                  (node) => node.field?.name === 'Impact',
+                )?.name || 'Unknown';
+
+              const effortClass =
+                effortColors[effort as keyof typeof effortColors] ||
+                effortColors['Unknown'];
+              const impactClass =
+                impactColors[impact as keyof typeof impactColors] ||
+                impactColors['Unknown'];
+              const statusClass =
+                statusColors[status as keyof typeof statusColors] ||
+                statusColors['Unknown'];
+
+              return (
+                <div key={item.id} className='relative z-10 mb-12 pl-8'>
+                  <div className='absolute -left-4 top-6 w-8 h-8 bg-blue-600 rounded-full z-10 flex items-center justify-center'>
+                    <div className='w-4 h-4 bg-white dark:bg-gray-800 rounded-full'></div>
+                  </div>
+
+                  <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'>
+                    <div className='p-6'>
+                      <span className='inline-block px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded-full mb-4'>
+                        {category}
+                      </span>
+                      <h2 className='text-2xl font-bold mb-3'>
+                        {item.content.title}
+                      </h2>
+
+                      <div className='flex flex-wrap items-center gap-2 text-sm'>
+                        <span
+                          className={`px-2 py-1 rounded whitespace-nowrap ${effortClass}`}
+                        >
+                          Effort: {effort}
+                        </span>
+                        <span
+                          className={`px-2 py-1 rounded whitespace-nowrap ${impactClass}`}
+                        >
+                          Impact: {impact}
+                        </span>
+                      </div>
+                    </div>
+                    <div className={`px-6 py-3 ${statusClass}`}>
+                      <span className='text-sm font-semibold text-white uppercase'>
+                        {status}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <DocsHelp markdownFile={markdownFile} />
+    </SectionContext.Provider>
+  );
+}
+
+Roadmap.getLayout = getLayout;
@@ -3,81 +3,80 @@ module.exports = {
     './pages/**/*.{js,ts,jsx,tsx,md}',
     './components/**/*.{js,ts,jsx,tsx,md}',
   ],
-  darkMode: "class",
+  darkMode: 'class',
   theme: {
     screens: {
-      'sm': '640px',
+      sm: '640px',
       // => @media (min-width: 640px) { ... }
 
-      'md': '768px',
+      md: '768px',
       // => @media (min-width: 768px) { ... }
 
-      'lg': '1024px',
+      lg: '1024px',
       // => @media (min-width: 1024px) { ... }
 
-      'xl': '1280px',
+      xl: '1280px',
       // => @media (min-width: 1280px) { ... }
 
       '2xl': '1536px',
       // => @media (min-width: 1536px) { ... }
-      'ab1':'890px'
-
+      ab1: '890px',
     },
     fontFamily: {
-      'sans': ['Inter', 'ui-sans-serif', 'system-ui'],
-      'serif': ['ui-serif', 'Georgia'],
-      'mono': ['JetBrains Mono', 'monospace']
+      sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+      serif: ['ui-serif', 'Georgia'],
+      mono: ['JetBrains Mono', 'monospace'],
     },
     fontSize: {
       sm: '0.8rem',
       base: '16px',
       xl: '20px',
-      'h5': '20px',
-      'h4': '25px',
-      'h3': '35px',
-      'h2': '45px',
-      'h1': '60px',
-      'h1mobile': '35px',
-      'h2mobile': '28px',
-      'h3mobile': '25px',
-      'h4mobile': '22px',
-      'h5mobile': '20px'
+      h5: '20px',
+      h4: '25px',
+      h3: '35px',
+      h2: '45px',
+      h1: '60px',
+      h1mobile: '35px',
+      h2mobile: '28px',
+      h3mobile: '25px',
+      h4mobile: '22px',
+      h5mobile: '20px',
     },
-   
+
     extend: {
       backgroundImage: {
-        'gradient-radial': 'linear-gradient(72.68deg, #002CC4 28.97%, #5468FF 145.47%)',
+        'gradient-radial':
+          'linear-gradient(72.68deg, #002CC4 28.97%, #5468FF 145.47%)',
       },
       colors: {
-
         white: '#ffffff',
         black: '#000000',
         primary: '#002CC4',
         btnOrange: '#F47A08',
         btnGold: '#AB9700',
         startBlue: '#002CC4',
         endBlue: '#5468FF',
-        linkBlue: '#3B82F6'
+        linkBlue: '#3B82F6',
       },
       gradientColorStopPositions: {
         33: '145.47%',
       },
       lineHeight: {
-        'base': '24px',
-        'header': '74px',
+        base: '24px',
+        header: '74px',
       },
       boxShadow: {
         '3xl': ' 0px 0px 20px 5px rgba(0, 0, 0, 0.05)',
         '4xl': [
           '0 35px 35px rgba(0, 0, 0, 0.25)',
-          '0 45px 65px rgba(0, 0, 0, 0.15)'
+          '0 45px 65px rgba(0, 0, 0, 0.15)',
         ],
-        'xl': ' 0px 6px 10px -4px rgba(0, 0, 0, 0.25);'
-      }
-    }
+        xl: ' 0px 6px 10px -4px rgba(0, 0, 0, 0.25);',
+      },
+    },
   },
   plugins: [],
-}
+};
 
 /*
   FONT WEIGHT
@@ -88,4 +87,4 @@ module.exports = {
   font-semibold 600
   font-bold 700
   font-black 900
-*/
+*/