docs: restructure IA, redesign navbar and site CSS#3477
docs: restructure IA, redesign navbar and site CSS#3477jessiemongeon1 wants to merge 22 commits into
Conversation
- Redesign landing page with product-centric cards (Data Storage, Walrus Memory, Walrus Console, Walrus Skills) and integrated search bar - Rewrite search modal to match Sui docs style: inline search input, plain text tabs, Ask Walrus AI banner that opens Kapa with query - Add Kapa sidebar mode (data-view-mode=sidebar) with client module that detects open/close state and shifts doc content to accommodate - Slim down navbar height (4.25rem → 3.25rem), tighten spacing and font sizes for a more compact look Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Restructure sidebar into 4 product sections: Walrus Console, Walrus Memory, Walrus Marketplace, Data Storage - Reorder Data Storage sidebar: Get Started → Concepts → Features → Examples → Tools → Costs → Operations → Protocol Reference - Two-row navbar: logo+search+actions top, section tabs bottom - Active tab highlighted with tinted background and underline - Modernize all CSS: tighter typography, compact sidebar, updated dark mode palette with proper contrast hierarchy - Card styles match homepage aesthetic (20px radius, gradient hover) - Search modal with Ask Walrus AI banner (Sui-style) - Homepage: light background, no topbar, centered logo - Add placeholder pages for Console, Marketplace, and Costs sections - Walrus mascot icon for Kapa AI button Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
📋 afdocs check resultsURL: https://MystenLabs.github.io/walrus/pr-preview/pr-3477/ |
Script fetches from three sources: - MystenLabs/walrus GitHub releases (66 platform releases) - MystenLabs/MemWal GitHub releases (19 Walrus Memory releases) - Walrus blog posts (6 announcements) Generates a consolidated release-notes.mdx with sections for each source, auto-linked PR references, and MDX-safe content escaping. Runs as part of the prestart/prebuild pipeline. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Each release note now has a visible inline code badge showing its source: `WALRUS`, `WALRUS MEMORY`, or `BLOG`, plus network badges (`Mainnet`/`Testnet`) for platform releases. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Release notes now use Docusaurus Tabs component with three tabs: Walrus Platform, Walrus Memory, and Blog. Each tab shows only its source's releases. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Use the walrus mascot favicon from blog.walrus.xyz - Tabs: larger font (0.8125rem), more padding, bold weight - Active tab: colored text, tinted background, thicker underline Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tabs now render as a bordered pill group with rounded background. Active tab has a raised white card appearance with shadow and colored border, similar to a segmented control. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Navbar tab row: "Blog" replaced with "Release Notes" linking to /docs/release-notes - Walrus Memory tab now has nested sub-tabs: MCP, TypeScript SDK, Python SDK, OpenClaw — each showing only its package's releases Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Release Notes now has its own releaseNotesSidebar instead of being a page inside the Data Storage sidebar. This prevents the double- highlight issue where both the navbar tab and sidebar item were active simultaneously. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use displayed_sidebar: null to hide the sidebar entirely on the release notes page, giving it a clean blog-like layout. The navbar tab uses a plain link instead of docSidebar. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Style Guide AuditAudited 51 file(s) against the Sui Documentation Style Guide. 258 violation(s) found. All must be fixed before merge.
|
Console IA redesigned with 8 sections matching the PRD: - Get Started (what is console, account, tour, first upload) - Files and Storage (upload, manage, epoch renewal, limits) - Walrus Memory (namespaces, browse objects, epoch renewal) - Datasets (what are datasets, upload, access models, marketplace) - API and MCP (keys, MCP server setup, API reference) - Team Spaces (create, invite, shared keys) - Billing (free tier, usage pricing, plans) - Security (authentication, audit) Marketplace IA restructured into user-centric sections: - Get Started (overview, browse, first purchase) - For Publishers (create, pricing, access control, manage, analytics) - For Consumers (license, access data, renewals) - Build Integrations (API, widgets, webhooks, console sync) 22 new Console pages, 6 new Marketplace pages, old manage-storage directory removed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace dynamic sidebar generation with a hardcoded sidebar that places every page in optimal order for AI developer UX: 1. Get Started (what is it, quick start, choose path, examples) 2. Core Concepts (merged fundamentals + architecture) 3. AI Tools / MCP — PROMOTED from 7th to 3rd position 4. TypeScript SDK — orphans placed logically (overview first, examples/cookbook middle, advanced/API last) 5. Python SDK 6. OpenClaw Plugin 7. Relayer (infrastructure, demoted) 8. Reference (merged contract, indexer, architecture, security) 9. Contributing (bottom) Key changes vs previous dynamic sidebar: - MCP promoted for AI developer audience (primary persona) - SDK orphans (8 pages) deterministically ordered - Contract/Indexer/Architecture collapsed into Reference - Relayer demoted below user-facing sections - All orphans placed — no random filesystem ordering Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Homepage card links now use Docusaurus useBaseUrl hook instead of hardcoded absolute paths. This ensures links work correctly on GitHub preview deploys where the base URL is not "/". Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Data Storage is now the first tab in the navbar (leftmost) - Tab order: Data Storage | Walrus Memory | Walrus Console | Walrus Marketplace | Release Notes - Remove standalone "Walrus Memory" landing link from sidebar - Clean up TypeScript SDK: remove dev pages, fix labels Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace raw <a href> tags with Docusaurus <Link to> component for all homepage card links. The Link component automatically prepends the correct baseUrl (e.g. /walrus/pr-preview/pr-3477/) which fixes 404s on GitHub Pages preview deployments. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use useDocusaurusContext to get baseUrl and prepend it to all card hrefs at render time. This ensures the correct path is baked into the static HTML during SSR, fixing 404s on GitHub Pages preview deploys where baseUrl is /walrus/pr-preview/pr-NNNN/. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Pull 59 editorial summary files from PR #3492 and integrate them into the release notes generator. Each Walrus platform release now shows a human-written editorial summary as a blockquote above the raw GitHub release body. Editorial files live in docs/editorial/walrus-v*.md with frontmatter and a concise summary paragraph. The script matches them by version number and prepends the summary (with the network/date line stripped since it's already rendered by the script). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- 19 editorial summaries for Walrus Memory releases (SDK, MCP, Python, OpenClaw) stored in docs/editorial/memwal-*.md - Release notes script now loads both Walrus and MemWal editorial summaries, rendering them as blockquotes above each release body - Blog tab removed from release notes page (only Walrus Platform and Walrus Memory tabs remain) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace plain blockquotes with styled .release-editorial divs: - Larger text (1rem vs 0.85rem), taller line-height (1.65) - Gradient background with purple/mint tint - 4px purple left border, rounded right corners - More padding (1.25rem 1.5rem) for visual weight - Dark mode: mint border, subtle gradient Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Summary
Test plan
pnpm buildpasses🤖 Generated with Claude Code