Add roadmap feature to landing page + small fixes #574

vincanger · 2025-11-20T15:45:16Z

roadmap-lp.mp4

Description

Introduces a new Roadmap component and related operations to the landing page, adds a getGithubRoadmap query, and updates navigation constants.

Also updates the nav bar scrolling ( fixes #468 ) and the hero section orbit overflow behavior.

Contributor Checklist

Make sure to do the following steps if they are applicable to your PR:

Update e2e tests: If you changed the /template/app, then make sure to do any neccessary updates to /template/e2e-tests also.
Update demo app: If you changed the /template/app, then make sure to do any neccessary updates to /opensaas-sh/app_diff also. Check /opensaas-sh/README.md for details.
Update docs: If needed, update the /opensaas-sh/blog/src/content/docs.

Introduces a new Roadmap component and related operations to the landing page, adds a getGithubRoadmap query, and updates navigation constants. Also updates several dependencies and lockfile entries, including TailwindCSS and React-related packages.

Copilot

Pull Request Overview

This PR introduces a dynamic Roadmap feature to the OpenSaaS landing page that fetches and displays GitHub project data, along with several UI improvements including fixed navbar scrolling and hero section overflow behavior.

Key Changes

Added new getGithubRoadmap query that fetches epic data from GitHub's GraphQL API with client-side caching
Created a responsive Roadmap component displaying epics in a kanban-style grid organized by status (Ideas, Planned, In Progress, Done)
Fixed navbar scrolling behavior to account for fixed header offset and smooth scroll to top when navigating to home

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
opensaas-sh/app_diff/src/landing-page/operations.ts.diff	New server-side operation for fetching GitHub roadmap data with Zod validation and in-memory caching
opensaas-sh/app_diff/src/landing-page/components/Roadmap.tsx.diff	New Roadmap component with kanban-style UI displaying epics with progress bars
opensaas-sh/app_diff/src/client/App.tsx.diff	Updated scroll behavior with offset for fixed navbar and smooth scrolling
opensaas-sh/app_diff/src/client/components/NavBar/constants.ts.diff	Updated navigation items to link to auth feature and roadmap sections
opensaas-sh/app_diff/src/landing-page/LandingPage.tsx.diff	Integrated Roadmap component into landing page layout
opensaas-sh/app_diff/src/landing-page/components/Hero/Hero.tsx.diff	Fixed overflow-x behavior for hero section orbit animation
opensaas-sh/app_diff/src/landing-page/components/HighlightedFeature.tsx.diff	Added id prop support for anchor linking
opensaas-sh/app_diff/src/landing-page/components/Examples/Auth.tsx.diff	Added id to auth feature for navigation
opensaas-sh/app_diff/main.wasp.diff	Registered new getGithubRoadmap query
opensaas-sh/app_diff/package-lock.json.diff	Updated dependencies including tailwindcss and added dev dependencies

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-20T15:49:49Z

opensaas-sh/app_diff/src/landing-page/components/Roadmap.tsx.diff

+                <div className={`flex items-center justify-center p-3 rounded-lg border ${borderColor} ${statusColor.split(' ')[0]} bg-opacity-20`}>
+                  <h3 className={`font-bold ${statusColor.split(' ')[1]}`}>


Using .split(' ') to extract parts of className strings is fragile and error-prone. This approach breaks if the order of classes changes or if additional classes are added. Consider extracting the specific color classes into separate helper functions or using a more robust method to compose classes.

Copilot · 2025-11-20T15:49:49Z

opensaas-sh/app_diff/src/landing-page/components/Roadmap.tsx.diff

+                        href={epic.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className={`group flex flex-col gap-3 rounded-xl border p-5 transition-all hover:shadow-md border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/50 ${hoverBorderColor} block`}


[nitpick] The className has redundant block at the end since <a> is already an inline element and flex class is already applied. The block class is unnecessary and could be removed.

Suggested change

+ className={`group flex flex-col gap-3 rounded-xl border p-5 transition-all hover:shadow-md border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/50 ${hoverBorderColor} block`}

+ className={`group flex flex-col gap-3 rounded-xl border p-5 transition-all hover:shadow-md border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/50 ${hoverBorderColor}`}

opensaas-sh/app_diff/src/landing-page/operations.ts.diff

Copilot · 2025-11-20T15:49:50Z

opensaas-sh/app_diff/src/landing-page/operations.ts.diff

+        variables: { org: ORG_NAME, number: PROJECT_NUMBER },
+      }),
+    })
+


The fetch response status is not checked before parsing JSON. If the GitHub API returns a non-200 status (e.g., 401, 403, 500), response.json() will still attempt to parse the response body, which may not be valid JSON or may contain error information. Consider checking response.ok or response.status before parsing the JSON.

Suggested change

+

+

+ if (!response.ok) {

+ // Try to parse error message if available

+ let errorMessage = `GitHub API request failed with status ${response.status}: ${response.statusText}`

+ try {

+ const errorJson = await response.json()

+ if (errorJson && errorJson.message) {

+ errorMessage += ` - ${errorJson.message}`

+ }

+ } catch (e) {

+ // Ignore JSON parse errors, use default error message

+ }

+ console.error(errorMessage)

+ return cachedData || []

+ }

+

Copilot · 2025-11-20T15:49:50Z

opensaas-sh/app_diff/src/client/App.tsx.diff

+    } else if (location.pathname === "/") {
+      // scroll to top of page
+      if (window.scrollY > 0) {
+        console.log("scrolling to top");


Remove debug console.log statement. This should not be left in production code.

Suggested change

+ console.log("scrolling to top");

FranjoMindek

I really like this Roadmap feature.
Very nice addition.

There is no real logical errors here, just code placement / naming suggestions.

opensaas-sh/app_diff/src/landing-page/operations.ts.diff

FranjoMindek · 2025-11-21T13:15:40Z

opensaas-sh/app_diff/src/landing-page/operations.ts.diff

+import type { GetGithubRoadmap } from 'wasp/server/operations'
+import * as z from 'zod'
+
+const ORG_NAME = "wasp-lang"


GITHUB_ORG_NAME

FranjoMindek · 2025-11-21T13:15:47Z

opensaas-sh/app_diff/src/landing-page/operations.ts.diff

+import * as z from 'zod'
+
+const ORG_NAME = "wasp-lang"
+const PROJECT_NUMBER = 6


OPEN_SAAS_GITHUB_PROJECT_NUMBER

FranjoMindek · 2025-11-21T13:17:18Z

opensaas-sh/app_diff/src/landing-page/operations.ts.diff

+  errors: z.array(z.any()).nullish()
+})
+
+export enum EpicStatus {


GithubEpicStatus

FranjoMindek · 2025-11-21T13:18:36Z

opensaas-sh/app_diff/src/landing-page/operations.ts.diff

+  url: string
+}
+
+type RoadmapData = EpicStats[]


I don't think we really need this.
Inline is fine.

e.g. export const getGithubRoadmap: GetGithubRoadmap<void, GithubEpicStats[]> = async () => {

FranjoMindek · 2025-11-21T16:48:53Z

opensaas-sh/app_diff/src/landing-page/components/Roadmap.tsx.diff

+            const borderColor = getBorderColor(status);
+            const statusColor = getStatusColor(status);
+            
+            return (


Ideally we would extra these two into separate components.
e.g. RoadmapStatusColumn and RoadmapEpic

FranjoMindek · 2025-11-21T16:52:10Z

opensaas-sh/app_diff/src/landing-page/components/Roadmap.tsx.diff

+            
+            return (
+              <div key={status} className="flex flex-col gap-4">
+                <div className={`flex items-center justify-center p-3 rounded-lg border ${borderColor} ${statusColor.split(' ')[0]} bg-opacity-20`}>


Something here with statusColor is wrong.
We only ever take the first and second class out of the statusColor. Why do we define the rest of it then? Should it actually be getStatusBackground and getStatusTextColor?

Any way all of these issues would be a bit nicer to solve if you extracted the two subcomponents you're rendering into separate components.

Maybe the solution is to simplify the number of different color variants. e.g. only 2 blues/greens... used

FranjoMindek · 2025-11-21T16:56:05Z

opensaas-sh/app_diff/src/landing-page/components/Roadmap.tsx.diff

+                        rel="noreferrer"
+                        className={`group flex flex-col gap-3 rounded-xl border p-5 transition-all hover:shadow-md border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/50 ${hoverBorderColor} block`}
+                      >
+                        <h4 className="font-semibold text-base text-gray-900 dark:text-white leading-tight group-hover:opacity-80 transition-opacity">


Why opacity-80 on hover? Makes it seem diluted instead of "selected".

FranjoMindek · 2025-11-21T16:57:53Z

opensaas-sh/app_diff/src/landing-page/components/Roadmap.tsx.diff

+                          </div>
+                          <div className="h-1.5 w-full rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden">
+                            <div 
+                              className={`h-full rounded-full transition-all duration-500 ${progressColor}`}


I guess this transition will only trigger if we re-fetch the data and we solved some issue.
Seems very rare hahaha, not that I mind it.

FranjoMindek · 2025-11-21T16:59:49Z

opensaas-sh/app_diff/src/client/App.tsx.diff

+    } else if (location.pathname === "/") {
+      // scroll to top of page
+      if (window.scrollY > 0) {
+        console.log("scrolling to top");


Yep, we don't need this console.log

Added new roadmap-related images to the assets and banner directories. Updated the 2025-11-21 blog post to include these images, improve structure, and provide more details about the public roadmap, guiding themes, upcoming features, and ways to participate in the Open SaaS project.

vincanger changed the title ~~Add roadmap feature to landing page + small lp fixes~~ Add roadmap feature to landing page + small fixes Nov 20, 2025

vincanger requested review from FranjoMindek and Copilot November 20, 2025 15:46

Copilot started reviewing on behalf of vincanger November 20, 2025 15:47 View session

Copilot finished reviewing on behalf of vincanger November 20, 2025 15:48

Copilot AI reviewed Nov 20, 2025

View reviewed changes

vincanger added 3 commits November 21, 2025 09:21

Update operations.ts.diff

10e7ea4

Update .env.vault.diff

fa852e8

Create 2025-11-21-open-saas-public-roadmap.mdx

bb7790a

FranjoMindek requested changes Nov 21, 2025

View reviewed changes

		+ <div className={`flex items-center justify-center p-3 rounded-lg border ${borderColor} ${statusColor.split(' ')[0]} bg-opacity-20`}>
		+ <h3 className={`font-bold ${statusColor.split(' ')[1]}`}>

	+ className={`group flex flex-col gap-3 rounded-xl border p-5 transition-all hover:shadow-md border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/50 ${hoverBorderColor} block`}
	+ className={`group flex flex-col gap-3 rounded-xl border p-5 transition-all hover:shadow-md border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/50 ${hoverBorderColor}`}

-+
++
++    if (!response.ok) {
++      // Try to parse error message if available
++      let errorMessage = `GitHub API request failed with status ${response.status}: ${response.statusText}`
++      try {
++        const errorJson = await response.json()
++        if (errorJson && errorJson.message) {
++          errorMessage += ` - ${errorJson.message}`
++        }
++      } catch (e) {
++        // Ignore JSON parse errors, use default error message
++      }
++      console.error(errorMessage)
++      return cachedData || []
++    }
++

Uh oh!

Add roadmap feature to landing page + small fixes #574

Are you sure you want to change the base?

Add roadmap feature to landing page + small fixes #574

Uh oh!

Conversation

vincanger commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Contributor Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

FranjoMindek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vincanger commented Nov 20, 2025 •

edited

Loading