Added button to view changelog/releases on the provider website.

changed the view_on_npm to view_on with {site}

Author: WilcoSp

app/composables/useProviderIcon.ts

@@ -0,0 +1,22 @@
+import type { IconClass } from '~/types/icon'
+
+const PROVIDER_ICONS: Record<string, IconClass> = {
+  github: 'i-simple-icons:github',
+  gitlab: 'i-simple-icons:gitlab',
+  bitbucket: 'i-simple-icons:bitbucket',
+  codeberg: 'i-simple-icons:codeberg',
+  gitea: 'i-simple-icons:gitea',
+  forgejo: 'i-simple-icons:forgejo',
+  gitee: 'i-simple-icons:gitee',
+  sourcehut: 'i-simple-icons:sourcehut',
+  tangled: 'i-custom:tangled',
+  radicle: 'i-lucide:network', // Radicle is a P2P network, using network icon
+}
+
+export function useProviderIcon(provider: MaybeRefOrGetter<ProviderId | null | undefined>) {
+  return computed((): IconClass => {
+    const uProvider = toValue(provider)
+    if (!uProvider) return 'i-simple-icons:github'
+    return PROVIDER_ICONS[uProvider] ?? 'i-lucide:code'
+  })
+}

app/pages/org/[org].vue

@@ -180,7 +180,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', { site: 'npm' })"
             >
               <span class="i-simple-icons:npm w-4 h-4" aria-hidden="true" />
               npm

app/pages/package-changes/[...path].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useProviderIcon } from '~/composables/useProviderIcon'
+
 definePageMeta({
   name: 'changes',
   path: '/package-changes/:path+',
@@ -63,9 +65,9 @@ watch(
 )
 
 // getting info
-
 const { data: changelog, pending } = usePackageChangelog(packageName, version)
 
+const repoProviderIcon = useProviderIcon(() => changelog.value?.provider)
 const header = useTemplateRef('header')
 </script>
 <template>
@@ -90,6 +92,14 @@ const header = useTemplateRef('header')
             :url-pattern="versionUrlPattern"
           />
           <div class="flex-1"></div>
+          <LinkBase
+            v-if="changelog?.link"
+            :to="changelog?.link"
+            :classicon="repoProviderIcon"
+            :title="$t('common.view_on', { site: changelog.provider })"
+          >
+            {{ changelog.provider }}
+          </LinkBase>
         </div>
       </div>
     </header>

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

@@ -9,7 +9,6 @@ import type {
   SkillsListResponse,
 } from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
-import type { IconClass } from '~/types'
 import { assertValidPackageName } from '#shared/utils/npm'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
@@ -18,6 +17,7 @@ import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { detectPublishSecurityDowngradeForVersion } from '~/utils/publish-security'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
+import { useProviderIcon } from '~/composables/useProviderIcon'
 import { togglePackageLike } from '~/utils/atproto/likes'
 import type { RouteLocationRaw } from 'vue-router'
 
@@ -398,24 +398,7 @@ const repositoryUrl = computed(() => {
 
 const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
 
-const PROVIDER_ICONS: Record<string, IconClass> = {
-  github: 'i-simple-icons:github',
-  gitlab: 'i-simple-icons:gitlab',
-  bitbucket: 'i-simple-icons:bitbucket',
-  codeberg: 'i-simple-icons:codeberg',
-  gitea: 'i-simple-icons:gitea',
-  forgejo: 'i-simple-icons:forgejo',
-  gitee: 'i-simple-icons:gitee',
-  sourcehut: 'i-simple-icons:sourcehut',
-  tangled: 'i-custom:tangled',
-  radicle: 'i-lucide:network', // Radicle is a P2P network, using network icon
-}
-
-const repoProviderIcon = computed((): IconClass => {
-  const provider = repoRef.value?.provider
-  if (!provider) return 'i-simple-icons:github'
-  return PROVIDER_ICONS[provider] ?? 'i-lucide:code'
-})
+const repoProviderIcon = useProviderIcon(() => repoRef.value?.provider)
 
 const homepageUrl = computed(() => {
   const homepage = displayVersion.value?.homepage
@@ -928,7 +911,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', { site: 'npm' })"
                 classicon="i-simple-icons:npm"
               >
                 npm

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', { site: 'npm' })"
             >
               <span class="i-simple-icons:npm w-4 h-4" aria-hidden="true" />
               npm

i18n/locales/ar.json

@@ -132,7 +132,7 @@
     "skip_link": "تخطي إلى المحتوى الرئيسي",
     "warnings": "تحذيرات:",
     "go_back_home": "العودة إلى الصفحة الرئيسية",
-    "view_on_npm": "عرض على npm",
+    "view_on": "عرض على {site}",
     "per_week": "/ أسبوع",
     "vanity_downloads_hint": "رقم زخرفي: لا توجد حزم معروضة | رقم زخرفي: للحزمة المعروضة | رقم زخرفي: للحزمتين المعروضتين | رقم زخرفي: مجموع {count} من الحزم المعروضة | رقم زخرفي: مجموع {count} من الحزم المعروضة | رقم زخرفي: مجموع {count} من الحزم المعروضة",
     "sort": {

i18n/locales/az-AZ.json

@@ -92,7 +92,7 @@
     "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",
+    "view_on": "{site}-də bax",
     "per_week": "/ həftə",
     "sort": {
       "name": "ad",

i18n/locales/bg-BG.json

@@ -132,7 +132,7 @@
     "skip_link": "Преминаване към основното съдържание",
     "warnings": "Предупреждения:",
     "go_back_home": "Назад към начална страница",
-    "view_on_npm": "преглед в npm",
+    "view_on": "преглед в {site}",
     "per_week": "/ седмица",
     "vanity_downloads_hint": "Брой за показ: няма показани пакети | Брой за показ: за показания пакет | Брой за показ: Сума от {count} показани пакета",
     "sort": {

i18n/locales/bn-IN.json

@@ -99,7 +99,7 @@
     "skip_link": "মুখ্য কন্টেন্টে যান",
     "warnings": "সতর্কতা:",
     "go_back_home": "হোমে ফিরে যান",
-    "view_on_npm": "npm এ দেখুন",
+    "view_on": "{site} এ দেখুন",
     "per_week": "/ সপ্তাহ",
     "vanity_downloads_hint": "ভ্যানিটি নম্বর: কোন প্যাকেজ প্রদর্শিত হয়নি | ভ্যানিটি নম্বর: প্রদর্শিত প্যাকেজের জন্য | ভ্যানিটি নম্বর: {count} প্রদর্শিত প্যাকেজের মোট",
     "sort": {

i18n/locales/cs-CZ.json

@@ -132,7 +132,7 @@
     "skip_link": "Přejít na hlavní obsah",
     "warnings": "Varování:",
     "go_back_home": "Zpět na začátek",
-    "view_on_npm": "Zobrazit na npm",
+    "view_on": "Zobrazit na {site}",
     "per_week": "/ týden",
     "vanity_downloads_hint": "Pro zobrazený balíček | Součet pro {count} zobrazené balíčky | Součet pro {count} zobrazených balíčků",
     "sort": {