Skip to content

feat(roadmap): add roadmap page with json data loading logic with sim…#215

Open
adrianboros wants to merge 58 commits into
mainfrom
feat/roadmap-page
Open

feat(roadmap): add roadmap page with json data loading logic with sim…#215
adrianboros wants to merge 58 commits into
mainfrom
feat/roadmap-page

Conversation

@adrianboros
Copy link
Copy Markdown
Contributor

@adrianboros adrianboros commented Apr 16, 2026

…ilar UI like linear custom view

New .env variable

  • LINEAR_API_KEY - linear API KEY
  • LINEAR_CUSTOM_VIEW_ID - the custom view id from linear that shows the public roadmap
  • API_SECRET - a secret API KEY generated by us that can be used in endpoint to refresh roadmap data and clear cache
  • NETLIFY_API_TOKEN - netlify api token that are used to purge CDN cache of the /developers/roadmap page

PR Checklist

  • Linked issue added (e.g., Fixes #123)
  • I have run bun run format to ensure code is properly formatted
  • I have verified that bun run lint passes without errors
  • If blog post was added:
    • Ensure images have been optimised
    • Update dates to reflect the actual publishing date when merged (file names, folder names, and frontmatter)

Summary

Fixes INTORG-636

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 16, 2026

Deploy Preview for developers-preview ready!

Name Link
🔨 Latest commit a6c6466
🔍 Latest deploy log https://app.netlify.com/projects/developers-preview/deploys/69e649391080370008ffac84
😎 Deploy Preview https://deploy-preview-215--developers-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for interledger-org-developers ready!

Name Link
🔨 Latest commit a14d9d9
🔍 Latest deploy log https://app.netlify.com/projects/interledger-org-developers/deploys/6a181a6d5d93d500088835a1
😎 Deploy Preview https://deploy-preview-215--interledger-org-developers.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@adrianboros adrianboros self-assigned this May 8, 2026
Comment thread src/linear/build-snapshot.ts Outdated
Comment thread src/linear/build-snapshot.ts Outdated
Comment thread src/linear/build-snapshot.ts Outdated
Comment thread src/linear/build-snapshot.ts Outdated
Comment thread src/types/roadmap.ts Outdated
Comment thread src/types/roadmap.ts Outdated
Comment thread src/types/roadmap.ts Outdated
Comment thread src/types/roadmap.ts Outdated
@JoblersTune
Copy link
Copy Markdown
Contributor

image When I run `bun run start`

@Anca2022
Copy link
Copy Markdown
Contributor

Same for me
image

@JoblersTune
Copy link
Copy Markdown
Contributor

Some of the color use does not meet contrast standards that are required.
image
image
image
image

You can check out the Lighthouse score through Chrome dev tools if you're interested.

@JoblersTune
Copy link
Copy Markdown
Contributor

Are there still issues with updates from Linear? Because the website redesign project for example has more than one milestone but I only see one linked here.
image
image

Comment thread netlify.toml
command = "npm install -g bun && bun install && bun run build && bun scripts/sync-blob.ts && mkdir -p _netlify/builders && cp -r dist _netlify/builders/developers"
publish = "_netlify/builders"
environment = { NETLIFY = "true" }
environment = { NETLIFY = "true" }
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
environment = { NETLIFY = "true" }
environment = { NETLIFY = "true" }

Comment thread src/components/RoadmapBoard.astro Outdated
.pctLeft(new Date(ms.targetDate!))
.toFixed(2)
return (
<div
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fails to interact for keyboard navigation

@JoblersTune
Copy link
Copy Markdown
Contributor

Please add .netlify to the eslint globalignore

@JoblersTune
Copy link
Copy Markdown
Contributor

We also need sign off to add this to the menu for discoverability

@Anca2022
Copy link
Copy Markdown
Contributor

Anca2022 commented May 29, 2026

Sorry, this comment is not for #215, but for #230 instead

I went through the roadmap with a screen reader, and here’s what I found:

  • The milestone diamonds are announced as button, but they don’t appear to have button functionality. It might make sense to change their role.
image
  • There’s a hidden duplicate row being read by the screen reader. Could we mark it as aria-hidden? It appears right after the table header, before the Community & DevAdvocacy row.

  • When idle, the screen reader announces: “Roadmap data refreshed: May 29, 2026. You are currently in a table. To navigate the cells within this table, press Control-Option…” at the end of each TEAM row. This becomes very repetitive.

image
  • For projects that don’t have a milestone and only include a start date and target date, the screen reader announces empty. Could we instead have it announce the project duration?
image

Other than that, everything else looks good from a screen reader accessibility point of view, from what I can tell. :)

@Anca2022
Copy link
Copy Markdown
Contributor

Anca2022 commented May 29, 2026

Screenreader issues for #215

  • Some of the issues flagged above still remain:

    • the role="button" set on the milestones is confusing, since there is no associated interactivity
    • the screenreader announcing black for projects that have a start date and target date, but no milestones
  • Additionally, I really think using an actual table instead of a layout build with divs provides a better accessibility experience and preserves context more effectively.
    For example, with a semantic table, the screen reader announces the column header while navigating a cell, communicates how many columns a cell spans, and generally provides better positional/contextual information within the grid. With the div implementation, the screen reader skips the quarter/month columns entirely.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants