Repository navigation
Conversation
Add a "modern" API page layout, opt-in at three levels: page front matter (api_layout), per spec (plugin option apiLayout), or site-wide (themeConfig.api.layout). The modern layout shows code samples and response examples in the right panel and opens the request form in a "Try it" side panel. The classic layout remains the default. Explorer changes for both layouts: - Remove the artificial 1.2 s request delay; add loading state, disabled send button and Ctrl/Cmd+Enter shortcut - Track request status explicitly instead of comparing against the translated "Fetching..." string (broke in non-English locales) - Show status text, response time and size; style request errors - Keep the last five responses per endpoint in memory (not persisted) - Endpoint bar: highlighted path params, copy URL button, "Try it" link - Fix FormTextInput overriding react-hook-form's onChange, which left values stale until blur - Accessibility: focus rings, reduced-motion support, live region, higher-contrast button and qualifier labels in dark mode - Visual polish: compact language tabs, visible input borders, pill qualifiers, less uppercase text New opt-in theme options: sidebarMethodBadges and hideTableOfContents. The demo gains a Classic/Modern switch in the navbar. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
Size Change: +34.3 kB (+1.4%) Total Size: 2.48 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Visit the preview URL for this PR (updated for commit 4196726): https://docusaurus-openapi-36b86--pr1709-kb4mjo3b.web.app (expires Thu, 12 Nov 2026 16:35:47 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: bf293780ee827f578864d92193b8c2866acd459f |
📸 Visual Diff ReportSnapshot comparison against https://docusaurus-openapi.tryingpan.dev/
❌ 123 page(s) with visual regressions
|
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-additional-properties-false-on-every-member
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-override-of-nested-array-items-with-one-of
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-deep-merging
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-array-items
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-explicit-empty-object-properties
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-enum-parameter
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-incompatible-types
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-multiple-one-of-constraints
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-nested-all-of
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-properties-in-array-item
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-same-level-properties
| Prod | Preview | Diff |
 |
 |
 |
/tests/all-of-with-shared-required-properties
| Prod | Preview | Diff |
 |
 |
 |
/tests/any-of-with-nested-one-of-and-properties-at-same-level
| Prod | Preview | Diff |
 |
 |
 |
/tests/any-of-with-one-of
| Prod | Preview | Diff |
 |
 |
 |
/tests/any-of-with-primitives
| Prod | Preview | Diff |
 |
 |
 |
/tests/any-of-with-properties-in-array-item
| Prod | Preview | Diff |
 |
 |
 |
/tests/basic-discriminator-with-mapping
| Prod | Preview | Diff |
 |
 |
 |
/tests/basic-discriminator-without-mapping
| Prod | Preview | Diff |
 |
 |
 |
/tests/circular-ref-inside-all-of-composition
| Prod | Preview | Diff |
 |
 |
 |
/tests/circular-ref-via-additional-properties
| Prod | Preview | Diff |
 |
 |
 |
/tests/const-with-primitives
| Prod | Preview | Diff |
 |
 |
 |
/tests/control-no-x-code-samples
| Prod | Preview | Diff |
 |
 |
 |
/tests/cookie-parameter-default
| Prod | Preview | Diff |
 |
 |
 |
/tests/create-rule
| Prod | Preview | Diff |
 |
 |
 |
… and 98 more page(s) with regressions. See the HTML report for the full list.
Updated at 2026-11-05T16:42:55.047Z · run 42065264256
Restore the original icon-card language tabs in the classic layout so the two layouts stay distinct. The compact pill tabs now apply only inside the modern layout wrapper (.openapi-explorer--modern). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Keep the classic layout visually identical to main for section headers, explorer card headers, required/deprecated/nullable labels, schema type labels, and MIME/schema tabs. The polished variants now apply only under .openapi-layout--modern (added by ApiItem/Layout) and inside the Try it panel. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This branch was successfully deployed
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
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.
Summary
Improves the API explorer UX and adds an opt-in modern API page layout. The classic layout stays the default, so existing sites do not change unless they opt in.
Modern layout (opt-in)
api_layout: modernapiLayout: "modern"(written into front matter)themeConfig.api.layout: "modern"main): compact pill-style language tabs, normal-case section and card headers, pill-stylerequired/deprecated/nullablelabels, monospace type labels, and lowercase monospace MIME tabs. The styles are scoped under.openapi-layout--modernand the Try it panel.ApiLayoutContext(from@theme/ApiExplorer/useApiLayout) lets a site add a reader-facing switch. The demo uses it for a Classic | Modern switch in the navbar.Explorer improvements (both layouts)
"Fetching..."string, which broke in non-English locales.FormTextInputreplaced react-hook-form'sonChange, so field values updated only on blur.prefers-reduced-motion, a live region for responses, and higher-contrast send button and qualifier labels in dark mode.Other new opt-in theme options
sidebarMethodBadges: sidebar HTTP method badges. The selectors use:where()(zero specificity), so existing site CSS always wins.hideTableOfContents: hides the desktop TOC on API and schema pages.All new options are documented in the plugin README.
Test plan
yarn test: 659/659 pass (new tests: request history, client modules,api_layoutfront matter)tsc --noEmitfor plugin and themedocusaurus build)Note:
yarn lintfails onmaintoo, because of thecypress/globalsESLint environment. It is not related to this PR.🤖 Generated with Claude Code