Implement nuxt-content

pages/work/_slug.vue

@@ -11,35 +11,35 @@
                 </svg>
               </div>
               <div class="ml-2">
-                {{ $t('work_go_back') }}
+                {{ $t('work.go_back') }}
               </div>
             </nuxt-link>
           </div>
         </div>
-        <img class="w-4/5 rounded-xl" :src="'http://localhost:5555/files/' + cover" alt="Project Img" />
+        <!--<img class="w-4/5 rounded-xl" :src="require(`@/assets/img/works/${work.cover}.png`)" alt="Project Img" /> -->
         <a
           class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
-          :class="'bg-' + color + '-400 hover:bg-' + color + '-600'"
-          :href="url"
-        >{{formatLink}}</a>
+          :class="'bg-' + work.color + '-400 hover:bg-' + work.color + '-600'"
+          :href="work.url"
+        >{{work.url.replace('https://', '').replace('http://', '')}}</a>
       </div>
       <div class="w-full lg:w-1/2 ml-5 ">
         <h1 class="text-xl lg:text-3xl font-bold">
-          {{ $t(title) }}
+          {{ $t(work.title) }}
         </h1>
         <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
-          {{ $t(description) }}
+          {{ $t(work.description) }}
         </p>
         <div>
           <h3 class="text-md lg:text-lg font-bold">
-            {{ $t('work_tech_used') }}
+            {{ $t('work.tech_used') }}
           </h3>
           <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
             <div v-for="skill in skills">
               <WorkSkill
-                :skill="skill.title.code"
+                :skill="skill.title"
                 :color="skill.color"
-                :cover="skill.cover.file_name"
+                :cover="skill.cover"
               />
             </div>
           </div>
@@ -52,7 +52,6 @@
 <script>
 import WorkSkill from "~/components/WorkSkill";
 export default {
-  name: "_id",
   components: {WorkSkill},
   head() {
     return {
@@ -61,29 +60,20 @@ export default {
   },
   data() {
     return {
-      id: this.$route.params.id,
-      title: '',
-      description: '',
-      skills: [],
-      color: '',
-      cover: '',
-      url: ''
+      work: null
     }
   },
-  async asyncData({ params, $axios }) {
-    const {data: project} = await $axios.get('/projects/' + params.id)
+  async asyncData({ params, $content }) {
+    let work
+    try {
+      work = await $content('works', params.slug).fetch()
+    } catch (e) {
+      return error({ message: 'Work not found' })
+    }
+    const skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
     return {
-      title: project.title.code,
-      description: project.description.code,
-      skills: project.skills,
-      color: project.color,
-      cover: project.cover.file_name,
-      url: project.url
-    }
-  },
-  computed: {
-    formatLink() {
-      return this.url.replace('https://', '').replace('http://', '')
+      work,
+      skills
     }
   }
 }

pages/work/index.vue

@@ -1,24 +1,24 @@
 <template>
   <main class="work flex flex-col items-center px-5 xl:px-64">
     <PageTitle
-      title="home_link_work"
+      title="part.work"
       color="blue"
     >
       <svg class="inline-block icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
       </svg>
     </PageTitle>
-    <h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('work_no_work') }}</h1>
+    <h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('work.no_work') }}</h1>
     <div v-else class="flex flex-col justify-around items-center py-10 w-full">
-      <h1 class="text-xl font-bold text-center mb-8">{{ $t('work_description') }}</h1>
-      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0 md:space-x-4">
+      <h1 class="text-xl font-bold text-center mb-8">{{ $t('work.description') }}</h1>
+      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
         <div v-for="work in works">
-          <nuxt-link :to="'/work/' + work.id">
+          <nuxt-link :to="'/work/' + work.slug">
             <Work
-              :title="work.title.code"
+              :title="work.title"
               :url="work.url"
               :color="work.color"
-              :cover="work.cover.file_name"
+              :cover="work.cover"
             />
           </nuxt-link>
         </div>
@@ -38,13 +38,8 @@ export default {
       title: 'Work - Arthur Danjou'
     }
   },
-  data () {
-    return {
-      works: []
-    }
-  },
-  async asyncData({ $axios }) {
-    const {data: works} = await $axios.get('/projects')
+  async asyncData({ $content }) {
+    const works = await $content('works').fetch()
     return {
       works
     }