feat: ✨ Add author to articles

components/article/author.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="flex flex-col gap-2 justify-center items-center">
+        <p class="text-gray-400 text-xs font-semibold uppercase">Written by</p>
+        <div class="flex items-center gap-4 ring-white/20 ring-1 rounded py-1 px-2">
+            <nuxt-img :preload="true" format="webp" :src="avatar" alt="Author avatar" class="size-12 rounded" />
+            <div class="flex flex-col justify-center pr-1">
+                <h2 class="text font-bold text-gray-50">{{ name }}</h2>
+                <p class="text-gray-500 text-sm">{{ handle }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+    avatar?: string;
+    name: string;
+    handle?: string;
+}>();
+</script>

nuxt.config.ts

@@ -119,7 +119,7 @@ export default defineNuxtConfig({
         ]),
     ),
     image: {
-        domains: ["images.pexels.com"],
+        domains: ["images.pexels.com", "cpluspatch.com"],
     },
     sitemap: {
         sources: [...getRouteRenderingPaths(), "/"],

package.json

@@ -61,5 +61,11 @@
         "@types/markdown-it-container": "^2.0.10",
         "tailwindcss": "^3.4.17"
     },
-  "trustedDependencies": ["@biomejs/biome", "@parcel/watcher", "esbuild", "sharp", "vue-demi"]
+    "trustedDependencies": [
+        "@biomejs/biome",
+        "@parcel/watcher",
+        "esbuild",
+        "sharp",
+        "vue-demi"
+    ]
 }

pages/articles/[...path].vue

@@ -3,10 +3,12 @@
         <Title v-if="post.title" :created_at="post.created_at" :title="post.title" />
         <Image v-if="post.image" :image="post.image.url" :width="post.image.width" :height="post.image.height" :caption="post.image.credit" />
         <Content :body="body" />
+        <Author v-if="post.author" :avatar="post.author.image" :name="post.author.name" :handle="post.author.handle" class="mt-10" />
     </div>
 </template>
 
 <script lang="ts" setup>
+import Author from "~/components/article/author.vue";
 import Content from "~/components/article/content.vue";
 import Image from "~/components/article/image.vue";
 import Title from "~/components/article/title.vue";