Add FELG dashboard MVP — Astro + Tailwind + Supabase realtime - #1
Open
SinachPat wants to merge 1 commit into
Open
Add FELG dashboard MVP — Astro + Tailwind + Supabase realtime#1SinachPat wants to merge 1 commit into
SinachPat wants to merge 1 commit into
Conversation
Implements PRJ-FELG.md v1.3.0-r1 (Amendment A3): a public, dark-themed ecosystem dashboard with realtime data delivery, no auth required for viewing. - Astro static site (file-based routing gives real per-brand URLs and per-page OG tags instead of hash-based fake routes) - Tailwind CSS v4 theme tokens for the FELG pillar colors, dark canvas, and a light/dark toggle that swaps every token via [data-theme] - Supabase (Postgres + Realtime) backend: single JSONB row as source of truth, RLS restricts the anon role to SELECT-only, service-role writes are isolated to CI (scripts/sync-to-supabase.js) - GitHub Actions pipeline: validate data/dashboard.json -> sync to Supabase -> astro build -> deploy to Pages - All four FELG sections (Fun, Earning, Learning, Giving) in fixed order, Top 5 + full brand registry views, per-brand detail pages Includes PRJ-FELG.md, IMPLEMENTATION-GUIDE.md, and AGENT-PROMPT.md as the governing spec and build docs for this implementation. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Implements an MVP FELG ecosystem dashboard as a static Astro site styled with Tailwind, backed by a Supabase JSONB “single-row” store and Realtime updates, plus CI automation to validate/sync data and deploy to GitHub Pages.
Changes:
- Adds Astro pages/components for the dashboard, all-brands view, and per-brand detail routes.
- Introduces Supabase schema + CI scripts to validate
data/dashboard.jsonand upsert it to Supabase. - Adds a GitHub Actions workflow to validate → sync → build → deploy to Pages.
Reviewed changes
Copilot reviewed 30 out of 36 changed files in this pull request and generated 20 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Adds Astro strict TS config. |
| supabase/schema.sql | Creates dashboard_state table + RLS + Realtime publication. |
| supabase/README.md | Documents Supabase provisioning steps and secrets. |
| src/styles/global.css | Defines theme tokens and global transitions. |
| src/scripts/live/client.ts | Implements DOM patching helpers for realtime payload updates. |
| src/pages/index.astro | Renders main dashboard and subscribes to Supabase Realtime updates. |
| src/pages/brands.astro | Renders grouped brand registry view and client refresh logic. |
| src/pages/brand/[id].astro | Adds per-brand static route generation and detail UI. |
| src/lib/utils.ts | Adds shared status helpers + relative time formatter. |
| src/lib/types.d.ts | Declares the dashboard/brand TypeScript contract. |
| src/lib/supabase.ts | Initializes the public Supabase client (or null fallback). |
| src/lib/data.ts | Fetches dashboard data from Supabase with local JSON fallback. |
| src/layouts/Layout.astro | Defines document shell, global styles, and theme-related scripting. |
| src/components/SocialSection.astro | Social metrics table component. |
| src/components/LearningSection.astro | Learning metrics table component. |
| src/components/Header.astro | Header/nav with last-updated indicator and controls. |
| src/components/GivingSection.astro | Giving metrics cards/tables component. |
| src/components/Footer.astro | Footer with repo link and license text. |
| src/components/EarningSection.astro | Earning metrics tables + milestone progress bar component. |
| src/components/BrandGrid.astro | “Top 5” brand grid section. |
| src/components/BrandCard.astro | Brand card UI linking to per-brand pages. |
| scripts/validate-data.js | Adds CI validation for data/dashboard.json. |
| scripts/sync-to-supabase.js | Adds CI-only upsert into Supabase using service role key. |
| public/favicon.svg | Adds favicon. |
| PRJ-FELG.md | Adds governing PRD/spec document for FELG dashboard. |
| package.json | Adds Astro/Tailwind/Supabase dependencies and scripts. |
| IMPLEMENTATION-GUIDE.md | Adds build/architecture guide aligning to the PRD. |
| data/dashboard.json | Adds initial dashboard data source-of-truth JSON. |
| astro.config.mjs | Configures static output and GitHub Pages site/base. |
| AGENT-PROMPT.md | Adds agent build prompt for implementing the spec. |
| .vscode/launch.json | Adds VS Code launch config for Astro dev server. |
| .vscode/extensions.json | Recommends Astro VS Code extension. |
| .gitignore | Ignores dist, node_modules, env files, etc. |
| .github/workflows/deploy.yml | CI workflow: validate → sync to Supabase → build → deploy Pages. |
Comments suppressed due to low confidence (1)
src/components/EarningSection.astro:88
- The section timestamp text is hardcoded to "Updated just now", which is incorrect for the build-time snapshot and can mislead users when JS is disabled or Realtime is unavailable. Use the actual lastUpdated value for the initial render.
<p class="text-[10px] text-text-tertiary mt-1.5" data-live="earning.last-updated" title={lastUpdated}>Updated just now</p>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+32
to
+37
| <script is:inline> | ||
| (function() { | ||
| var theme = localStorage.getItem('felg-theme') || 'dark'; | ||
| document.documentElement.setAttribute('data-theme', theme); | ||
| })(); | ||
| </script> |
Comment on lines
+54
to
+74
| <script> | ||
| const toggle = document.getElementById('theme-toggle'); | ||
| if (toggle) { | ||
| const html = document.documentElement; | ||
| const icon = toggle; | ||
|
|
||
| function updateIcon(theme) { | ||
| icon.textContent = theme === 'light' ? '☀️' : '🌙'; | ||
| } | ||
|
|
||
| updateIcon(html.getAttribute('data-theme') || 'dark'); | ||
|
|
||
| toggle.addEventListener('click', () => { | ||
| const current = html.getAttribute('data-theme') || 'dark'; | ||
| const next = current === 'light' ? 'dark' : 'light'; | ||
| html.setAttribute('data-theme', next); | ||
| localStorage.setItem('felg-theme', next); | ||
| updateIcon(next); | ||
| }); | ||
| } | ||
| </script> |
Comment on lines
+47
to
+48
| <span class="text-[10px] text-text-tertiary">·</span> | ||
| <button id="theme-toggle" class="text-[13px] text-text-secondary hover:text-accent transition-colors cursor-pointer bg-transparent border-0 p-0 leading-none" title="Toggle theme">🌙</button> |
Comment on lines
+38
to
+40
| <style> | ||
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); | ||
| </style> |
Comment on lines
+40
to
+41
| -- Enable Realtime on this table | ||
| ALTER PUBLICATION supabase_realtime ADD TABLE dashboard_state; No newline at end of file |
| <h1 class="text-[13px] font-semibold text-text">All Brands</h1> | ||
| <p class="text-[11px] text-text-muted mt-0.5">{dashboard.brands.all_brands.length} total</p> | ||
| </div> | ||
| <a href="/" class="text-[11px] font-medium text-accent hover:underline">← Dashboard</a> |
Comment on lines
+24
to
+25
| <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> | ||
| <link rel="icon" href="/favicon.ico" /> |
| <h2 class="text-[15px] font-bold text-text">Top 5 Ecosystem Brands</h2> | ||
| <span class="text-[11px] text-text-muted font-medium">({topBrands.length})</span> | ||
| </div> | ||
| <a href="/brands" class="text-[11px] font-medium text-accent hover:underline">View all →</a> |
Comment on lines
+39
to
+40
| <a href="/" class="hover:text-accent">Dashboard</a><span>→</span> | ||
| <a href="/brands" class="hover:text-accent">Brands</a><span>→</span> |
| } | ||
| const { pipeline, members_investors, lastUpdated } = Astro.props; | ||
| function fmtUSD(n: number): string { return '$' + n.toLocaleString(); } | ||
| const progress = pipeline.sub_projects_total > 0 ? Math.round((pipeline.sub_projects_complete / pipeline.sub_projects_total) * 100) : 0; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements PRJ-FELG.md v1.3.0-r1 (Amendment A3): a public, dark-themed ecosystem dashboard with realtime data delivery, no auth required for viewing.
Includes PRJ-FELG.md, IMPLEMENTATION-GUIDE.md, and AGENT-PROMPT.md as the governing spec and build docs for this implementation.