feat: intégrer les informations de contact et ajuster les priorités des liens sociaux

app/components/AppFooter.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { socials } from '~~/types'
+const { contact } = await useContent()
 </script>
 
 <template>
-  <footer class="my-16">
+  <footer
+    v-if="contact"
+    class="my-16"
+  >
     <div class="flex justify-center mb-16">
       <USeparator
         class="md:w-2/3"
@@ -16,11 +19,11 @@ import { socials } from '~~/types'
         <h1>Find me on:</h1>
         <div class="flex gap-2 flex-wrap">
           <HomeLink
-            v-for="social in [...socials].sort((a, b) => a.label.localeCompare(b.label))"
-            :key="social.label"
-            :href="social.to"
+            v-for="social in contact.body.filter(item => item.priority === 1)"
+            :key="social.name"
+            :href="social.value"
             :icon="social.icon"
-            :label="social.label"
+            :label="social.name"
             target="_blank"
           />
         </div>

app/components/AppHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { navs, socials } from '~~/types'
+import { navs } from '~~/types'
 
 const openContactDrawer = ref(false)
 const router = useRouter()
@@ -8,14 +8,7 @@ defineShortcuts({
   backspace: () => router.back()
 })
 
-const socialsList = [
-  {
-    label: 'Email',
-    icon: 'i-ph-envelope-duotone',
-    to: 'mailto:arthurdanjou@outlook.fr'
-  },
-  ...socials
-]
+const { contact } = await useContent()
 </script>
 
 <template>
@@ -61,8 +54,14 @@ const socialsList = [
         class="h-6"
       />
       <UDropdownMenu
+        v-if="contact"
         v-model:open="openContactDrawer"
-        :items="socialsList"
+        :items="contact.body.filter(item => item.priority === 1).map(item => ({
+          label: item.name,
+          icon: item.icon,
+          href: item.value,
+          target: '_blank'
+        }))"
         :content="{
           align: 'center',
           side: 'bottom',

app/composables/content.ts

@@ -3,6 +3,7 @@ export async function useContent() {
   const projects = await queryCollection('projects').where('extension', '=', 'md').order('publishedAt', 'DESC').all()
   const education = await queryCollection('education').where('extension', '=', 'md').order('startDate', 'DESC').all()
   const experiences = await queryCollection('experiences').where('extension', '=', 'md').order('startDate', 'DESC').all()
+  const contact = await queryCollection('contact').where('extension', '=', 'json').first()
 
-  return { skills, projects, education, experiences }
+  return { skills, projects, education, experiences, contact }
 }

content/contact.json

@@ -14,7 +14,7 @@
       "category": "communication",
       "icon": "i-ph-envelope-simple-duotone",
       "value": "https://go.arthurdanjou.fr/mail-pro",
-      "priority": 1
+      "priority": 2
     },
     {
       "id": "linkedin",
@@ -22,7 +22,7 @@
       "category": "social",
       "icon": "i-ph:linkedin-logo-duotone",
       "value": "https://go.arthurdanjou.fr/linkedin",
-      "priority": 2
+      "priority": 1
     },
     {
       "id": "github",
@@ -39,7 +39,7 @@
       "category": "social",
       "icon": "i-ph:x-logo-duotone",
       "value": "https://go.arthurdanjou.fr/twitter",
-      "priority": 3
+      "priority": 1
     },
     {
       "id": "discord",
@@ -47,7 +47,7 @@
       "category": "communication",
       "icon": "i-ph:discord-logo-duotone",
       "value": "https://go.arthurdanjou.fr/discord",
-      "priority": 2
+      "priority": 1
     },
     {
       "id": "personal-website",
@@ -55,7 +55,7 @@
       "category": "web",
       "icon": "i-ph:globe-duotone",
       "value": "https://arthurdanjou.fr",
-      "priority": 1
+      "priority": 2
     },
     {
       "id": "status-page",
@@ -63,7 +63,7 @@
       "category": "infrastructure",
       "icon": "i-ph:fire-duotone",
       "value": "https://go.arthurdanjou.fr/status",
-      "priority": 3
+      "priority": 2
     }
   ]
 }

types/index.ts

@@ -43,13 +43,6 @@ export const IDEs = [
   { name: 'Cursor', icon: 'i-vscode-icons-file-type-cursorrules' }
 ] as const
 
-export const socials = [
-  { icon: 'i-ph-x-logo-duotone', label: 'Twitter', to: 'https://go.arthurdanjou.fr/twitter' },
-  { icon: 'i-ph-github-logo-duotone', label: 'GitHub', to: 'https://go.arthurdanjou.fr/github' },
-  { icon: 'i-ph-linkedin-logo-duotone', label: 'LinkedIn', to: 'https://go.arthurdanjou.fr/linkedin' },
-  { icon: 'i-ph-discord-logo-duotone', label: 'Discord', to: 'https://go.arthurdanjou.fr/discord' }
-] as const
-
 interface Nav {
   label: string
   to: string