Skip to content

feat(docs): live market playground section and sibling-style OG cards - #153

Merged
joeblau merged 1 commit into
mainfrom
feat/docs-playground-section-og-cards
Sep 30, 2026
Merged

joeblau merged 1 commit into
mainfrom
feat/docs-playground-section-og-cards

Conversation

@joeblau

@joeblau joeblau commented Sep 30, 2026

Copy link
Copy Markdown

Summary

  • Playground: new live market data playground (components/market-playground.tsx) that streams Hyperliquid mainnet data through the SDK's SubscriptionClient and WebSocketTransport. Asset and feed pickers, generated subscription code with a scramble reveal, and an animated panel height (committed on completion so React Strict Mode re-runs still animate).
  • Landing layout: the playground gets its own section under the hero (eyebrow, heading, blurb, full-width panel), matching bloxwap.github.io/chart and /sfx. Code and output sit side by side on wide screens, where the output scrolls within the code column's height; they stack below 850px. The hero keeps its market-data.ts quick-start window.
  • Hero actions: "Try the playground ↓" (primary, smooth-scrolls to #playground) and "Get started →" (secondary).
  • OG cards: ported the chart/sfx card layout. The landing card shows bloxwap/hyperliquid, the description, and stats computed at build time (91 Info queries, 68 Exchange actions, 29 Subscriptions, v0.5.0 Latest). Docs cards show the title with bloxwap/hyperliquid · <section>. The landing card moves from /og/index.png to /og/home.png; verify-export.ts is updated to match.

Test plan

  • bun run check in apps/docs (content, markdownlint, typegen, tsc)
  • Biome format and lint
  • bun run build: 14 unique social cards verified, og:image points at /og/home.png
  • Dev server: streamed order book and mid price live, measured the height animation frame by frame, checked phone width (no horizontal scroll) and the hero jump link

🤖 Generated with Claude Code

- Add a live market data playground: pick an asset and a feed to stream
  Hyperliquid mainnet data over the SDK's WebSocket transport, with the
  subscription code scrambling in and the panel height animating.
- Give the playground its own section below the hero, like the chart and
  sfx sites, and keep the hero's market-data.ts quick-start window.
- Hero actions: "Try the playground" (primary, jumps down) and "Get
  started" (secondary).
- Social cards now match the chart and sfx cards: bloxwap/hyperliquid
  title, a stats row counted from the SDK's clients and version, and a
  weighted brand color bar. The landing card moves to /og/home.png.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@joeblau
joeblau merged commit 72493c8 into main Sep 30, 2026
6 of 7 checks passed
@joeblau
joeblau deleted the feat/docs-playground-section-og-cards branch September 30, 2026 16:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant