Revert changes

app/pages/index.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts" setup>
-const description = 'I\'m Arthur, a Mathematics lover and IA enthusiast. I\'m currently studying at the University of Paris-Saclay. I\'m passionate about Mathematics, Computer Science, and Artificial Intelligence.'
 useSeoMeta({
-  title: 'Arthur Danjou | Mathematics Lover and IA Enthusiast',
-  description
+  title: 'Arthur Danjou • Mathematics Lover and IA Enthusiast',
+  titleTemplate: '%s',
+  description: 'I\'m Arthur, a Mathematics lover and IA enthusiast. I\'m currently studying at the University of Paris-Saclay. I\'m passionate about Mathematics, Computer Science, and Artificial Intelligence.'
 })
 </script>

app/pages/uses.vue

@@ -20,42 +20,35 @@ const ide = items.value!.filter(item => item.category === 'ide')
       title="Uses"
     />
     <div class="mt-12 space-y-24">
-      <ul class="space-y-8">
-        <UDivider
-          label="Hardware"
-          size="xs"
-        />
+      <UsesList title="Hardware">
         <UsesItem
           v-for="(item, id) in hardware"
           :key="id"
           :item="item"
         />
-      </ul>
-      <ul class="space-y-8">
-        <UDivider
-          label="Software"
-          size="xs"
-        />
+      </UsesList>
+      <UsesList title="Software">
         <UsesItem
           v-for="(item, id) in software"
           :key="id"
           :item="item"
         />
-      </ul>
+      </UsesList>
       <ul class="space-y-8">
         <UDivider
           label="IDE & Font"
           size="xs"
         />
         <li class="relative">
-          <img
+          <NuxtImg
             alt="My IntelliJ IDE"
             src="/uses/jetbrains.png"
             class="mx-auto md:w-4/5"
           >
-          <p class="mt-2 text-sm italic flex gap-2 justify-center items-center">
-            My IntelliJ Idea Ultimate IDE
-          </p>
+            <p class="mt-2 text-sm italic flex gap-2 justify-center items-center">
+              My IntelliJ Idea Ultimate IDE
+            </p>
+          </NuxtImg>
         </li>
         <UsesItem
           v-for="(item, id) in ide"

app/pages/writings/[slug].vue

@@ -19,8 +19,11 @@ const { copy, copied } = useClipboard({
   copiedDuring: 4000
 })
 
-useHead({
-  title: `${post.value!.title ?? 'Untitled'} | Arthur Danjou`
+useSeoMeta({
+  title: post.value?.title,
+  description: post.value?.description,
+  author: 'Arthur Danjou',
+  image: post.value?.cover
 })
 
 function getDetails() {
@@ -76,10 +79,10 @@ async function handleLike() {
       v-if="post.cover"
       class="w-full rounded-md my-8"
     >
-      <img
+      <NuxtImg
         :src="`/writings/${post.cover}`"
         alt="Writing cover"
-      >
+      />
     </div>
     <UDivider
       class="mt-8"
@@ -98,16 +101,16 @@ async function handleLike() {
       />
       <div class="space-y-8">
         <p>
-          Thanks for reading this post! If you liked it, please consider sharing it with your friends. <strong>Don't
-            forget to leave a like!</strong>
+          Thanks for reading this post! If you liked it, please consider sharing it with your friends.
+          <strong>Don't forget to leave a like!</strong>
         </p>
         <div class="flex gap-4 items-center flex-wrap">
           <UButton
             :label="postDB?.likes > 1 ? `${postDB?.likes} likes` : `${postDB?.likes} like`"
-            color="red"
+            color="white"
             icon="i-ph-heart-duotone"
             size="lg"
-            variant="outline"
+            variant="solid"
             @click.prevent="handleLike()"
           />
           <UButton

app/pages/writings/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const description = 'All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts.'
 useSeoMeta({
-  title: 'My Shelf | Arthur Danjou',
+  title: 'My Shelf',
   description
 })
 
@@ -43,13 +43,15 @@ function getDetails(slug: string) {
             <div class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm">
               <p>{{ getDetails(writing.slug) }}</p>
             </div>
-            <div class="flex items-center gap-2 flex-wrap">
+            <div class="flex items-end gap-2 flex-wrap">
               <h1
                 class="font-bold text-lg duration-300 text-neutral-600 group-hover:text-black dark:text-neutral-400 dark:group-hover:text-white"
               >
                 {{ writing.title }}
               </h1>
-              <p class="text-sm text-neutral-500 group-hover:text-black dark:group-hover:text-white duration-300">
+              <p
+                class="mb-0.5 text-sm text-neutral-500 group-hover:text-black dark:group-hover:text-white duration-300"
+              >
                 {{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} · {{ writing.readingTime }}min long
               </p>
             </div>