feat: add date schema and formatting to writing collection and update UI layout

app/layouts/main.vue

@@ -121,7 +121,7 @@ svg[height='0'] {
 }
 
 .name {
-    font-size: 4rem;
+    font-size: 3rem;
     font-weight: 400;
     line-height: 1.2;
     margin: 0;

app/pages/index.vue

@@ -163,7 +163,7 @@ definePageMeta({
     </NuxtLayout>
 </template>
 
-<style>
+<style scoped>
 section {
     margin-top: 2rem;
 }
@@ -172,6 +172,10 @@ section > .section__content {
     padding: 0 2rem;
 }
 
+/* section:not(:has(h5)) > .section__content {
+    padding: 2rem;
+} */
+
 section > h5::before {
     content: '';
     height: 1px;

app/pages/writing/index.vue

@@ -2,6 +2,12 @@
 const { data: pages } = await useAsyncData('writing-pages', () =>
     queryCollection('writing').all(),
 );
+
+const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    // ex. May 5, 2026
+    return `${date.toLocaleDateString('en-US', { month: 'short' })} ${date.getDate()}, ${date.getFullYear()}`;
+};
 </script>
 
 <template>
@@ -20,6 +26,7 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
         </template>
         <section>
             <div class="section__content">
+                <template v-if="pages?.length">
                     <a
                         v-for="page in pages"
                         :href="page.path"
@@ -27,8 +34,19 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
                         class="article"
                     >
                         <h3 class="article__title">{{ page.title }}</h3>
-                    <p class="article__description">{{ page.description }}</p>
+                        <p class="article__date">
+                            {{ formatDate(page.date) }}
+                        </p>
+                        <p class="article__description">
+                            {{ page.description }}
+                        </p>
                     </a>
+                </template>
+                <template v-else>
+                    <div class="empty-state">
+                        <p>Nothing here yet.</p>
+                    </div>
+                </template>
             </div>
         </section>
     </NuxtLayout>
@@ -46,6 +64,10 @@ section > .section__content {
     padding: 0 2rem;
 }
 
+section:not(:has(h5)) > .section__content {
+    padding: 2rem;
+}
+
 .article {
     border-bottom: 1px solid var(--muted);
     padding: 1rem 0;
@@ -78,11 +100,21 @@ section > .section__content {
     font-weight: 400;
 }
 
+.article__date {
+    margin: 0;
+    font-weight: 400;
+    font-size: small;
+    color: var(--muted);
+}
+
 .article__description {
     margin: 0;
     font-size: small;
     font-weight: 400;
     font-style: italic;
+}
+
+.empty-state {
     color: var(--muted);
 }
 </style>

content.config.ts

@@ -1,10 +1,15 @@
-import { defineContentConfig, defineCollection } from '@nuxt/content';
+import { defineContentConfig, defineCollection, z } from '@nuxt/content';
 
 export default defineContentConfig({
     collections: {
         writing: defineCollection({
             type: 'page',
             source: 'writing/**/*.md',
+            schema: z.object({
+                title: z.string(),
+                date: z.coerce.date(),
+                description: z.string(),
+            }),
         }),
     },
 });

content/writing/thing.md

@@ -1,6 +0,0 @@
----
-title: An idea
-description: Something I thought of once.
----
-
-blah blah blah