feat(web): show install command on component detail pages - #5
Merged
Conversation
A visitor landing on a component detail page now sees an
Install section right after the description, before the
Preview/Code tabs. Single command visible (GitHub registry
mode), with URL mode and namespace mode nested in a
<details> block.
Components added:
- apps/web/components/install-command/{index,install-command}.tsx
- Renders the GitHub-mode command by default
- <details> with the URL-mode and namespace-mode commands
- Reuses CodeBlock (already supports copy-button via Shiki
wrapping via the existing pattern in the detail page)
Detail-page edit:
- apps/web/app/components/[category_id]/[component_id]/page.tsx
- Imports + renders <InstallCommand itemId={component.id} />
between the title/description section and the <Tabs>
CodeBlock edit:
- apps/web/components/code-block.tsx
- Added "bash" to SupportedLang union so shell commands render
with syntax highlighting through Shiki (which already
supports bash; only the TS surface needed widening)
Choice rationale (single-cmd + details, detail page only):
the homepage is the browse surface; the install belongs at
the moment of decision, which is the detail page. A single
visible command stays scannable; the <details> contains the
alt modes for users who need them.
Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
martyy-code
added a commit
that referenced
this pull request
Jul 29, 2026
Follow-up to PR #5 (install-command on detail pages). PR #5 added "bash" to the SupportedLang type in CodeBlock but did not preload the bash grammar in apps/web/lib/shiki.ts. At runtime, Shiki tried to highlight bash and threw "ShikiError: Language \ not found, you may need to load it first" on every render of a component detail page. One-line fix: add "bash" to the langs array passed to createHighlighter. Shiki lazy-loads grammars; this loads only when getHighlighter() is first called, so there's no runtime overhead beyond the one-time fetch. Co-Authored-By: Claude <noreply@anthropic.com>
martyy-code
added a commit
that referenced
this pull request
Jul 29, 2026
Follow-up to PR #5 (install-command on detail pages). PR #5 added "bash" to the SupportedLang type in CodeBlock but did not preload the bash grammar in apps/web/lib/shiki.ts. At runtime Shiki threw: ShikiError: Language "bash" not found, you may need to load it first on every render of a component detail page. One-line fix: add "bash" to the langs array passed to createHighlighter. Shiki lazy-loads grammars; this loads only when getHighlighter() is first called, so there's no runtime overhead beyond the one-time fetch. Co-Authored-By: Claude <noreply@anthropic.com>
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
A visitor on /components// now sees an Install section between the title/description and the Preview | Code tabs. One command visible (GitHub-registry mode), URL mode + namespace mode nested in a
Details
block.What's in this PR
New component apps/web/components/install-command/{index,install-command}.tsx — renders the install commands, reuses the existing CodeBlock so syntax highlighting matches the rest of the UI.
Detail page edit — import + render between the title section and Tabs:
CodeBlock edit — added "bash" to the SupportedLang union. Shiki supports bash natively; only the TS surface needed widening.
What's not in this PR
Visual shape
A heading "Install", a one-line caption, the GitHub-mode command in a code block (syntax-highlighted via Shiki thanks to the new "bash" lang support), and a collapsible
CI expectations
This PR touches showcase-only source code (apps/web/). No impact on:
The 6 CI jobs (lint, typecheck, contract, drift, registry-validate, build-showcase) should all stay green.
🤖 Generated with Claude Code