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

[adrianboros]

…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]

✅ 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... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for interledger-org-developers ready!

Name	Link
🔨 Latest commit	a14d9d9
🔍 Latest deploy log	https://app.netlify.com/projects/interledger-org-developers/deploys/6a0d621271fa2d0008d1fca5
😎 Deploy Preview	https://deploy-preview-215--interledger-org-developers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Copilot]

Pull request overview

Adds a new /developers/roadmap page that renders an interactive, Linear-style timeline of Interledger projects. Roadmap data is produced by two new Netlify functions (sync on a 12-hour schedule and sync-now for manual, token-protected refreshes) that query the Linear GraphQL API, build a snapshot, and store it in Netlify Blobs; the roadmap page reads that snapshot at request time and renders a RoadmapBoard Astro component.

Changes:

• New roadmap UI: src/pages/roadmap.astro, src/layouts/RoadmapLayout.astro, and a large src/components/RoadmapBoard.astro (timeline grid, milestones, mobile toggle).
• New Linear data pipeline: src/linear/client.ts, src/linear/build-snapshot.ts, types in src/types/roadmap.ts, plus Netlify Functions sync.mts (scheduled) and sync-now.mts (HTTP, bearer-token protected).
• Build/runtime wiring: @astrojs/netlify adapter added in astro.config.mjs with output: 'static'; new dependencies (@astrojs/netlify, @linear/sdk, @netlify/blobs, @netlify/functions); netlify.toml gains a roadmap redirect, dev port, and LINEAR_CUSTOM_VIEW_ID env across contexts; new .env.example and .gitignore entries.

Reviewed changes

Copilot reviewed 13 out of 15 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
src/pages/roadmap.astro	New SSR roadmap page reading snapshot from Netlify Blobs.
src/layouts/RoadmapLayout.astro	New full-page layout (header/footer + meta) for the roadmap page.
src/components/RoadmapBoard.astro	Large Gantt-style timeline component with mobile/quarter view toggle.
src/types/roadmap.ts	Shared TypeScript types for snapshot, board, and API project/team shapes.
src/linear/client.ts	Initialises LinearClient from LINEAR_API_KEY, throws if missing.
src/linear/build-snapshot.ts	GraphQL queries + retry/pagination logic that builds the roadmap snapshot.
netlify/functions/sync.mts	Scheduled function (every 12h) that rebuilds the snapshot and purges CDN.
netlify/functions/sync-now.mts	HTTP /api/sync function gated by API_SECRET bearer token.
src/components/pages/FoundationHeader.astro	Raises the site header z-index to 20 so it stacks above the sticky board header.
astro.config.mjs	Adds Netlify adapter and sets output: 'static'.
package.json	Adds Netlify/Linear runtime dependencies.
netlify.toml	Adds dev port, roadmap redirect, and LINEAR_CUSTOM_VIEW_ID env per context.
.env.example	Documents new required env variables.
.gitignore	Ignores .netlify/ and deno.lock.

[JoblersTune]

I agree with copilot about cleaning up the env variables.
How about creating a src/config.ts file and doing something like this for all env variables

const isProd = import.meta.env.PROD;

export const LINEAR_API_KEY = (() => {
  const key = import.meta.env.LINEAR_API_KEY;
  if (!key && isProd) {
    throw new Error("LINEAR_API_KEY is required in production");
  }
  return key ?? null;
})();

I always like env variables to be clear upfront and to fail early if they're missing. It's also easier for DevOps if they're all sorted in one place.

If we filter for prod vs local dev we can also allow open source contributors to contribute and build the site locally by passing the development mode flag without needing the variables. We can add this to the README bun run astro build -- --mode development

Then we can handle everything in one place and of course include an example.env file that is up to date and clear as well.

[JoblersTune]

Can we keep the header row and table body scrolling horizontally together?
It's confusing that you can scroll the top row and nothing below moves. When you scroll the table body at least the top row does keep in line.

Screencast.from.2026-05-19.09-42-48.mp4