Redesign livepeer.org

.env.example

@@ -1,2 +1,18 @@
 # The Graph (optional — falls back to hardcoded values)
 THEGRAPH_API_KEY=
+
+# Notion — the roadmap register (optional locally; without it /roadmap falls
+# back to content/roadmap/*.md). Internal integration token, shared with both
+# the "Roadmap commitments" and "Roadmap people" databases.
+NOTION_TOKEN=
+
+# Lets an agent that has just edited the roadmap in Notion push the change live
+# immediately, instead of waiting out NOTION_REVALIDATE. Any long random string;
+# the endpoint refuses to run when it is unset.
+REVALIDATE_SECRET=
+
+# Set by the Notion webhook handshake — POST the subscription from Notion's
+# Webhooks tab, read verification_token out of the deployment logs, and put it
+# here. It is the signing key for every event after it and is not recoverable
+# later; re-subscribe to get a new one.
+NOTION_WEBHOOK_SECRET=

.github/workflows/check-ecosystem-urls.yml

@@ -1,10 +1,12 @@
 name: Check Ecosystem URLs
 
 on:
-  # Run on PRs that touch ecosystem data
+  # Run on PRs that touch ecosystem data. The catalogue is markdown in
+  # content/ecosystem — data/ecosystem.json was its old shape and no longer
+  # exists, so this trigger had stopped firing on the files it is meant to guard.
   pull_request:
     paths:
-      - "data/ecosystem.json"
+      - "content/ecosystem/**"
       - "public/ecosystem/**"
 
   # Weekly check — Mondays at 9am UTC
@@ -23,13 +25,18 @@ jobs:
     steps:
       - uses: actions/checkout@v7
 
+      # pnpm, not npm: the repo pins it via package.json's packageManager field
+      # and ships pnpm-lock.yaml. This step must precede setup-node so that
+      # `cache: pnpm` can find the store.
+      - uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v7
         with:
           node-version: 20
-          cache: npm
+          cache: pnpm
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Check ecosystem URLs
         run: node scripts/check-ecosystem-urls.mjs

.gitignore

@@ -50,3 +50,5 @@ img/
 .vscode/
 *.code-workspace
 .playwright-mcp/
+.env*
+!.env.example

README.md

@@ -1,18 +1,19 @@
 # Livepeer Website
 
-The official website for [Livepeer](https://livepeer.org) — open infrastructure for real-time AI video.
+The official website for [Livepeer](https://livepeer.org) — the open inference network for AI video and image workloads.
 
 ## Tech Stack
 
 - **Framework**: Next.js 15 (App Router)
-- **UI**: React 19, Tailwind CSS v4, Framer Motion 11
+- **UI**: React 19, Tailwind CSS v4
+- **Design system**: [Livepeer UI](https://livepeer.peaceno.de/design.md) — a shadcn component registry (semantic tokens, light + dark)
 - **Language**: TypeScript
-- **Fonts**: Favorit Pro & Favorit Mono (Dinamo Typefaces)
+- **Fonts**: Inter for everything (self-hosted from rsms.me), Geist Mono for code
 
 ## Prerequisites
 
-- [Node.js 22.x](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) (includes npm)
-- [pnpm v10.x](https://pnpm.io/installation) — install with `npm install -g pnpm` or `corepack enable`
+- [Node.js 22.x](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+- [pnpm v10.x](https://pnpm.io/installation) — install with `corepack enable` (the version is pinned in `package.json`)
 - [Docker](https://docs.docker.com/get-docker/) (optional) — required for the dev container
 
 > [!TIP]
@@ -48,12 +49,24 @@ Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 ## Scripts
 
-| Command         | Description              |
-| --------------- | ------------------------ |
-| `npm run dev`   | Start development server |
-| `npm run build` | Create production build  |
-| `npm run start` | Serve production build   |
-| `npm run lint`  | Run ESLint               |
+| Command          | Description              |
+| ---------------- | ------------------------ |
+| `pnpm dev`       | Start development server |
+| `pnpm build`     | Create production build  |
+| `pnpm start`     | Serve production build   |
+| `pnpm lint`      | Run ESLint               |
+| `pnpm typecheck` | Type-check with `tsc`    |
+
+## Design System
+
+UI is built from the [Livepeer UI](https://livepeer.peaceno.de/design.md) shadcn registry. Install the theme and components with the shadcn CLI:
+
+```bash
+pnpm dlx shadcn@latest add @livepeer-ui/theme
+pnpm dlx shadcn@latest add @livepeer-ui/button
+```
+
+Compose with the registry's semantic tokens and roles. See `CLAUDE.md` for the working rules (token discipline, font roles, brand-green constraint, per-page checklist).
 
 ## Dev Container (Recommended)
 
@@ -66,15 +79,23 @@ Develop inside a pre-configured container — consistent tooling, zero local set
 
 ```
 app/                  # Next.js App Router pages
-  brand/              # Brand guidelines page
-  primer/             # Livepeer primer page
-  use-cases/          # Use-case pages
+  agent/              # Agent product page
+  ecosystem/          # Ecosystem catalog (+ [slug], submit)
+  compute/            # Provide GPU compute
+  token/              # Livepeer Token (LPT)
+  foundation/         # Foundation
+  blog/               # Latest / blog (+ [slug])
+  brand/              # Brand guidelines
+  primer/             # Livepeer primer (kept, unlinked)
 components/
-  home/               # Homepage sections (Hero, Capabilities, etc.)
   layout/             # Header and Footer
-  ui/                 # Shared UI primitives (Button, Card, Container, etc.)
-  icons/              # Logo components (Symbol, Wordmark, Lockup)
-lib/                  # Constants, fonts, and custom hooks
+  ui/                 # Shared primitives + registry components
+  blog/ ecosystem/    # Section-specific components
+  primer/ icons/      # Primer chapters, logo components
+content/
+  blog/               # Markdown blog posts
+  ecosystem/          # Markdown ecosystem entries
+lib/                  # Content loaders, fonts, hooks, subgraph
 public/               # Static assets (images, videos, fonts)
 ```
 

app/agent/opengraph-image.tsx

@@ -0,0 +1,9 @@
+import { renderArtCard, ogArt, OG_SIZE, OG_CONTENT_TYPE } from "@/lib/og";
+
+export const alt = "Livepeer Agent";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default function OpengraphImage() {
+  return renderArtCard(ogArt.agent);
+}

app/agent/page.tsx

@@ -0,0 +1,85 @@
+import type { Metadata } from "next";
+
+import type { LivepeerOrgPage } from "@/components/livepeer-ui/contracts";
+import { LivepeerAgentHero } from "@/components/livepeer-ui/livepeer-agent-hero";
+import {
+  AgentAccessSection,
+  AgentCapabilitiesSection,
+} from "@/components/livepeer-ui/livepeer-agent-sections";
+import { agentCapabilities } from "@/lib/agent-capabilities";
+import { agentApp } from "@/lib/site";
+
+// Static, in-repo page content matching the registry's content contract
+// (see CLAUDE.md → Content). Copy mirrors the public-beta mockup.
+//
+// Every destination here is on the Agent product app, not this site — they all
+// resolve through `agentApp` so the host is settled in one place.
+type AgentContent = NonNullable<LivepeerOrgPage["agentContent"]>;
+
+const agent: AgentContent = {
+  hero: {
+    heading: "Create and edit images and video with your agent.",
+    // Just what happens. Naming the step that no longer exists would put an
+    // API key in the reader's head on the way to telling them there isn't one.
+    description:
+      "Add this server in your agent's MCP / connector settings. The first connection opens your browser and signs you in.",
+    serverUrl: agentApp.mcpServerUrl,
+    signInCta: { label: "Sign in", href: agentApp.signIn },
+    createAccountCta: { label: "Create account", href: agentApp.createAccount },
+  },
+  access: {
+    heading: "Install Livepeer Agent in your app today",
+    description:
+      "Point your product's agent runtime at the same MCP server and Livepeer Agent's image and video workflows are available inside it.",
+    // No CTA. The band is a statement about what the Agent can do inside
+    // someone else's product, and the console is one click away in the header.
+  },
+  capabilities: {
+    heading:
+      "Livepeer Agent brings image, video, audio, 3D, editing, rendering, and production tools across the Livepeer network into one interface.",
+    cta: { label: "See more", href: agentApp.playbooks },
+  },
+  // The mockup has no playbooks section on this page — the library lives in the
+  // Agent app, which the capabilities CTA links to. Kept present because the
+  // contract requires it, and empty rather than invented.
+  playbooks: {
+    heading: "",
+    description: "",
+    cta: { label: "", href: agentApp.playbooks },
+  },
+};
+
+const DESCRIPTION =
+  "Create and edit images and video with your agent. Connect Livepeer Agent over MCP and reach image, video, audio, 3D and production tools across the Livepeer network.";
+
+// openGraph and twitter are declared, not inferred. Next does not fill
+// og:title from `title` or og:description from `description`, so a page
+// setting only those two inherits the root layout's openGraph object whole —
+// and served "Livepeer — The open inference network" with the home page's
+// description to every timeline it was shared into.
+export const metadata: Metadata = {
+  title: "Livepeer Agent",
+  description: DESCRIPTION,
+  openGraph: {
+    title: "Livepeer Agent | Livepeer",
+    description: DESCRIPTION,
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Livepeer Agent | Livepeer",
+    description: DESCRIPTION,
+  },
+};
+
+export default function AgentPage() {
+  return (
+    <>
+      <LivepeerAgentHero content={agent.hero} />
+      <AgentAccessSection content={agent.access} />
+      <AgentCapabilitiesSection
+        content={agent.capabilities}
+        capabilities={agentCapabilities}
+      />
+    </>
+  );
+}

app/agent/twitter-image.tsx

@@ -0,0 +1,3 @@
+// Metadata files cascade, so without this the segment would serve its own
+// og:image but the root's twitter:image.
+export { default, alt, size, contentType } from "./opengraph-image";

app/api/notion-webhook/route.ts

@@ -0,0 +1,105 @@
+import crypto from "node:crypto";
+
+import { revalidatePath } from "next/cache";
+import { NextResponse } from "next/server";
+
+/**
+ * Notion tells us the register changed, instead of us waiting to notice.
+ *
+ * This is a webhook subscription on the integration itself, which is not the
+ * same thing as an automation inside the database. Automations exist to
+ * perform actions and deliberately do not run on API edits, so an agent
+ * updating a commitment triggers nothing. Webhooks are delivery rather than
+ * action, and their payload identifies the author as `person`, `bot` or
+ * `agent` — a distinction that would be pointless if bot edits produced no
+ * events. Worth confirming by test rather than by reading: make an edit
+ * through the API and see whether one arrives.
+ *
+ * Subscribing is an admin job, in the connection's Webhooks tab. See the
+ * setup notes in content/roadmap/README.md.
+ */
+
+/** Only the register reads Notion, so this is the only path worth clearing. */
+const PATH = "/roadmap";
+
+/**
+ * Notion's handshake: on subscribing, it POSTs a one-off `verification_token`
+ * rather than an event. That token is then the signing key for every event
+ * after it, so it has to be captured and configured — it is not recoverable
+ * later. Logged loudly for that reason: the setup step is "read it out of the
+ * deployment logs and paste it into Vercel", and a quiet log makes that step
+ * look impossible.
+ */
+function handleVerification(token: string): NextResponse {
+  console.log(
+    `[notion-webhook] verification_token=${token}\n` +
+      `[notion-webhook] Save this as NOTION_WEBHOOK_SECRET, then paste it ` +
+      `into Notion's Webhooks tab to confirm the subscription. Events are ` +
+      `rejected until it is set.`
+  );
+  return NextResponse.json({ received: true });
+}
+
+/**
+ * HMAC-SHA256 of the raw body, keyed by the verification token.
+ *
+ * The raw text matters: re-serialising the parsed JSON would reorder or
+ * reformat it and never match. Compared in constant time out of habit rather
+ * than need — the consequence of forging one of these is a page rebuilt
+ * early, not a page rewritten.
+ */
+function signatureMatches(raw: string, header: string, secret: string) {
+  const expected =
+    "sha256=" + crypto.createHmac("sha256", secret).update(raw).digest("hex");
+  const a = Buffer.from(header);
+  const b = Buffer.from(expected);
+  return a.length === b.length && crypto.timingSafeEqual(a, b);
+}
+
+export async function POST(request: Request): Promise<NextResponse> {
+  const raw = await request.text();
+
+  let body: { verification_token?: string; type?: string };
+  try {
+    body = JSON.parse(raw);
+  } catch {
+    return NextResponse.json({ error: "Body is not JSON." }, { status: 400 });
+  }
+
+  // The handshake arrives before there is a secret to verify against, so it
+  // has to be handled before the signature check rather than after it.
+  if (body.verification_token) {
+    return handleVerification(body.verification_token);
+  }
+
+  const secret = process.env.NOTION_WEBHOOK_SECRET;
+  if (!secret) {
+    console.warn(
+      "[notion-webhook] Event received but NOTION_WEBHOOK_SECRET is unset, " +
+        "so it cannot be verified. Re-run the subscription handshake."
+    );
+    return NextResponse.json(
+      { error: "NOTION_WEBHOOK_SECRET is not configured." },
+      { status: 503 }
+    );
+  }
+
+  const signature = request.headers.get("x-notion-signature") ?? "";
+  if (!signatureMatches(raw, signature, secret)) {
+    // Logged rather than silent: a signature scheme that is subtly wrong
+    // rejects every event and otherwise looks exactly like a webhook nobody
+    // is sending to.
+    console.warn(
+      `[notion-webhook] Rejected ${body.type ?? "an event"}: signature did ` +
+        `not match. If this is every event, NOTION_WEBHOOK_SECRET is stale — ` +
+        `re-subscribe and capture the new token.`
+    );
+    return NextResponse.json({ error: "Bad signature." }, { status: 401 });
+  }
+
+  // Any event the subscription sends is about the register, because the
+  // integration can only see the register — so there is nothing to filter on.
+  // Revalidating is idempotent and costs a rebuild at worst.
+  revalidatePath(PATH);
+  return NextResponse.json({ revalidated: true, path: PATH, type: body.type });
+}