Translate every texts 🌎

This commit is contained in:
2020-12-04 19:29:35 +01:00
parent 2f79a045a9
commit 25f5969d69
14 changed files with 219 additions and 179 deletions

View File

@@ -1,6 +1,6 @@
<template>
<li>
{{ title }}:
{{ $t(title) }}:
<a class="duration-300 text-orange-400 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-orange-400 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
<span v-else>{{ content }}</span>
</li>

View File

@@ -1,8 +1,8 @@
<template>
<div class="flex flex-row mb-5">
<div class="self-center flex h-4 w-4 mr-4 relative">
<span v-if="end === 'Today'" class="animate-ping relative inline h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span v-else class="inline relative h-full w-full rounded-full bg-gray-400 opacity-75"></span>
<span v-if="end === 'Today'" class="animate-ping relative inline h-4 w-4 rounded-full bg-orange-400 opacity-75"></span>
<span v-else class="inline relative h-4 w-4 rounded-full bg-gray-400 opacity-75"></span>
<span v-if="end === 'Today'" class="inline absolute rounded-full h-4 w-4 bg-orange-500"></span>
<span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
</div>
@@ -45,11 +45,8 @@ export default {
},
methods: {
formatDate(date) {
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
const dateFormat = new Date(date)
return date === 'Today' ? 'Today' : monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
return date === 'Today' ? 'Today' : this.$t('month_' + dateFormat.getMonth()) + " " + dateFormat.getFullYear()
}
}
}

View File

@@ -3,10 +3,10 @@
<div>
<div class="flex flex-col items-center py-4 text-center ">
<div class="mb-3">
<p class="inline">Retrouvez moi sur :
<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="18" width="18" />
<img class="inline img" src="@/assets/img/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
<span class="link">Twitch</span>
</a>,
<a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank">
@@ -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> et par
</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,12 +25,11 @@
</a>
</p>
<span class="inline dark:text-dark-900 text-gray-600 text-xs">
(Clique c'est gratuit 🔗)
{{ $t('footer_links_click') }}
</span>
</div>
<p>
Développé et conçu avec en utilisant
{{ $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>
@@ -40,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>
par <span>Arthur DANJOU</span>
{{ $t('footer_credits_separator') }} <span>Arthur DANJOU</span>
</p>
<p>© Copyright {{date}} - Tous droits réservés</p>
<p>{{ $t('footer_copyrights', { date: date }) }}</p>
</div>
</div>
</footer>

View File

@@ -1,12 +1,12 @@
<template>
<div class="flex flex-row relative mb-5">
<div class="flex flex-row mb-5">
<div class="self-center flex h-4 w-4 mr-4 relative">
<span v-if="end === 'Today'" class="animate-ping relative inline h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span v-else class="inline relative h-full w-full rounded-full bg-gray-400 opacity-75"></span>
<span v-if="end === 'Today'" class="animate-ping relative inline h-4 w-4 rounded-full bg-orange-400 opacity-75"></span>
<span v-else class="inline relative h-4 w-4 rounded-full bg-gray-400 opacity-75"></span>
<span v-if="end === 'Today'" class="inline absolute rounded-full h-4 w-4 bg-orange-500"></span>
<span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
</div>
<div class="leading-7 relative">
<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) }}</h1>
<h2 class="text-xl">{{ $t(description) }}</h2>
@@ -41,11 +41,8 @@ export default {
},
methods: {
formatDate(date) {
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
const dateFormat = new Date(date)
return monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
return this.$t('month_' + dateFormat.getMonth()) + " " + dateFormat.getFullYear()
}
}
}

View File

@@ -57,7 +57,7 @@
</ul>
</div>
<ul class="dark:text-white dark:bg-dark-200 z-index-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<nuxt-link class="red" to="/">
<nuxt-link class="w-1/5 red" to="/">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" 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="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" />
@@ -65,7 +65,7 @@
{{ $t('part_home') }}
</li>
</nuxt-link>
<nuxt-link to="/about" class="orange">
<nuxt-link to="/about" class="w-1/5 orange">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
@@ -73,7 +73,7 @@
{{ $t('part_about') }}
</li>
</nuxt-link>
<nuxt-link to="/blog" class="green">
<nuxt-link to="/blog" class="w-1/5 green">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" 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="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" />
@@ -81,7 +81,7 @@
{{ $t('part_blog') }}
</li>
</nuxt-link>
<nuxt-link to="/work" class="blue">
<nuxt-link to="/work" class="w-1/5 blue">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" 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="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" />
@@ -89,7 +89,7 @@
{{ $t('part_work') }}
</li>
</nuxt-link>
<nuxt-link to="/contact" class="purple">
<nuxt-link to="/contact" class="w-1/5 purple">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />

View File

@@ -14,16 +14,16 @@
>{{ $t(description) }}</p>
</div>
<div
class="flex justify-between mt-8"
class="flex justify-between mt-8 items-end"
:class="lightBg ? 'text-gray-900':'text-dark-900'"
>
<div>
<div>{{formatDate}}</div>
<div>{{reading_time}} {{ $t('post_reading_time') }}</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"
<div v-for="tag in tags"
class="my-1 md:my-0 ml-2 py-1 px-2 rounded font-semibold"
:class="lightBg ? 'bg-black text-white':'bg-white text-black'"
>
@@ -72,15 +72,9 @@ export default {
}
},
computed: {
tagsSplit() {
return this.tags.keys
},
formatDate() {
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
const date = new Date(this.date)
return date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear()
return date.getDate() + " " + this.$t('month_' + date.getMonth()) + " " + date.getFullYear()
},
}
}