feat: changelog - formatted links, more git providers & copy markdown

app/components/Button/CopyMd.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { AsyncDataRequestStatus } from '#app'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { text, fetchMarkdown, markdown, status } = defineProps<{
+  text: string
+  fetchMarkdown: () => Promise<void>
+  markdown: string | undefined
+  status: AsyncDataRequestStatus
+}>()
+
+function prefetchMarkdown() {
+  if (status === 'idle') {
+    fetchMarkdown()
+  }
+}
+
+const {
+  copied: copiedReadme,
+  copy,
+  copyPending: copyReadmePending,
+} = useClipboard({
+  copiedDuring: 2000,
+})
+
+function copyMarkdown() {
+  copy(async () => {
+    if (status === 'idle' || status === 'pending') {
+      await fetchMarkdown()
+    }
+    return markdown ?? ''
+  })
+}
+
+const btn = useTemplateRef('btn')
+
+const hover = useElementHover(() => btn.value?.$el, {
+  // prevent fetching while moving the pointer
+  delayEnter: 300,
+})
+
+const stopWatchHover = watch(hover, state => {
+  if (state) {
+    prefetchMarkdown()
+    stopWatchHover()
+  }
+})
+</script>
+<template>
+  <TooltipApp :text position="bottom">
+    <ButtonBase
+      ref="btn"
+      @focus="prefetchMarkdown"
+      @click="copyMarkdown"
+      :aria-pressed="copiedReadme"
+      :aria-label="copiedReadme ? $t('common.copied') : text"
+      :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
+      v-bind="$attrs"
+    >
+      <span>{{ copiedReadme ? $t('common.copied') : $t('common.copy') }}</span>
+      <span v-if="copyReadmePending" class="i-lucide:loader-circle animate-spin size-4"></span>
+    </ButtonBase>
+  </TooltipApp>
+</template>

app/components/Changelog/Card.vue

@@ -3,8 +3,10 @@ import type { IconClass } from '~/types'
 import type { ReleaseData } from '~~/shared/types/changelog'
 import { slugify } from '~~/shared/utils/html'
 
-const { release } = defineProps<{
+const { release, baseUrl, host } = defineProps<{
   release: ReleaseData
+  baseUrl: string
+  host?: string
 }>()
 const formattedDate = computed(() => {
   if (!release.publishedAt) {
@@ -28,6 +30,19 @@ const { providerIcon, viewOnProvider } = inject<{
   providerIcon: 'i-lucide:code',
   viewOnProvider: computed(() => $t('common.view_on.git_repo')),
 })
+
+// fetch markdown to copy
+const {
+  data: markdown,
+  execute: fetchMarkdown,
+  status: mdStatus,
+} = useLazyFetch<string>(() => `${baseUrl}/raw/${encodeURIComponent(release.tag)}`, {
+  immediate: false,
+  server: false,
+  query: {
+    host: computed(() => host),
+  },
+})
 </script>
 <template>
   <section
@@ -63,6 +78,13 @@ const { providerIcon, viewOnProvider } = inject<{
         :to="release.link"
         class="size-[0.9em]"
       />
+      <ButtonCopyMd
+        :fetchMarkdown
+        :markdown
+        :text="$t('changelog.copy_as_markdown')"
+        :status="mdStatus"
+        class="min-w-27"
+      />
       <ReadmeTocDropdown
         v-if="release?.toc && release.toc.length > 1"
         :toc="release.toc"

app/components/Changelog/Markdown.vue

@@ -8,17 +8,22 @@ const { info, goToVersion, tpTarget, resolveVersionPending } = defineProps<{
 
 const route = useRoute()
 
-const { data, error, pending } = useLazyFetch(
-  () => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`,
-)
+const url = computed(() => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}` as const)
+const host = computed(() => info.host)
+
+const { data, error, pending } = useLazyFetch(url, {
+  query: {
+    host,
+  },
+})
 
 if (import.meta.client) {
   const { settings } = useSettings()
 
   // doing this server side can make it that we go to the homepage
   const stopWatching = watchEffect(
     () => {
-      if (resolveVersionPending) {
+      if (resolveVersionPending || typeof data.value == 'string') {
         return // need to wait till resolving is finished
       }
       const toc = data.value?.toc
@@ -50,11 +55,32 @@ if (import.meta.client) {
   // stops watchEffect from trigger just before navigating
   onBeforeRouteLeave(stopWatching)
 }
+
+// fetch raw markdown to copy
+const {
+  data: rawMarkdown,
+  execute: fetchMarkdown,
+  status: mdStatus,
+} = useLazyFetch<string>(url, {
+  query: {
+    host,
+    raw: true,
+  },
+  immediate: false,
+  server: false,
+})
 </script>
 <template>
   <ChangelogSkeleton v-if="pending" />
-  <template v-else-if="data?.html">
-    <Teleport v-if="data?.toc && data.toc.length > 1 && !!tpTarget" :to="tpTarget">
+  <template v-else-if="typeof data == 'object' && data?.html">
+    <Teleport v-if="data.html && !!tpTarget" :to="tpTarget">
+      <ButtonCopyMd
+        v-if="data?.toc && data.toc.length > 1"
+        :fetchMarkdown
+        :markdown="rawMarkdown"
+        :status="mdStatus"
+        :text="$t('changelog.copy_as_markdown')"
+      />
       <ReadmeTocDropdown :toc="data.toc" class="justify-self-end" />
     </Teleport>
     <Readme :html="data.html" class="pt-4"></Readme>

app/components/Changelog/Releases.vue

@@ -8,19 +8,24 @@ const { info, requestedDate, goToVersion, resolveVersionPending } = defineProps<
   resolveVersionPending?: boolean
 }>()
 
+const url = computed(() => `/api/changelog/releases/${info.provider}/${info.repo}` as const)
+
 const {
   data: releases,
   error,
   pending,
-} = useLazyFetch<ReleaseData[]>(() => `/api/changelog/releases/${info.provider}/${info.repo}`)
+} = useLazyFetch<ReleaseData[]>(url, {
+  query: {
+    host: computed(() => info.host),
+  },
+})
 
 const route = useRoute()
 
 const matchingDateReleases = computed(() => {
   if (!requestedDate || !releases.value) {
     return []
   }
-
   return releases.value.filter(release => {
     if (!release.publishedAt) {
       return
@@ -79,7 +84,13 @@ prefetchComponents('ChangelogCard')
 <template>
   <ChangelogSkeleton v-if="pending" />
   <div class="flex flex-col gap-2 py-3" v-else-if="releases">
-    <ChangelogCard v-for="release of releases" :release :key="release.id" />
+    <ChangelogCard
+      v-for="release of releases"
+      :release
+      :key="release.id"
+      :baseUrl="url"
+      :host="info.host"
+    />
   </div>
   <slot v-else-if="error" name="error"></slot>
 </template>

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

@@ -130,8 +130,8 @@ defineOgImage(
         >
           {{ changelog.provider }}
         </LinkBase>
-        <div v-if="changelog?.type === 'md'" ref="tptoc" class="w-14 h-8">
-          <!-- prevents layout shift while loading -->
+        <div v-if="changelog?.type === 'md'" ref="tptoc" class="min-w-[150px] h-8 flex gap-2">
+          <!-- Placeholder for toc & copy md -->
         </div>
       </div>
       <section v-if="!changelog && !changelogError" class="flex flex-col gap-2 py-3">

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

@@ -82,6 +82,7 @@ const playgroundLinks = computed(() => [
     : []),
 ])
 
+//fetch README file as Markdown to copy
 const {
   data: readmeMarkdownData,
   status: readmeMarkdownStatus,
@@ -99,28 +100,6 @@ const {
   },
 )
 
-//copy README file as Markdown
-const {
-  copied: copiedReadme,
-  copy,
-  copyPending: copyReadmePending,
-} = useClipboard({
-  copiedDuring: 2000,
-})
-
-function copyReadme() {
-  copy(async () => {
-    await fetchReadmeMarkdown()
-    return readmeMarkdownData.value?.markdown ?? ''
-  })
-}
-
-function prefetchReadmeMarkdown() {
-  if (readmeMarkdownStatus.value === 'idle') {
-    fetchReadmeMarkdown()
-  }
-}
-
 // Track active TOC item based on scroll position
 const tocItems = computed(() => readmeData.value?.toc ?? [])
 const { activeId: activeTocId } = useActiveTocItem(tocItems)
@@ -1027,28 +1006,12 @@ const showSkeleton = shallowRef(false)
             </h2>
             <div class="flex gap-2">
               <!-- Copy readme as Markdown button -->
-              <TooltipApp
-                v-if="readmeData?.mdExists"
+              <ButtonCopyMd
+                :fetchMarkdown="fetchReadmeMarkdown"
+                :markdown="readmeMarkdownData.markdown"
+                :status="readmeMarkdownStatus"
                 :text="$t('package.readme.copy_as_markdown')"
-                position="bottom"
-              >
-                <ButtonBase
-                  @mouseenter="prefetchReadmeMarkdown"
-                  @focus="prefetchReadmeMarkdown"
-                  @click="copyReadme"
-                  :aria-pressed="copiedReadme"
-                  :aria-label="
-                    copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
-                  "
-                  :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
-                >
-                  <span>{{ copiedReadme ? $t('common.copied') : $t('common.copy') }}</span>
-                  <span
-                    v-if="copyReadmePending"
-                    class="i-lucide:loader-circle animate-spin size-4"
-                  ></span>
-                </ButtonBase>
-              </TooltipApp>
+              />
               <ReadmeTocDropdown
                 v-if="readmeData?.toc && readmeData.toc.length > 1"
                 :toc="readmeData.toc"

i18n/locales/en.json

@@ -1854,6 +1854,7 @@
       "p2": "Please try again later or {viewon}"
     },
     "rate_limit_ungh": "Sorry, Github's rate limit has been hit, try again in a moment",
-    "version_unavailable": "The requested version is not available."
+    "version_unavailable": "The requested version is not available.",
+    "copy_as_markdown": "Copy changelog as Markdown"
   }
 }

i18n/locales/nl.json

@@ -1787,6 +1787,7 @@
       "p2": "Probeer later opnieuw of {viewon}"
     },
     "rate_limit_ungh": "Sorry, de opvraaglimiet (rate limit) van GitHub is bereikt. Probeer het over een ogenblik opnieuw.",
-    "version_unavailable": "De gevraagde is niet beschikbaar."
+    "version_unavailable": "De gevraagde is niet beschikbaar.",
+    "copy_as_markdown": "Kopieer wijzigingen als Markdown"
   }
 }

i18n/schema.json

@@ -5568,6 +5568,9 @@
         },
         "version_unavailable": {
           "type": "string"
+        },
+        "copy_as_markdown": {
+          "type": "string"
         }
       },
       "additionalProperties": false

nuxt.config.ts

@@ -129,6 +129,20 @@ export default defineNuxtConfig({
         allowQuery: ['offset', 'limit'],
       },
     },
+    '/api/changelog/md/**': {
+      isr: {
+        expiration: 60 * 60 * 2 /* 2 hours */,
+        passQuery: true,
+        allowQuery: ['host', 'raw'],
+      },
+    },
+    '/api/changelog/releases/**': {
+      isr: {
+        expiration: 60 * 60 * 2 /* 2 hours */,
+        passQuery: true,
+        allowQuery: ['host'],
+      },
+    },
     '/api/registry/docs/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/api/registry/file/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/api/registry/provenance/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },

server/api/changelog/info/[name]/v/[version].get.ts

@@ -19,7 +19,7 @@ export const defaultChangelogCacheOptions: Parameters<typeof defineCachedEventHa
   swr: true,
   getKey: event => {
     const { rawPackageName = '', rawVersion = 'latest' } = getChangelogRouteParams(event)
-    return `changelogInfo:v1:${rawPackageName.trim().replaceAll('/', ':')}:${rawVersion.trim()}`
+    return `changelogInfo:v2:${rawPackageName.trim().replaceAll('/', ':')}:${rawVersion.trim()}`
   },
   shouldBypassCache: () => import.meta.dev,
 }