docs: add releases page (#1004)

docs/app.vue

@@ -98,8 +98,7 @@ const links = computed(() => {
   }, {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
+    to: '/releases'
   }].filter(Boolean)
 })
 

docs/components/releases/ReleasesItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <div ref="target" class="flex flex-col transition-opacity duration-500" :class="targetIsVisible ? 'opacity-100' : 'opacity-25'">
+    <time :datetime="date.day.toISOString()" class="flex-shrink-0 text-sm/6 font-semibold text-gray-500 dark:text-gray-400">{{ date.day.toLocaleString('en-us', { year: 'numeric', month: 'short', day: 'numeric' })
+    }}</time>
+
+    <NuxtLink v-if="date.release" :to="`https://github.com/nuxt/ui/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>
+    <div v-else-if="date.pull" class="text-sm/6 break-all mt-2">
+      <NuxtLink :to="`https://github.com/${date.pull.user.login}`" target="_blank" class="text-gray-900 dark:text-white transition-colors inline-flex items-center gap-1 rounded-full bg-gray-100/50 dark:bg-gray-800/50 dark:hover:bg-gray-800 p-0.5 pr-1 ring-1 ring-gray-300 dark:ring-gray-700 text-xs font-medium flex-shrink-0 align-middle mr-1">
+        <UAvatar :src="`https://github.com/${date.pull.user.login}.png`" size="3xs" />
+
+        {{ date.pull.user.login }}
+      </NuxtLink>
+
+      pushed <NuxtLink :to="date.pull.html_url" target="_blank" class="font-medium text-gray-900 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 transition-[color]">
+        #{{ date.pull.number }} {{ date.pull.title }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
+
+defineProps<{
+  date: {
+    day: Date
+    release?: {
+      name: string
+    }
+    pull?: {
+      number: number
+      title: string
+      html_url: string
+      user: {
+        login: string
+      }
+    }
+  }
+}>()
+
+const target = ref(null)
+const targetIsVisible = ref(false)
+
+useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  targetIsVisible.value = isIntersecting
+}, {
+  threshold: 1,
+  rootMargin: '0px 0px -68px 0px'
+})
+</script>

docs/content/releases.yml

@@ -0,0 +1,10 @@
+navigation: false
+title: Releases
+description: Follow the latest releases and updates of Nuxt UI.
+links:
+  - label: View on GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/releases
+    target: _blank
+    size: md
+    color: white

docs/error.vue

@@ -89,8 +89,7 @@ const links = computed(() => {
   }, {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
+    to: '/releases'
   }].filter(Boolean)
 })
 

docs/nuxt.config.ts

@@ -83,7 +83,9 @@ export default defineNuxtConfig({
         '/',
         '/getting-started',
         '/dev/getting-started',
-        '/api/search.json'
+        '/api/search.json',
+        '/api/releases.json',
+        '/api/pulls.json'
       ]
     }
   },

docs/package.json

@@ -16,7 +16,9 @@
     "@nuxtjs/google-fonts": "^3.0.2",
     "@nuxtjs/mdc": "^0.2.6",
     "@nuxtjs/plausible": "^0.2.3",
+    "@octokit/rest": "^20.0.2",
     "@vueuse/nuxt": "^10.5.0",
+    "date-fns": "^2.30.0",
     "eslint": "^8.52.0",
     "joi": "^17.11.0",
     "nuxt": "^3.8.0",

docs/pages/playground.vue

@@ -3,6 +3,7 @@ const title = 'Playground'
 const description = 'Play online with our interactive Nuxt Image playground.'
 
 useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
   title,
   ogTitle: 'Nuxt UI Playground',
   description

docs/pages/roadmap.vue

@@ -3,6 +3,7 @@ const title = 'Roadmap'
 const description = 'Discover our Volta board for @nuxt/ui development status.'
 
 useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
   title,
   ogTitle: 'Nuxt UI Roadmap',
   description

docs/server/api/pulls.json.get.ts

@@ -0,0 +1,23 @@
+import { Octokit } from '@octokit/rest'
+
+function isUserABot (user) {
+  return user?.login?.endsWith('-bot') || user?.login?.endsWith('[bot]')
+}
+
+export default cachedEventHandler(async () => {
+  if (!process.env.NUXT_GITHUB_TOKEN) {
+    return []
+  }
+
+  const octokit = new Octokit({ auth: process.env.NUXT_GITHUB_TOKEN })
+
+  const pulls = await octokit.paginate(octokit.rest.pulls.list, {
+    owner: 'nuxt',
+    repo: 'ui',
+    state: 'closed'
+  })
+
+  return pulls.filter(pull => !!pull.merged_at).filter(pull => !isUserABot(pull.user))
+}, {
+  maxAge: 60 * 60
+})

docs/server/api/releases.json.get.ts

@@ -0,0 +1,18 @@
+import { Octokit } from '@octokit/rest'
+
+export default cachedEventHandler(async () => {
+  if (!process.env.NUXT_GITHUB_TOKEN) {
+    return []
+  }
+
+  const octokit = new Octokit({ auth: process.env.NUXT_GITHUB_TOKEN })
+
+  const { data: releases } = await octokit.rest.repos.listReleases({
+    owner: 'nuxt',
+    repo: 'ui'
+  })
+
+  return releases
+}, {
+  maxAge: 60 * 60
+})