initial commit

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

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+import { mapContentNavigation } from '@nuxt/ui/utils/content'
+import { findPageBreadcrumb } from '@nuxt/content/utils'
+
+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?.path)).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: string) => {
+  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-[300px] object-cover object-center"
+          />
+          <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="flex items-center justify-center gap-2 mt-2">
+            <UUser
+              orientation="vertical"
+              color="neutral"
+              variant="outline"
+              class="justify-center items-center text-center"
+              v-bind="page.author"
+            />
+          </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>

app/pages/blog/index.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData('blog-page', () => {
+  return queryCollection('pages').path('/blog').first()
+})
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page not found',
+    fatal: true
+  })
+}
+const { data: posts } = await useAsyncData('blogs', () =>
+  queryCollection('blog').order('date', 'DESC').all()
+)
+if (!posts.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'blogs posts not found',
+    fatal: true
+  })
+}
+
+useSeoMeta({
+  title: page.value?.seo?.title || page.value?.title,
+  ogTitle: page.value?.seo?.title || page.value?.title,
+  description: page.value?.seo?.description || page.value?.description,
+  ogDescription: page.value?.seo?.description || page.value?.description
+})
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHero
+      :title="page.title"
+      :description="page.description"
+      :links="page.links"
+      :ui="{
+        title: '!mx-0 text-left',
+        description: '!mx-0 text-left',
+        links: 'justify-start'
+      }"
+    />
+    <UPageSection
+      :ui="{
+        container: '!pt-0'
+      }"
+    >
+      <UBlogPosts orientation="vertical">
+        <Motion
+          v-for="(post, index) in posts"
+          :key="index"
+          :initial="{ opacity: 0, transform: 'translateY(10px)' }"
+          :while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
+          :transition="{ delay: 0.2 * index }"
+          :in-view-options="{ once: true }"
+        >
+          <UBlogPost
+            variant="naked"
+            orientation="horizontal"
+            :to="post.path"
+            v-bind="post"
+            :ui="{
+              root: 'md:grid md:grid-cols-2 group overflow-visible transition-all duration-300',
+              image:
+                'group-hover/blog-post:scale-105 rounded-lg shadow-lg border-4 border-muted ring-2 ring-default',
+              header:
+                index % 2 === 0
+                  ? 'sm:-rotate-1 overflow-visible'
+                  : 'sm:rotate-1 overflow-visible'
+            }"
+          />
+        </Motion>
+      </UBlogPosts>
+    </UPageSection>
+  </UPage>
+</template>