Refactor code structure for improved readability and maintainability

app/app.vue

@@ -28,7 +28,7 @@ const head = useLocaleHead()
     <ChatCommandPalette
       v-motion
       :active="messages.length > 0"
-      :mode="route.path.includes('/projects') || route.path.includes('/writings') || route.path.includes('/canva') ? 'work' : 'chat'"
+      :mode="route.path.includes('/projects') || route.path.includes('/writings') ? 'work' : 'chat'"
       :initial="{
         opacity: 0,
         y: 200,

app/components/post/Footer.vue

@@ -5,7 +5,7 @@ const { t } = useI18n()
 <template>
   <UCard class="mt-8 shadow-sm bg-white dark:bg-neutral-900">
     <NuxtImg
-      src="/arthur pro.webp"
+      src="/arthur-pro.webp"
       alt="Arthur Danjou"
       class="w-24 h-24 rounded-full float-left mr-4 mb-4"
     />

app/components/tool/Location.vue

@@ -10,7 +10,7 @@
     <div class="m-1 md:max-w-2/3 shadow-sm rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden relative z-10">
       <NuxtImg class="rounded-xl" src="/location.png" />
       <div class="size-12 rounded-full border-2 border-sky-500 absolute z-50 top-2/5 -translate-y-1/2 left-1/5 -translate-x-1/2 animate-bounce">
-        <NuxtImg src="/arthur pro.webp" class="rounded-full" alt="Location of Arthur" />
+        <NuxtImg src="/arthur-pro.webp" class="rounded-full" alt="Location of Arthur" />
       </div>
     </div>
   </section>

app/pages/projects/[slug].vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { useDateFormat } from '#imports'
+
 const route = useRoute()
 const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
   queryCollection('projects').path(`/projects/${route.params.slug}`).first())
@@ -17,6 +19,8 @@ useSeoMeta({
 })
 
 const { t } = useI18n()
+
+useSeoMeta(project.value.seo || {})
 </script>
 
 <template>

app/pages/writings/[slug].vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { useDateFormat } from '#imports'
+
 const route = useRoute()
 const { data: writing } = await useAsyncData(`writings/${route.params.slug}`, () =>
   queryCollection('writings').path(`/writings/${route.params.slug}`).first())
@@ -10,13 +12,9 @@ if (!writing.value) {
   })
 }
 
-useSeoMeta({
-  title: writing.value?.title,
-  description: writing.value?.description,
-  author: 'Arthur Danjou',
-})
-
 const { t } = useI18n()
+
+useSeoMeta(writing.value.seo || {})
 </script>
 
 <template>