feat: added blog page

Author: blaquewithaq

app/pages/blog.vue

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <div>
-    <!--  -->
-  </div>
+  <NuxtPage />
 </template>

app/pages/blog/[slug].vue

@@ -1,9 +1,92 @@
 <script setup lang="ts">
+const route = useRoute()
 
+const { data: post } = await useAsyncData(route.path, () => queryCollection('posts').path(route.path).first())
+if (!post.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Post not found', fatal: true })
+}
+
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+  return queryCollectionItemSurroundings('posts', route.path, {
+    fields: ['description']
+  })
+})
+
+const title = post.value.seo?.title || post.value.title
+const description = post.value.seo?.description || post.value.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description
+})
+
+if (post.value.image?.src) {
+  defineOgImage({
+    url: post.value.image.src
+  })
+} else {
+  defineOgImageComponent('myOgImage', {
+    headline: 'Blog'
+  })
+}
 </script>
 
 <template>
-  <div>
-    <!--  -->
-  </div>
+  <UContainer v-if="post">
+    <UPageHeader
+      :title="post.title"
+      :description="post.description"
+    >
+      <template #headline>
+        <UBadge
+          v-bind="post.badge"
+          variant="subtle"
+        />
+        <span class="text-muted">&middot;</span>
+        <time class="text-muted">{{ new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' }) }}</time>
+      </template>
+
+      <div class="flex flex-wrap items-center gap-3 mt-4">
+        <UButton
+          v-for="(author, index) in post.authors"
+          :key="index"
+          :to="author.to"
+          color="neutral"
+          variant="subtle"
+          target="_blank"
+          size="sm"
+        >
+          <UAvatar
+            v-bind="author.avatar"
+            alt="Author avatar"
+            size="2xs"
+          />
+
+          {{ author.name }}
+        </UButton>
+      </div>
+    </UPageHeader>
+
+    <UPage>
+      <UPageBody>
+        <ContentRenderer
+          v-if="post"
+          :value="post"
+        />
+
+        <USeparator v-if="surround?.length" />
+
+        <UContentSurround :surround="surround" />
+      </UPageBody>
+
+      <template
+        v-if="post?.body?.toc?.links?.length"
+        #right
+      >
+        <UContentToc :links="post.body.toc.links" />
+      </template>
+    </UPage>
+  </UContainer>
 </template>

app/pages/blog/index.vue

@@ -1,9 +1,50 @@
 <script setup lang="ts">
+const route = useRoute()
 
+const { data: page } = await useAsyncData('page-blog', () => queryCollection('blog').first())
+const { data: posts } = await useAsyncData(route.path, () => queryCollection('posts').all())
+
+const title = page.value?.seo?.title || page.value?.title
+const description = page.value?.seo?.description || page.value?.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description
+})
+
+if (import.meta.client) defineOgImageComponent('myOgImage')
 </script>
 
 <template>
-  <div>
-    <!--  -->
-  </div>
+  <UContainer>
+    <UPageHeader
+      v-bind="page"
+      class="py-[50px]"
+    />
+
+    <UPageBody>
+      <UBlogPosts>
+        <UBlogPost
+          v-for="(post, index) in posts"
+          :key="index"
+          :to="post.path"
+          :icon="post.icon"
+          :title="post.title"
+          :description="post.description"
+          :image="post.image"
+          :date="new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' })"
+          :authors="post.authors"
+          :badge="post.badge"
+          :orientation="index === 0 ? 'horizontal' : 'vertical'"
+          :class="[index === 0 && 'col-span-full']"
+          variant="naked"
+          :ui="{
+            description: 'line-clamp-2'
+          }"
+        />
+      </UBlogPosts>
+    </UPageBody>
+  </UContainer>
 </template>

content.config.ts

@@ -155,8 +155,25 @@ const collections = {
   }),
   blog: defineCollection({
     type: 'page',
-    source: '4.blog/**/*',
+    source: '4.blog.yml',
     schema: z.object({})
+  }),
+  posts: defineCollection({
+    type: 'page',
+    source: '4.blog/**/*',
+    schema: z.object({
+      icon: z.string().optional(),
+      image: z.object({ src: z.string().nonempty().editor({ input: 'media' }) }),
+      authors: z.array(
+        z.object({
+          name: z.string().nonempty(),
+          to: z.string().nonempty(),
+          avatar: z.object({ src: z.string().nonempty().editor({ input: 'media' }) })
+        })
+      ),
+      date: z.date(),
+      badge: z.object({ label: z.string().nonempty() })
+    })
   })
 }
 

content/4.blog.yml

@@ -0,0 +1,4 @@
+icon: i-lucide-newspaper
+title: Blog
+description: Latest articles and updates
+navigation.icon: i-lucide-newspaper

content/4.blog/.navigation.yml

@@ -0,0 +1,60 @@
+---
+title: Our New Website
+description: "We are excited to announce the launch of our new website, designed to enhance your experience and provide better access to our resources."
+image:
+  src: /assets/images/blog/website-example.png
+date: 2025-06-15
+badge:
+  label: New
+---
+
+## Welcome to Our New Website
+
+We’re thrilled to officially unveil our brand-new website—a central hub built with purpose, clarity, and accessibility in mind. Whether you're discovering our work for the first time or you've been with us from the beginning, this site was designed to provide a better experience for everyone.
+
+## Why a New Site?
+
+Over time, our projects and resources have grown significantly. From open-source tools and creative experiments to research and documentation, it became clear that we needed a unified platform to:
+
+- Organize our growing body of work
+- Share updates and announcements more efficiently
+- Offer easy access to downloads, source code, and documentation
+- Support contributors and collaborators
+
+This new website brings all of that into one cohesive space.
+
+## What’s Inside
+
+Here’s a quick overview of what you’ll find:
+
+### 🚀 Projects
+
+A curated showcase of our active and past projects, with direct links to GitHub repositories, live demos, and changelogs.
+
+### 📚 Resources
+
+Useful guides, API references, and helpful links for developers, designers, and contributors. We aim to make it easier than ever to get started.
+
+### 📰 Blog
+
+You’re reading it! This blog is where we’ll post updates, behind-the-scenes insights, release notes, and other content to keep you informed.
+
+### 🤝 Get Involved
+
+We’ve made it easier to contribute—whether it’s reporting bugs, submitting pull requests, or helping with documentation. Our new site includes clear contribution guidelines and collaboration tips.
+
+## What’s Next?
+
+This launch is just the beginning. We have plans to roll out:
+
+- A searchable archive of past releases 🗂️
+- Deeper integration with our GitHub activity 📦
+
+## Feedback Welcome
+
+We’d love to hear what you think! If you encounter any bugs or have suggestions for improvement, feel free to open an issue or contact us directly.
+
+Thank you for being part of this journey—we’re excited for what’s ahead!
+
+---
+Stay connected, stay curious.

content/4.blog/1.getting-started.md

@@ -25,7 +25,7 @@ links:
   - label: Blog
     icon: i-lucide-pencil
     to: /blog
-    disabled: true
+    disabled: false
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/projectm-visualizer