feat: adding gh changelog/releases to npmx

app/components/Changelog/Card.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { ReleaseData } from '~~/shared/types/changelog'
+
+const { release } = defineProps<{
+  release: ReleaseData
+}>()
+const formattedDate = computed(() => {
+  if (!release.publishedAt) {
+    return
+  }
+  return new Date(release.publishedAt).toISOString().split('T')[0]
+})
+
+const cardId = computed(() => (release.publishedAt ? `date-${formattedDate.value}` : undefined))
+
+const navId = computed(() => `release-${encodeURI(release.title)}:`)
+
+function navigateToTitle() {
+  navigateTo(`#${navId.value}`)
+}
+</script>
+<template>
+  <section class="border border-border rounded-lg p-4 sm:p-6">
+    <div class="flex gap-2 items-center" :id="cardId">
+      <h2 class="text-1xl sm:text-2xl font-medium min-w-0 break-words py-2" :id="navId">
+        <a
+          class="hover:decoration-accent hover:text-accent focus-visible:decoration-accent focus-visible:text-accent transition-colors duration-200"
+          :class="$style.linkTitle"
+          :href="`#${navId}`"
+          @click.prevent="navigateToTitle()"
+        >
+          {{ release.title }}
+        </a>
+      </h2>
+      <TagStatic v-if="release.prerelease" variant="default" class="h-unset">
+        {{ $t('changelog.pre_release') }}
+      </TagStatic>
+      <TagStatic v-if="release.draft" variant="default" class="h-unset">
+        {{ $t('changelog.draft') }}
+      </TagStatic>
+      <div class="flex-1" aria-hidden="true"></div>
+      <ReadmeTocDropdown
+        v-if="release?.toc && release.toc.length > 1"
+        :toc="release.toc"
+        class="ms-auto"
+      />
+      <!-- :active-id="activeTocId" -->
+    </div>
+    <DateTime v-if="release.publishedAt" :datetime="release.publishedAt" date-style="medium" />
+    <Readme v-if="release.html" :html="release.html"></Readme>
+  </section>
+</template>
+
+<style module>
+.linkTitle::after {
+  content: '__';
+  @apply inline i-lucide:link rtl-flip ms-1 opacity-0;
+}
+
+.linkTitle:hover:after {
+  @apply opacity-100;
+}
+</style>

app/components/Changelog/Markdown.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { info, tpTarget } = defineProps<{
+  info: ChangelogMarkdownInfo
+  tpTarget?: HTMLElement | null
+}>()
+
+const { data } = useLazyFetch(() => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`)
+</script>
+<template>
+  <Teleport v-if="data?.toc && data.toc.length > 1 && !!tpTarget" :to="tpTarget">
+    <ReadmeTocDropdown :toc="data.toc" class="justify-self-end" />
+  </Teleport>
+  <Readme v-if="data?.html" :html="data.html"></Readme>
+</template>

app/components/Changelog/Releases.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const { info, requestedDate } = defineProps<{
+  info: ChangelogReleaseInfo
+  requestedDate?: string
+}>()
+
+const { data: releases } = useFetch<ReleaseData[]>(
+  () => `/api/changelog/releases/${info.provider}/${info.repo}`,
+)
+
+const route = useRoute()
+const router = useRouter()
+
+watch(
+  [() => route.hash, () => requestedDate, releases],
+  ([hash, date, r]) => {
+    if (hash || !date || !r) {
+      return
+    }
+
+    router.push(`#date-${date}`)
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
+<template>
+  <div class="flex flex-col gap-2 py-3" v-if="releases">
+    <ClientOnly>
+      <ChangelogCard v-for="release of releases" :release :key="release.id" />
+    </ClientOnly>
+  </div>
+</template>

app/components/Readme.vue

@@ -150,7 +150,7 @@ function handleClick(event: MouseEvent) {
   @apply inline i-lucide:external-link rtl-flip ms-1 opacity-50;
 }
 
-.readme :deep(:is(h1, h2, h3, h4, h5, h6) a[href^='#']::after) {
+.readme :deep(:is(h1, h2, h3, h4, h5, h6) a[href^='#']:not([content-none])::after) {
   /* I don't know what kind of sorcery this is, but it ensures this icon can't wrap to a new line on its own. */
   content: '__';
   @apply inline i-lucide:link rtl-flip ms-1 opacity-0;

app/composables/usePackageChangelog.ts

@@ -0,0 +1,13 @@
+import type { ChangelogInfo } from '~~/shared/types/changelog'
+
+export function usePackageChangelog(
+  packageName: MaybeRefOrGetter<string>,
+  version?: MaybeRefOrGetter<string | null | undefined>,
+) {
+  return useLazyFetch<ChangelogInfo>(() => {
+    const name = toValue(packageName)
+    const ver = toValue(version)
+    const base = `/api/changelog/info/${name}`
+    return ver ? `${base}/v/${ver}` : base
+  })
+}

app/composables/useProviderIcon.ts

@@ -0,0 +1,24 @@
+import type { ProviderId } from '#imports'
+import type { IconClass } from '~/types/icon'
+import { computed, toValue } from 'vue'
+
+const PROVIDER_ICONS: Record<ProviderId, 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

@@ -176,7 +176,7 @@ defineOgImage('Page.takumi', {
               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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { useProviderIcon } from '~/composables/useProviderIcon'
+
+definePageMeta({
+  name: 'changes',
+  path: '/package-changes/:path+',
+  alias: ['/package/changes/:path+', '/changes/:path+'],
+  scrollMargin: 150,
+})
+
+/// routing
+
+const route = useRoute('changes')
+const router = useRouter()
+// Parse package name, version, and file path from URL
+// Patterns:
+//   /code/nuxt/v/4.2.0 → packageName: "nuxt", version: "4.2.0", filePath: null (show tree)
+//   /code/nuxt/v/4.2.0/src/index.ts → packageName: "nuxt", version: "4.2.0", filePath: "src/index.ts"
+//   /code/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", version: "1.0.0", filePath: null
+const parsedRoute = computed(() => {
+  const segments = route.params.path
+
+  // Find the /v/ separator for version
+  const vIndex = segments.indexOf('v')
+  if (vIndex === -1 || vIndex >= segments.length - 1) {
+    // No version specified - redirect or error
+    return {
+      packageName: segments.join('/'),
+      version: null as string | null,
+      filePath: null as string | null,
+    }
+  }
+
+  const packageName = segments.slice(0, vIndex).join('/')
+  const afterVersion = segments.slice(vIndex + 1)
+  const version = afterVersion[0] ?? null
+  const filePath = afterVersion.length > 1 ? afterVersion.slice(1).join('/') : null
+
+  return { packageName, version, filePath }
+})
+
+const packageName = computed(() => parsedRoute.value.packageName)
+const version = computed(() => parsedRoute.value.version)
+const filePath = computed(() => parsedRoute.value.filePath?.replace(/\/$/, ''))
+
+const { data: pkg } = usePackage(packageName, version)
+
+const versionUrlPattern = computed(() => {
+  const base = `/package-changes/${packageName.value}/v/{version}`
+  return filePath.value ? `${base}/${filePath.value}` : base
+})
+
+const latestVersion = computed(() => pkg.value?.['dist-tags']?.latest ?? null)
+
+watch(
+  [version, latestVersion, packageName],
+  ([v, latest, name]) => {
+    if (!v && latest && name) {
+      const pathSegments = [...name.split('/'), 'v', latest]
+      router.replace({ name: 'changes', params: { path: pathSegments as [string, ...string[]] } })
+    }
+  },
+  { immediate: true },
+)
+
+// getting info
+const { data: changelog, pending } = usePackageChangelog(packageName, version)
+
+const repoProviderIcon = useProviderIcon(() => changelog.value?.provider)
+const tptoc = useTemplateRef('tptoc')
+
+const versionDate = computed(() => {
+  if (!version.value) {
+    return
+  }
+  const time = pkg.value?.time[version.value]
+  if (time) {
+    return new Date(time).toISOString().split('T')[0]
+  }
+})
+
+// defineOgImageComponent('Default', {
+//   title: () => `${pkg.value?.name ?? 'Package'} - Changelogs`,
+//   description: () => pkg.value?.license ?? '',
+//   primaryColor: '#60a5fa',
+// })
+</script>
+<template>
+  <main class="flex-1 flex flex-col">
+    <header class="border-b border-border bg-bg sticky top-14 z-20">
+      <div class="container pt-4 pb-3">
+        <div class="flex items-center gap-3 mb-3 flex-wrap min-w-0">
+          <h1
+            class="font-mono text-lg sm:text-xl font-semibold text-fg hover:text-fg-muted transition-colors truncate"
+          >
+            <NuxtLink v-if="packageName" :to="packageRoute(packageName, version)">
+              {{ packageName }}
+            </NuxtLink>
+          </h1>
+
+          <VersionSelector
+            v-if="(version || latestVersion) && pkg?.versions && pkg?.['dist-tags']"
+            :package-name="packageName"
+            :current-version="version ?? latestVersion!"
+            :versions="pkg.versions"
+            :dist-tags="pkg['dist-tags']"
+            :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 v-if="changelog?.type == 'md'" ref="tptoc" class="w-14 h-8">
+            <!-- prevents layout shift while loading -->
+          </div>
+        </div>
+      </div>
+    </header>
+    <section class="container w-full" v-if="!pending">
+      <LazyChangelogReleases
+        v-if="changelog?.type == 'release'"
+        :info="changelog"
+        :requestedDate="versionDate"
+      />
+      <LazyChangelogMarkdown
+        v-else-if="changelog?.type == 'md'"
+        :info="changelog"
+        :tpTarget="tptoc"
+      />
+      <p class="mt-5" v-else>{{ $t('changelog.no_logs') }}</p>
+    </section>
+  </main>
+</template>

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

@@ -10,7 +10,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'
@@ -19,6 +18,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 { useInstallSizeDiff } from '~/composables/useInstallSizeDiff'
 import type { RouteLocationRaw } from 'vue-router'
@@ -216,6 +216,7 @@ const { data: skillsData } = useLazyFetch<SkillsListResponse>(
 
 const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
 const { data: moduleReplacement } = useModuleReplacement(packageName)
+const { data: changelog } = usePackageChangelog(packageName, requestedVersion)
 
 const { data: resolvedVersion, status: resolvedStatus } = await useResolvedVersion(
   packageName,
@@ -479,24 +480,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
@@ -998,10 +982,18 @@ const showSkeleton = shallowRef(false)
                 {{ $t('package.links.issues') }}
               </LinkBase>
             </li>
+            <li v-if="!!changelog && resolvedVersion">
+              <LinkBase
+                classicon="i-lucide:notebook-text"
+                :to="{ name: 'changes', params: { path: [pkg.name, 'v', resolvedVersion] } }"
+              >
+                {{ $t('package.links.changelog') }}
+              </LinkBase>
+            </li>
             <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

@@ -155,7 +155,7 @@ defineOgImage('Page.takumi', {
               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": {