Add stats endpoint, trend chart, site submission form, leaderboard page

GET /stats (packages/functions/src/stats.ts):
Returns pre-aggregated totalActiveSites, totalIndexesRun, averageCO2Grams,
and greenHostedPercent. The homepage now calls /stats + /trend instead of
downloading the full /emissions-unique payload (~hundreds of KB) just to
compute three numbers.

GET /trend (packages/functions/src/trend.ts):
Returns average CO2 per day for the last N days (default 30, max 90),
aggregated in the Lambda from lightweight date/co2/is_green rows.

GET /leaderboard (packages/functions/src/leaderboard.ts):
Returns top 10 cleanest and top 10 heaviest sites from the most recent
scan date, excluding sites with zero CO2 (failed scans).

Homepage (src/pages/index.astro):
- Switches data fetching to fetchStats() + fetchTrend() in parallel.
- Adds a 30-day trend area chart section between Quick Glance and The Data.
- "Add Site" button now links to /add-site instead of the GitHub repo.

Site submission form (src/components/SubmitSiteForm.tsx + src/pages/add-site.astro):
React form that builds a pre-filled GitHub issue URL. Validates and
normalises the domain (strips protocol/www), collects optional org/industry/
notes fields, then opens the issue in a new tab. No backend required.

Leaderboard page (src/pages/leaderboard.astro):
Static page with two tables — cleanest and heaviest — fetched at build time
via fetchLeaderboard(). Each domain links to its /site/[website] detail page.

api.ts: adds fetchStats(), fetchTrend(), fetchLeaderboard().
sst.config.ts: registers the three new Lambda routes.
FEATURES.md: marks items 4–6 and leaderboard as complete.

https://claude.ai/code/session_01YafYX7riVJoSoZxYm913F6

Author: claude

FEATURES.md

@@ -14,25 +14,25 @@ Tracks planned features and their implementation status.
   per-industry lookup table (Government, Education, Healthcare, Finance, Technology,
   Media, Retail, Non-profit) so the "Compared to Industry Avg." stat card is accurate.
 
-## Backlog
+- [x] **`GET /stats` endpoint** — Returns pre-aggregated numbers (total scans, mean CO2,
+  % green hosted) from the API. The homepage now calls `/stats` + `/trend` instead of
+  downloading all emissions rows just to compute three numbers.
+
+- [x] **Site submission form** (`/add-site`) — Form that builds a pre-filled GitHub
+  issue URL so contributors can propose a new site without needing to know the repo
+  structure. Validates the domain, strips protocol/www, and opens the issue in a new tab.
 
-- [ ] **`GET /stats` endpoint** — Return pre-aggregated numbers (total scans, mean CO2,
-  % green hosted) from the API instead of computing them on the client from the full
-  `/emissions-unique` payload. Reduces homepage data transfer and makes the stats
-  available to external callers.
+- [x] **All-sites trend chart on homepage** — 30-day average CO2 area chart on the
+  homepage using the new `GET /trend` endpoint. Aggregates by date in the Lambda and
+  passes the result as a static prop to `AreaChartWrapper` at build time.
 
-- [ ] **Site submission form** — The hero CTA currently links to the GitHub repo. A
-  simple form that opens a GitHub issue (or calls a Lambda that creates one via the
-  GitHub API) would lower the barrier for adding a site without needing a PR.
+- [x] **Leaderboard page** (`/leaderboard`) — Static page showing the top 10 cleanest
+  and top 10 heaviest sites from the most recent nightly scan, with links to each site's
+  detail page. Backed by a new `GET /leaderboard` endpoint.
 
-- [ ] **All-sites trend chart on homepage** — Add a time-series chart to the homepage
-  showing average CO2 across all monitored sites over the past 30 days. Makes the
-  homepage more compelling and shows whether the web is getting greener over time.
+## Backlog
 
 - [ ] **Alerts / notifications** — After each nightly upsert, check whether a site's
   CO2 increased more than a configurable threshold (e.g. >20%) vs. the prior week and
   send an email or post a GitHub issue. Turns the tracker from a passive dashboard into
   something actionable.
-
-- [ ] **Leaderboard page** — A `/leaderboard` route showing the top 10 cleanest and
-  top 10 heaviest sites by average CO2. Shareable and link-worthy.

packages/functions/src/leaderboard.ts

@@ -0,0 +1,64 @@
+import { createClient } from '@supabase/supabase-js';
+import { Resource } from "sst";
+
+const supabase = createClient(
+  Resource.MySupabaseUrl.value,
+  Resource.MySupabaseAnonRoleKey.value
+);
+
+// Returns the top 10 cleanest and top 10 heaviest sites from the most
+// recent scan date. Sites with zero CO2 (failed/timed-out scans) are excluded.
+export async function handler(_evt) {
+  try {
+    const { data: latestDateRow, error: dateError } = await supabase
+      .from('website_emissions')
+      .select('date')
+      .order('date', { ascending: false })
+      .limit(1)
+      .single();
+
+    if (dateError) throw dateError;
+
+    const latestDate = latestDateRow?.date;
+
+    const [cleanestResult, heaviestResult] = await Promise.all([
+      supabase
+        .from('website_emissions')
+        .select('domain, estimated_co2_grams, is_green, total_bytes')
+        .eq('date', latestDate)
+        .gt('estimated_co2_grams', 0)
+        .order('estimated_co2_grams', { ascending: true })
+        .limit(10),
+      supabase
+        .from('website_emissions')
+        .select('domain, estimated_co2_grams, is_green, total_bytes')
+        .eq('date', latestDate)
+        .gt('estimated_co2_grams', 0)
+        .order('estimated_co2_grams', { ascending: false })
+        .limit(10),
+    ]);
+
+    if (cleanestResult.error) throw cleanestResult.error;
+    if (heaviestResult.error) throw heaviestResult.error;
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({
+        date: latestDate,
+        cleanest: cleanestResult.data || [],
+        heaviest: heaviestResult.data || [],
+      }),
+      headers: {
+        "Content-Type": "application/json",
+        "Cache-Control": "public, max-age=300",
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching leaderboard:', error);
+    return {
+      statusCode: 500,
+      body: JSON.stringify({ error: error.message }),
+      headers: { "Content-Type": "application/json" },
+    };
+  }
+}

packages/functions/src/stats.ts

@@ -0,0 +1,69 @@
+import { createClient } from '@supabase/supabase-js';
+import { Resource } from "sst";
+
+const supabase = createClient(
+  Resource.MySupabaseUrl.value,
+  Resource.MySupabaseAnonRoleKey.value
+);
+
+// Returns pre-aggregated stats for the homepage so it doesn't need to
+// download and process the full /emissions-unique payload.
+export async function handler(_evt) {
+  try {
+    // Get active site count and the most recent scan date in parallel.
+    const [activeSitesResult, latestDateRow] = await Promise.all([
+      supabase
+        .from('monitored_sites')
+        .select('*', { count: 'exact', head: true })
+        .eq('is_active', true),
+      supabase
+        .from('website_emissions')
+        .select('date')
+        .order('date', { ascending: false })
+        .limit(1)
+        .single(),
+    ]);
+
+    if (latestDateRow.error) throw latestDateRow.error;
+
+    const latestDate = latestDateRow.data?.date;
+
+    // Fetch lightweight rows for the latest date to compute aggregates.
+    const { data: emissions, error } = await supabase
+      .from('website_emissions')
+      .select('estimated_co2_grams, is_green')
+      .eq('date', latestDate)
+      .limit(activeSitesResult.count || 20000);
+
+    if (error) throw error;
+
+    const totalIndexesRun = emissions?.length || 0;
+    const avgCO2 = totalIndexesRun > 0
+      ? emissions.reduce((sum, e) => sum + (e.estimated_co2_grams || 0), 0) / totalIndexesRun
+      : 0;
+    const greenCount = emissions?.filter(e => e.is_green).length || 0;
+    const greenPercent = totalIndexesRun > 0 ? (greenCount / totalIndexesRun) * 100 : 0;
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({
+        totalActiveSites: activeSitesResult.count || 0,
+        latestScanDate: latestDate,
+        totalIndexesRun,
+        averageCO2Grams: parseFloat(avgCO2.toFixed(3)),
+        greenHostedPercent: parseFloat(greenPercent.toFixed(2)),
+      }),
+      headers: {
+        "Content-Type": "application/json",
+        "Cache-Control": "public, max-age=300",
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching stats:', error);
+    return {
+      statusCode: 500,
+      body: JSON.stringify({ error: error.message }),
+      headers: { "Content-Type": "application/json" },
+    };
+  }
+}

packages/functions/src/trend.ts

@@ -0,0 +1,63 @@
+import { createClient } from '@supabase/supabase-js';
+import { Resource } from "sst";
+
+const supabase = createClient(
+  Resource.MySupabaseUrl.value,
+  Resource.MySupabaseAnonRoleKey.value
+);
+
+// Returns average CO2 per day for the last N days (default 30, max 90).
+// Used by the homepage trend chart.
+export async function handler(event) {
+  try {
+    const rawDays = event.queryStringParameters?.days;
+    const days = Math.min(Math.max(parseInt(rawDays || '30', 10) || 30, 7), 90);
+
+    const since = new Date();
+    since.setDate(since.getDate() - days);
+    const sinceStr = since.toISOString().split('T')[0];
+
+    // Fetch lightweight rows for the date range. At ~1 000 sites × 90 days
+    // this is at most ~90 000 rows with 3 small fields — manageable in Lambda.
+    const { data, error } = await supabase
+      .from('website_emissions')
+      .select('date, estimated_co2_grams, is_green')
+      .gte('date', sinceStr)
+      .order('date', { ascending: true })
+      .limit(100000);
+
+    if (error) throw error;
+
+    // Aggregate by date in Lambda.
+    const byDate: Record<string, { sum: number; count: number; greenCount: number }> = {};
+    for (const row of data || []) {
+      if (!byDate[row.date]) byDate[row.date] = { sum: 0, count: 0, greenCount: 0 };
+      byDate[row.date].sum += row.estimated_co2_grams || 0;
+      byDate[row.date].count++;
+      if (row.is_green) byDate[row.date].greenCount++;
+    }
+
+    const trend = Object.entries(byDate).map(([date, { sum, count, greenCount }]) => ({
+      date,
+      averageCO2: parseFloat((sum / count).toFixed(3)),
+      siteCount: count,
+      greenPercent: parseFloat(((greenCount / count) * 100).toFixed(1)),
+    }));
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({ trend }),
+      headers: {
+        "Content-Type": "application/json",
+        "Cache-Control": "public, max-age=300",
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching trend:', error);
+    return {
+      statusCode: 500,
+      body: JSON.stringify({ error: error.message }),
+      headers: { "Content-Type": "application/json" },
+    };
+  }
+}

src/components/SubmitSiteForm.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import { useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+const GITHUB_REPO = 'https://github.com/ctrimm/co2-emission-tracker';
+
+const INDUSTRIES = [
+  'Federal Government',
+  'State Government',
+  'Local Government / Municipal',
+  'Education',
+  'Healthcare',
+  'Finance',
+  'Technology',
+  'Media / News',
+  'Retail / E-commerce',
+  'Non-profit',
+  'Other',
+] as const;
+
+export function SubmitSiteForm() {
+  const [domain, setDomain] = useState('');
+  const [organization, setOrganization] = useState('');
+  const [industry, setIndustry] = useState('');
+  const [notes, setNotes] = useState('');
+  const [error, setError] = useState('');
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+
+    // Strip protocol and path, leaving just the bare domain.
+    const cleaned = domain.trim()
+      .replace(/^https?:\/\//, '')
+      .replace(/^www\./, '')
+      .replace(/\/.*$/, '');
+
+    const domainRegex = /^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/;
+    if (!domainRegex.test(cleaned)) {
+      setError('Please enter a valid domain, e.g. example.gov');
+      return;
+    }
+
+    const title = `Add Site: ${cleaned}`;
+    const body = [
+      `**Domain:** ${cleaned}`,
+      organization.trim() ? `**Organization:** ${organization.trim()}` : null,
+      industry ? `**Industry:** ${industry}` : null,
+      notes.trim() ? `**Additional notes:** ${notes.trim()}` : null,
+    ].filter(Boolean).join('\n');
+
+    const issueUrl = `${GITHUB_REPO}/issues/new`
+      + `?title=${encodeURIComponent(title)}`
+      + `&body=${encodeURIComponent(body)}`
+      + `&labels=add-site`;
+
+    window.open(issueUrl, '_blank', 'noopener,noreferrer');
+  }
+
+  const selectClass =
+    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm " +
+    "ring-offset-background focus-visible:outline-none focus-visible:ring-2 " +
+    "focus-visible:ring-ring focus-visible:ring-offset-2";
+
+  const textareaClass =
+    "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm " +
+    "ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none " +
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none";
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5 max-w-lg mx-auto">
+      <div className="space-y-1.5">
+        <label htmlFor="domain" className="text-sm font-medium">
+          Domain <span className="text-red-500">*</span>
+        </label>
+        <Input
+          id="domain"
+          type="text"
+          placeholder="example.gov"
+          value={domain}
+          onChange={e => setDomain(e.target.value)}
+          required
+        />
+        <p className="text-xs text-muted-foreground">
+          Enter just the domain, without <code>https://</code> or a trailing slash.
+        </p>
+      </div>
+
+      <div className="space-y-1.5">
+        <label htmlFor="organization" className="text-sm font-medium">
+          Organization / Agency
+        </label>
+        <Input
+          id="organization"
+          type="text"
+          placeholder="U.S. Department of Example"
+          value={organization}
+          onChange={e => setOrganization(e.target.value)}
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <label htmlFor="industry" className="text-sm font-medium">Industry</label>
+        <select
+          id="industry"
+          value={industry}
+          onChange={e => setIndustry(e.target.value)}
+          className={selectClass}
+        >
+          <option value="">Select an industry…</option>
+          {INDUSTRIES.map(i => <option key={i} value={i}>{i}</option>)}
+        </select>
+      </div>
+
+      <div className="space-y-1.5">
+        <label htmlFor="notes" className="text-sm font-medium">Additional notes</label>
+        <textarea
+          id="notes"
+          placeholder="Any context about why this site should be tracked…"
+          value={notes}
+          onChange={e => setNotes(e.target.value)}
+          rows={3}
+          className={textareaClass}
+        />
+      </div>
+
+      {error && <p className="text-sm text-red-500">{error}</p>}
+
+      <Button type="submit" className="w-full">
+        Open GitHub Issue →
+      </Button>
+      <p className="text-xs text-muted-foreground text-center">
+        Clicking the button opens a pre-filled GitHub issue for review.
+        A GitHub account is required to submit.
+      </p>
+    </form>
+  );
+}