Implement nuxt-content

2026-01-22 16:00:39 +01:00 · 2020-12-12 14:32:09 +01:00
parent 728a0261af
commit ebe7b2eae3
53 changed files with 1970 additions and 750 deletions
--- a/components/Experience.vue
+++ b/components/Experience.vue
@@ -8,8 +8,8 @@
    </div>
    <div class="leading-7">
      <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
-      <h1 class="text-2xl font-bold">{{ $t(title) }} - {{company}}</h1>
-      <h2 class="text-xl">{{ $t(description) }}</h2>
+      <h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
+      <h2 class="text-xl">{{ company }}</h2>
    </div>
  </div>
 </template>
@@ -22,10 +22,6 @@ export default {
      type: String,
      default: "Title"
    },
-    description: {
-      type: String,
-      default: "Description"
-    },
    company: {
      type: String,
      default: "ArtDanjProduction"
@@ -45,8 +41,8 @@ export default {
  },
  methods: {
    formatDate(date) {
-      const dateFormat = new Date(date)
-      return date === 'Today' ? 'Today' : this.$t('month_' + dateFormat.getMonth()) + " " + dateFormat.getFullYear()
+      const dateFormat = date.split('-')
+      return date === 'Today' ? 'Today' : this.$t('month.' + dateFormat[0]) + " " + dateFormat[1]
    }
  }
 }
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -3,7 +3,7 @@
    <div>
      <div class="flex flex-col items-center py-4 text-center ">
        <div class="mb-3">
-          <p class="inline">{{ $t('footer_find_me') }}
+          <p class="inline">{{ $t('footer.find_me') }}
            <br class="md:hidden"/>
            <a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank">
              <img class="inline img" src="@/assets/img/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
@@ -16,7 +16,7 @@
            <a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank">
              <img class="inline img" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
              <span class="link">Twitter</span>
-            </a> {{ $t('footer_separator') }}
+            </a> {{ $t('footer.separator') }}
            <a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank">
              <svg class="inline img" width="20" height="20" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
@@ -25,11 +25,11 @@
              </a>
          </p>
          <span class="inline dark:text-dark-900 text-gray-600 text-xs">
-            {{ $t('footer_links_click') }}
+            {{ $t('footer.links_click') }}
          </span>
        </div>
        <p>
-          {{ $t('footer_credits') }}
+          {{ $t('footer.credits') }}
          <a class="font-semibold" target="_blank" href="https://nuxtjs.org">
            <img class="inline img" src="@/assets/img/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
            <span class="link">NuxtJs</span>
@@ -39,9 +39,9 @@
            <img class="inline img" src="@/assets/img/socials/adonisjs.svg" alt="AdonisJs logo" height="20" width="20" />
            <span class="link">AdonisJs</span>
          </a>
-          {{ $t('footer_credits_separator') }} <span>Arthur DANJOU</span>
+          {{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
        </p>
-        <p>{{ $t('footer_copyrights', { date: date }) }}</p>
+        <p>{{ $t('footer.copyrights', { date: date }) }}</p>
      </div>
    </div>
  </footer>
@@ -65,7 +65,7 @@ export default {
  }

  .link {
-    transition-duration: .2s;
+    @apply duration-300;

    &:hover {
      @apply border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid;
--- a/components/Formation.vue
+++ b/components/Formation.vue
@@ -41,8 +41,8 @@ export default {
  },
  methods: {
    formatDate(date) {
-      const dateFormat = new Date(date)
-      return date === 'Today' ? 'Today' : this.$t('month_' + dateFormat.getMonth()) + " " + dateFormat.getFullYear()
+      const dateFormat = date.split('-')
+      return date === 'Today' ? 'Today' : this.$t('month.' + dateFormat[0]) + " " + dateFormat[1]
    }
  }
 }
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -3,7 +3,7 @@
    <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
      <nuxt-link to="/">
        <div class="left text-2xl font-bold cursor-pointer border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid duration-500">
-          {{ $t('header_title') }}
+          {{ $t('header.title') }}
        </div>
      </nuxt-link>
      <nav class="right">
@@ -31,27 +31,27 @@
            </li>
            <nuxt-link class="red hidden md:inline-block" to="/">
              <li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
-                {{ $t('part_home') }}
+                {{ $t('header.home') }}
              </li>
            </nuxt-link>
            <nuxt-link class="orange hidden md:inline-block" to="/about">
              <li class="hover:text-orange-400 font-bold mx-2 cursor-pointer duration-300">
-                {{ $t('part_about') }}
+                {{ $t('header.about') }}
              </li>
            </nuxt-link>
            <nuxt-link class="green hidden md:inline-block" to="/blog">
              <li class="hover:text-green-400 font-bold mx-2 cursor-pointer duration-300">
-                {{ $t('part_blog') }}
+                {{ $t('header.blog') }}
              </li>
            </nuxt-link>
            <nuxt-link class="blue hidden md:inline-block" to="/work">
              <li class="hover:text-blue-400 font-bold mx-2 cursor-pointer duration-300">
-                {{ $t('part_work') }}
+                {{ $t('header.work') }}
              </li>
            </nuxt-link>
            <nuxt-link class="purple hidden md:inline-block" to="/contact">
              <li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300">
-                {{ $t('part_contact') }}
+                {{ $t('header.contact') }}
              </li>
            </nuxt-link>
          </ul>
@@ -62,7 +62,7 @@
              <svg class="inline-block" height="20" width="20" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
              </svg>
-              {{ $t('part_home') }}
+              {{ $t('header.home') }}
            </li>
          </nuxt-link>
          <nuxt-link to="/about" class="w-1/5 orange">
@@ -70,7 +70,7 @@
              <svg class="inline-block" height="20" width="20" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
-              {{ $t('part_about') }}
+              {{ $t('header.about') }}
            </li>
          </nuxt-link>
          <nuxt-link to="/blog" class="w-1/5 green">
@@ -78,7 +78,7 @@
              <svg class="inline-block" height="20" width="20" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
              </svg>
-              {{ $t('part_blog') }}
+              {{ $t('header.blog') }}
            </li>
          </nuxt-link>
          <nuxt-link to="/work" class="w-1/5 blue">
@@ -86,7 +86,7 @@
              <svg class="inline-block" height="20" width="20" 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>
-              {{ $t('part_work') }}
+              {{ $t('header.work') }}
            </li>
          </nuxt-link>
          <nuxt-link to="/contact" class="w-1/5 purple">
@@ -95,7 +95,7 @@
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
-              {{ $t('part_contact') }}
+              {{ $t('header.contact') }}
            </li>
          </nuxt-link>
        </ul>
@@ -121,6 +121,9 @@ export default {
    },
    changeLanguage(lang) {
      this.$i18n.setLocale(lang)
+      if (this.$router.currentRoute.fullPath.includes('blog')) {
+        this.$fetch()
+      }
    },
  },
  mounted() {
--- a/components/HomeLink.vue
+++ b/components/HomeLink.vue
@@ -4,7 +4,7 @@
      class="home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
      :class="color ? 'hover:bg-' + color + '-400 dark:hover:bg-' + color + '-600 active:bg-' + color + '-400 dark:active:bg-' + color + '-600' : ''">
      <div class="ml-4">
-        <h1 class="text-3xl font-bold my-2">
+        <h1 class="text-2xl md:text-3xl font-bold my-2">
          {{ $t(title) }}
          <slot />
        </h1>
--- a/components/Post.vue
+++ b/components/Post.vue
@@ -5,13 +5,13 @@
  >
    <div>
      <p
-        class="text-3xl  font-bold text-justify leading-7 mb-3"
-        :class="lightBg === 1 ? 'text-black':'text-white'"
-      >{{ $t(title) }}</p>
+        class="text-2xl md:text-3xl font-bold md:text-justify leading-7 mb-3"
+        :class="lightBg ? 'text-black':'text-white'"
+      >{{ title }}</p>
      <p
        class="text-lg italic text-justify leading-5"
-        :class="lightBg === 1 ? 'text-gray-900':'text-dark-900'"
-      >{{ $t(description) }}</p>
+        :class="lightBg ? 'text-gray-900':'text-dark-900'"
+      >{{ description }}</p>
    </div>
    <div
      class="flex justify-between mt-8 items-end"
@@ -20,7 +20,6 @@
      <div>
        <div>{{formatDate}}</div>
        <div>{{reading_time}} min</div>
-        <div>{{likes}} ❤</div>
      </div>
      <div class="self-end flex flex-wrap flex-col md:flex-row">
        <div v-for="tag in tags"
@@ -54,10 +53,6 @@ export default {
      type: String,
      default: "Today"
    },
-    likes: {
-      type: Number,
-      default: 0
-    },
    tags: {
      type: Array,
      default: () => ["Tag1", "Tag2", "Tag3"],
@@ -67,14 +62,14 @@ export default {
      default: "default.png"
    },
    lightBg: {
-      type: Number,
+      type: Boolean,
      default: false
    }
  },
  computed: {
    formatDate() {
-      const date = new Date(this.date)
-      return date.getDate() + " " + this.$t('month_' + date.getMonth()) + " " + date.getFullYear()
+      const dateFormat = this.date.split('-')
+      return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
    },
  }
 }
--- a/components/Skill.vue
+++ b/components/Skill.vue
@@ -2,9 +2,9 @@
  <div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-400'">
    <div class="w-full h-full flex flex-col justify-center items-center">
      <div>
-        <img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
+        <img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
      </div>
-      <h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
+      <h1 class="md:text-xl text-lg font-bold text-center">{{ skill }}</h1>
    </div>
  </div>
 </template>
@@ -19,7 +19,7 @@ export default {
    },
    color: {
      type: String,
-      default: "red-100"
+      default: "red"
    },
    cover: {
      type: String,
--- a/components/Work.vue
+++ b/components/Work.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
+  <div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
    <div class="w-full h-full flex flex-col justify-center items-center">
-      <div>
+      <div class="text-center">
        <img alt="Project Img" class="rounded-md" width="150" :src="'http://localhost:5555/files/' + cover">
      </div>
      <div class="text-center">
-        <h1 class="md:text-2xl text-lg font-bold">{{ $t(title) }}</h1>
+        <h1 class="md:text-2xl text-lg font-bold">{{ title }}</h1>
        <a :href="url" :class="'text-' + color + '-500'">{{ formatLink }}</a>
      </div>
    </div>
--- a/components/WorkSkill.vue
+++ b/components/WorkSkill.vue
@@ -2,9 +2,9 @@
  <div class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
    <div class="w-full h-full flex flex-col justify-center items-center">
      <div>
-        <img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
+        <img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
      </div>
-      <h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
+      <h1 class="md:text-xl text-lg font-bold text-center">{{ skill }}</h1>
    </div>
  </div>
 </template>