feat: init blog

docs/app/composables/useLinks.ts

@@ -107,6 +107,10 @@ export function useLinks() {
       to: 'https://github.com/Justineo/tempad-dev-plugin-nuxt-ui',
       target: '_blank'
     }]
+  }, {
+    label: 'Blog',
+    icon: 'i-lucide-file-text',
+    to: '/blog'
   }, {
     label: 'Releases',
     icon: 'i-lucide-rocket',

docs/app/composables/useSearchLinks.ts

@@ -57,6 +57,10 @@ export function useSearchLinks() {
     description: 'Meet the team behind Nuxt UI.',
     icon: 'i-lucide-users',
     to: '/team'
+  }, {
+    label: 'Blog',
+    icon: 'i-lucide-file-text',
+    to: '/blog'
   }, {
     label: 'Releases',
     icon: 'i-lucide-rocket',

docs/app/pages/blog/.blog.yml

@@ -0,0 +1,4 @@
+title: Nuxt UI Blog
+navigation.title: Blog
+description: 'Read the latest news, tutorials, and updates about Nuxt UI.'
+navigation.icon: i-lucide-newspaper

docs/app/pages/blog/[...slug].vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+import { findPageBreadcrumb, mapContentNavigation } from '#ui-pro/utils/content'
+
+const route = useRoute()
+
+const { data: page } = await useAsyncData(route.path, () =>
+  queryCollection('blog').path(route.path).first()
+)
+if (!page.value) throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
+  queryCollectionItemSurroundings('blog', route.path, {
+    fields: ['description']
+  })
+)
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation', ref([]))
+const blogNavigation = computed(() => navigation.value.find(item => item.path === '/blog')?.children || [])
+
+const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(blogNavigation?.value, page.value)).map(({ icon, ...link }) => link))
+
+if (page.value.image) {
+  defineOgImage({ url: page.value.image })
+} else {
+  defineOgImageComponent('Blog', {
+    headline: breadcrumb.value.map(item => item.label).join(' > ')
+  }, {
+    fonts: ['Geist:400', 'Geist:600']
+  })
+}
+
+const title = page.value?.seo?.title || page.value?.title
+const description = page.value?.seo?.description || page.value?.description
+
+useSeoMeta({
+  title,
+  description,
+  ogDescription: description,
+  ogTitle: title
+})
+
+const articleLink = computed(() => `${window?.location}`)
+
+const formatDate = (dateString: Date) => {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+</script>
+
+<template>
+  <UMain class="mt-20 px-2">
+    <UContainer class="relative min-h-screen">
+      <UPage v-if="page">
+        <ULink
+          to="/blog"
+          class="text-sm flex items-center gap-1"
+        >
+          <UIcon name="lucide:chevron-left" />
+          Blog
+        </ULink>
+        <div class="flex flex-col gap-3 mt-8">
+          <div class="flex text-xs text-muted items-center justify-center gap-2">
+            <span v-if="page.date">
+              {{ formatDate(page.date) }}
+            </span>
+            <span v-if="page.date && page.minRead">
+              -
+            </span>
+            <span v-if="page.minRead">
+              {{ page.minRead }} MIN READ
+            </span>
+          </div>
+          <NuxtImg
+            :src="page.image"
+            :alt="page.title"
+            class="rounded-lg w-full h-[400px] object-cover object-center max-w-5xl mx-auto"
+          />
+          <h1 class="text-4xl text-center font-medium max-w-3xl mx-auto mt-4">
+            {{ page.title }}
+          </h1>
+          <p class="text-muted text-center max-w-2xl mx-auto">
+            {{ page.description }}
+          </p>
+          <div class="mt-4 flex justify-center flex-wrap items-center gap-6">
+            <UUser v-for="(author, index) in page.authors" :key="index" v-bind="author" :description="author.to ? `@${author.to.split('/').pop()}` : undefined" />
+          </div>
+        </div>
+        <UPageBody class="max-w-3xl mx-auto">
+          <ContentRenderer
+            v-if="page.body"
+            :value="page"
+          />
+
+          <div class="flex items-center justify-end gap-2 text-sm text-muted">
+            <UButton
+              size="sm"
+              variant="link"
+              color="neutral"
+              label="Copy link"
+              @click="copyToClipboard(articleLink, 'Article link copied to clipboard')"
+            />
+          </div>
+          <UContentSurround :surround />
+        </UPageBody>
+      </UPage>
+    </UContainer>
+  </UMain>
+</template>

docs/app/pages/blog/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// @ts-expect-error yaml is not typed
+import page from '.blog.yml'
+
+const { data: posts } = await useAsyncData('blogs', () =>
+  queryCollection('blog').order('date', 'DESC').all()
+)
+
+useSeoMeta({
+  titleTemplate: `%s`,
+  title: page.title,
+  description: page.description,
+  ogTitle: `${page.title}`,
+  ogDescription: page.description
+})
+
+/* defineOgImageComponent('Docs', {
+  headline: 'Blog',
+  title: page.title,
+  description: page.description
+}) */
+</script>
+
+<template>
+  <UContainer v-if="page">
+    <UPageHero
+      :title="page.title"
+      :description="page.description"
+      orientation="horizontal"
+    />
+
+    <UPageBody>
+      <UContainer>
+        <UBlogPosts class="mb-12 md:grid-cols-2 lg:grid-cols-3">
+          <UBlogPost
+            v-for="(article, index) in posts"
+            :key="article.path"
+            :to="article.path"
+            :title="article.title"
+            :description="article.description"
+            :image="{
+              src: article.image,
+              width: (index === 0 ? 672 : 437),
+              height: (index === 0 ? 378 : 246),
+              alt: `${article.title} image`
+            }"
+            :authors="article.authors?.map(author => ({ ...author, avatar: { ...author.avatar, alt: `${author.name} avatar` } }))"
+            :badge="{ label: article.category, color: 'primary', variant: 'subtle' }"
+            :variant="index === 0 ? 'outline' : 'subtle'"
+            :orientation="index === 0 ? 'horizontal' : 'vertical'"
+            :class="[index === 0 && 'col-span-full']"
+          />
+        </UBlogPosts>
+      </UContainer>
+    </UPageBody>
+  </UContainer>
+</template>