Skip to content

Commit ddbeefa

Browse files
Adebesin-Cellclaude
andcommitted
fix: use translated description for empty compare OG image
Pass i18n-translated empty description from the page as a prop since OG image components don't have access to $t. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent e3bdf73 commit ddbeefa

File tree

2 files changed

+5
-13
lines changed

2 files changed

+5
-13
lines changed

app/components/OgImage/Compare.vue

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import { encodePackageName } from '#shared/utils/npm'
55
const props = withDefaults(
66
defineProps<{
77
packages?: string | string[]
8+
emptyDescription?: string
89
primaryColor?: string
910
}>(),
1011
{
1112
packages: () => [],
13+
emptyDescription: 'Compare npm packages side-by-side',
1214
primaryColor: '#60a5fa',
1315
},
1416
)
@@ -125,21 +127,10 @@ function barPct(downloads: number): string {
125127
<!-- Empty state -->
126128
<div
127129
v-if="stats.length === 0"
128-
class="flex flex-wrap items-center gap-x-3 text-4xl text-[#a3a3a3]"
130+
class="text-4xl text-[#a3a3a3]"
129131
style="font-family: 'Geist', sans-serif"
130132
>
131-
<span>compare npm packages</span>
132-
<span
133-
class="px-3 py-1 rounded-lg border font-normal"
134-
:style="{
135-
color: primaryColor,
136-
backgroundColor: primaryColor + '10',
137-
borderColor: primaryColor + '30',
138-
boxShadow: `0 0 20px ${primaryColor}25`,
139-
}"
140-
>
141-
side-by-side
142-
</span>
133+
{{ emptyDescription }}
143134
</div>
144135

145136
<!-- Bar chart rows -->

app/pages/compare.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ function exportComparisonDataAsMarkdown() {
137137
138138
defineOgImageComponent('Compare', {
139139
packages: () => packages.value,
140+
emptyDescription: () => $t('compare.packages.meta_description_empty'),
140141
})
141142
142143
useSeoMeta({

0 commit comments

Comments
 (0)