feat(ui): add badges ?style=compact variant#2640
Open
OrbisK wants to merge 2 commits intonpmx-dev:mainfrom
Open
feat(ui): add badges ?style=compact variant#2640OrbisK wants to merge 2 commits intonpmx-dev:mainfrom
?style=compact variant#2640OrbisK wants to merge 2 commits intonpmx-dev:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Contributor
📝 WalkthroughWalkthroughIntroduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant API as Badge API Handler
participant Renderer as Badge Renderer (default/shieldsio/compact)
participant Response as SVG Response
Client->>API: GET /badge/... ?style=compact
API->>API: validate style, compute strategyLabel (apply COMPACT_LABEL_MAP if compact)
API->>Renderer: render SVG with measured widths & padding
Renderer-->>API: SVG (width,height,content)
API-->>Client: 200 OK + SVG
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
server/api/registry/badge/[type]/[...pkg].get.ts (1)
248-280: Consider sharing the SVG template between the default and compact renderers.
renderCompactBadgeSvgis byte-identical torenderDefaultBadgeSvgexcept for the width-measurement helper (and the absence ofFALLBACK_VALUE_EXTRA_PADDING_X). Future tweaks to the modern Geist template (e.g. corner radius, accessibility attributes, font-family) will need to be applied in two places, which is easy to miss. A small parameterisation removes the duplication.♻️ Suggested consolidation
-function renderDefaultBadgeSvg(params: { +type ModernBadgeParams = { finalColor: string finalLabel: string finalLabelColor: string finalValue: string labelTextColor: string valueTextColor: string -}): string { - const { finalColor, finalLabel, finalLabelColor, finalValue, labelTextColor, valueTextColor } = - params - const leftWidth = finalLabel.trim().length === 0 ? 0 : measureDefaultTextWidth(finalLabel) - const rightWidth = measureDefaultTextWidth(finalValue, FALLBACK_VALUE_EXTRA_PADDING_X) +} + +function renderModernBadgeSvg( + params: ModernBadgeParams, + measureLabel: (text: string) => number, + measureValue: (text: string) => number, +): string { + const { finalColor, finalLabel, finalLabelColor, finalValue, labelTextColor, valueTextColor } = + params + const leftWidth = finalLabel.trim().length === 0 ? 0 : measureLabel(finalLabel) + const rightWidth = measureValue(finalValue) const totalWidth = leftWidth + rightWidth const height = 20 /* ...existing SVG template... */ } -function renderCompactBadgeSvg(params: { ... }): string { ... duplicated template ... } +const renderDefaultBadgeSvg = (params: ModernBadgeParams) => + renderModernBadgeSvg( + params, + text => measureDefaultTextWidth(text), + text => measureDefaultTextWidth(text, FALLBACK_VALUE_EXTRA_PADDING_X), + ) + +const renderCompactBadgeSvg = (params: ModernBadgeParams) => + renderModernBadgeSvg(params, measureCompactTextWidth, measureCompactTextWidth)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@server/api/registry/badge/`[type]/[...pkg].get.ts around lines 248 - 280, renderCompactBadgeSvg duplicates renderDefaultBadgeSvg; extract the shared SVG template into a single helper (e.g., renderBadgeSvgTemplate or renderBadgeSvg) that accepts parameters for leftWidth/rightWidth (or a measurement strategy), finalColor/finalLabelColor, label/value text/colors, height, corner radius and any padding (FALLBACK_VALUE_EXTRA_PADDING_X) and accessibility attributes, then have renderDefaultBadgeSvg and renderCompactBadgeSvg compute their widths using measureTextWidth and measureCompactTextWidth respectively and call the new shared renderer with those computed widths and any extra padding; update callers to use the two small adapters and remove the duplicated SVG string.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@server/api/registry/badge/`[type]/[...pkg].get.ts:
- Around line 248-280: renderCompactBadgeSvg duplicates renderDefaultBadgeSvg;
extract the shared SVG template into a single helper (e.g.,
renderBadgeSvgTemplate or renderBadgeSvg) that accepts parameters for
leftWidth/rightWidth (or a measurement strategy), finalColor/finalLabelColor,
label/value text/colors, height, corner radius and any padding
(FALLBACK_VALUE_EXTRA_PADDING_X) and accessibility attributes, then have
renderDefaultBadgeSvg and renderCompactBadgeSvg compute their widths using
measureTextWidth and measureCompactTextWidth respectively and call the new
shared renderer with those computed widths and any extra padding; update callers
to use the two small adapters and remove the duplicated SVG string.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b6925d5e-36aa-4b37-8324-ab978a187b15
📒 Files selected for processing (4)
docs/app/components/BadgeGeneratorParameters.vuedocs/content/2.guide/6.badges.mdserver/api/registry/badge/[type]/[...pkg].get.tstest/e2e/badge.spec.ts
OrbisK
changed the title
?style=compact variant?style=compact variant
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
server/api/registry/badge/[type]/[...pkg].get.ts (2)
543-560: Dispatch table + compact label map: tidy. One maintenance caveat.The
BADGE_RENDERERSlookup paired with the picklist schema gives a fully typed dispatch — much cleaner than the previous inline conditional. TheCOMPACT_LABEL_MAPis also straightforward, and verified consistent: both thedownloadsanddownloads-monthstrategies emit'downloads/mo', so they both abbreviate to'dl/mo'as expected.One nit worth flagging for future maintenance:
COMPACT_LABEL_MAPkeys are stringly-coupled to label strings declared insidebadgeStrategies(e.g.'install size','dependencies'). A future rename there would silently fall through to the original label rather than break a build. Not a bug today, but worth a brief comment near the map (or co-locating compact labels with each strategy) to prevent drift.♻️ Minimal hardening — narrow the key type
-const COMPACT_LABEL_MAP: Record<string, string> = { +// Keys must match labels returned by `badgeStrategies` entries. +const COMPACT_LABEL_MAP: Record<string, string> = { 'install size': 'size', 'downloads/day': 'dl/day', 'downloads/wk': 'dl/wk', 'downloads/mo': 'dl/mo', 'downloads/yr': 'dl/yr', 'dependencies': 'deps', 'maintainers': 'maint', }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@server/api/registry/badge/`[type]/[...pkg].get.ts around lines 543 - 560, COMPACT_LABEL_MAP keys are stringly-coupled to label strings in badgeStrategies which can drift silently; to fix, narrow the key type and/or co-locate the compact labels with each strategy: either export a LabelKey union (e.g., type BadgeLabel = 'install size' | 'downloads/day' | ... used by badgeStrategies) and type COMPACT_LABEL_MAP as Record<BadgeLabel,string>, or move the compact label into each entry in badgeStrategies and build COMPACT_LABEL_MAP from those entries; update usages to rely on the new BadgeLabel type or the strategy-provided compact label and add a short comment by COMPACT_LABEL_MAP referencing badgeStrategies to avoid future divergence.
272-281: Optional: reuseBadgeRenderParamsfor the shieldsio renderer.
renderShieldsBadgeSvgre-declares the same six fields inline. Now thatBadgeRenderParamsexists, switching to it removes duplication and keeps the three renderers structurally aligned, which also makes theBADGE_RENDERERSdispatch table’s shared input contract obvious.♻️ Proposed refactor
-function renderShieldsBadgeSvg(params: { - finalColor: string - finalLabel: string - finalLabelColor: string - finalValue: string - labelTextColor: string - valueTextColor: string -}): string { +function renderShieldsBadgeSvg(params: BadgeRenderParams): string {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@server/api/registry/badge/`[type]/[...pkg].get.ts around lines 272 - 281, renderShieldsBadgeSvg currently re-declares the same six fields instead of using the existing BadgeRenderParams type; update the function signature of renderShieldsBadgeSvg to accept params: BadgeRenderParams and remove the redundant local destructuring that duplicates those fields, ensuring its parameter shape matches the other renderers and keeping the BADGE_RENDERERS dispatch table’s shared input contract consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@server/api/registry/badge/`[type]/[...pkg].get.ts:
- Around line 543-560: COMPACT_LABEL_MAP keys are stringly-coupled to label
strings in badgeStrategies which can drift silently; to fix, narrow the key type
and/or co-locate the compact labels with each strategy: either export a LabelKey
union (e.g., type BadgeLabel = 'install size' | 'downloads/day' | ... used by
badgeStrategies) and type COMPACT_LABEL_MAP as Record<BadgeLabel,string>, or
move the compact label into each entry in badgeStrategies and build
COMPACT_LABEL_MAP from those entries; update usages to rely on the new
BadgeLabel type or the strategy-provided compact label and add a short comment
by COMPACT_LABEL_MAP referencing badgeStrategies to avoid future divergence.
- Around line 272-281: renderShieldsBadgeSvg currently re-declares the same six
fields instead of using the existing BadgeRenderParams type; update the function
signature of renderShieldsBadgeSvg to accept params: BadgeRenderParams and
remove the redundant local destructuring that duplicates those fields, ensuring
its parameter shape matches the other renderers and keeping the BADGE_RENDERERS
dispatch table’s shared input contract consistent.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: be32817b-9eee-453e-917b-b1dbd25ba4d1
📒 Files selected for processing (1)
server/api/registry/badge/[type]/[...pkg].get.ts
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.
🔗 Linked issue
fixes #2509
🧭 Context
Working on https://github.com/OrbisK/renovate-config-npmx i wanted to use the npmx styled badges, but they were to big.
📚 Description
This PR add a third style (compact) to the badges. compact has less x padding and "trimmed" labels
?style=default?style=compactAlternative naming:
?style=slimFunfact: fff5849 commit hash is tomato color in hex