feat: adding gh changelog/releases to npmx

app/components/Changelog/Card.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { ReleaseData } from '~~/shared/types/changelog'
+import { slugify } from '~~/shared/utils/html'
+
+const { release } = defineProps<{
+  release: ReleaseData
+}>()
+const formattedDate = computed(() => {
+  if (!release.publishedAt) {
+    return
+  }
+  return new Date(release.publishedAt).toISOString().split('T')[0]
+})
+
+const cardId = computed(() => (formattedDate.value ? `date-${formattedDate.value}` : undefined))
+
+const navId = computed(() => `release-${slugify(release.title)}`)
+
+function navigateToTitle() {
+  navigateTo(`#${navId.value}`)
+}
+</script>
+<template>
+  <section
+    class="border border-border rounded-lg p-4 pt-2 sm:p-6 sm:pt-4 scroll-mt-18"
+    :id="cardId"
+  >
+    <div
+      class="flex gap-2 items-center sticky z-3 text-2xl p-2 border-border bg-bg top-[--combined-header-height]"
+    >
+      <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;
+  font-size: 0.75em;
+}
+
+.linkTitle:hover::after {
+  @apply opacity-100;
+}
+</style>

app/components/Changelog/ErrorMsg.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { pkgName, changelogLink, viewOnGit } = defineProps<{
+  pkgName?: string
+  changelogLink: string
+  viewOnGit: string
+}>()
+</script>
+<template>
+  <div class="w-full flex items-center flex-col gap-2 mt-4">
+    <p>{{ $t('changelog.error.p1', { package: pkgName }) }}</p>
+    <i18n-t keypath="changelog.error.p2" tag="p" #viewon>
+      <LinkBase :to="changelogLink" class="lowercase">{{ viewOnGit }}</LinkBase>
+    </i18n-t>
+  </div>
+</template>

app/components/Changelog/Markdown.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const { info, requestedVersion, tpTarget } = defineProps<{
+  info: ChangelogMarkdownInfo
+  requestedVersion: string | null | undefined
+  tpTarget?: HTMLElement | null
+}>()
+
+const route = useRoute()
+
+const { data, error } = await useFetch(
+  () => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`,
+)
+
+if (import.meta.client) {
+  // doing this server side can make it that we go to the homepage
+  watchEffect(() => {
+    const toc = data.value?.toc
+
+    if (toc && route.hash) {
+      navigateTo(route.hash)
+      return
+    }
+    if (!toc || !requestedVersion || route.hash) {
+      return
+    }
+    // lc = lower case
+    const lcRequestedVersion = requestedVersion.toLowerCase()
+    for (const item of toc) {
+      if (item.text.toLowerCase().includes(lcRequestedVersion)) {
+        navigateTo(`#${item.id}`)
+        return
+      }
+    }
+  })
+}
+</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>
+  <slot v-else-if="error" name="error"></slot>
+</template>

app/components/Changelog/Releases.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { slugify } from '~~/shared/utils/html'
+
+const { info, requestedDate, requestedVersion } = defineProps<{
+  info: ChangelogReleaseInfo
+  requestedDate?: string
+  requestedVersion?: string | null | undefined
+}>()
+
+const { data: releases, error } = await 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
+    }
+    return requestedDate === toIsoDate(new Date(release.publishedAt))
+  })
+})
+
+if (import.meta.client) {
+  // doing this server side can make it that we go to the homepage
+  watchEffect(() => {
+    const uReleases = releases.value
+    if (route.hash && uReleases) {
+      navigateTo(route.hash, { replace: true })
+      return
+    }
+    const date = requestedDate?.toLowerCase()
+    if (route.hash || !date || !uReleases) {
+      return
+    }
+    const uMatchingDateReleases = matchingDateReleases.value
+    if (uMatchingDateReleases?.length < 1) {
+      // if no releases have matched the requested version publish date then most likely no release note has been made
+      return
+    }
+
+    if (requestedVersion) {
+      for (const match of uMatchingDateReleases) {
+        if (match.title.toLowerCase().includes(requestedVersion)) {
+          navigateTo(`#release-${slugify(match.title)}`, { replace: true })
+          return
+        }
+      }
+    }
+    navigateTo(`#date-${date}`, { replace: true })
+  })
+}
+</script>
+<template>
+  <div class="flex flex-col gap-2 py-3" v-if="releases">
+    <ChangelogCard v-for="release of releases" :release :key="release.id" />
+  </div>
+  <slot v-else-if="error" name="error"></slot>
+</template>

app/components/Package/Header.vue

@@ -2,6 +2,7 @@
 import type { RouteLocationRaw } from 'vue-router'
 import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
 import { isEditableElement } from '~/utils/input'
+import { usePackageChangelog } from '~/composables/usePackageChangelog'
 
 const props = defineProps<{
   pkg?: Pick<SlimPackument, 'name' | 'versions' | 'dist-tags'> | null
@@ -10,7 +11,7 @@ const props = defineProps<{
   latestVersion?: SlimVersion | null
   provenanceData?: ProvenanceDetails | null
   provenanceStatus?: string | null
-  page: 'main' | 'docs' | 'code' | 'diff'
+  page: 'main' | 'docs' | 'code' | 'diff' | 'changelog'
   versionUrlPattern: string
 }>()
 
@@ -120,6 +121,20 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
+const { data: changelog } = usePackageChangelog(packageName, requestedVersion)
+
+const changelogLink = computed((): RouteLocationRaw | null => {
+  if (
+    // either changelog.value is available or current page is the changelog
+    !(changelog.value || props.page == 'changelog') ||
+    props.pkg == null ||
+    props.resolvedVersion == null
+  ) {
+    return null
+  }
+  return changelogRoute(props.pkg.name, props.resolvedVersion)
+})
+
 const keyboardShortcuts = useKeyboardShortcuts()
 
 onKeyStroke(
@@ -174,6 +189,26 @@ onKeyStroke(
   { dedupe: true },
 )
 
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '-') && !isEditableElement(e.target),
+  e => {
+    if (changelogLink.value === null) return
+    e.preventDefault()
+    navigateTo(changelogLink.value)
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '-') && !isEditableElement(e.target),
+  e => {
+    if (changelogLink.value === null) return
+    e.preventDefault()
+    navigateTo(changelogLink.value)
+  },
+  { dedupe: true },
+)
+
 const fundingUrl = computed(() => {
   let funding = props.displayVersion?.funding
   if (Array.isArray(funding)) funding = funding[0]
@@ -343,6 +378,15 @@ const fundingUrl = computed(() => {
         >
           {{ $t('compare.compare_versions') }}
         </LinkBase>
+        <LinkBase
+          v-if="changelogLink"
+          :to="changelogLink"
+          aria-keyshortcuts="-"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          :class="page === 'changelog' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.changelog') }}
+        </LinkBase>
       </nav>
     </div>
   </div>

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'
+  })
+}