now also able to render changelog markdown files

Author: WilcoSp

app/components/Changelog/Markdown.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const { info } = defineProps<{ info: ChangelogMarkdownInfo }>()
+
+const { data } = useLazyFetch(() => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`)
+</script>
+<template>
+  <div v-if="data?.toc && data.toc.length > 1" class="flex justify-end mt-3">
+    <ReadmeTocDropdown :toc="data.toc" class="justify-self-end" />
+  </div>
+  <Readme v-if="data?.html" :html="data.html"></Readme>
+</template>

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

@@ -63,7 +63,7 @@ watch(
 
 // getting info
 
-const { data: changelog } = usePackageChangelog(packageName, version)
+const { data: changelog, pending } = usePackageChangelog(packageName, version)
 </script>
 <template>
   <main class="flex-1 flex flex-col">
@@ -92,7 +92,11 @@ const { data: changelog } = usePackageChangelog(packageName, version)
 
     <section class="container w-full" v-if="changelog">
       <LazyChangelogReleases v-if="changelog.type == 'release'" :info="changelog" />
-      <p v-else>changelog.md support is comming or the package doesn't have changelogs</p>
+      <LazyChangelogMarkdown
+        v-else-if="changelog.type == 'md'"
+        :info="changelog"
+      ></LazyChangelogMarkdown>
+      <p v-else-if="!pending">Sorry, this package doesn't track any changelogs</p>
     </section>
   </main>
 </template>

server/api/changelog/md/[provider]/[owner]/[repo]/[...path].get.ts

@@ -0,0 +1,47 @@
+import * as v from 'valibot'
+import {
+  ERROR_CHANGELOG_FILE_FAILED,
+  ERROR_THROW_INCOMPLETE_PARAM,
+} from '~~/shared/utils/constants'
+
+export default defineCachedEventHandler(async event => {
+  const provider = getRouterParam(event, 'provider')
+  const repo = getRouterParam(event, 'repo')
+  const owner = getRouterParam(event, 'owner')
+  const path = getRouterParam(event, 'path')
+
+  if (!repo || !provider || !owner || !path) {
+    throw createError({
+      status: 404,
+      statusMessage: ERROR_THROW_INCOMPLETE_PARAM,
+    })
+  }
+
+  try {
+    console.log({ provider })
+
+    switch (provider as ProviderId) {
+      case 'github':
+        return await getGithubMarkDown(owner, repo, path)
+
+      default:
+        throw createError({
+          status: 404,
+          statusMessage: ERROR_CHANGELOG_NOT_FOUND,
+        })
+    }
+  } catch (error) {
+    handleApiError(error, {
+      statusCode: 502,
+      message: ERROR_CHANGELOG_FILE_FAILED,
+    })
+  }
+})
+
+async function getGithubMarkDown(owner: string, repo: string, path: string) {
+  const data = await $fetch(`https://ungh.cc/repos/${owner}/${repo}/files/HEAD/${path}`)
+
+  const markdown = v.parse(v.string(), data)
+
+  return (await changelogRenderer())(markdown)
+}

…og/releases/[provider]/[owner]/[repo].ts …eleases/[provider]/[owner]/[repo].get.tsserver/api/changelog/releases/[provider]/[owner]/[repo].ts renamed to server/api/changelog/releases/[provider]/[owner]/[repo].get.ts server/api/changelog/releases/[provider]/[owner]/[repo].ts renamed to server/api/changelog/releases/[provider]/[owner]/[repo].get.ts

@@ -1,6 +1,9 @@
 import type { ProviderId } from '~~/shared/utils/git-providers'
 import type { ReleaseData } from '~~/shared/types/changelog'
-import { ERROR_CHANGELOG_RELEASES_FAILED, THROW_INCOMPLETE_PARAM } from '~~/shared/utils/constants'
+import {
+  ERROR_CHANGELOG_RELEASES_FAILED,
+  ERROR_THROW_INCOMPLETE_PARAM,
+} from '~~/shared/utils/constants'
 import { GithubReleaseCollectionSchama } from '~~/shared/schemas/changelog/release'
 import { parse } from 'valibot'
 import { changelogRenderer } from '~~/server/utils/changelog/markdown'
@@ -13,7 +16,7 @@ export default defineCachedEventHandler(async event => {
   if (!repo || !provider || !owner) {
     throw createError({
       status: 404,
-      statusMessage: THROW_INCOMPLETE_PARAM,
+      statusMessage: ERROR_THROW_INCOMPLETE_PARAM,
     })
   }
 
@@ -23,12 +26,14 @@ export default defineCachedEventHandler(async event => {
         return await getReleasesFromGithub(owner, repo)
 
       default:
-        return false
+        throw createError({
+          status: 404,
+          statusMessage: ERROR_CHANGELOG_NOT_FOUND,
+        })
     }
   } catch (error) {
     handleApiError(error, {
       statusCode: 502,
-      // message: 'temp',
       message: ERROR_CHANGELOG_RELEASES_FAILED,
     })
   }

server/utils/changelog/detectChangelog.ts

@@ -107,6 +107,7 @@ async function checkChangelogFile(ref: RepoRef): Promise<ChangelogMarkdownInfo |
         type: 'md',
         provider: ref.provider,
         path: fileName,
+        repo: `${ref.owner}/${ref.repo}`,
       } satisfies ChangelogMarkdownInfo
     }
   }

server/utils/changelog/markdown.ts

@@ -54,7 +54,7 @@ export async function changelogRenderer() {
   </div>`
   }
 
-  return (markdown: string | null, releaseId: string | number) => {
+  return (markdown: string | null, releaseId?: string | number) => {
     // Collect table of contents items during parsing
     const toc: TocItem[] = []
 
@@ -68,7 +68,7 @@ export async function changelogRenderer() {
     // Track used heading slugs to handle duplicates (GitHub-style: foo, foo-1, foo-2)
     const usedSlugs = new Map<string, number>()
 
-    let lastSemanticLevel = 2 // Start after h2 (the "Readme" section heading)
+    let lastSemanticLevel = releaseId ? 2 : 1 // Start after h2 (the "Readme" section heading)
     renderer.heading = function ({ tokens, depth }: Tokens.Heading) {
       // Calculate the target semantic level based on document structure
       // Start at h3 (since page h1 + section h2 already exist)
@@ -89,7 +89,9 @@ export async function changelogRenderer() {
 
       // Prefix with 'user-content-' to avoid collisions with page IDs
       // (e.g., #install, #dependencies, #versions are used by the package page)
-      const id = `user-content-${releaseId}-${uniqueSlug}`
+      const id = releaseId
+        ? `user-content-${releaseId}-${uniqueSlug}`
+        : `user-content-${uniqueSlug}`
 
       // Collect TOC item with plain text (HTML stripped)
       const plainText = text

shared/types/changelog.ts

@@ -14,6 +14,7 @@ export interface ChangelogMarkdownInfo {
    * location within the repository
    */
   path: string
+  repo: `${string}/${string}`
 }
 
 export type ChangelogInfo = ChangelogReleaseInfo | ChangelogMarkdownInfo

shared/utils/constants.ts

@@ -38,7 +38,8 @@ export const ERROR_NEED_REAUTH = 'User needs to reauthenticate'
 export const ERROR_CHANGELOG_NOT_FOUND =
   'No releases or changelogs have been found for this package'
 export const ERROR_CHANGELOG_RELEASES_FAILED = 'Failed to get releases'
-export const THROW_INCOMPLETE_PARAM = "Couldn't do request due to incomplete parameters"
+export const ERROR_CHANGELOG_FILE_FAILED = 'Failed to get changelog markdown'
+export const ERROR_THROW_INCOMPLETE_PARAM = "Couldn't do request due to incomplete parameters"
 
 // microcosm services
 export const CONSTELLATION_HOST = 'constellation.microcosm.blue'