feat: add deprecated marking to package timeline page

app/components/Package/TimelineChart.vue

@@ -70,8 +70,8 @@ function addEvaluationFlags(
     return {
       ...entry,
       events,
-      hasPositive: events.some(event => event.positive),
-      hasNegative: events.some(event => !event.positive),
+      hasPositive: events.some(event => event.state === 'success'),
+      hasNegative: events.some(event => event.state === 'warn' || event.state === 'error'),
     }
   })
 }

app/components/Package/TimelineChartXyTooltip.vue

@@ -61,17 +61,23 @@ const props = defineProps<{
         <span
           class="absolute -start-[1rem] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
           :class="
-            event.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'
+            event.state === 'success'
+              ? 'bg-green-500 border-green-600'
+              : event.state === 'error'
+                ? 'bg-red-500 border-red-600'
+                : 'bg-amber-500 border-amber-600'
           "
         >
           <span class="w-2 h-2 text-white" :class="event.icon" aria-hidden="true" />
         </span>
         <p
           class="text-xs"
           :class="
-            event.positive
+            event.state === 'success'
               ? 'text-green-700 dark:text-green-400'
-              : 'text-amber-700 dark:text-amber-400'
+              : event.state === 'error'
+                ? 'text-red-700 dark:text-red-400'
+                : 'text-amber-700 dark:text-amber-400'
           "
         >
           {{ event.text }}

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

@@ -189,11 +189,24 @@ const versionSubEvents = computed(() => {
   }
 
   for (const current of entries) {
-    const previous = prevBySemver.get(current.version)
-    if (!previous) continue
-
     const events: SubEvent[] = []
 
+    // Deprecation (on every deprecated version, matching the versions page)
+    if (current.deprecated) {
+      events.push({
+        key: 'deprecated',
+        state: 'error',
+        icon: 'i-lucide:octagon-alert',
+        text: `${t('package.timeline.deprecated')}: "${current.deprecated}"`,
+      })
+    }
+
+    const previous = prevBySemver.get(current.version)
+    if (!previous) {
+      if (events.length) result.set(current.version, events)
+      continue
+    }
+
     // Size changes
     const currentSize = sizeCache.get(sizeKey(current.version))
     const previousSize = sizeCache.get(sizeKey(previous.version))
@@ -213,7 +226,7 @@ const versionSubEvents = computed(() => {
         const sizeDelta = currentSize.totalSize - previousSize.totalSize
         events.push({
           key: 'size',
-          positive: sizeDecreased,
+          state: sizeDecreased ? 'success' : 'warn',
           icon: sizeDecreased ? 'i-lucide:trending-down' : 'i-lucide:trending-up',
           text: sizeDecreased
             ? t('package.timeline.size_decrease', {
@@ -230,7 +243,7 @@ const versionSubEvents = computed(() => {
       if (depsIncreased || depsDecreased) {
         events.push({
           key: 'deps',
-          positive: depsDecreased,
+          state: depsDecreased ? 'success' : 'warn',
           icon: depsDecreased ? 'i-lucide:trending-down' : 'i-lucide:trending-up',
           text:
             depDiff > 0
@@ -248,7 +261,7 @@ const versionSubEvents = computed(() => {
       const hasNoLicense = NO_LICENSE_VALUES.has(currentLicense)
       events.push({
         key: 'license',
-        positive: hadNoLicense && !hasNoLicense,
+        state: hadNoLicense && !hasNoLicense ? 'success' : 'warn',
         icon: 'i-lucide:scale',
         text: t('package.timeline.license_change', { from: previousLicense, to: currentLicense }),
       })
@@ -260,14 +273,14 @@ const versionSubEvents = computed(() => {
     if (currentIsEsm && !previousIsEsm) {
       events.push({
         key: 'esm',
-        positive: true,
+        state: 'success',
         icon: 'i-lucide:package',
         text: t('package.timeline.esm_added'),
       })
     } else if (!currentIsEsm && previousIsEsm) {
       events.push({
         key: 'esm',
-        positive: false,
+        state: 'warn',
         icon: 'i-lucide:package',
         text: t('package.timeline.esm_removed'),
       })
@@ -277,14 +290,14 @@ const versionSubEvents = computed(() => {
     if (current.hasTypes && !previous.hasTypes) {
       events.push({
         key: 'types',
-        positive: true,
+        state: 'success',
         icon: 'i-lucide:braces',
         text: t('package.timeline.types_added'),
       })
     } else if (!current.hasTypes && previous.hasTypes) {
       events.push({
         key: 'types',
-        positive: false,
+        state: 'warn',
         icon: 'i-lucide:braces',
         text: t('package.timeline.types_removed'),
       })
@@ -294,14 +307,14 @@ const versionSubEvents = computed(() => {
     if (current.hasTrustedPublisher && !previous.hasTrustedPublisher) {
       events.push({
         key: 'trustedPublisher',
-        positive: true,
+        state: 'success',
         icon: 'i-lucide:shield-check',
         text: t('package.timeline.trusted_publisher_added'),
       })
     } else if (!current.hasTrustedPublisher && previous.hasTrustedPublisher) {
       events.push({
         key: 'trustedPublisher',
-        positive: false,
+        state: 'warn',
         icon: 'i-lucide:shield-off',
         text: t('package.timeline.trusted_publisher_removed'),
       })
@@ -311,14 +324,14 @@ const versionSubEvents = computed(() => {
     if (current.hasProvenance && !previous.hasProvenance) {
       events.push({
         key: 'provenance',
-        positive: true,
+        state: 'success',
         icon: 'i-lucide:fingerprint',
         text: t('package.timeline.provenance_added'),
       })
     } else if (!current.hasProvenance && previous.hasProvenance) {
       events.push({
         key: 'provenance',
-        positive: false,
+        state: 'warn',
         icon: 'i-lucide:fingerprint',
         text: t('package.timeline.provenance_removed'),
       })
@@ -417,17 +430,23 @@ useSeoMeta({
               <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'
+                  ev.state === 'success'
+                    ? 'bg-green-500 border-green-600'
+                    : ev.state === 'error'
+                      ? 'bg-red-500 border-red-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
+                  ev.state === 'success'
                     ? 'text-green-700 dark:text-green-400'
-                    : 'text-amber-700 dark:text-amber-400'
+                    : ev.state === 'error'
+                      ? 'text-red-700 dark:text-red-400'
+                      : 'text-amber-700 dark:text-amber-400'
                 "
               >
                 {{ ev.text }}

app/utils/charts.ts

@@ -14,7 +14,7 @@ import type { ChartTimeGranularity } from '~/types/chart'
 
 interface SubEvent {
   key: string
-  positive: boolean
+  state: 'success' | 'error' | 'warn'
   icon: string
   text: string
 }

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[]
 }
 
@@ -21,7 +22,7 @@ export interface TimelineResponse {
 
 export interface SubEvent {
   key: string
-  positive: boolean
+  state: 'success' | 'error' | 'warn'
   icon: string
   text: 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) ?? [],
           }
         })