feat: add deprecated marking to package timeline page

app/pages/package-timeline/[[org]]/[packageName].vue

@@ -375,7 +375,7 @@ useSeoMeta({
             :class="entry.version === version ? 'bg-accent border-accent' : 'bg-bg-subtle'"
           />
           <!-- Content -->
-          <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+          <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
             <LinkBase
               :to="packageRoute(entry.version)"
               class="text-sm font-medium"
@@ -396,6 +396,13 @@ useSeoMeta({
             >
               {{ tag }}
             </span>
+            <span
+              v-if="entry.deprecated"
+              class="inline-flex items-center gap-1 text-3xs font-semibold uppercase tracking-wide text-red-600 dark:text-red-400"
+            >
+              <span class="i-lucide:octagon-alert w-3 h-3 shrink-0" aria-hidden="true" />
+              {{ $t('package.timeline.deprecated') }}
+            </span>
             <DateTime
               :datetime="entry.time"
               class="text-xs text-fg-subtle"
@@ -406,31 +413,48 @@ useSeoMeta({
           </div>
           <!-- Sub-events -->
           <ol
-            v-if="versionSubEvents.has(entry.version)"
+            v-if="versionSubEvents.has(entry.version) || entry.deprecated"
             class="relative border-s border-border/50 ms-3 mt-2"
           >
+            <template v-if="versionSubEvents.has(entry.version)">
+              <li
+                v-for="ev in versionSubEvents.get(entry.version)"
+                :key="ev.key"
+                class="mb-2 ms-4 relative last:mb-0"
+              >
+                <span
+                  class="absolute -start-[1.375rem] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                  :class="
+                    ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'
+                  "
+                >
+                  <span class="w-2 h-2 text-white" :class="ev.icon" aria-hidden="true" />
+                </span>
+                <p
+                  class="text-xs"
+                  :class="
+                    ev.positive
+                      ? 'text-green-700 dark:text-green-400'
+                      : 'text-amber-700 dark:text-amber-400'
+                  "
+                >
+                  {{ ev.text }}
+                </p>
+              </li>
+            </template>
+            <!-- Deprecated message (on every deprecated version, matching the versions page) -->
             <li
-              v-for="ev in versionSubEvents.get(entry.version)"
-              :key="ev.key"
-              class="mb-2 ms-4 relative last:mb-0"
+              v-if="entry.deprecated"
+              class="ms-4 relative"
+              :class="versionSubEvents.has(entry.version) ? 'mt-2' : ''"
             >
               <span
-                class="absolute -start-[1.375rem] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                :class="
-                  ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'
-                "
+                class="absolute -start-[1.375rem] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border bg-red-500 border-red-600"
               >
-                <span class="w-2 h-2 text-white" :class="ev.icon" aria-hidden="true" />
+                <span class="w-2 h-2 text-white i-lucide:octagon-alert" aria-hidden="true" />
               </span>
-              <p
-                class="text-xs"
-                :class="
-                  ev.positive
-                    ? 'text-green-700 dark:text-green-400'
-                    : 'text-amber-700 dark:text-amber-400'
-                "
-              >
-                {{ ev.text }}
+              <p class="text-xs text-red-700 dark:text-red-400">
+                {{ entry.deprecated }}
               </p>
             </li>
           </ol>

i18n/locales/en.json

@@ -646,6 +646,7 @@
       "trusted_publisher_removed": "Trusted publishing removed",
       "provenance_added": "Provenance enabled",
       "provenance_removed": "Provenance removed",
+      "deprecated": "Deprecated",
       "chart": {
         "tab_aria_label": "Metric selection",
         "dependency_size": "Dependency Size",

i18n/locales/zh-CN.json

@@ -601,7 +601,8 @@
           "version_events": "版本 {version}：{events}",
           "general_description": "折线图展示了 {package} 包从版本 {first} 到 {last} 的 {metric} 变化情况。版本 {first} 的 {metric} 为 {first_value}，版本 {last} 为 {last_value}（整体变化 {overall_progress_percentage}%）。{key_changes} {watermark}。"
         }
-      }
+      },
+      "deprecated": "已弃用"
     },
     "dependencies": {
       "title": "依赖（{count} 个）",

i18n/locales/zh-TW.json

@@ -555,7 +555,8 @@
     "timeline": {
       "chart": {
         "copy_alt": {}
-      }
+      },
+      "deprecated": "已棄用"
     },
     "dependencies": {
       "title": "相依（{count} 個）",

i18n/schema.json

@@ -1942,6 +1942,9 @@
             "provenance_removed": {
               "type": "string"
             },
+            "deprecated": {
+              "type": "string"
+            },
             "chart": {
               "type": "object",
               "properties": {

server/api/registry/timeline/[...pkg].get.ts

@@ -11,6 +11,7 @@ export interface TimelineVersion {
   hasTypes?: boolean
   hasTrustedPublisher?: boolean
   hasProvenance?: boolean
+  deprecated?: string
   tags: string[]
 }
 
@@ -79,6 +80,7 @@ export default defineCachedEventHandler(
             // oxlint-disable-next-line eslint/no-underscore-dangle
             hasTrustedPublisher: version._npmUser?.trustedPublisher ? true : undefined,
             hasProvenance: version.dist?.attestations ? true : undefined,
+            deprecated: version.deprecated || undefined,
             tags: tagsByVersion.get(v) ?? [],
           }
         })