Revert changes

app/components/AppFooter.vue

@@ -29,7 +29,7 @@ const socials = [
     </div>
     <div class="space-y-4">
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
-        <h3>Find me on:</h3>
+        <h1>Find me on:</h1>
         <div class="flex gap-4">
           <HomeLink
             v-for="social in socials"
@@ -42,7 +42,7 @@ const socials = [
         </div>
       </div>
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
-        <h4>Or send me an email:</h4>
+        <h1>Or send me an email:</h1>
         <div class="flex">
           <HomeLink
             blanked

app/components/AppHeader.vue

@@ -74,6 +74,7 @@ defineShortcuts({
           :icon="nav.icon"
           :target="nav.target ? nav.target : '_self'"
           :to="nav.to"
+          :aria-label="nav.label"
           color="white"
           size="sm"
           label=""
@@ -88,6 +89,7 @@ defineShortcuts({
           <UButton
             :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
             color="white"
+            aria-label="switch theme"
             size="sm"
             variant="solid"
             @click="toggleTheme()"

app/components/uses/List.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="space-y-8">
+    <UDivider
+      :label="title"
+      size="xs"
+    />
+    <ul class="space-y-8">
+      <slot />
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+})
+</script>

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>

nuxt.config.ts

@@ -2,6 +2,18 @@
 export default defineNuxtConfig({
   future: { compatibilityVersion: 4 },
 
+  // Nuxt App
+  app: {
+    pageTransition: { name: 'page', mode: 'out-in' },
+    head: {
+      htmlAttrs: { lang: 'en' },
+      templateParams: {
+        separator: '•'
+      }
+    }
+  },
+
+  // Nuxt Modules
   modules: [
     '@nuxthub/core',
     '@nuxt/eslint',
@@ -10,9 +22,10 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     '@nuxtjs/google-fonts',
     '@nuxthq/studio',
-    "@nuxt/image"
+    '@nuxt/image'
   ],
 
+  // Nuxt Hub
   hub: {
     cache: true,
     kv: true,
@@ -20,33 +33,26 @@ export default defineNuxtConfig({
     analytics: true
   },
 
-  app: {
-    pageTransition: { name: 'page', mode: 'out-in' },
-    head: {
-      htmlAttrs: { lang: 'en' }
-    }
-  },
-
+  // Nuxt Content
   content: {
     highlight: {
       theme: 'github-dark'
     }
   },
 
+  // Nuxt Color Mode
   colorMode: {
-    preference: 'light',
+    preference: 'system',
     fallback: 'light'
   },
 
-  ui: {
-    icons: ['heroicons', 'logos', 'ph']
-  },
-
+  // Nuxt Devtools
   devtools: {
     enabled: true,
     timeline: { enabled: true }
   },
 
+  // Nuxt Eslint
   eslint: {
     config: {
       stylistic: {
@@ -56,6 +62,7 @@ export default defineNuxtConfig({
     }
   },
 
+  // Nuxt Google Fonts
   googleFonts: {
     display: 'swap',
     families: {
@@ -66,12 +73,14 @@ export default defineNuxtConfig({
     }
   },
 
+  // Nitro
   nitro: {
     experimental: {
       openAPI: true
     }
   },
 
+  // Nuxt Env
   runtimeConfig: {
     discord: {
       userId: '',
@@ -91,4 +100,4 @@ export default defineNuxtConfig({
       }
     }
   }
-})
+})