writing folders working

app/components/WritingList.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+defineProps<{
+    pages: Array<{
+        path: string;
+        title: string;
+        date: string | Date;
+    }>;
+}>();
+
+const formatDate = (dateString: string | Date) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        timeZone: 'UTC',
+    });
+};
+</script>
+
+<template>
+    <template v-if="pages.length">
+        <NuxtLink
+            v-for="page in pages"
+            :key="page.path"
+            :to="'/writing' + page.path"
+            class="listing"
+        >
+            <span class="listing__title">{{ page.title }}</span>
+            <span class="listing__rule" aria-hidden="true"></span>
+            <time :datetime="new Date(page.date).toISOString()">{{
+                formatDate(page.date)
+            }}</time>
+        </NuxtLink>
+    </template>
+    <p v-else class="empty-state">No thoughts...head empty</p>
+</template>
+
+<style scoped>
+.listing {
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+    margin: 0 0 0.65rem;
+    text-decoration: none;
+    color: inherit;
+}
+
+.listing:hover {
+    text-decoration: none;
+}
+
+.listing:hover .listing__title {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+.listing__title {
+    flex-shrink: 0;
+    color: var(--text);
+}
+
+.listing__rule {
+    flex: 1 1 auto;
+    min-width: 1.25rem;
+    border-bottom: 1px solid var(--hairline);
+    transform: translateY(-0.35em);
+}
+
+.listing time {
+    flex-shrink: 0;
+    font-family: var(--font-plain);
+    font-size: 0.75rem;
+    font-style: italic;
+    color: var(--muted);
+    white-space: nowrap;
+}
+
+.empty-state {
+    color: var(--muted);
+    font-style: italic;
+}
+
+@media (max-width: 640px) {
+    .listing {
+        flex-direction: column;
+        gap: 0.15rem;
+    }
+
+    .listing__rule {
+        display: none;
+    }
+}
+</style>

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

@@ -12,44 +12,76 @@ const articleUrl = `${SITE_URL}${route.path}`;
 const webpageId = `${articleUrl}#webpage`;
 const articleId = `${articleUrl}#article`;
 const blogId = `${SITE_URL}/writing#blog`;
-const contentPath =
+const slug = computed(() =>
-    '/' +
+    Array.isArray(route.params.slug)
-    (Array.isArray(route.params.slug)
         ? route.params.slug.join('/')
-        : String(route.params.slug ?? ''));
+        : String(route.params.slug ?? ''),
+);
+const contentPath = computed(() => '/' + slug.value);
+const folderName = computed(
+    () => slug.value.split('/').filter(Boolean).at(-1) ?? slug.value,
+);
 
-const { data: page } = await useAsyncData(route.path, () => {
+const { data } = await useAsyncData(
-    return queryCollection('writing').path(contentPath).first();
+    () => `writing:${route.path}`,
-});
+    async () => {
+        const all = await queryCollection('writing').order('date', 'DESC').all();
+        const visible = all.filter((page) => import.meta.dev || !page.demo);
+        const article = visible.find(
+            (page) =>
+                page.path === contentPath.value || page.stem === slug.value,
+        );
 
-if (!page.value) {
+        if (article) {
+            return { kind: 'article' as const, article, pages: [] };
+        }
+
+        const prefix = contentPath.value.endsWith('/')
+            ? contentPath.value
+            : `${contentPath.value}/`;
+        const pages = visible.filter((page) => page.path.startsWith(prefix));
+
+        if (!pages.length) return null;
+        return { kind: 'folder' as const, article: null, pages };
+    },
+    { watch: [() => route.path] },
+);
+
+if (!data.value) {
     throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });
 }
 
-const articleTitle = page.value.title;
+const page = computed(() => data.value?.article ?? null);
-const articleDescription = page.value.description;
+const isFolder = computed(() => data.value?.kind === 'folder');
+const articleTitle = page.value?.title ?? folderName.value;
+const articleDescription = page.value?.description ?? '';
 
 useSeoMeta({
     title: articleTitle,
     ogTitle: articleTitle,
-    description: articleDescription,
+    description: articleDescription || articleTitle,
-    ogDescription: articleDescription,
+    ogDescription: articleDescription || articleTitle,
     ogUrl: articleUrl,
-    ogType: 'article',
+    ogType: isFolder.value ? 'website' : 'article',
     ogImage: DEFAULT_IMAGE,
     ogImageAlt: articleTitle,
     twitterCard: 'summary',
     twitterTitle: articleTitle,
-    twitterDescription: articleDescription,
+    twitterDescription: articleDescription || articleTitle,
     twitterImage: DEFAULT_IMAGE,
-    articlePublishedTime: new Date(page.value.date).toISOString(),
+    articlePublishedTime: page.value
-    articleModifiedTime: new Date(page.value.date).toISOString(),
+        ? new Date(page.value.date).toISOString()
-    articleAuthor: [SITE_NAME],
+        : undefined,
+    articleModifiedTime: page.value
+        ? new Date(page.value.date).toISOString()
+        : undefined,
+    articleAuthor: page.value ? [SITE_NAME] : undefined,
 });
 
 useHead({
     link: [{ rel: 'canonical', href: articleUrl }],
-    script: [
+    script: page.value
+        ? [
               {
                   key: 'json-ld-article',
                   type: 'application/ld+json',
@@ -86,8 +118,12 @@ useHead({
                               url: articleUrl,
                               headline: articleTitle,
                               description: articleDescription,
-                        datePublished: new Date(page.value.date).toISOString(),
+                              datePublished: new Date(
-                        dateModified: new Date(page.value.date).toISOString(),
+                                  page.value.date,
+                              ).toISOString(),
+                              dateModified: new Date(
+                                  page.value.date,
+                              ).toISOString(),
                               image: {
                                   '@type': 'ImageObject',
                                   '@id': `${articleUrl}#article-image`,
@@ -135,7 +171,8 @@ useHead({
                       ],
                   }),
               },
-    ],
+          ]
+        : [],
 });
 
 const formatDate = (date: Date | string) => {
@@ -155,8 +192,8 @@ definePageMeta({
 <template>
     <NuxtLayout
         name="main"
-        :title="page.title"
+        :title="page ? page.title : folderName"
-        :description="formatDate(page.date)"
+        :description="page ? formatDate(page.date) : `Writing from ${folderName}`"
     >
         <article v-if="page">
             <div class="article-body">
@@ -166,5 +203,8 @@ definePageMeta({
                 <ContentRenderer :value="page" />
             </div>
         </article>
+        <article v-else>
+            <WritingList :pages="data?.pages ?? []" />
+        </article>
     </NuxtLayout>
 </template>

app/pages/writing/index.vue

@@ -113,15 +113,6 @@ useHead({
     ],
 });
 
-const formatDate = (dateString: string | Date) => {
-    return new Date(dateString).toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-        timeZone: 'UTC',
-    });
-};
-
 definePageMeta({
     layout: false,
 });
@@ -134,70 +125,7 @@ definePageMeta({
         description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
     >
         <article>
-            <template v-if="pages?.length">
+            <WritingList :pages="pages ?? []" />
-                <NuxtLink
-                    v-for="page in pages"
-                    :key="page.path"
-                    :to="'/writing' + page.path"
-                    class="listing"
-                >
-                    <span class="listing__title">{{ page.title }}</span>
-                    <time :datetime="new Date(page.date).toISOString()">{{
-                        formatDate(page.date)
-                    }}</time>
-                </NuxtLink>
-            </template>
-            <p v-else class="empty-state">No thoughts...head empty</p>
         </article>
     </NuxtLayout>
 </template>
-
-<style scoped>
-.listing {
-    display: flex;
-    align-items: baseline;
-    gap: 1rem;
-    margin: 0 0 0.65rem;
-    text-decoration: none;
-    color: inherit;
-}
-
-.listing:hover {
-    text-decoration: none;
-}
-
-.listing:hover .listing__title {
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    font-style: italic;
-}
-
-.listing__title {
-    color: var(--text);
-}
-
-.listing time {
-    margin-left: auto;
-    font-family: var(--font-plain);
-    font-size: 0.75rem;
-    font-style: italic;
-    color: var(--muted);
-    white-space: nowrap;
-}
-
-.empty-state {
-    color: var(--muted);
-    font-style: italic;
-}
-
-@media (max-width: 640px) {
-    .listing {
-        flex-direction: column;
-        gap: 0.15rem;
-    }
-
-    .listing time {
-        margin-left: 0;
-    }
-}
-</style>