WIP: Redesign livepeer.org - #93
Draft
adamsoffer wants to merge 8 commits into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
adamsoffer
changed the title
Peace Node's registry theme becomes the only token layer. The hand-rolled --color-* system, the Holographik grid, the hero classes, .blog-prose and seventeen bespoke keyframes go; globals.css keeps the type scale, the two theme roots, the prose classes and four live keyframes. The primer keeps its own scoped slice, deliberately unmigrated. The shell is the registry's: header (sticky, transparent at rest, glass on scroll, with opt-ins for sections that need it solid, inverted or glass from rest), footer, theme toggle, brand marks, and the shadcn primitives the pages compose. Page content is authored in-repo as typed objects matching the registry's content contracts, with the Sanity client stubbed by a static module the header expects. Share images render the registry's og card, one per segment with a twitter-image beside it. The legacy home, layout, blog and ecosystem components, the PascalCase ui/ visuals, the five use-case routes and their images are deleted; the redirects in next.config.ts serve those URLs. Discord is read live from the server's widget (lib/discord.ts) after discord.gg/livepeer was taken over, with livepeer.org/discord as the one owned URL for content. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Copy stays in the repo. Content that is many records of one shape, maintained by people on their own schedule, moves to Notion: the roadmap register, the blog and the funding ladder. lib/notion.ts reads the databases over plain fetch and maps them onto the same types the markdown readers produce, enforcing every rule those readers enforced; a Notion failure with a token throws rather than serving stale markdown as if it were current. lib/register.ts picks the source: Notion when NOTION_TOKEN is set, content/*.md when it is not, so a clone without a workspace credential still runs. A webhook and a revalidate route let an edit reach the site within a minute without a deploy. The ecosystem catalogue stays as markdown with YAML frontmatter and a live contributor template, with its URL check kept in CI. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
/roadmap is the register of commitments, built from the requirements doc with no mockup: cards by quarter, filters, credited faces, and a "Not on the roadmap?" block that points at /contribute. Each commitment has its own page, and an intercepting route slides it over the register as a sheet; a record page mounted directly starts at the top. Organizations and people are their own Notion databases, related from the register so a name, portrait, owner and type are each stated once. They render like a roadmap record and slide over the register the same way, with no index. What an organization owns or a person worked on is derived by filtering the register, never stored on them. Portraits are committed under public/people; Notion holds a link to the same file. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The post is the Notion page body. The index reads metadata only and a post reads its body, because twelve bodies fetched to render a list of cards that show none of them is twelve wasted round-trips. Slug is an explicit property, since a published URL gets quoted back; Author relates to the people database; a post's art is its page cover, one image for the card, the header and the share card, and a post without one fails the build. Media in a body must be a link, never an upload: cdn.sanity.io passes, a livepeer.org address is rewritten to the committed file and checked, anything else fails. content/blog/*.md is the no-token fallback. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Replaces the Foundation's Grants & Funding Mechanisms page as the canonical answer. The hero is a sentence and a Discord button with the live online count beneath it, on a ground that is a contribution graph drawn with vgpu: the grid a contributor's year is drawn on, four levels of the brand green moving as a slow tide with a swell over it, colour from the theme tokens, one still frame under reduced motion, a CSS mask clearing the ground around the text, and an empty CSS grid beneath so a browser without WebGPU shows an empty graph rather than a gap. The section pulls up under the header, which wears its glass from rest. The funding ladder is a Notion database, one row per way work gets paid for, ordered by size, rendered as a hairline grid of cells: name, who it is for, who decides and the ceiling as two labelled rows, and where to go. Retired is a status, not a deletion. The page closes on the contributors strip lifted from the old home page, twelve faces and a count read live from spotlight.livepeer.dev with a dated snapshot as the fallback. Footer-only: not in the header's Resources menu. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Home, Agent, Ecosystem, Compute, Token, Foundation and Brand are rebuilt from the mockup set, each as typed content handed to registry sections. Compute pulls live metrics; Foundation deliberately drops the three pillars and the Messari block; Brand is designed from design.md with no mockup and signed off. The home page's Agent section shows the product being used rather than its controls: an agent runtime, unnamed, where a prompt types in with a still attached, the agent checks the network's capabilities, a run_capability call goes out with a real capability, price and latency read from the network, and a clip comes back. It plays once per entry into view and holds on the finished state, fits the window without scrolling, and shows the finished state still under reduced motion. Built on ElevenLabs UI's Conversation, Message and Shimmering Text, vendored into components/ui under MIT because the registry rate-limited every install route. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The page was busy: bordered cards, tiles, a five-column table, copy buttons on every row and a 740-line construction drawing. It is now a product page at a centred 56rem measure. Each thing it has to say is an object on a soft plate with a caption under it, and the copy is short. The marks sit on an ink switch, black or white, expressed through the theme's foreground/background pair so both inks stay honest in both themes; the SVG links follow the switch. Every usage rule is a picture: clear space drawn, the lockup at its 32px floor (the symbol shares the wordmark's height there, so one object states both minimums; the wordmark alone goes to 24px), and four small "never" plates, stretched, rotated, outlined and recoloured, the last being the only green mark on the site. Type specimens are editable in place, nothing saved, and the scale is rendered at its own sizes instead of tabulated. The hero says what the page is: Brand guidelines. The construction diagram is deleted; the clear-space drawing is the one figure the page needs. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
One face for everything. Inter is self-hosted from Rasmus Andersson's own distribution (rsms.me/inter, the 4.1 release): the InterVariable build and its italic cover 100–900 in two files, with the licence beside them. Geist Mono replaces Favorit Mono for code, paths, IDs, timestamps and the small mono labels. Favorit Pro and Favorit Mono and their ten files are gone, along with the display face they justified: the header's full-screen menu and the share cards now set the same Inter as the pages. `font-display` and `font-heading` stay defined as aliases of the sans so a registry component that sets them still resolves. Satori cannot read the variable woff2, so the share-image renderers use a static Inter-Regular.otf from the same release. The brand page's type section shows two faces; the kit's typography note and README follow. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
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
1 participant
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.
Rebuilds the marketing site against Peace Node's Livepeer UI registry. The registry theme is now the only token layer.
Pages
Nine linked pages, all built from the mockup set except where noted:
//agent/ecosystem/[slug],/submit— markdown-driven catalog/compute/token/foundation/blog/blog/brand/roadmap/primerstays intact and unlinked with its own scoped legacy slice — the one page deliberately left unmigrated.Content is split on its shape and how often it changes. Page copy is authored in-repo as typed objects matching the registry's content contracts (
lib/site.ts) — versioned and reviewed alongside the design it belongs to. Blog and ecosystem are markdown incontent/.Templated content that gets updated frequently moves to Notion, and the roadmap register is the first of it. It is maintained by people across several organisations who do not open pull requests, and a commitment whose state is a week stale is worse than no page at all. The blog is planned next; scope is those two for now, not a general move of the site into a CMS. So this PR is the pattern as much as the page.
lib/notion.tsreads it over plainfetchwith ISR at a minute;content/roadmap/*.mdis the fallback when no workspace token is present, so a clone still builds. Every record carries an owner, a target and a checkable link, and anything missing one fails the build rather than rendering a card that claims less than it should.Cleanup
globals.css1209 → 585 lines. Removed the second--color-*token layer, the Holographik grid, hero classes,.blog-prose, 19 keyframes and 37 custom properties. Chart/sidebar/radius tokens are kept — unused today, but they're the registry's theme contract.Deleted ~73 files:
components/home/*,components/legacy/*,components/ecosystem/*(superseded bycomponents/livepeer-ui/*), the PascalCasecomponents/ui/*visuals,lib/constants.ts, and the fiveapp/use-cases/*routes — redirects innext.config.tsalready served those URLs, so the pages were unreachable.Share images
Rebuilt on the registry's own
ogitem./renders the brand card verbatim — the lockup centred on#000000. Every other page renders the same canvas with a page title, from one sharedlib/og.tsx. Two bugs fixed along the way:twitter-image, and metadata files cascade — so/foundationand/blogserved their ownog:imagebut the root's Twitter card. Every segment now has a re-export beside itsopengraph-image.generateMetadatadeclares anopenGraphobject withoutimages, which drops the inherited card. All 12 projects now get their own titled card.Incidental fixes
app/not-found.tsxstyled its linktext-green— green as an affordance colour, which the design system explicitly rules out. Rebuilt on the registry type scale.sitemap.tsadvertised the five dead/use-casesURLs and never listed/agentor/compute. Rewritten, with ecosystem projects added.package-lock.jsondeleted. Six deps had been added vianpmin a pnpm-pinned repo, leavingpnpm-lock.yamlstale —pnpm install --frozen-lockfilewas failing, which would have broken the Vercel build. Lockfile regenerated and verified.Verification
pnpm typecheck,pnpm lint(0 warnings) andpnpm build(130 static pages) all clean, against both the Notion register and the markdown fallback. Pages verified in light and dark at 390px, sm, md and wide desktop.Before this can ship
agentAppOriginis the console's Vercel preview (lib/site.ts) —livepeer-console.vercel.app, not its final address. It feeds the most prominent CTA on every page, so it still needs one edit before launch. The Agent playbooks link is the one product link left onlivepeer.peaceno.de: the console has no playbooks page, and a mockup beats a 404.forum.livepeer.org/or similar rather than a permalink.🤖 Generated with Claude Code