Rework API reference Endpoint to use standard code blocks#3341
Draft
pwizla wants to merge 9 commits into
Draft
Conversation
The Endpoint component now delegates request and response code to the site's standard Tabs and CodeBlock components instead of re-rendering code passed as props. This restores syntax highlighting, native copy/wrap/Ask AI buttons, and status tabs consistent with the rest of the site. Only the first REST endpoint is migrated so far.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
pr: new content
The full-width bottom border under each endpoint fell in an awkward spot below the parameter table. Drop it (and the now-unused isLast prop).
The endpoint header and columns had 44px horizontal padding that pushed content inward and a leftover border under the parameter column. Drop the padding so content spans the available width, add a column gap instead, reduce the header top padding, and remove the extra border.
Use a column-only gap so stacked params/code no longer get a large row gap, reduce the code column top padding, and remove the vertical and horizontal separators between the parameter and code columns.
Convert the get, create, update, and delete endpoints on the REST API reference page to the new authoring format (Tabs + fenced code + Responses), and widen the gap between the parameter and code columns.
Vertically center tab labels site-wide by removing the extra bottom padding and using flex centering. In terminal-style code blocks, drop the language (BASH) label and move the copy/wrap buttons up into the title bar next to Ask AI instead of floating over the code.
The copy/wrap button group in terminal code blocks was oversized and overflowed the title bar. Size it to match the Ask AI button and align it on the same row, inside the bar.
Align the copy/wrap button group to the title bar's right padding and reserve space so the Ask AI button sits just left of it, on the same row, without overflowing the bar.
Style the copy/wrap buttons in terminal code blocks as the same white pill with a neutral border used on regular code blocks, sized and positioned to align with the Ask AI button in both light and dark.
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
1 participant
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.
This PR reworks the API reference Endpoint component so request and response code is rendered by the site's standard Tabs and CodeBlock components instead of code passed as props. This restores syntax highlighting, the native copy/wrap/Ask AI buttons, and status tabs that are consistent with every other code block on the site.
Work in progress: only the first REST endpoint is migrated to the new authoring format so far. The remaining REST endpoints and other API reference pages still use the old props-based API and will be migrated in follow-up commits.
Direct preview link 👉 here