From a13f4856876f0f411bb10940a8cd49d29610a375 Mon Sep 17 00:00:00 2001
From: Jaron <jaron@ed.link>
Date: Sat, 2 May 2026 21:28:14 -0500
Subject: [PATCH] feat: add date schema and formatting to writing collection
 and update UI layout

---
 app/layouts/main.vue        |  2 +-
 app/pages/index.vue         |  6 ++++-
 app/pages/writing/index.vue | 50 ++++++++++++++++++++++++++++++-------
 content.config.ts           |  7 +++++-
 content/writing/thing.md    |  6 -----
 5 files changed, 53 insertions(+), 18 deletions(-)
 delete mode 100644 content/writing/thing.md

diff --git a/app/layouts/main.vue b/app/layouts/main.vue
index 097327e..e44078c 100644
--- a/app/layouts/main.vue
+++ b/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;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c904185..15b9b3f 100644
--- a/app/pages/index.vue
+++ b/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;
diff --git a/app/pages/writing/index.vue b/app/pages/writing/index.vue
index 7facff6..b0b2004 100644
--- a/app/pages/writing/index.vue
+++ b/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,15 +26,27 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
         </template>
         <section>
             <div class="section__content">
-                <a
-                    v-for="page in pages"
-                    :href="page.path"
-                    :key="page.path"
-                    class="article"
-                >
-                    <h3 class="article__title">{{ page.title }}</h3>
-                    <p class="article__description">{{ page.description }}</p>
-                </a>
+                <template v-if="pages?.length">
+                    <a
+                        v-for="page in pages"
+                        :href="page.path"
+                        :key="page.path"
+                        class="article"
+                    >
+                        <h3 class="article__title">{{ page.title }}</h3>
+                        <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>
diff --git a/content.config.ts b/content.config.ts
index faaddf3..aefa803 100644
--- a/content.config.ts
+++ b/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(),
+            }),
         }),
     },
 });
diff --git a/content/writing/thing.md b/content/writing/thing.md
deleted file mode 100644
index 5949007..0000000
--- a/content/writing/thing.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: An idea
-description: Something I thought of once.
----
-
-blah blah blah