Skip to content

Commit ef581d3

Browse files
danielroedanielroe
committed
fix: extract hard-coded strings
1 parent 2fe608b commit ef581d3

3 files changed

Lines changed: 69 additions & 24 deletions

File tree

‎app/components/PackageSkillsCard.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const open = defineModel<boolean>('open', { default: false })
1717
href="#skills"
1818
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
1919
>
20-
Agent Skills
20+
{{ $t('package.skills.title') }}
2121
<span
2222
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
2323
aria-hidden="true"
@@ -30,13 +30,17 @@ const open = defineModel<boolean>('open', { default: false })
3030
@click="open = true"
3131
>
3232
<span class="i-custom:agent-skills size-4 text-fg-muted" aria-hidden="true" />
33-
<span class="text-sm text-fg">{{ skills.length }} skills available</span>
34-
<span class="text-xs text-fg-subtle group-hover/btn:text-fg transition-colors ms-auto"
35-
>View</span
36-
>
33+
<span class="text-sm text-fg">{{
34+
$t('package.skills.skills_available', { count: skills.length }, skills.length)
35+
}}</span>
36+
<span class="text-xs text-fg-subtle group-hover/btn:text-fg transition-colors ms-auto">{{
37+
$t('package.skills.view')
38+
}}</span>
3739
</button>
38-
<p class="text-xs text-fg-subtle mt-2">
39-
Compatible with <NuxtLink to="/skills-npm" class="link">skills-npm</NuxtLink>
40-
</p>
40+
<i18n-t keypath="package.skills.compatible_with" tag="p" class="text-xs text-fg-subtle mt-2">
41+
<template #tool>
42+
<NuxtLink to="/skills-npm" class="link">skills-npm</NuxtLink>
43+
</template>
44+
</i18n-t>
4145
</section>
4246
</template>

‎app/components/PackageSkillsModal.vue‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ function handleKeydown(event: KeyboardEvent) {
8585
<div class="p-4 sm:p-6">
8686
<div class="flex items-center justify-between mb-4">
8787
<h2 id="skills-modal-title" class="font-mono text-lg font-medium">
88-
{{ $t('package.skills.title', 'Agent Skills') }}
88+
{{ $t('package.skills.title') }}
8989
</h2>
9090
<button
9191
type="button"
@@ -99,11 +99,13 @@ function handleKeydown(event: KeyboardEvent) {
9999

100100
<!-- Install header with tabs -->
101101
<div class="flex flex-wrap items-center justify-between gap-2 mb-3">
102-
<h3 class="text-xs text-fg-subtle uppercase tracking-wider">Install</h3>
102+
<h3 class="text-xs text-fg-subtle uppercase tracking-wider">
103+
{{ $t('package.skills.install') }}
104+
</h3>
103105
<div
104106
class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md"
105107
role="tablist"
106-
aria-label="Installation method"
108+
:aria-label="$t('package.skills.installation_method')"
107109
>
108110
<button
109111
role="tab"
@@ -143,14 +145,20 @@ function handleKeydown(event: KeyboardEvent) {
143145
v-if="selectedMethod === 'skills-npm'"
144146
class="flex items-center justify-between gap-2 px-3 py-2.5 sm:px-4 bg-bg-subtle border border-border rounded-lg mb-5"
145147
>
146-
<span class="text-sm text-fg-muted"
147-
>Compatible with <code class="font-mono text-fg">skills-npm</code></span
148+
<i18n-t
149+
keypath="package.skills.compatible_with"
150+
tag="span"
151+
class="text-sm text-fg-muted"
148152
>
153+
<template #tool>
154+
<code class="font-mono text-fg">skills-npm</code>
155+
</template>
156+
</i18n-t>
149157
<a
150158
href="/skills-npm"
151159
class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors shrink-0"
152160
>
153-
Learn more
161+
{{ $t('package.skills.learn_more') }}
154162
<span class="i-carbon:arrow-right w-3 h-3" />
155163
</a>
156164
</div>
@@ -188,8 +196,12 @@ function handleKeydown(event: KeyboardEvent) {
188196

189197
<!-- Skills list -->
190198
<div class="flex items-baseline justify-between gap-2 mb-2">
191-
<h3 class="text-xs text-fg-subtle uppercase tracking-wider">Available Skills</h3>
192-
<span class="text-xs text-fg-subtle/60">Click to expand</span>
199+
<h3 class="text-xs text-fg-subtle uppercase tracking-wider">
200+
{{ $t('package.skills.available_skills') }}
201+
</h3>
202+
<span class="text-xs text-fg-subtle/60">{{
203+
$t('package.skills.click_to_expand')
204+
}}</span>
193205
</div>
194206
<ul class="space-y-0.5 list-none m-0 p-0">
195207
<li v-for="skill in skills" :key="skill.dirName">
@@ -223,26 +235,40 @@ function handleKeydown(event: KeyboardEvent) {
223235
<p v-if="skill.description" class="text-sm text-fg-subtle">
224236
{{ skill.description }}
225237
</p>
226-
<p v-else class="text-sm text-fg-subtle/50 italic">No description</p>
238+
<p v-else class="text-sm text-fg-subtle/50 italic">
239+
{{ $t('package.skills.no_description') }}
240+
</p>
227241

228242
<!-- File counts & warnings -->
229243
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
230244
<span v-if="skill.fileCounts?.scripts" class="text-fg-subtle">
231245
<span class="i-carbon:script size-3 inline-block align-[-2px] me-0.5" />{{
232-
skill.fileCounts.scripts
246+
$t(
247+
'package.skills.file_counts.scripts',
248+
{ count: skill.fileCounts.scripts },
249+
skill.fileCounts.scripts,
250+
)
233251
}}
234-
scripts
235252
</span>
236253
<span v-if="skill.fileCounts?.references" class="text-fg-subtle">
237254
<span
238255
class="i-carbon:document size-3 inline-block align-[-2px] me-0.5"
239-
/>{{ skill.fileCounts.references }} refs
256+
/>{{
257+
$t(
258+
'package.skills.file_counts.refs',
259+
{ count: skill.fileCounts.references },
260+
skill.fileCounts.references,
261+
)
262+
}}
240263
</span>
241264
<span v-if="skill.fileCounts?.assets" class="text-fg-subtle">
242265
<span class="i-carbon:image size-3 inline-block align-[-2px] me-0.5" />{{
243-
skill.fileCounts.assets
266+
$t(
267+
'package.skills.file_counts.assets',
268+
{ count: skill.fileCounts.assets },
269+
skill.fileCounts.assets,
270+
)
244271
}}
245-
assets
246272
</span>
247273
<template v-for="warning in skill.warnings" :key="warning.message">
248274
<span class="text-amber-500">
@@ -259,7 +285,7 @@ function handleKeydown(event: KeyboardEvent) {
259285
class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors"
260286
@click.stop
261287
>
262-
<span class="i-carbon:code size-3" />View source
288+
<span class="i-carbon:code size-3" />{{ $t('package.skills.view_source') }}
263289
</NuxtLink>
264290
</div>
265291
</div>

‎i18n/locales/en.json‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,22 @@
152152
}
153153
},
154154
"skills": {
155-
"title": "Agent Skills"
155+
"title": "Agent Skills",
156+
"skills_available": "{count} skill available | {count} skills available",
157+
"view": "View",
158+
"compatible_with": "Compatible with {tool}",
159+
"install": "Install",
160+
"installation_method": "Installation method",
161+
"learn_more": "Learn more",
162+
"available_skills": "Available Skills",
163+
"click_to_expand": "Click to expand",
164+
"no_description": "No description",
165+
"file_counts": {
166+
"scripts": "{count} script | {count} scripts",
167+
"refs": "{count} ref | {count} refs",
168+
"assets": "{count} asset | {count} assets"
169+
},
170+
"view_source": "View source"
156171
},
157172
"links": {
158173
"repo": "repo",

0 commit comments

Comments
 (0)