feat: adding gh changelog/releases within npmx

app/components/Changelog/Card.vue

@@ -0,0 +1,66 @@
+<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 scroll-mt-18" :id="cardId">
+    <div class="flex gap-2 items-center">
+      <h2
+        class="text-1xl sm:text-2xl font-medium min-w-0 break-words py-2 scroll-mt-20"
+        :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,41 @@
+<script setup lang="ts">
+const { info, requestedVersion, tpTarget } = defineProps<{
+  info: ChangelogMarkdownInfo
+  requestedVersion: string | null
+  tpTarget?: HTMLElement | null
+}>()
+
+const route = useRoute()
+
+const { data } = useLazyFetch(() => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`)
+
+watch(
+  [() => data.value?.toc, () => requestedVersion?.toLowerCase(), () => route.hash],
+  ([toc, rv, hash]) => {
+    if (toc && hash) {
+      navigateTo(hash)
+      return
+    }
+
+    if (!toc || !rv || hash) {
+      return
+    }
+
+    for (const item of toc) {
+      if (item.text.toLowerCase().includes(rv)) {
+        navigateTo(`#${item.id}`)
+        return
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+</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,62 @@
+<script setup lang="ts">
+const { info, requestedDate, requestedVersion } = defineProps<{
+  info: ChangelogReleaseInfo
+  requestedDate?: string
+  requestedVersion?: string | null | undefined
+}>()
+
+const { data: releases } = useFetch<ReleaseData[]>(
+  () => `/api/changelog/releases/${info.provider}/${info.repo}`,
+)
+
+const route = useRoute()
+
+const matchingDateReleases = computed(() => {
+  if (!requestedDate || !releases.value) {
+    return
+  }
+
+  return releases.value.filter(release => {
+    if (!release.publishedAt) {
+      return
+    }
+    const date = new Date(release.publishedAt).toISOString().split('T')[0]
+
+    return date == requestedDate
+  })
+})
+
+watch(
+  [() => route.hash, () => requestedDate?.toLowerCase(), releases, () => requestedVersion],
+  ([hash, date, r, rv]) => {
+    if (hash && r) {
+      // ensures the user is scrolled to the hash
+      navigateTo(hash)
+      return
+    }
+    if (hash || !date || !r) {
+      return
+    }
+    if (rv) {
+      for (const match of matchingDateReleases.value ?? []) {
+        if (match.title.toLowerCase().includes(rv)) {
+          navigateTo(`#release-${encodeURI(match.title)}`)
+          return
+        }
+      }
+    }
+
+    navigateTo(`#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

@@ -177,7 +177,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

@@ -0,0 +1,141 @@
+<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"
+        :requested-version="version || latestVersion"
+      />
+      <LazyChangelogMarkdown
+        v-else-if="changelog?.type == 'md'"
+        :info="changelog"
+        :tpTarget="tptoc"
+        :requested-version="version || latestVersion"
+      />
+      <p class="mt-5" v-else>{{ $t('changelog.no_logs') }}</p>
+    </section>
+  </main>
+</template>