Skip to content

Playground redesign and SEO metadata - #13

Merged
includeamin merged 2 commits into
mainfrom
playground-design
Oct 1, 2026
Merged

includeamin merged 2 commits into
mainfrom
playground-design

Conversation

@includeamin

Copy link
Copy Markdown
Owner

Redesigns the web playground as a three-pane workbench and adds SEO metadata so the playground can show up in search results and render rich link previews.

Design

  • Layout: a full-height layout with three panes:
    • a file sidebar;
    • an editor with tabs for openapi-aggregator.yaml and the selected file;
    • output tabs: Merged spec, API reference, and Problems with a count badge.
  • Top bar: a logo mark, a tagline, a styled example picker and the "Copy share link" action. Below it, a dismissible intro strip links to installing the CLI and to how merging works; dismissing it is remembered per browser.
  • Status bar: shows the run state (Merged, Merged with warnings, Config has errors, Merge failed, Waiting for permission to fetch), each source, the problem count and the output format.
  • Source colours: each source gets a colour. It appears as a dot next to its file in the sidebar (hollow if the config doesn't use the file) and as a chip in the status bar.
  • Fonts and theming:
    • IBM Plex Sans and Mono are bundled with @fontsource, so no request goes to a font CDN.
    • The editors draw their colours from the page's CSS tokens, using One Dark syntax colours in dark mode.
  • Scalar API reference:
    • It follows the system light or dark setting and uses the page fonts.
    • Its developer toolbar, "Ask AI" agent and telemetry are turned off.
  • Small screens: below 900 px the panes stack vertically and the file actions are always visible.

The run-state and colour logic lives in the new web/src/sources.ts, with unit tests.

SEO

  • Search snippet: a title and meta description aimed at searches like "merge OpenAPI specs" and "Swagger merge", plus a canonical URL and keywords.
  • Link previews: Open Graph and Twitter card tags with a new 1200×630 preview image, web/public/og-image.png.
  • Structured data: SoftwareApplication JSON-LD describing a free developer application, with its repository and license.
  • No-JS fallback: a visually hidden <h1> and a <noscript> summary for crawlers that don't run JavaScript.
  • Sitemap: sitemap.xml, to submit in Google Search Console after deploy. There is no robots.txt: for a project site, crawlers only read it at the domain root.

Separately, the repo's description, homepage URL and topics have been updated on GitHub.

Testing

  • 55 vitest unit tests pass (1 skipped because it needs the network), and typecheck is clean.
  • All 4 Playwright end-to-end tests pass. The problem badge now shows 1 instead of (1).
  • Checked with screenshots in light mode, dark mode and at 390 px wide. There is no horizontal scroll and no console errors.

- top bar with logo, tagline, example picker and share action; dismissible intro strip
- file sidebar with per-source colour dots and hover actions, editor tabs for config and files
- output tabs with problem badge, status bar showing run state, sources and format
- IBM Plex Sans/Mono bundled locally; editors and Scalar themed from the page tokens in light and dark
- descriptive title and meta description, canonical URL, Open Graph and Twitter cards
- SoftwareApplication JSON-LD, visually hidden h1 and a noscript summary for crawlers
- 1200x630 og-image.png and sitemap.xml
@includeamin
includeamin merged commit 7bbf032 into main Oct 1, 2026
4 checks passed
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