feat: add articles

components/article-listing.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
+
+interface Props {
+  article: ParsedContent;
+}
+
+const { article } = defineProps<Props>();
+const date = useDateFormat(article.date, "Do of MMMM YYYY");
+</script>
+
+<template>
+  <ULink class="font-semibold hover:underline" :to="article._path">{{
+    article.title
+  }}</ULink>
+  <div class="text-xs text-slate-500">Published at {{ date }}</div>
+</template>

components/recent-posts.vue

@@ -0,0 +1,19 @@
+<template>
+  <UContainer class="flex flex-col gap-5" as="section">
+    <ULink
+      class="text-sm text-gray-500 flex flex-row gap-1 items-center group"
+      to="/articles"
+    >
+      Recent articles
+      <UIcon
+        class="opacity-0 group-hover:opacity-100 transition-opacity"
+        name="i-heroicons-arrow-right"
+    /></ULink>
+
+    <ContentList :query="{ sort: [{ date: -1 }], limit: 2 }" v-slot="{ list }">
+      <div v-for="article in list" :key="article._path">
+        <ArticleListing :article="article" />
+      </div>
+    </ContentList>
+  </UContainer>
+</template>

components/top-nav.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="border-b">
+    <UContainer class="grid grid-cols-2 items-center gap-3 !py-2" as="nav">
+      <ULink to="/" class="flex gap-3 items-center">
+        <nuxt-img
+          placeholder
+          alt="Marios Antonoudiou"
+          src="mariosant.webp"
+          class="w-10 h-10 rounded-full border dark:border-gray-800 dark:bg-slate-300 block"
+        />
+        <div class="text-slate-800 font-bold">Marios Antonoudiou</div>
+      </ULink>
+      <div class="flex gap-3 items-center justify-end"></div>
+    </UContainer>
+  </div>
+</template>