feat(web): code-block styling and copy button on install commands - #7
Merged
Conversation
Each bash install command (visible + inside <details>) is now rendered through a new <CommandBlock> client component that: - Wraps the command in a rounded, bordered container with a muted bg-muted/30 header strip and a real (functional) copy button. The header label defaults to "bash" but is overridable. - Renders the command as a plain <pre><code> without going through Shiki. Shiki would have required the bash grammar to be preloaded in apps/web/lib/shiki.ts, which the project does not currently do — going through Shiki would have thrown ShikiError on every detail page render. Plain <pre> avoids that surface entirely and keeps the visual idiom intact. - copy state is local: navigator.clipboard.writeText with a silent catch (clipboard API can fail in non-secure contexts, e.g. http on a non-localhost origin; the user can still select-and-copy manually). - copyLabel prop lets future i18n or test code inject custom "Copy"/"Copied" strings; default is English. InstallCommand swaps its 4 <CodeBlock ... lang="bash" /> calls for <CommandBlock ... />. Otherwise the JSX structure is unchanged. Verification: - typecheck exits 0 - visual shape matches the existing Code tab in the detail page (same border + rounded + label + copy header), reinforcing the visual idiom without depending on Shiki for shell languages. Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
2 participants
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
Install commands on every component detail page now render in a code-block-styled container (rounded, bordered, header strip with file-type label and a working Copy button), matching the visual rhythm of the existing Code tab.
Before:
(Raw
<pre>inside the section flow, no border, no copy affordance.)After:
Click Copy → 1.5s feedback "Copied", then back to "Copy". Plain-text fallback works even if
navigator.clipboardis unavailable.What's in this PR
New component
apps/web/components/command-block/{command-block,index}.tsx— a small client component that renders one bash command with a header strip and a copy button.Implementation notes:
<pre><code>, not Shiki. The previous InstallCommand used<CodeBlock lang="bash" />. Shiki only highlights languages it has loaded atcreateHighlighter({ langs }), andapps/web/lib/shiki.tsdoes not currently preload bash. Going through CodeBlock would have thrownShikiError: Language "bash" not foundon every detail page render — a regression I had to ship as PR fix(build): add @workspace/registry to transpilePackages #6 commit 2. Routing around Shiki avoids the runtime trap and keeps the visual idiom intact.copyLabel(state)callback prop lets future i18n or test harness inject custom labels. Default:"Copy"/"Copied"in English.navigator.clipboard.writeText. The API rejects in non-secure contexts (http on a non-localhost origin). Selection-and-copy by the user still works in that fallback path.Edit
apps/web/components/install-command/install-command.tsx— the four<CodeBlock ... lang="bash" />calls become<CommandBlock ... />. JSX structure otherwise unchanged.CI expectations
The change is showcase-only (
apps/web/). No impact on:registry.json,registry/base-nova/**— drift job unchangedCommandBlockis consumed directly, no Shiki dependency added or removedapps/web/app/components/[category_id]/[component_id]/page.tsx— still uses<CodeBlock>forlang="tsx". Different visual idiom by design.The 6 CI jobs should stay green. Typecheck should validate the new client component.
🤖 Generated with Claude Code