Merge branch 'main' into feat/add-pm-dropdown

jonathanyeong · web-flow · commit 2ca089fdaab0 · 2026-01-30T18:15:36.000-05:00
diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue
@@ -463,7 +463,7 @@ const config = computed(() => {
   return {
     theme: isDarkMode.value ? 'dark' : 'default',
     chart: {
-      height: isMobile.value ? 850 : 600,
+      height: isMobile.value ? 950 : 600,
       userOptions: {
         buttons: {
           pdf: false,
@@ -508,15 +508,17 @@ const config = computed(() => {
       grid: {
         stroke: colors.value.border,
         labels: {
+          fontSize: isMobile.value ? 24 : 16,
           axis: {
             yLabel: $t('package.downloads.y_axis_label', {
               granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
             }),
             xLabel: packageName,
             yLabelOffsetX: 12,
-            fontSize: 24,
+            fontSize: isMobile.value ? 32 : 24,
           },
           xAxisLabels: {
+            show: !isMobile.value,
             values: chartData.value?.dates,
             showOnlyAtModulo: true,
             modulo: 12,
@@ -554,7 +556,7 @@ const config = computed(() => {
         },
       },
       zoom: {
-        maxWidth: 500,
+        maxWidth: isMobile.value ? 350 : 500,
         customFormat:
           displayedGranularity.value !== 'weekly'
             ? undefined
diff --git a/app/components/PackageReplacement.vue b/app/components/PackageReplacement.vue
@@ -5,23 +5,27 @@ const props = defineProps<{
   replacement: ModuleReplacement
 }>()
 
-const { t } = useI18n()
-
-const message = computed(() => {
+const message = computed<[string, { replacement?: string; nodeVersion?: string }]>(() => {
   switch (props.replacement.type) {
     case 'native':
-      return t('package.replacement.native', {
-        replacement: props.replacement.replacement,
-        nodeVersion: props.replacement.nodeVersion,
-      })
+      return [
+        'package.replacement.native',
+        {
+          replacement: props.replacement.replacement,
+          nodeVersion: props.replacement.nodeVersion,
+        },
+      ]
     case 'simple':
-      return t('package.replacement.simple', {
-        replacement: props.replacement.replacement,
-      })
+      return [
+        'package.replacement.simple',
+        {
+          replacement: props.replacement.replacement,
+        },
+      ]
     case 'documented':
-      return t('package.replacement.documented')
+      return ['package.replacement.documented', {}]
     case 'none':
-      return t('package.replacement.none')
+      return ['package.replacement.none', {}]
   }
 })
 
@@ -45,7 +49,25 @@ const docPath = computed(() => {
       {{ $t('package.replacement.title') }}
     </h2>
     <p class="text-sm m-0">
-      {{ message }}
+      <i18n-t :keypath="message[0]" scope="global">
+        <template #replacement>
+          {{ message[1].replacement ?? '' }}
+        </template>
+        <template #nodeVersion>
+          {{ message[1].nodeVersion ?? '' }}
+        </template>
+        <template #community>
+          <a
+            href="https://e18e.dev/docs/replacements/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
+          >
+            {{ $t('package.replacement.community') }}
+            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+          </a>
+        </template>
+      </i18n-t>
       <a
         v-if="mdnUrl"
         :href="mdnUrl"
diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
@@ -109,7 +109,14 @@ const visibleTagRows = computed(() => {
   const rows = isPackageDeprecated.value
     ? allTagRows.value
     : allTagRows.value.filter(row => !row.primaryVersion.deprecated)
-  return rows.slice(0, MAX_VISIBLE_TAGS)
+  const first = rows.slice(0, MAX_VISIBLE_TAGS)
+  const latestTagRow = rows.find(row => row.tag === 'latest')
+  // Ensure 'latest' tag is always included (at the end) if not already present
+  if (latestTagRow && !first.includes(latestTagRow)) {
+    first.pop()
+    first.push(latestTagRow)
+  }
+  return first
 })
 
 // Hidden tag rows (all other tags) - shown in "Other versions"
@@ -322,7 +329,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
     <div class="space-y-0.5 min-w-0">
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
       <div v-for="row in visibleTagRows" :key="row.id">
-        <div class="flex items-center gap-2">
+        <div
+          class="flex items-center gap-2 pe-2"
+          :class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
+        >
           <!-- Expand button (only if there are more versions to show) -->
           <button
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
@@ -354,65 +364,67 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <span v-else class="w-4" />
 
           <!-- Version info -->
-          <div class="flex-1 py-1.5 min-w-0">
-            <div class="flex items-center justify-between gap-2">
-              <NuxtLink
-                :to="versionRoute(row.primaryVersion.version)"
-                class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
-                :class="
-                  row.primaryVersion.deprecated
-                    ? 'text-red-400 hover:text-red-300'
-                    : 'text-fg-muted hover:text-fg'
-                "
-                :title="
-                  row.primaryVersion.deprecated
-                    ? $t('package.versions.deprecated_title', {
-                        version: row.primaryVersion.version,
-                      })
-                    : row.primaryVersion.version
-                "
-              >
+          <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
+            <div>
+              <div>
+                <NuxtLink
+                  :to="versionRoute(row.primaryVersion.version)"
+                  class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
+                  :class="
+                    row.primaryVersion.deprecated
+                      ? 'text-red-400 hover:text-red-300'
+                      : 'text-fg-muted hover:text-fg'
+                  "
+                  :title="
+                    row.primaryVersion.deprecated
+                      ? $t('package.versions.deprecated_title', {
+                          version: row.primaryVersion.version,
+                        })
+                      : row.primaryVersion.version
+                  "
+                >
+                  <span
+                    v-if="row.primaryVersion.deprecated"
+                    class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
+                    aria-hidden="true"
+                  />
+                  {{ row.primaryVersion.version }}
+                </NuxtLink>
+              </div>
+              <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
                 <span
-                  v-if="row.primaryVersion.deprecated"
-                  class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
-                  aria-hidden="true"
-                />
-                {{ row.primaryVersion.version }}
-              </NuxtLink>
-              <div class="flex items-center gap-2 shrink-0">
-                <DateTime
-                  v-if="row.primaryVersion.time"
-                  :datetime="row.primaryVersion.time"
-                  year="numeric"
-                  month="short"
-                  day="numeric"
-                  class="text-xs text-fg-subtle"
-                />
-                <ProvenanceBadge
-                  v-if="row.primaryVersion.hasProvenance"
-                  :package-name="packageName"
-                  :version="row.primaryVersion.version"
-                  compact
-                />
+                  v-for="tag in row.tags"
+                  :key="tag"
+                  class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
+                  :title="tag"
+                >
+                  {{ tag }}
+                </span>
               </div>
             </div>
-            <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
-              <span
-                v-for="tag in row.tags"
-                :key="tag"
-                class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
-                :title="tag"
-              >
-                {{ tag }}
-              </span>
+            <div class="flex items-center gap-2 shrink-0">
+              <DateTime
+                v-if="row.primaryVersion.time"
+                :datetime="row.primaryVersion.time"
+                year="numeric"
+                month="short"
+                day="numeric"
+                class="text-xs text-fg-subtle"
+              />
+              <ProvenanceBadge
+                v-if="row.primaryVersion.hasProvenance"
+                :package-name="packageName"
+                :version="row.primaryVersion.version"
+                compact
+              />
             </div>
           </div>
         </div>
 
         <!-- Expanded versions -->
         <div
           v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
-          class="ms-4 ps-2 border-is border-border space-y-0.5"
+          class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
         >
           <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
             <div class="flex items-center justify-between gap-2">
@@ -542,7 +554,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 />
                 {{ row.primaryVersion.version }}
               </NuxtLink>
-              <div class="flex items-center gap-2 shrink-0">
+              <div class="flex items-center gap-2 shrink-0 pe-2">
                 <DateTime
                   v-if="row.primaryVersion.time"
                   :datetime="row.primaryVersion.time"
@@ -618,7 +630,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       {{ group.versions[0]?.version }}
                     </NuxtLink>
                   </div>
-                  <div class="flex items-center gap-2 shrink-0">
+                  <div class="flex items-center gap-2 shrink-0 pe-2">
                     <DateTime
                       v-if="group.versions[0]?.time"
                       :datetime="group.versions[0]?.time"
diff --git a/app/pages/docs/[...path].vue b/app/pages/docs/[...path].vue
@@ -364,8 +364,16 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
   @apply text-badge-orange text-sm;
 }
 
-.docs-content .docs-deprecated p {
-  @apply text-badge-orange text-sm mt-2 mb-0;
+.docs-content .docs-deprecated-message {
+  @apply text-badge-orange text-sm mt-2;
+}
+
+.docs-content .docs-deprecated-message code {
+  @apply bg-badge-orange/20 text-badge-orange;
+}
+
+.docs-content .docs-deprecated-message .docs-link {
+  @apply text-badge-orange;
 }
 
 /* Parameters, Returns, Examples, See Also sections */
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
@@ -119,11 +119,12 @@
     "replacement": {
       "title": "Du brauchst diese Abhängigkeit vielleicht nicht.",
       "native": "Dies kann durch {replacement} ersetzt werden, verfügbar seit Node {nodeVersion}.",
-      "simple": "Die Community hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
-      "documented": "Die Community hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
+      "simple": "Die {community} hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
+      "documented": "Die {community} hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
       "none": "Dieses Paket wurde als nicht mehr nötig markiert, und seine Funktionen sind wahrscheinlich in allen Engines von Haus aus verfügbar.",
       "learn_more": "Mehr erfahren",
-      "mdn": "MDN"
+      "mdn": "MDN",
+      "community": "Community"
     },
     "stats": {
       "license": "Lizenz",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -119,11 +119,12 @@
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
-      "simple": "The community has flagged this package as redundant, with the advice: {replacement}.",
-      "documented": "The community has flagged this package as having more performant alternatives.",
+      "simple": "The {community} has flagged this package as redundant, with the advice: {replacement}.",
+      "documented": "The {community} has flagged this package as having more performant alternatives.",
       "none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
       "learn_more": "Learn more",
-      "mdn": "MDN"
+      "mdn": "MDN",
+      "community": "community"
     },
     "stats": {
       "license": "License",
diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
@@ -119,11 +119,12 @@
     "replacement": {
       "title": "Du brauchst diese Abhängigkeit vielleicht nicht.",
       "native": "Dies kann durch {replacement} ersetzt werden, verfügbar seit Node {nodeVersion}.",
-      "simple": "Die Community hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
-      "documented": "Die Community hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
+      "simple": "Die {community} hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
+      "documented": "Die {community} hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
       "none": "Dieses Paket wurde als nicht mehr nötig markiert, und seine Funktionen sind wahrscheinlich in allen Engines von Haus aus verfügbar.",
       "learn_more": "Mehr erfahren",
-      "mdn": "MDN"
+      "mdn": "MDN",
+      "community": "Community"
     },
     "stats": {
       "license": "Lizenz",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
@@ -119,11 +119,12 @@
     "replacement": {
       "title": "You might not need this dependency.",
       "native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
-      "simple": "The community has flagged this package as redundant, with the advice: {replacement}.",
-      "documented": "The community has flagged this package as having more performant alternatives.",
+      "simple": "The {community} has flagged this package as redundant, with the advice: {replacement}.",
+      "documented": "The {community} has flagged this package as having more performant alternatives.",
       "none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
       "learn_more": "Learn more",
-      "mdn": "MDN"
+      "mdn": "MDN",
+      "community": "community"
     },
     "stats": {
       "license": "License",
diff --git a/server/utils/docs/render.ts b/server/utils/docs/render.ts
@@ -184,7 +184,10 @@ async function renderJsDocTags(tags: JsDocTag[], symbolLookup: SymbolLookup): Pr
     lines.push(`<div class="docs-deprecated">`)
     lines.push(`<strong>Deprecated</strong>`)
     if (deprecated.doc) {
-      lines.push(`<p>${parseJsDocLinks(deprecated.doc, symbolLookup)}</p>`)
+      // We remove new lines because they look weird when rendered into the deprecated block
+      // I think markdown is actually supposed to collapse single new lines automatically but this function doesn't do that so if that changes remove this
+      const renderedMessage = await renderMarkdown(deprecated.doc.replace(/\n/g, ' '), symbolLookup)
+      lines.push(`<div class="docs-deprecated-message">${renderedMessage}</div>`)
     }
     lines.push(`</div>`)
   }
diff --git a/server/utils/docs/text.ts b/server/utils/docs/text.ts
@@ -75,7 +75,7 @@ export function parseJsDocLinks(text: string, symbolLookup: SymbolLookup): strin
 
     // External URL
     if (target.startsWith('http://') || target.startsWith('https://')) {
-      return `<a href="${target}" target="_blank" rel="noopener" class="docs-link">${displayText}</a>`
+      return `<a href="${target}" target="_blank" rel="noreferrer" class="docs-link">${displayText}</a>`
     }
 
     // Internal symbol reference
@@ -116,6 +116,12 @@ export async function renderMarkdown(text: string, symbolLookup: SymbolLookup):
   // Now process the rest (JSDoc links, HTML escaping, etc.)
   result = parseJsDocLinks(result, symbolLookup)
 
+  // Markdown links - i.e. [text](url)
+  result = result.replace(
+    /\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noreferrer" class="docs-link">$1</a>',
+  )
+
   // Handle inline code (single backticks) - won't interfere with fenced blocks
   result = result
     .replace(/`([^`]+)`/g, '<code class="docs-inline-code">$1</code>')
diff --git a/test/unit/docs-text.spec.ts b/test/unit/docs-text.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -184,7 +184,10 @@ async function renderJsDocTags(tags: JsDocTag[], symbolLookup: SymbolLookup): Pr`
`184`	`184`	lines.push(`<div class="docs-deprecated">`)
`185`	`185`	lines.push(`<strong>Deprecated</strong>`)
`186`	`186`	`if (deprecated.doc) {`
`187`		- lines.push(`<p>${parseJsDocLinks(deprecated.doc, symbolLookup)}</p>`)
	`187`	`+ // We remove new lines because they look weird when rendered into the deprecated block`
	`188`	`+ // I think markdown is actually supposed to collapse single new lines automatically but this function doesn't do that so if that changes remove this`
	`189`	`+ const renderedMessage = await renderMarkdown(deprecated.doc.replace(/\n/g, ' '), symbolLookup)`
	`190`	+ lines.push(`<div class="docs-deprecated-message">${renderedMessage}</div>`)
`188`	`191`	`}`
`189`	`192`	lines.push(`</div>`)
`190`	`193`	`}`