Merge branch 'main' into feat-i18n/adding-dutch

Author: WilcoSp

app/components/Compare/FacetBarChart.vue

@@ -220,13 +220,18 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
             const name = datapoint?.name?.replace(/\n/g, '<br>')
             return `
             <div class="font-mono p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
-              <div class="flex items-center gap-2">
+              <div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
                 <div class="w-3 h-3">
                   <svg viewBox="0 0 2 2" class="w-full h-full">
                     <rect x="0" y="0" width="2" height="2" rx="0.3" fill="${datapoint?.color}" />
                   </svg>
                 </div>
-                <span>${name}: ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}</span>
+                <span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
+                  ${name}
+                </span>
+                <span class="text-base text-[var(--fg)] font-mono tabular-nums text-end">
+                  ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}
+                </span>
               </div>
             </div>
             `

app/components/Package/TrendsChart.vue

@@ -20,7 +20,7 @@ import type {
 import { DATE_INPUT_MAX } from '~/utils/input'
 import { applyDataCorrection } from '~/utils/chart-data-correction'
 import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
-import { copyAltTextForTrendLineChart, sanitise, loadFile } from '~/utils/charts'
+import { copyAltTextForTrendLineChart, sanitise, loadFile, applyEllipsis } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
 
@@ -215,7 +215,7 @@ function formatXyDataset(
   const temperatureColors = lightColor ? [lightColor, accent.value] : undefined
 
   const datasetItem: VueUiXyDatasetItem = {
-    name: seriesName,
+    name: applyEllipsis(seriesName, 32),
     type: 'line',
     series: dataset.map(d => d.value),
     color: accent.value,
@@ -1050,7 +1050,7 @@ const chartData = computed<{
       .filter(index => index !== -1)
 
     const item: VueUiXyDatasetItem = {
-      name: pkg,
+      name: applyEllipsis(pkg, 32),
       type: 'line',
       series,
       dashIndices,
@@ -1111,10 +1111,10 @@ function buildExportFilename(extension: string): string {
 
   if (!isMultiPackageMode.value) {
     const name = effectivePackageNames.value[0] ?? props.packageName ?? 'package'
-    return `${sanitise(name)}-${g}_${range}.${extension}`
+    return `${sanitise(applyEllipsis(name, 32))}-${g}_${range}.${extension}`
   }
 
-  const names = effectivePackageNames.value
+  const names = effectivePackageNames.value.map(name => applyEllipsis(name, 32))
   const label = names.length === 1 ? names[0] : names.join('_')
   return `${sanitise(label ?? '')}-${g}_${range}.${extension}`
 }

app/components/Package/VersionDistribution.vue

@@ -9,7 +9,7 @@ import {
   drawNpmxLogoAndTaglineWatermark,
 } from '~/composables/useChartWatermark'
 import TooltipApp from '~/components/Tooltip/App.vue'
-import { copyAltTextForVersionsBarChart, sanitise, loadFile } from '~/utils/charts'
+import { copyAltTextForVersionsBarChart, sanitise, loadFile, applyEllipsis } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
 
@@ -131,7 +131,7 @@ const dateRangeLabel = computed(() => {
 function buildExportFilename(extension: string): string {
   const range = dateRangeLabel.value.replaceAll(' ', '_').replaceAll(',', '')
 
-  const label = props.packageName
+  const label = applyEllipsis(props.packageName, 32)
   return `${sanitise(label ?? '')}_${range}.${extension}`
 }
 
@@ -141,7 +141,7 @@ const xyDataset = computed<VueUiXyDatasetItem[]>(() => {
 
   return [
     {
-      name: props.packageName,
+      name: applyEllipsis(props.packageName, 32),
       series: chartDataset.value.map(item => item.downloads),
       type: 'bar' as const,
       color: accent.value,

app/composables/useViewOnGitProvider.ts

@@ -0,0 +1,44 @@
+/**
+ * Return the text "see on {git provider}" based on the given provider
+ */
+export function useViewOnGitProvider(
+  provider: MaybeRefOrGetter<ProviderId | (string & {}) | null | undefined>,
+) {
+  const { t } = useI18n()
+  return computed(() => {
+    const uProvider = toValue(provider)
+    if (!uProvider) {
+      return t('common.view_on.git_repo')
+    }
+    switch (uProvider) {
+      case 'github':
+        return t('common.view_on.github')
+      case 'gitlab':
+        return t('common.view_on.gitlab')
+      case 'bitbucket':
+        return t('common.view_on.bitbucket')
+      case 'gitea':
+        return t('common.view_on.gitea')
+      case 'forgejo':
+        return t('common.view_on.forgejo')
+      case 'codeberg':
+        return t('common.view_on.codeberg')
+      case 'sourcehut':
+        return t('common.view_on.sourcehut')
+      case 'gitee':
+        return t('common.view_on.gitee')
+      case 'tangled':
+        return t('common.view_on.tangled')
+      case 'radicle':
+        return t('common.view_on.radicle')
+      case 'git':
+        return t('common.view_on.git_repo')
+    }
+
+    if (import.meta.dev) {
+      // oxlint-disable-next-line no-console
+      console.warn(`missing '${uProvider}' provider, add it to shared/utils/git-providers.ts!`)
+    }
+    return t('common.view_on.git_repo')
+  })
+}

app/pages/org/[org].vue

@@ -175,7 +175,7 @@ defineOgImageComponent('Default', {
               target="_blank"
               rel="noopener noreferrer"
               class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              :title="$t('common.view_on_npm')"
+              :title="$t('common.view_on.npm')"
             >
               <span class="i-simple-icons:npm w-4 h-4" aria-hidden="true" />
               npm

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

@@ -21,6 +21,7 @@ import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
 import { useInstallSizeDiff } from '~/composables/useInstallSizeDiff'
+import { useViewOnGitProvider } from '~/composables/useViewOnGitProvider'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineOgImageComponent('Package', {
@@ -106,6 +107,11 @@ const navExtraOffsetStyle = computed(() => ({
 
 const { packageName, requestedVersion, orgName } = usePackageRoute()
 
+const { data: resolvedVersion, status: resolvedStatus } = await useResolvedVersion(
+  packageName,
+  requestedVersion,
+)
+
 if (import.meta.server) {
   assertValidPackageName(packageName.value)
 }
@@ -114,7 +120,7 @@ if (import.meta.server) {
 const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   () => {
     const base = `/api/registry/readme/${packageName.value}`
-    const version = requestedVersion.value
+    const version = resolvedVersion.value
     return version ? `${base}/v/${version}` : base
   },
   {
@@ -150,7 +156,7 @@ const {
 } = useLazyFetch<ReadmeMarkdownResponse>(
   () => {
     const base = `/api/registry/readme/markdown/${packageName.value}`
-    const version = requestedVersion.value
+    const version = resolvedVersion.value
     return version ? `${base}/v/${version}` : base
   },
   {
@@ -200,7 +206,7 @@ const {
 } = useLazyFetch<InstallSizeResult | null>(
   () => {
     const base = `/api/registry/install-size/${packageName.value}`
-    const version = requestedVersion.value
+    const version = resolvedVersion.value
     return version ? `${base}/v/${version}` : base
   },
   {
@@ -213,7 +219,7 @@ onMounted(() => fetchInstallSize())
 const { data: skillsData } = useLazyFetch<SkillsListResponse>(
   () => {
     const base = `/skills/${packageName.value}`
-    const version = requestedVersion.value
+    const version = resolvedVersion.value
     return version ? `${base}/v/${version}` : base
   },
   { default: () => ({ package: '', version: '', skills: [] }) },
@@ -222,11 +228,6 @@ const { data: skillsData } = useLazyFetch<SkillsListResponse>(
 const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
 const { data: moduleReplacement } = useModuleReplacement(packageName)
 
-const { data: resolvedVersion, status: resolvedStatus } = await useResolvedVersion(
-  packageName,
-  requestedVersion,
-)
-
 if (
   import.meta.server &&
   !resolvedVersion.value &&
@@ -503,6 +504,8 @@ const repoProviderIcon = computed((): IconClass => {
   return PROVIDER_ICONS[provider] ?? 'i-lucide:code'
 })
 
+const viewOnGitProvider = useViewOnGitProvider(() => repoRef.value?.provider)
+
 const homepageUrl = computed(() => {
   const homepage = displayVersion.value?.homepage
   if (!homepage) return null
@@ -863,7 +866,6 @@ const showSkeleton = shallowRef(false)
               :to="docsLink"
               aria-keyshortcuts="d"
               classicon="i-lucide:file-text"
-              :title="$t('package.links.docs')"
             >
               <span class="max-sm:sr-only">{{ $t('package.links.docs') }}</span>
             </LinkBase>
@@ -873,7 +875,6 @@ const showSkeleton = shallowRef(false)
               :to="codeLink"
               aria-keyshortcuts="."
               classicon="i-lucide:code"
-              :title="$t('package.links.code')"
             >
               <span class="max-sm:sr-only">{{ $t('package.links.code') }}</span>
             </LinkBase>
@@ -882,7 +883,6 @@ const showSkeleton = shallowRef(false)
               :to="{ name: 'compare', query: { packages: pkg.name } }"
               aria-keyshortcuts="c"
               classicon="i-lucide:git-compare"
-              :title="$t('package.links.compare')"
             >
               <span class="max-sm:sr-only">{{ $t('package.links.compare') }}</span>
             </LinkBase>
@@ -900,7 +900,6 @@ const showSkeleton = shallowRef(false)
             <ButtonBase
               v-if="showScrollToTop"
               variant="secondary"
-              :title="$t('common.scroll_to_top')"
               :aria-label="$t('common.scroll_to_top')"
               @click="scrollToTop"
               classicon="i-lucide:arrow-up"
@@ -1007,7 +1006,7 @@ const showSkeleton = shallowRef(false)
             <li>
               <LinkBase
                 :to="`https://www.npmjs.com/package/${pkg.name}`"
-                :title="$t('common.view_on_npm')"
+                :title="$t('common.view_on.npm')"
                 classicon="i-simple-icons:npm"
               >
                 npm
@@ -1369,7 +1368,7 @@ const showSkeleton = shallowRef(false)
           </div>
           <TerminalInstall
             :package-name="pkg.name"
-            :requested-version="requestedVersion ? resolvedVersion : requestedVersion"
+            :requested-version="resolvedVersion"
             :install-version-override="installVersionOverride"
             :jsr-info="jsrInfo"
             :dev-dependency-suggestion="packageAnalysis?.devDependencySuggestion"
@@ -1452,7 +1451,8 @@ const showSkeleton = shallowRef(false)
             target="_blank"
             rel="noopener noreferrer"
             class="link text-fg underline underline-offset-4 decoration-fg-subtle hover:(decoration-fg text-fg) transition-colors duration-200"
-            >{{ $t('package.readme.view_on_github') }}</a
+          >
+            {{ viewOnGitProvider }}</a
           >
         </p>
 

app/pages/~[username]/index.vue

@@ -156,7 +156,7 @@ defineOgImageComponent('Default', {
               target="_blank"
               rel="noopener noreferrer"
               class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              :title="$t('common.view_on_npm')"
+              :title="$t('common.view_on.npm')"
             >
               <span class="i-simple-icons:npm w-4 h-4" aria-hidden="true" />
               npm

docs/content/2.guide/1.features.md

@@ -159,7 +159,7 @@ You can further customize your badges by appending query parameters to the badge
 
 ##### `labelColor`
 
-Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix).
+Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix). The label text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.
 
 - **Default**: `#0a0a0a`
 - **Usage**: `?labelColor=HEX_CODE`
@@ -173,16 +173,16 @@ Overrides the default label text. You can pass any string to customize the label
 
 ##### `color`
 
-Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix).
+Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix). The text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.
 
 - **Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
 - **Usage**: `?color=HEX_CODE`
 
-| Example        | URL                                    |
-| :------------- | :------------------------------------- |
-| **Hot Pink**   | `.../badge/version/nuxt?colorB=ff69b4` |
-| **Pure Black** | `.../badge/version/nuxt?colorB=000000` |
-| **Brand Blue** | `.../badge/version/nuxt?colorB=3b82f6` |
+| Example        | URL                                   |
+| :------------- | :------------------------------------ |
+| **Hot Pink**   | `.../badge/version/nuxt?color=ff69b4` |
+| **Pure Black** | `.../badge/version/nuxt?color=000000` |
+| **Brand Blue** | `.../badge/version/nuxt?color=3b82f6` |
 
 ##### `name`
 

i18n/locales/ar.json

@@ -132,15 +132,18 @@
     "skip_link": "تخطي إلى المحتوى الرئيسي",
     "warnings": "تحذيرات:",
     "go_back_home": "العودة إلى الصفحة الرئيسية",
-    "view_on_npm": "عرض على npm",
     "per_week": "/ أسبوع",
     "vanity_downloads_hint": "رقم زخرفي: لا توجد حزم معروضة | رقم زخرفي: للحزمة المعروضة | رقم زخرفي: للحزمتين المعروضتين | رقم زخرفي: مجموع {count} من الحزم المعروضة | رقم زخرفي: مجموع {count} من الحزم المعروضة | رقم زخرفي: مجموع {count} من الحزم المعروضة",
     "sort": {
       "name": "الاسم",
       "role": "الدور",
       "members": "الأعضاء"
     },
-    "scroll_to_top": "التمرير إلى الأعلى"
+    "scroll_to_top": "التمرير إلى الأعلى",
+    "view_on": {
+      "npm": "عرض على npm",
+      "github": "عرض على GitHub"
+    }
   },
   "package": {
     "not_found": "لم يتم العثور على الحزمة",
@@ -238,7 +241,6 @@
     "readme": {
       "title": "README (إقرأني)",
       "no_readme": "لا يتوفر README.",
-      "view_on_github": "عرض على GitHub",
       "toc_title": "جدول المحتويات",
       "callout": {
         "note": "ملاحظة",

i18n/locales/az-AZ.json

@@ -177,15 +177,18 @@
     "skip_link": "Əsas məzmuna keç",
     "warnings": "Xəbərdarlıqlar:",
     "go_back_home": "Ana səhifəyə qayıt",
-    "view_on_npm": "npm-də bax",
     "per_week": "/ həftə",
     "vanity_downloads_hint": "Göstərici: paket göstərilmir | Göstərici: göstərilən paket üçün | Göstərici: {count} göstərilən paketin cəmi",
     "sort": {
       "name": "ad",
       "role": "rol",
       "members": "üzvlər"
     },
-    "scroll_to_top": "Yuxarı qayıt"
+    "scroll_to_top": "Yuxarı qayıt",
+    "view_on": {
+      "npm": "npm-də bax",
+      "github": "GitHub-da bax"
+    }
   },
   "package": {
     "not_found": "Paket Tapılmadı",
@@ -290,7 +293,6 @@
     "readme": {
       "title": "Readme",
       "no_readme": "README mövcud deyil.",
-      "view_on_github": "GitHub-da bax",
       "toc_title": "Məzmun",
       "callout": {
         "note": "Qeyd",