💻 | Working

src/pages/about.vue

@@ -19,12 +19,17 @@
 
 <script lang="ts">
 
+import {useContext, useMeta} from "@nuxtjs/composition-api";
+
 export default {
   name: "about",
-  head() {
-    return {
-      title: 'About me - Arthur Danjou'
-    }
+  head() {},
+  setup() {
+    const { i18n } = useContext()
+
+    useMeta({
+      title: `${i18n.t('header.about')} - Arthur Danjou`
+    })
   }
 }
 </script>

src/pages/projects/_slug.vue

@@ -1,40 +1,40 @@
 <template>
-  <main class="px-5 xl:px-64 mb-16 md:mb-32">
+  <main v-if="project" class="px-5 xl:px-64 mb-16 md:mb-32">
     <div class="w-full flex flex-col lg:flex-row items-center md:items-start mt-8 md:mt-32">
       <div class="w-full lg:w-1/2 flex flex-col items-center">
         <div class="md:mb-24">
           <div class="mb-4 flex">
-            <nuxt-link to="/work" class="back-arrow flex">
+            <nuxt-link to="/projects" class="back-arrow flex">
               <div class="duration-300 arrow">
                 <svg height="25" width="25" 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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                 </svg>
               </div>
               <div class="ml-2">
-                {{ $t('work.go_back') }}
+                {{ $t('projects.go_back') }}
               </div>
             </nuxt-link>
           </div>
         </div>
-        <img class="w-72 rounded-xl" :src="require(`@/assets/images/works/${work.cover}.png`)" alt="Project Img" />
+        <img class="w-72 rounded-xl" :src="require(`@/assets/images/projects/${project.cover}`)" alt="Project Img" />
         <a
           class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
           :class="getColor"
-          :href="work.url"
-        >{{work.url.replace('https://', '').replace('http://', '')}}</a>
+          :href="project.url"
+        >{{project.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">
-          {{ work.title }}
+        <h1 @click="debug" class="text-xl lg:text-3xl font-bold">
+          {{ project.title }}
         </h1>
         <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-100">
-          {{ $t(work.description) }}
+          {{ $t(project.description) }}
         </p>
         <div>
           <h3 class="text-md lg:text-lg font-bold">
-            {{ $t('work.tech_used') }}
+            {{ $t('projects.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-if="skills && skills.length > 0" 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"
@@ -49,42 +49,55 @@
   </main>
 </template>
 
-<script>
-import WorkSkill from "~/components/WorkSkill";
+<script lang="ts">
+import {
+  computed, onUpdated, useAsync, useContext,
+  useMeta,
+  useRoute,
+  useStatic, watch, watchEffect,
+} from "@nuxtjs/composition-api";
+import {Project, Skill} from "../../../@types/types";
+import {IContentDocument} from "@nuxt/content/types/content";
 
 export default {
-  components: {WorkSkill},
-  head() {
-    return {
-      title: 'Work - Arthur Danjou'
-    }
-  },
-  data() {
-    return {
-      work: null
-    }
-  },
-  async asyncData({ params, $content, error }) {
-    const work = await $content('works', params.slug)
-      .fetch()
-      .catch(() => {
-        error({
-          statusCode: 404,
-          message: 'Work not found',
+  head: {},
+  setup() {
+    const {$content, app, i18n} = useContext()
+    const route = useRoute()
+    const slug = computed(() => route.value.params.slug)
+
+    const project = useStatic((slug) => {
+      return $content('projects', slug)
+        .fetch<Project>()
+        .catch(() => {
+          app.error({statusCode: 404, message: "Project not found"})
+        }) as Promise<Project>
+    }, slug, 'projects')
+
+    const skills = useAsync(() => {
+      return $content('skills')
+        .where({
+          slug: {
+            $in: project.value?.skills
+          }
         })
-      });
-    let skills = []
-    if (work) {
-      skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
+        .fetch<Skill>()
+        .catch(() => {
+          app.error({statusCode: 404, message: "Skills in project not found"});
+        }) as Promise<Skill>
+    })
+
+    useMeta({
+      title: `${i18n.t('header.projects')} - Arthur Danjou - ${project.value?.title}`
+    })
+
+    const debug = () => {
+      console.log(project)
+      console.log(skills)
     }
-    return {
-      work,
-      skills
-    }
-  },
-  computed: {
-    getColor() {
-      switch (this.work.color) {
+
+    const getColor = computed(() => {
+      switch (project.value?.color) {
         case 'red':
           return 'bg-red-400 hover:bg-red-600'
         case 'orange':
@@ -134,6 +147,13 @@ export default {
         case 'coolGray':
           return 'bg-coolGray-400 hover:bg-coolGray-600'
       }
+    })
+
+    return {
+      project,
+      skills,
+      getColor,
+      debug
     }
   }
 }

src/pages/projects/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <main v-if="projects" class="work flex flex-col items-center">
+    <PageTitle
+      title="part.projects"
+    >
+      <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="projects.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('projects.no_project') }}</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('projects.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 class="flex py-8 w-full flex-wrap" >
+          <div class="md:mx-3 my-2" v-for="project in projects">
+            <Project
+              :title="project.title"
+              :cover="project.cover"
+              :description="project.description"
+              :slug="project.slug"
+              :tags="project.tags"
+              :company="project.company"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import {useAsync, useContext, useMeta} from "@nuxtjs/composition-api";
+import {Project} from "../../../@types/types";
+
+export default {
+  name: "index",
+  head: {},
+  setup() {
+    const { $content, i18n } = useContext()
+
+    const projects = useAsync(() => {
+      return $content('projects').fetch<Project>()
+    })
+
+    useMeta({
+      title: `${i18n.t('header.projects')} - Arthur Danjou`
+    })
+
+    return {
+      projects
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/pages/uses.vue

@@ -77,7 +77,12 @@
 
 <script>
 export default {
-name: "uses"
+  name: "uses",
+  head() {
+    return {
+      title: `${this.$i18n.t('header.uses')} - Arthur Danjou`
+    }
+  }
 }
 </script>
 

src/pages/work/index.vue

@@ -1,51 +0,0 @@
-<template>
-  <main class="work flex flex-col items-center px-5 xl:px-64">
-    <PageTitle
-      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>
-    <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">
-        <div v-for="work in works">
-          <nuxt-link :to="'/work/' + work.slug">
-            <Work
-              :title="work.title"
-              :url="work.url"
-              :color="work.color"
-              :cover="work.cover"
-            />
-          </nuxt-link>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
-<script>
-import PageTitle from "~/components/PageTitle";
-import Work from "~/components/Work";
-export default {
-  name: "index",
-  components: {Work, PageTitle},
-  head() {
-    return {
-      title: 'Work - Arthur Danjou'
-    }
-  },
-  async asyncData({ $content }) {
-    const works = await $content('works').fetch()
-    return {
-      works
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-</style>