rework to 2000's-ish style site

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

@@ -12,10 +12,14 @@ const articleUrl = `${SITE_URL}${route.path}`;
 const webpageId = `${articleUrl}#webpage`;
 const articleId = `${articleUrl}#article`;
 const blogId = `${SITE_URL}/writing#blog`;
+const contentPath =
+    '/' +
+    (Array.isArray(route.params.slug)
+        ? route.params.slug.join('/')
+        : String(route.params.slug ?? ''));
+
 const { data: page } = await useAsyncData(route.path, () => {
-    return queryCollection('writing')
-        .path(route.path.replace('/writing/', ''))
-        .first();
+    return queryCollection('writing').path(contentPath).first();
 });
 
 if (!page.value) {
@@ -134,52 +138,33 @@ useHead({
     ],
 });
 
+const formatDate = (date: Date | string) => {
+    return new Date(date).toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        timeZone: 'UTC',
+    });
+};
+
 definePageMeta({
     layout: false,
 });
 </script>
 
 <template>
-    <div>
-        <NuxtLayout
-            name="main"
-            :title="page?.title"
-            :description="page?.description"
-        >
-            <template #header-upper>
-                <div class="header-upper-inner">
-                    <NuxtLink
-                        to="/writing"
-                        class="back-link"
-                        aria-label="Back to writing"
-                    >
-                        <span class="arrow">←</span>
-                        <span>Back</span>
-                    </NuxtLink>
-                </div>
-            </template>
-            <ContentRenderer
-                class="writing__content"
-                v-if="page"
-                :value="page"
-            />
-        </NuxtLayout>
-    </div>
+    <NuxtLayout
+        name="main"
+        :title="page.title"
+        :description="formatDate(page.date)"
+    >
+        <article v-if="page">
+            <div class="article-body">
+                <p v-if="page.description">
+                    <strong>{{ page.description }}</strong>
+                </p>
+                <ContentRenderer :value="page" />
+            </div>
+        </article>
+    </NuxtLayout>
 </template>
-
-<style scoped>
-.header-upper-inner {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 2rem;
-}
-
-.writing__content {
-    padding: 2rem;
-}
-
-.writing__content :deep(> :first-child) {
-    margin-top: 0;
-}
-</style>