feat: add changelog page

app/app.vue

@@ -10,6 +10,14 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   server: false,
 })
 
+const links = [
+  {
+    label: 'Changelog',
+    icon: 'solar:notes-minimalistic-bold-duotone',
+    to: '/changelog',
+  },
+]
+
 const twitterSite = appConfig.docs.socials?.twitter || appConfig.docs.socials?.x || undefined
 
 const browserTabIcon = appConfig.docs?.logo || undefined
@@ -43,7 +51,7 @@ provide('navigation', navigation)
   <AppFooter />
 
   <ClientOnly>
-    <LazyUContentSearch :files="files" :navigation="navigation" />
+    <LazyUContentSearch :files="files" :navigation="navigation" :links="links" />
   </ClientOnly>
 
   <UNotifications />

app/components/ChangelogItem.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
+
+defineProps<{
+  github: string
+  rightSide: boolean
+  date: {
+    day: Date
+    github: string
+    latest: boolean
+    release?: {
+      name: string
+      markdown: string
+    }
+  }
+}>()
+
+const target = ref(null)
+const targetIsVisible = ref(false)
+
+useIntersectionObserver(
+  target,
+  ([{ isIntersecting }]) => {
+    targetIsVisible.value = isIntersecting
+  },
+  {
+    rootMargin: '-68px 0px -68px 0px',
+  },
+)
+</script>
+
+<template>
+  <div
+    ref="target"
+    class="flex flex-col transition-opacity duration-500"
+    :class="{
+      'opacity-25': !targetIsVisible,
+      'opacity-100': targetIsVisible,
+      'text-right': rightSide,
+    }"
+  >
+    <time
+      class="flex-shrink-0 text-sm/6 font-semibold text-gray-500 dark:text-gray-400"
+      :datetime="date.day.toISOString()"
+    >
+      {{ date.day.toLocaleString('en-us', { year: 'numeric', month: 'short', day: 'numeric' }) }}
+    </time>
+
+    <UBadge
+      v-if="date.latest"
+      class="w-fit mt-1"
+      :class="rightSide ? 'ml-auto' : 'mr-auto'"
+      variant="outline"
+      size="xs"
+    >
+      Latest
+    </UBadge>
+
+    <NuxtLink
+      v-if="date.release"
+      :to="`https://github.com/${github}/releases/tag/${date.release.name}`"
+      target="_blank"
+      class="text-gray-900 dark:text-white font-bold text-3xl mt-2 group hover:text-primary-500 dark:hover:text-primary-400 transition-[color]"
+    >
+      {{ date.release.name }}
+    </NuxtLink>
+
+    <MDC
+      v-if="date.release?.markdown"
+      :value="date.release.markdown"
+      class="prose prose-primary dark:prose-invert mt-2 text-sm sm:text-base"
+      :class="{
+        'changelog-prose--right': rightSide,
+      }"
+      tag="div"
+    />
+  </div>
+</template>
+
+<style>
+.changelog-prose--right ul li {
+  direction: rtl;
+}
+</style>

app/pages/changelog.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { eachDayOfInterval, isSameDay, isToday } from 'date-fns'
+
+interface GithubRelease {
+  id: number
+  tag: string
+  author: string
+  name: string
+  draft: boolean
+  prerelease: boolean
+  createdAt: string
+  publishedAt: string
+  markdown: string
+  html: string
+}
+
+const { docs } = useAppConfig()
+// const github = docs?.github ?? undefined
+const github = 'unjs/nitro'
+console.log(`https://ungh.cc/repos/${github}/releases`)
+const { data: res } = await useFetch(`https://ungh.cc/repos/${github}/releases`)
+
+console.log('>>', res.value)
+
+if (!res?.value?.releases) {
+  showError({
+    statusCode: 404,
+    statusMessage: 'Changelog not found!',
+  })
+}
+
+const TITLE = `${github} changelog`
+const TITLE_HTML = `<span class="text-primary">${github}</span> changelog`
+const DESCRIPTION = `Follow the latest releases and updates happening on the repository`
+
+const dates = computed(() => {
+  const first = res.value.releases[res.value.releases.length - 1]
+  const last = res.value.releases[0]
+  if (!first) return []
+
+  const days = eachDayOfInterval({ start: new Date(first.publishedAt), end: new Date() }).reverse()
+
+  return days.map((day) => {
+    return {
+      day,
+      latest: isSameDay(day, last.publishedAt),
+      release: res.value.releases.find((release) => isSameDay(new Date(release.publishedAt), day)),
+    }
+  })
+})
+
+useHead({
+  titleTemplate: '%s %separator UnJS',
+})
+
+useSeoMeta({
+  title: TITLE,
+  description: DESCRIPTION,
+})
+</script>
+
+<template>
+  <div class="relative px-4 sm:px-6 lg:px-8">
+    <ULandingHero align="center" class="md:py-32" :ui="{ title: 'sm:text-6xl' }" :description="DESCRIPTION" :links="[
+      {
+        label: 'View on GitHub',
+        icon: 'simple-icons:github',
+        to: `https://github.com/${github}`,
+        target: '_blank',
+        size: 'md',
+        color: 'white',
+      },
+    ]">
+      <LandingBackground />
+
+      <template #title>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-html="TITLE_HTML" />
+      </template>
+    </ULandingHero>
+
+    <UPageBody>
+      <div class="h-[96px] w-0.5 bg-gray-200 dark:bg-gray-800 mx-auto rounded-t-full" />
+
+      <div v-for="(date, index) in dates" :key="index"
+        class="relative py-3 min-h-[24px] flex items-center justify-center">
+        <div class="h-full w-0.5 bg-gray-200 dark:bg-gray-800 absolute top-0 inset-x-[50%] -ml-[1px] flex-shrink-0" />
+
+        <template v-if="date.release || isToday(date.day)">
+          <div class="flex items-start gap-6 sm:gap-8 relative w-[50%]"
+            :class="index % 2 === 0 ? 'translate-x-[50%] -ml-2' : '-translate-x-[50%] ml-2 flex-row-reverse'">
+            <div
+              class="h-[8px] w-[8px] bg-gray-400 dark:bg-gray-400 rounded-full z-[1] mt-2 ring-2 ring-gray-300 dark:ring-gray-600 flex-shrink-0" />
+
+            <ChangelogItem :github="github" :date="date" :right-side="index % 2 !== 0" />
+          </div>
+        </template>
+      </div>
+
+      <div class="h-[96px] w-0.5 bg-gray-200 dark:bg-gray-800 mx-auto rounded-b-full" />
+    </UPageBody>
+  </div>
+</template>

docs/.config/docs.yaml

@@ -3,7 +3,7 @@
 name: 'UnDocs'
 shortDescription: 'Docs, made easy.'
 description: 'Elegant documentation tooling for UnJS ecosystem.'
-github: 'unjs/docs'
+github: 'unjs/undocs'
 url: 'https://undocs.pages.dev'
 redirects:
   '/docs': '/docs/getting-started'

package.json

@@ -43,6 +43,7 @@
     "c12": "^1.11.1",
     "citty": "^0.1.6",
     "consola": "^3.2.3",
+    "date-fns": "^3.3.1",
     "defu": "^6.1.4",
     "is-buffer": "^2.0.5",
     "nitropack": "^2.9.7",