Skip to content

Repository navigation

feat(docs): redesign navigation, footer and page shell - #1119

Draft
chasegrayoffice wants to merge 21 commits into
mainfrom
chase/docs-redesign
Draft

feat(docs): redesign navigation, footer and page shell#1119
chasegrayoffice wants to merge 21 commits into
mainfrom
chase/docs-redesign

Conversation

@chasegrayoffice

@chasegrayoffice chasegrayoffice commented Nov 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Simplifies the docs shell to one bar of products over the current product's sidebar, built from the Product DS (@tempoxyz/ds): one way to move at each level, one primary button, and the page's actions in one row above the title.

Summary

  • Top bar: the TEMPO DEVELOPERS lockup, the products as plain links (Get started, Accounts, Earn, Routes, Zones, Machine Payments, Network), Resources as the only menu (Guides, Partners, SDKs & CLI), search and Get API key. The Home · Docs · Reference · Resources tabs and the section row are gone.
  • Sidebar: only the current product's pages, with group labels quieter than the items (12/16 tertiary, as in DS SidebarMenu). Each product's sidebar ends with an API reference group that links its endpoint pages; the API reference itself keeps its full generated sidebar. No URLs change.
  • Below 1200px: the products move into a menu drawer (DS Drawer and SidebarMenu) with Resources, the section's pages, Get API key and the theme. The Section / Page bar is gone, and so is the "On this page" row.
  • Page: a header row above the H1 with breadcrumbs (DS Breadcrumbs), Ask AI (a DS Menu, ⌘I) and Copy page (a DS SplitButton); both actions are icon-only on phones. The floating Ask AI pill is gone, and the lead is body size.
  • Page end: Previous / Next under the feedback row, with no footer on docs pages. Home and the 404 keep the full footer: Products, Resources and Tempo.
  • DS: the chrome uses DS Button, Menu, SplitButton, Breadcrumbs, Drawer, SidebarMenu and Kbd. Docs copy and UI text are set in Inter like DS Body (scoped to docs pages, so the marketing pages keep Pilat); titles keep Pilat and code the mono. Removes DocsSectionNav, DocsSidebarDrawer, DocsBreadcrumbs and the unused header recipes.
  • Shared components and global styles changed, so every docs page is affected.

Owner notes

  • vocs.config.ts: each product sidebar gains an API reference group linking existing /docs/api tag pages (paths from regroupApiTags). Network's group lists the Data API pages. Owner: jenpaff for Network.
  • Styles: globals.ts (sidebar labels, hidden Ask AI pill and outline row, Inter for docs copy), contract.ts adds fontFamily.ui (Inter, which @tempoxyz/ds loads). Owner: snario.
  • public/SKILL.md keeps the section table from the earlier commits; no change here. Owner: brendanjryan.

Testing

  • pnpm check, pnpm check:types, pnpm test (1713 tests), pnpm build and pnpm check:markdown pass.
  • Checked on a local dev server at 390, 768, 1180, 1280 and 1440, light and dark: access keys, Earn, SDKs, the Earn API reference, Home and the menu drawer. No horizontal overflow at any width.
  • E2E specs now assert the product bar, header row and menu drawer. Against a local dev server: docs-workspace 58/59, blog 19/19, developers-homepage 12/12, sidebar-scroll 6/6, zyzz-styles 57/57. The one miss, Copy page's Markdown copy, waits on the dev server's 5s Markdown fetch, unchanged by this PR; it passes with a longer timeout. document-semantics and production-mount run in CI.
  • Not checked: Safari.

chasegrayoffice and others added 9 commits November 10, 2026 12:55
@chasegrayoffice @claude
feat(ia): add operate, sdks & cli and guides sections
591479a 
Group the docs into six nav areas over the existing sections. Node,
upgrade and changelog pages move from Tempo EVM to a new Operate
section; SDK, CLI and server pages move from Get Started to SDKs & CLI;
the payment guides move to Guides. URLs are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
feat(nav): six-area global nav with product switcher and get api key
da8e1fd 
One rounded bar holds the Tempo product switcher, the six areas
(Products, Reference and Resources open menus), search, Agent setup,
Log in and Get API key. The second row lists the sections of the
current area. The mobile menu groups the six areas and keeps the
external arrow for external links only.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
feat(home): lead with the first payment and one card family
0bbb46c 
Home opens with an orientation hero, one primary action (Send your
first payment) and a secondary path to an API key, then quick links,
guides with their own action labels, products, tools, and agent setup
last. Every card shares one fill, radius and hover. Get started makes
the quickstart its one primary action.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
fix(search): rank guides above api operations and add aliases
07d1def 
Guide pages now outrank API operations for intent queries, rpc, chain
id and explorer surface Network details, api key surfaces the API keys
guide, faucet surfaces the faucet page, and repeated breadcrumb
segments collapse.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
feat(shell): add docs footer, breadcrumbs and a not-found page
fd3fe5f 
Every docs page gets a black footer with Docs, Products, Tools, For
agents and Tempo columns, and breadcrumbs (area, section, group, page)
above its H1. Unknown URLs render a not-found page inside the docs
shell with search, top tasks and the six areas.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
style(docs): quieter page actions, docked ask ai, prose measure and c…
7384bd2 
…allouts

Copy for agent becomes a quiet labelled control grouped with its icon
actions. Ask AI docks in the right rail from 1376px and is an icon
button elsewhere, so it no longer covers text. Prose caps at 720px on
a 25.6px line height, and callouts use four quiet tones.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
fix(ia): match the get started sidebar label to its page title
e2d3488 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
style(docs): previous and next read as next-step cards
a87d7dd 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
style(get-started): format the hero selectors
c2687b9 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Nov 10, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
tempo-docs Ready Ready Preview Nov 13, 2026 1:09am UTC

Request Review

chasegrayoffice and others added 2 commits November 10, 2026 13:36
@chasegrayoffice @claude
fix(nav): keep the header from overlapping between 1080 and 1375px
ca5ad73 
The brand and product switcher no longer shrink under the area links.
From 1080px to 1279px the Docs label hides and area links tighten;
search stays an icon until 1376px, where it becomes the field.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
test(e2e): follow the six-area nav, new home and get started
5bb4171 
Assertions on the old section tabs, utilities strip and mobile section
list now check the area nav, its menus and the sections row. Changelog
tests follow it into Operate, SDK and CLI pages into SDKs & CLI, and
Home and Get started checks use their new H1 and primary action.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
chasegrayoffice and others added 4 commits November 11, 2026 17:09
@chasegrayoffice @claude
Merge remote-tracking branch 'origin/main' into chase/docs-redesign
54479fa 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
feat(nav): four tabs, section tabs and a page bar
7de125f 
The top bar is the TEMPO DEVELOPERS lockup, Home, Docs, Reference and Resources as plain links, search and Get API key. Docs gets seven section tabs, with Tempo EVM and Operate merged into Network; below 1080 a Section / Page bar opens the drawer. The product switcher, Agent setup and Log in move to sidebars, Build with AI and Console.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
feat(docs): one page action, outline-only rail and sharper system
a282c17 
Pages drop breadcrumbs and get one Copy page menu beside the H1. The rail holds only the outline, feedback and Edit this page move to the page end, and Ask AI is one pill at every width. Radius, spacing, type and colour follow one set of rules: 8 for controls, 12 for surfaces, 14/20 UI text and one selected chip.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
feat(home): one hero action, compact docs footer and a leaner 404
611f30c 
Home keeps one hero button, three guides including Build with AI, Products and a Reference & tools row. Docs pages get a one-row footer; Home and the 404 keep a four-column footer. The 404 shows search and four top tasks.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
style(docs): apply the value rules to content components
6ece138 
Content components follow the same scale as the shell: 12/14/16 text, 400 and 500 weights, secondary labels, radius 12 for surfaces and 4 for badges, 24 between steps, the docs H1 and lead on product overviews, and one selected chip in segmented controls and the sidebar. Removes 19 unused type utilities from surfaces.styles.ts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
test(e2e): assert the Nav v2 tabs, section row, page bar and footers
f8c5f9b 
Specs that checked the old areas, dropdowns, breadcrumbs, Agent setup popover and footer now check the four tabs, the section row at 1080 and up, the Section / Page bar below it, the Copy page menu and the compact and full footers. Style checks follow the system: 56px top bar, regular headings, radius 4 badges.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
chasegrayoffice and others added 3 commits November 12, 2026 16:50
@chasegrayoffice @claude
feat(nav): one bar of products, a DS menu drawer and a page header row
8ad67f5 
The top bar lists the products as plain links, with Resources as its only
menu, search and Get API key; the area tabs, section row and page bar are
gone. Below 1200px the products move into a DS Drawer with SidebarMenu.
Each docs page opens with DS Breadcrumbs, an Ask AI menu and a Copy page
SplitButton, and docs pages end at Previous / Next with no footer.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
feat(ia): end each product's sidebar with its API reference
9d63d60 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
test(e2e): follow the product bar, header row and menu drawer
e10bd4d 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chasegrayoffice @claude
style(docs): set copy in Inter, like DS Body
4efbb4d 
Docs pages set prose, lists, tables, callouts and UI copy in Inter, the font
the DS components already use; titles keep Pilat and code keeps the mono.
Scoped to the docs shell, so the marketing pages keep Pilat.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch was successfully deployed

1 active deployment
Preview — 4efbb4d6 Deployed Nov 13, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@chasegrayoffice