Change fetch skills

src/components/Skill.vue

@@ -2,9 +2,9 @@
   <div class="mb-3 mr-2 p-1 md:p-2 h-32 w-32 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="getColor">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img class="rounded-sm" alt="Skill Img" :src="getCoverLink" />
+        <img class="rounded-sm" :alt="`Skill ${name} Image`" :src="`https://athena.arthurdanjou.fr/files/${cover}`" />
       </div>
-      <h1 class="md:text-lg text-md font-bold text-center text-gray-700 dark:text-gray-400">{{ skill }}</h1>
+      <h1 class="md:text-lg text-md font-bold text-center text-gray-700 dark:text-gray-400">{{ name }}</h1>
     </div>
   </div>
 </template>
@@ -13,7 +13,7 @@
 import {computed, defineComponent} from '@nuxtjs/composition-api'
 
 interface SkillProps {
-  skill: string,
+  name: string,
   color: string,
   cover: string
 }
@@ -21,7 +21,7 @@ interface SkillProps {
 export default defineComponent({
   name: "Skill",
   props: {
-    skill: {
+    name: {
       type: String,
       default: "Rien"
     },
@@ -65,11 +65,9 @@ export default defineComponent({
           return 'hover:bg-amber-400'
       }
     })
-    const getCoverLink = computed(() => require(`@/assets/images/skills/${props.cover}`))
 
     return {
-      getColor,
-      getCoverLink
+      getColor
     }
   }
 })

src/components/SkillsAbout.vue

@@ -7,9 +7,9 @@
     <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden lg:flex-wrap space-x-4 lg:space-x-0 lg:justify-center">
       <div v-if="skills" v-for="skill in skills">
         <Skill
-          :skill="skill.title"
+          :name="skill.name"
           :color="skill.color"
-          :cover="skill.cover"
+          :cover="skill.file.file_name"
         />
       </div>
     </div>
@@ -18,19 +18,24 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Skill} from "~/types/types";
 
 export default defineComponent({
   name: "SkillsAbout",
   setup() {
-    const {$content, $sentry} = useContext()
+    const {$axios, $sentry, app} = useContext()
 
-    const skills = useAsync(() => {
-      return $content('skills')
-        .fetch<Skill>()
-        .catch((error) => {
-          $sentry.captureEvent(error)
-        })
+    const skills = useAsync(async () => {
+      const response = await $axios.get('/api/skills', {
+        headers: {
+          'Authorization': `Bearer ${process.env.API_TOKEN}`
+        }
+      })
+      if (response.status === 200) {
+        return response.data.skills
+      } else {
+        app.error({statusCode: 500})
+        $sentry.captureEvent(response.data)
+      }
     }, 'skills')
 
     return {