feat: add roadmap page

.cspell.yaml

@@ -42,11 +42,14 @@ words:
   - evenodd
   - ffigen
   - fintech
+  - frontmatter
+  - graphql
   - geocodes
   - hotfixes
   - jank
   - janky
   - keyrings
+  - linearapp
   - lavamoat
   - libapp
   - libexec

.github/workflows/main.yaml

@@ -1,6 +1,9 @@
 name: ci
 
 on:
+  schedule:
+    - cron: '0 6 * * *' # 6am UTC / midnight CST — keeps roadmap data fresh
+  workflow_dispatch:
   pull_request:
   push:
     branches:
@@ -23,6 +26,8 @@ jobs:
 
       - name: 📦 Build Docs
         uses: ./.github/actions/astro_site
+        env:
+          LINEAR_API_KEY: ${{ secrets.LINEAR_API_KEY }}
 
   deploy:
     needs: build
@@ -31,7 +36,10 @@ jobs:
     # https://github.com/CloudCannon/pagefind/issues/574
     runs-on: macos-latest
 
-    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
+    if:
+      ${{ (github.event_name == 'push' && github.ref == 'refs/heads/main') ||
+      github.event_name == 'schedule' || github.event_name ==
+      'workflow_dispatch' }}
 
     environment:
       name: github-pages

README.md

@@ -4,6 +4,21 @@
 
 Home of the [docs.shorebird.dev](https://docs.shorebird.dev) site.
 
+## 🗺️ Roadmap page
+
+The `/roadmap` page fetches live data from Linear at build time. To see real
+data locally, export your Linear API key before running the dev server:
+
+```sh
+export LINEAR_API_KEY=your_key_here
+npm run dev
+```
+
+You can create a personal API key at **Linear → Settings → API → Personal API
+Keys**. Without the key the page renders a fallback message instead of crashing.
+
+In CI the key is read from the `LINEAR_API_KEY` repository secret.
+
 ## 🧞 Commands
 
 All commands are run from the root of the project, from a terminal:

astro.config.mjs

@@ -106,6 +106,7 @@ export default defineConfig({
           collapsed: true,
           items: [{ autogenerate: { directory: 'flutter-concepts' } }],
         },
+        { label: 'Roadmap', link: '/roadmap/' },
       ],
       plugins: [
         starlightThemeNova(),

src/pages/roadmap.astro

@@ -0,0 +1,291 @@
+---
+// cspell:words linearapp graphql roadmap
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+
+interface LinearProject {
+  id: string;
+  name: string;
+  description: string;
+  state: string;
+  targetDate: string | null;
+  priority: number;
+}
+
+const PRIORITY_LABEL: Record<number, string> = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
+
+function getQuarterLabel(iso: string): string {
+  const d = new Date(iso);
+  const q = Math.ceil((d.getUTCMonth() + 1) / 3);
+  return `Q${q} ${d.getUTCFullYear()}`;
+}
+
+// Returns a sortable numeric key for a quarter label like "Q2 2025" → 20252
+function quarterSortKey(label: string): number {
+  const [q, year] = label.split(' ');
+  return parseInt(year) * 10 + parseInt(q.slice(1));
+}
+
+function currentQuarterCutoff(): Date {
+  const now = new Date();
+  const quarter = Math.ceil((now.getUTCMonth() + 1) / 3);
+  // Start of one quarter behind current
+  const cutoffQuarter = quarter === 1 ? 4 : quarter - 1;
+  const cutoffYear = quarter === 1 ? now.getUTCFullYear() - 1 : now.getUTCFullYear();
+  const cutoffMonth = (cutoffQuarter - 1) * 3; // 0-indexed month start of that quarter
+  return new Date(Date.UTC(cutoffYear, cutoffMonth, 1));
+}
+
+const STATUS_LABEL: Record<string, string> = {
+  planned: 'Planned',
+  started: 'In Progress',
+  paused: 'Paused',
+  completed: 'Completed',
+  cancelled: 'Cancelled',
+};
+
+const LINEAR_API_KEY = import.meta.env.LINEAR_API_KEY;
+
+let projects: LinearProject[] = [];
+let fetchError = false;
+
+if (LINEAR_API_KEY) {
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+
+    const response = await fetch('https://api.linear.app/graphql', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: LINEAR_API_KEY,
+      },
+      signal: controller.signal,
+      body: JSON.stringify({
+        query: `{
+          projects(
+            filter: { labels: { name: { eq: "Public Roadmap" } } }
+            first: 50
+          ) {
+            nodes {
+              id
+              name
+              description
+              state
+              targetDate
+              priority
+            }
+          }
+        }`,
+      }),
+    });
+
+    clearTimeout(timeoutId);
+
+    if (!response.ok) {
+      fetchError = true;
+    } else {
+      const json = await response.json();
+      projects = json?.data?.projects?.nodes ?? [];
+    }
+  } catch {
+    fetchError = true;
+  }
+} else {
+  fetchError = true;
+}
+
+// Group by quarter; projects without a targetDate go to the "Future" bucket
+// Filter out anything with a targetDate before the start of one quarter ago
+const cutoff = currentQuarterCutoff();
+const quarterMap = new Map<string, LinearProject[]>();
+const futureProjects: LinearProject[] = [];
+
+for (const p of projects) {
+  if (p.targetDate) {
+    if (new Date(p.targetDate) < cutoff) continue;
+    const label = getQuarterLabel(p.targetDate);
+    if (!quarterMap.has(label)) quarterMap.set(label, []);
+    quarterMap.get(label)!.push(p);
+  } else {
+    futureProjects.push(p);
+  }
+}
+
+const sortedQuarters = [...quarterMap.keys()].sort(
+  (a, b) => quarterSortKey(a) - quarterSortKey(b),
+);
+
+const buildTime = new Date().toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+---
+
+<StarlightPage
+  frontmatter={{
+    title: 'Roadmap',
+    description: "What we're building at Shorebird",
+  }}
+>
+  <p>
+    Here's what we're working on at Shorebird. This roadmap is pulled directly from our Linear backlog and reflects our current engineering and product priorities. We keep it public because we believe in building in the open. If something you care about isn't here, let us know via <a href="https://discord.gg/shorebird">Discord</a> or <a href="mailto:contact@shorebird.dev">Email</a>.
+  </p>
+
+  {
+    fetchError ? (
+      <p class="fallback">
+        Roadmap data is not available in this environment.
+      </p>
+    ) : (
+      <>
+        {sortedQuarters.map((label) => (
+          <>
+            <h2>{label}</h2>
+            <div class="project-list">
+              {quarterMap.get(label)!.map((p) => (
+                <div class="project-card">
+                  <div class="project-header">
+                    <p class="project-name">{p.name}</p>
+                    {STATUS_LABEL[p.state] && (
+                      <span class={`status-badge status-${p.state}`}>
+                        {STATUS_LABEL[p.state]}
+                      </span>
+                    )}
+                    {PRIORITY_LABEL[p.priority] && (
+                      <span class={`priority-badge priority-${p.priority}`}>
+                        {PRIORITY_LABEL[p.priority]}
+                      </span>
+                    )}
+                  </div>
+                  {p.description && (
+                    <p class="project-desc">{p.description}</p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </>
+        ))}
+
+        <h2>Future</h2>
+        {futureProjects.length === 0 ? (
+          <p class="empty">Nothing without a target date.</p>
+        ) : (
+          <div class="project-list">
+            {futureProjects.map((p) => (
+              <div class="project-card">
+                <div class="project-header">
+                  <p class="project-name">{p.name}</p>
+                  {STATUS_LABEL[p.state] && (
+                    <span class={`status-badge status-${p.state}`}>
+                      {STATUS_LABEL[p.state]}
+                    </span>
+                  )}
+                  {PRIORITY_LABEL[p.priority] && (
+                    <span class={`priority-badge priority-${p.priority}`}>
+                      {PRIORITY_LABEL[p.priority]}
+                    </span>
+                  )}
+                </div>
+                {p.description && (
+                  <p class="project-desc">{p.description}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <hr />
+        <p class="build-time">
+          <em>Last updated: {buildTime}</em>
+        </p>
+      </>
+    )
+  }
+</StarlightPage>
+
+<style>
+  .fallback {
+    color: var(--sl-color-text-accent);
+    font-style: italic;
+  }
+
+  .empty {
+    color: var(--sl-color-gray-3);
+    font-style: italic;
+  }
+
+  .project-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .project-card {
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+    padding: 1rem 1.25rem;
+  }
+
+  .project-header {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+    margin: 0 0 0.25rem;
+  }
+
+  .priority-badge {
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-left: auto;
+  }
+
+  .status-badge {
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .status-planned    { background: #e0f2fe; color: #0369a1; }
+  .status-started    { background: #ede9fe; color: #6d28d9; }
+  .status-paused     { background: #f3f4f6; color: #4b5563; }
+  .status-completed  { background: #dcfce7; color: #15803d; }
+  .status-cancelled  { background: #f1f5f9; color: #64748b; }
+
+  .priority-1 { background: #fee2e2; color: #b91c1c; } /* Urgent */
+  .priority-2 { background: #ffedd5; color: #c2410c; } /* High */
+  .priority-3 { background: #fef9c3; color: #a16207; } /* Medium */
+  .priority-4 { background: #f0fdf4; color: #15803d; } /* Low */
+
+  .project-name {
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--sl-color-text);
+    margin: 0;
+  }
+
+  .project-desc {
+    margin: 0.4rem 0 0;
+    font-size: 0.9rem;
+    color: var(--sl-color-gray-2);
+  }
+
+  .build-time {
+    font-size: 0.85rem;
+    color: var(--sl-color-gray-3);
+    margin-top: 1.5rem;
+  }
+</style>