feat: add articles

pages/articles/[...slug].vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { formatDate } from "@vueuse/core";
+
+definePageMeta({
+  layout: "content",
+});
+
+const { path } = useRoute();
+</script>
+
+<template>
+  <ContentDoc :path="path" v-slot="{ doc }">
+    <UContainer class="flex flex-col gap-3 prose" as="article">
+      <div class="text-sm text-slate-500">
+        Published at {{ formatDate(new Date(doc.date), "Do of MMMM YYYY") }}
+      </div>
+      <h1>{{ doc.title }}</h1>
+    </UContainer>
+
+    <UContainer class="hidden md:block" as="figure" v-if="doc.coverImage?.url">
+      <NuxtImg
+        placeholder
+        :src="doc.coverImage.url ?? ''"
+        :alt="doc.title"
+        height="1000"
+        width="1700"
+        class="rounded-lg"
+      />
+      <ULink
+        :to="doc.coverImage.authorUrl"
+        target="_blank"
+        class="text-xs text-slate-500 italic font-serif hover:underline"
+      >
+        Photo by {{ doc.coverImage.author }}
+      </ULink>
+    </UContainer>
+    <UContainer
+      class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
+      as="article"
+    >
+      <ContentRenderer :value="doc" />
+    </UContainer>
+  </ContentDoc>
+
+  <Footer />
+</template>

pages/articles/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "content",
+});
+</script>
+
+<template>
+  <UContainer class="flex flex-col gap-3 prose">
+    <h1>Articles</h1>
+  </UContainer>
+
+  <UContainer class="flex flex-col gap-3 !pt-0">
+    <ContentList :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
+      <div v-for="article in list" :key="article._path">
+        <ArticleListing :article="article" />
+      </div>
+    </ContentList>
+  </UContainer>
+
+  <Footer />
+</template>