Enhancement: Roadmap page for the Overview section

[rishabhknowss]

What kind of change does this PR introduce?

Adds a Roadmap page

Issue Number:

• Closes Roadmap page for the Overview section #181

Screenshots/videos:

[github-actions]

Welcome to the JSON Schema Community. Thanks a lot for creating your first pull request!! 🎉🎉 We are so excited you are here! We hope this is only the first of many! For more details check out README.md file.

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	69f971f

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (7ecd915) to head (69f971f).
Report is 8 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1021   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           10        10           
  Lines          373       373           
  Branches        94        94           
=========================================
  Hits           373       373           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[benjagm]

Hi @rishabhknowss. is this ready for review? It seems uncompleted. One thing to consider is remember that we have dark/light theme selection so you need to implement that behavior as well. I am saying this because it seems that the current version in this PR was created only for dark theme.

In addition, the roadmap page will be into the overview section of the docs, so my advice is to place this feature into the /pages/overview/roadmap folder, and use the same tsx approach than other overview pages like case studies or use cases.

[rishabhknowss]

ohh, totally forgot about the themes....making changes

[benjagm]

ohh, totally forgot about the themes....making changes

Please, check the correct colors in all labels and styles of each card because in both dark and light themes.

[rishabhknowss]

I have added both the themes , fixed the route , adjusted the labels according to the board and made it responsive
Suggest more changes :)

Screencast.from.2024-10-13.15-20-01.webm

[gregsdennis]

@benjagm I think we may want to consider revisiting the roadmap given our changed circumstances. Have our goals or priorities changed since we're not working on this full time anymore?

Probably a good idea to figure this out before we post it on the website.

[benjagm]

@benjagm I think we may want to consider revisiting the roadmap given our changed circumstances. Have our goals or priorities changed since we're not working on this full time anymore?

Probably a good idea to figure this out before we post it on the website.

This is a great point. The great part of this approach is the data is coming from this board: https://github.com/orgs/json-schema-org/projects/14 so it will dynamically show live data from GitHub. While the roadmap discussion is in progress we can hide the table and show a different message explaining that the roadmap discussion is happening and inviting everyone to be part of it.

[rishabhknowss]

yup guys it will reflect the changes made on the roadmap board

[benjagm]

Are you sure this is the final version of the code? I am missing most of the UX you shared in this screenshot:

This is what I see in this version:

In addition, the roadmap page will be part of the sidebar in the overview section of our docs. You should use a different Typescript page with sidebar capabilities. Please use the same approach used for other pages inside the overview section:
https://github.com/json-schema-org/website/blob/main/pages/overview/use-cases/index.page.tsx

or:

https://github.com/json-schema-org/website/blob/main/pages/overview/case-studies/index.page.tsx

[rishabhknowss]

okay resolving the issue

[rishabhknowss]

Hi @benjagm , thanks for the follow-up. I think the code is now ready for review. I have changed the design a little bit and followed the same approach as other pages have.

[rishabhknowss]

I think there's still a deployment issue, as I can also see no UX. However, it is working perfectly on local.
i am debugging the issue

[rishabhknowss]

i have implemented something , let me see if it works

[rishabhknowss]

I also served the website locally, and it is working fine. I think there might be another issue

[benjagm]

It seems that Tailwind’s PurgeCSS, because of the theme definition, is affecting the styles you are trying to use.

To avoid this, you can add a "safelist" in the tailwind.config.js file to ensure that these classes aren’t purged.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,md}',
    './components/**/*.{js,ts,jsx,tsx,md}',
  ],
  darkMode: "class",
  safelist: [
    'bg-green-600',
    'bg-yellow-600',
    'bg-emerald-600',
    'bg-purple-600',
    'bg-pink-600',
    'bg-orange-600',
    'bg-gray-600',
    'dark:bg-yellow-500',
    'dark:bg-purple-500',
    'dark:bg-green-500',
    'dark:bg-blue-500',
    'dark:bg-pink-500',
    'dark:bg-gray-500',
    // Add any other classes you dynamically generate
  ],
  theme: {
    screens: {

[rishabhknowss]

Thanks @benjagm , its working now

[benjagm]

This is looking great and we just need to make some UX adjustments:

* Those gradients remind me too much AsyncAPI's branding. Can we change it to use our cooperative blue as base color instead of that violet?

• We need some separation between the circle attached to each card and the vertical line.

• Let's remove the names of the assigned contributors.

• Let's define consistent colors for all the labels:
  Effort: Red for very high colors, to yellow to medium values to green to low values
  Impact: Green for very high colors, to yellow to medium values to red to low values
  Status: Green in progress, violet completed, red paused, blue deferred and planned

I hope this helps.

[rishabhknowss]

making changes

[benjagm]

We are getting very close!!

After reviewing the changes we made after my suggestion I realized that there is a better approach by following best practices to avoid Tailwind CSS purge. Check my comment on that. We are likely going to remove all those changes in the tailwind conf by making sure we don't concatenate string to create class names. https://v2.tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

In addition, for the mobile version it seems we have bigger left padding and it will be better if we make sure the content is centered with same x padding.

Great job! We are one step closer

[rishabhknowss]

making changes :>

[rishabhknowss]

i think its done

[benjagm]

Amazing job! This is ready to merge!

[github-actions]

Congratulations, @rishabhknowss for your first pull request merge in this repository! 🎉🎉. Thanks for your contribution to JSON Schema!