Skip to content

Commit 935c48b

Browse files
Adebesin-Cellclaude
andcommitted
fix: truncate long package names in compare OG image
Names over 40 chars are truncated with ellipsis to prevent layout overflow with extremely long package names in all layout tiers. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 8e0d98e commit 935c48b

File tree

1 file changed

+12
-3
lines changed

1 file changed

+12
-3
lines changed

app/components/OgImage/Compare.vue

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,13 @@ const layoutTier = computed<LayoutTier>(() => {
5454
return 'summary'
5555
})
5656
57+
const NAME_MAX_LENGTH = 40
58+
59+
function truncateName(name: string): string {
60+
if (name.length <= NAME_MAX_LENGTH) return name
61+
return name.slice(0, NAME_MAX_LENGTH - 1) + ''
62+
}
63+
5764
interface PkgStats {
5865
name: string
5966
downloads: number
@@ -81,7 +88,7 @@ if (layoutTier.value !== 'summary') {
8188
}).catch(() => null),
8289
])
8390
return {
84-
name,
91+
name: truncateName(name),
8592
downloads: dlData?.downloads ?? 0,
8693
version: pkgData?.['dist-tags']?.latest ?? '',
8794
color: ACCENT_COLORS[index % ACCENT_COLORS.length]!,
@@ -92,7 +99,7 @@ if (layoutTier.value !== 'summary') {
9299
stats.value = results.sort((a, b) => b.downloads - a.downloads)
93100
} catch {
94101
stats.value = displayPackages.value.map((name, index) => ({
95-
name,
102+
name: truncateName(name),
96103
downloads: 0,
97104
version: '',
98105
color: ACCENT_COLORS[index % ACCENT_COLORS.length]!,
@@ -143,7 +150,9 @@ const gridRows = computed(() => {
143150
return rows
144151
})
145152
146-
const summaryTopNames = computed(() => displayPackages.value.slice(0, SUMMARY_TOP_COUNT))
153+
const summaryTopNames = computed(() =>
154+
displayPackages.value.slice(0, SUMMARY_TOP_COUNT).map(truncateName),
155+
)
147156
const summaryRemainder = computed(() =>
148157
Math.max(0, displayPackages.value.length - SUMMARY_TOP_COUNT),
149158
)

0 commit comments

Comments
 (0)