Get blog pages working

app/components/BlogList.vue

@@ -20,7 +20,7 @@ const { data: posts } = await useAsyncData("blog-posts", () => {
                 <h2 class="mt-2">{{ post.title }}</h2>
                 <p>{{ post.description }}</p>
                 <div class="opacity-60 mb-5">
-                    <span>{{ post.author }}</span>
+                    <span>{{ post.author.name }}</span>
                     <span class="mx-2">•</span>
                     <span>{{
                         new Date(post.date).toLocaleDateString(undefined, {

app/components/TitleSection.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div>hello world!</div>
+</template>

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

@@ -18,7 +18,25 @@ if (!page.value) {
     <article
         class="prose prose-invert prose-orange m-auto min-h-[70%] max-w-screen-lg px-12 pb-20"
     >
-        <ContentRenderer v-if="page" :value="page" />
+        <h1 class="pb-0! mb-0! leading-none!" v-if="page?.title">
+            {{ page.title }}
+        </h1>
+        <div class="opacity-60">
+            <a v-if="page?.author" :href="page.author.url">{{
+                page.author.name
+            }}</a>
+            <span v-if="page?.author && page?.date" class="mx-2">•</span>
+            <span v-if="page?.date">{{
+                new Date(page.date).toLocaleDateString(undefined, {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                })
+            }}</span>
+        </div>
+        <ContentRenderer class="mt-10" v-if="page" :value="page">
+            Hello
+        </ContentRenderer>
     </article>
 </template>
 

content.config.ts

@@ -1,4 +1,4 @@
-import { defineContentConfig, defineCollection } from "@nuxt/content";
+import { defineContentConfig, defineCollection, property } from "@nuxt/content";
 import { z } from "zod";
 
 export default defineContentConfig({
@@ -6,11 +6,16 @@ export default defineContentConfig({
         blog: defineCollection({
             type: "page",
             source: "blog/*.md",
-            // Define custom schema for docs collection
             schema: z.object({
-                tags: z.array(z.string()),
+                hero: property(z.object({})).inherit(
+                    "app/components/TitleSection.vue",
+                ),
                 date: z.date(),
-                author: z.string(),
+                author: z.object({
+                    name: z.string(),
+                    url: z.string().url(),
+                }),
+                title: z.string(),
             }),
         }),
     },

content/blog/2026-02-06.md

@@ -1,10 +1,11 @@
 ---
 date: 2026-02-06
-author: [BjornTheProgrammer](https://github.com/BjornTheProgrammer)
+author:
+  name: BjornTheProgrammer
+  url: https://github.com/BjornTheProgrammer
+title: Pumpkin Week 1 Updates
 ---
 
-# Pumpkin Week 1 Updates
-
 Some updates occured this week.
 
 

content/blog/2026-02-07.md

@@ -1,10 +1,11 @@
 ---
 date: 2026-02-07
-author: [BjornTheProgrammer](https://github.com/BjornTheProgrammer)
+author:
+  name: BjornTheProgrammer
+  url: https://github.com/BjornTheProgrammer
+title: Pumpkin Week 2 Updates
 ---
 
-# Pumpkin Week 2 Updates
-
 Some updates occured this week.
 
 

content/blog/index.md

@@ -1,4 +1,6 @@
-# Blog
+---
+title: Blog
+---
 
 ::BlogList
 ::