fix: improve esm/types/cjs badges

Author: danielroe

app/components/PackageMetricsBadges.vue

@@ -11,34 +11,19 @@ const { data: analysis } = usePackageAnalysis(
   () => props.version,
 )
 
-const moduleFormatLabel = computed(() => {
-  if (!analysis.value) return null
-  switch (analysis.value.moduleFormat) {
-    case 'esm':
-      return 'ESM'
-    case 'cjs':
-      return 'CJS'
-    case 'dual':
-      return 'CJS/ESM'
-    default:
-      return null
-  }
+// ESM support
+const hasEsm = computed(() => {
+  if (!analysis.value) return false
+  return analysis.value.moduleFormat === 'esm' || analysis.value.moduleFormat === 'dual'
 })
 
-const moduleFormatTooltip = computed(() => {
-  if (!analysis.value) return ''
-  switch (analysis.value.moduleFormat) {
-    case 'esm':
-      return $t('package.metrics.esm')
-    case 'cjs':
-      return $t('package.metrics.cjs')
-    case 'dual':
-      return $t('package.metrics.dual')
-    default:
-      return $t('package.metrics.unknown_format')
-  }
+// CJS support (only show badge if present, omit if missing)
+const hasCjs = computed(() => {
+  if (!analysis.value) return false
+  return analysis.value.moduleFormat === 'cjs' || analysis.value.moduleFormat === 'dual'
 })
 
+// Types support
 const hasTypes = computed(() => {
   if (!analysis.value) return false
   return analysis.value.types?.kind === 'included' || analysis.value.types?.kind === '@types'
@@ -48,11 +33,11 @@ const typesTooltip = computed(() => {
   if (!analysis.value) return ''
   switch (analysis.value.types?.kind) {
     case 'included':
-      return $t('package.metrics.ts_included')
+      return $t('package.metrics.types_included')
     case '@types':
-      return $t('package.metrics.types_from', { package: analysis.value.types.packageName })
+      return $t('package.metrics.types_available', { package: analysis.value.types.packageName })
     default:
-      return ''
+      return $t('package.metrics.no_types')
   }
 })
 
@@ -68,29 +53,58 @@ const typesHref = computed(() => {
 <template>
   <ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
     <!-- TypeScript types -->
-    <li v-if="hasTypes">
+    <li>
       <component
         :is="typesHref ? NuxtLink : 'span'"
         :to="typesHref"
-        class="inline-flex items-center px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
-        :class="
+        class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
+        :class="[
+          hasTypes
+            ? 'text-fg-muted bg-bg-muted border border-border'
+            : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
           typesHref
             ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
-            : ''
-        "
+            : '',
+        ]"
         :title="typesTooltip"
       >
-        TS
+        <span
+          class="w-3 h-3"
+          :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
+          aria-hidden="true"
+        />
+        Types
       </component>
     </li>
 
-    <!-- Module format -->
-    <li v-if="moduleFormatLabel">
+    <!-- ESM badge (show with X if missing) -->
+    <li>
+      <span
+        class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
+        :class="
+          hasEsm
+            ? 'text-fg-muted bg-bg-muted border border-border'
+            : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+        "
+        :title="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
+      >
+        <span
+          class="w-3 h-3"
+          :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
+          aria-hidden="true"
+        />
+        ESM
+      </span>
+    </li>
+
+    <!-- CJS badge (only show if present) -->
+    <li v-if="hasCjs">
       <span
-        class="inline-flex items-center px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
-        :title="moduleFormatTooltip"
+        class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
+        :title="$t('package.metrics.cjs')"
       >
-        {{ moduleFormatLabel }}
+        <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
+        CJS
       </span>
     </li>
   </ul>

app/pages/[...package].vue

@@ -508,10 +508,10 @@ defineOgImageComponent('Package', {
                 v-if="displayVersion"
                 :package-name="pkg.name"
                 :version="displayVersion.version"
-                class="self-center ml-1 sm:ml-2"
+                class="self-baseline ml-1 sm:ml-2"
               />
               <template #fallback>
-                <ul class="flex items-center gap-1.5 self-center ml-1 sm:ml-2">
+                <ul class="flex items-center gap-1.5 self-baseline ml-1 sm:ml-2">
                   <li class="skeleton w-8 h-5 rounded" />
                   <li class="skeleton w-12 h-5 rounded" />
                 </ul>

i18n/locales/de.json

@@ -203,14 +203,6 @@
       "title": "Ausprobieren",
       "choose": "Playground wählen"
     },
-    "metrics": {
-      "esm": "Nur ES-Module",
-      "cjs": "Nur CommonJS",
-      "dual": "Unterstützt CommonJS und ES-Module",
-      "unknown_format": "Unbekanntes Modulformat",
-      "ts_included": "TypeScript-Typen enthalten",
-      "types_from": "Typen von {package}"
-    },
     "license": {
       "view_spdx": "Lizenztext auf SPDX ansehen"
     },

i18n/locales/en.json

@@ -205,12 +205,12 @@
       "choose": "choose playground"
     },
     "metrics": {
-      "esm": "ES Modules only",
-      "cjs": "CommonJS only",
-      "dual": "Supports both CommonJS and ES Modules",
-      "unknown_format": "Unknown module format",
-      "ts_included": "TypeScript types included",
-      "types_from": "Types from {package}"
+      "esm": "ES Modules supported",
+      "cjs": "CommonJS supported",
+      "no_esm": "No ES Modules support",
+      "types_included": "Types included",
+      "types_available": "Types available via {package}",
+      "no_types": "No TypeScript types"
     },
     "license": {
       "view_spdx": "View license text on SPDX"

i18n/locales/fr.json

@@ -194,14 +194,6 @@
       "title": "Essayer",
       "choose": "choisir un playground"
     },
-    "metrics": {
-      "esm": "ES Modules uniquement",
-      "cjs": "CommonJS uniquement",
-      "dual": "Supporte CommonJS et ES Modules",
-      "unknown_format": "Format de module inconnu",
-      "ts_included": "Types TypeScript inclus",
-      "types_from": "Types depuis {package}"
-    },
     "license": {
       "view_spdx": "Voir le texte de la licence sur SPDX"
     },

i18n/locales/it.json

@@ -204,14 +204,6 @@
       "title": "Provalo",
       "choose": "sciegli il playground"
     },
-    "metrics": {
-      "esm": "solo ES Modules",
-      "cjs": "solo CommonJS",
-      "dual": "Supporto per entrambi CommonJS e ES Modules",
-      "unknown_format": "Formato modulo sconosciuto",
-      "ts_included": "TypeScript types incluso",
-      "types_from": "Types da {package}"
-    },
     "license": {
       "view_spdx": "Vedi il testo della licenza su SPDX"
     },

i18n/locales/zh-CN.json

@@ -204,14 +204,6 @@
       "title": "试一试",
       "choose": "选择 Playground"
     },
-    "metrics": {
-      "esm": "只支持 ES Modules",
-      "cjs": "只支持 CommonJS",
-      "dual": "同时支持 CommonJS 和 ES Modules",
-      "unknown_format": "未知模块格式",
-      "ts_included": "包含 TypeScript 类型",
-      "types_from": "类型来自 {package}"
-    },
     "license": {
       "view_spdx": "在 SPDX 上查看许可证文本"
     },