docs(components): add changelog commit history

cli/templates.mjs

@@ -213,6 +213,10 @@ navigation.badge: Soon
 ## Theme
 
 :component-theme${pro ? '{pro}' : ''}
+
+## Changelog
+
+:component-changelog
 `
   }
 }

docs/app/components/content/ComponentChangelog.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { CommitInfo } from '#build/changelog'
+import { camelCase } from 'scule'
+import { changelog } from '#build/changelog'
+
+const route = useRoute()
+const camelName = camelCase((route.path.split('/').pop() ?? '').replace(/-/g, ''))
+
+const commits = computed(() => {
+  const related = changelog.filter(c => c.version || c.components?.some(i => i.includes(camelName)))
+  return related.filter((i, idx) => !(i.version && (!related[idx + 1] || related[idx + 1]?.version)))
+})
+
+function normalizeCommitMessage(commit: CommitInfo) {
+  const prefix = `[\`${commit.hash.slice(0, 5)}\`](https://github.com/nuxt/ui/commit/${commit.hash})`
+  const content = commit.message.replace(/\(.*?\)/, '')
+    .replace(/#(\d+)/g, '<a href=\'https://github.com/nuxt/ui/issues/$1\'>#$1</a>')
+    .replace(/`(.*?)`/g, '<code class="text-xs">$1</code>')
+
+  return `${prefix} — ${content}`
+}
+</script>
+
+<template>
+  <div v-if="!commits.length">
+    No recent changes
+  </div>
+
+  <div class="flex flex-col gap-1.5 relative">
+    <div class="bg-accented w-px h-full absolute left-[11px] z-[-1]" />
+
+    <template v-for="(commit, idx) of commits" :key="commit.hash">
+      <div v-if="idx === 0 && !commit.version" class="flex gap-1.5 items-center">
+        <UAvatar icon="i-lucide-git-pull-request-draft" size="xs" class="shrink-0 ring-2 ring-bg" />
+        <div class="text-muted text-sm/5">
+          Pending for release...
+        </div>
+      </div>
+
+      <div v-if="commit.version" class="flex gap-1.5 items-center">
+        <UAvatar icon="i-lucide-rocket" size="xs" class="shrink-0 ring-2 ring-bg" />
+        <div class="text-sm">
+          <ProseA :href="`https://github.com/nuxt/ui/releases/tag/${commit.version}`" target="_blank">
+            {{ commit.version }}
+          </ProseA>
+          <span class="text-muted text-xs/5"> on <NuxtTime :datetime="commit.date" /></span>
+        </div>
+      </div>
+      <div v-else class="flex gap-1.5 items-center">
+        <div class="bg-accented ring-2 ring-bg size-1.5 mx-[8.5px] rounded-full" />
+        <MDC :value="normalizeCommitMessage(commit)" class="text-sm [&>*]:py-0 [&>*]:my-0 [&_code]:text-xs" tag="div" />
+      </div>
+    </template>
+  </div>
+</template>

docs/content/3.components/accordion.md

@@ -321,3 +321,7 @@ props:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/alert.md

@@ -299,3 +299,7 @@ props:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/avatar-group.md

@@ -102,3 +102,7 @@ Wrap each avatar with a [Link](/components/link) to make them clickable.
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/avatar.md

@@ -107,3 +107,7 @@ You can use a [Chip](/components/chip) component to display a chip around the Av
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/badge.md

@@ -145,3 +145,7 @@ slots:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/breadcrumb.md

@@ -123,3 +123,7 @@ You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/button-group.md

@@ -114,3 +114,7 @@ You can use a [Badge](/components/badge) within a button group.
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/button.md

@@ -355,3 +355,7 @@ The `Button` component extends the `Link` component. Check out the source code o
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/calendar.md

@@ -270,3 +270,7 @@ name: 'calendar-date-range-picker-example'
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/card.md

@@ -66,3 +66,7 @@ slots:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/carousel.md

@@ -285,3 +285,7 @@ This will give you access to the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/checkbox-group.md

@@ -352,3 +352,7 @@ props:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/checkbox.md

@@ -238,3 +238,7 @@ props:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/chip.md

@@ -149,3 +149,7 @@ In this example, the Chip has a color per status and is displayed when the statu
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/collapsible.md

@@ -146,3 +146,7 @@ name: 'collapsible-icon-example'
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/color-picker.md

@@ -165,3 +165,7 @@ name: 'color-picker-chooser-example'
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/command-palette.md

@@ -938,3 +938,7 @@ You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/container.md

@@ -30,3 +30,7 @@ props:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/context-menu.md

@@ -322,3 +322,7 @@ In this example, :kbd{value="meta"} :kbd{value="S"}, :kbd{value="shift"} :kbd{va
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/drawer.md

@@ -379,3 +379,7 @@ name: 'drawer-command-palette-example'
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/dropdown-menu.md

@@ -399,3 +399,7 @@ In this example, :kbd{value="meta"} :kbd{value="E"}, :kbd{value="meta"} :kbd{val
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/file-upload.md

@@ -344,3 +344,7 @@ When accessing the component via a template ref, you can use the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/form-field.md

@@ -183,3 +183,7 @@ slots:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/form.md

@@ -214,3 +214,7 @@ This will give you access to the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/icon.md

@@ -32,3 +32,7 @@ It's highly recommended to install the icons collections you need, read more abo
 ### Props
 
 :component-props
+
+## Changelog
+
+:component-changelog

docs/content/3.components/input-menu.md

@@ -820,3 +820,7 @@ When accessing the component via a template ref, you can use the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/input-number.md

@@ -293,3 +293,7 @@ When accessing the component via a template ref, you can use the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/input-tags.md

@@ -293,3 +293,7 @@ When accessing the component via a template ref, you can use the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/input.md

@@ -347,3 +347,7 @@ When accessing the component via a template ref, you can use the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/kbd.md

@@ -131,3 +131,7 @@ slots:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/link.md

@@ -106,3 +106,7 @@ ignore:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/modal.md

@@ -385,3 +385,7 @@ name: 'modal-command-palette-example'
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/navigation-menu.md

@@ -1178,3 +1178,7 @@ In this example, we add the `sm:w-(--reka-navigation-menu-viewport-width)` class
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/pagination.md

@@ -327,3 +327,7 @@ In this example we're adding the `#with-links` hash to avoid going to the top of
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/pin-input.md

@@ -191,3 +191,7 @@ When accessing the component via a template ref, you can use the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/popover.md

@@ -244,3 +244,7 @@ name: 'popover-anchor-slot-example'
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/progress.md

@@ -160,3 +160,7 @@ props:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/radio-group.md

@@ -306,3 +306,7 @@ props:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/select-menu.md

@@ -855,3 +855,7 @@ When accessing the component via a template ref, you can use the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/select.md

@@ -747,3 +747,7 @@ When accessing the component via a template ref, you can use the following:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog

docs/content/3.components/separator.md

@@ -123,3 +123,7 @@ props:
 ## Theme
 
 :component-theme
+
+## Changelog
+
+:component-changelog