feat: add i18n

gabrielcaiana · Dec 20, 2022 · fe057c7 · fe057c7
1 parent ba82890
commit fe057c7
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 43 deletions.
diff --git a/components/header/index.vue b/components/header/index.vue
@@ -1,9 +1,20 @@
+<script setup>
+const { locale } = useI18n()
+</script>
+
 <template>
   <header
     class="pt-8 pb-4 px-6 text-white border-b border-neutral-800 flex justify-between items-center"
   >
-    <nuxt-link to="/" class="font-medium">Gabriel Caiana</nuxt-link>
+    <nuxt-link to="/" class="font-medium"> Gabriel Caiana</nuxt-link>
     <div class="flex gap-3">
+      <form class="text-neutral-300">
+        <select class="bg-transparent" v-model="locale">
+          <option value="pt">{{ $t('portuguese') }}</option>
+          <option value="en">{{ $t('english') }}</option>
+        </select>
+      </form>
+      |
       <a href="https://github.com/gabrielcaiana" target="_blank"
         ><Icon name="ph:github-logo-fill" size="24"
       /></a>

diff --git a/locales/en.ts b/locales/en.ts
@@ -0,0 +1,24 @@
+export default {
+  welcome: 'Welcome',
+  salutation: "Hello, i'm Gabriel Caiana",
+  description:
+    "I'm a 26 year old software engineer specializing in technologies Javascript, Vue, Web Performance and design.",
+  readMore: 'Read more',
+  recentPosts: 'Recent posts',
+  recentProjects: 'Recent projects',
+  aboutMe: 'About Me',
+  about1:
+    'My name is <strong>Gabriel Caiana</strong> and I am a 26 year old software engineer. I specialize in Javascript, Vue, Web Performance and design technologies.',
+  about2:
+    'I have a degree in Systems Analysis and Development from FIAP, in addition to of having several specialization formations in technologies of Frontend, Design and UX.',
+  about3:
+    "I love to develop random applications to try new ones design technologies and architectures, so feel free to visit my Github and portfolio because I'm always venturing into one new project.",
+  about4:
+    'In recent years I have worked with several technologies, some of which I like a lot and are part of my day to day as a developer are (Javascript, Typescript, Vue, Nuxt, Vuex, Pinia, Jest, GraphQL, Storybook, Vite, Vuetify, Tailwind, Node).',
+  twitter: 'Twitter',
+  linkedin: 'Linkedin',
+  github: 'Github',
+  email: 'Email',
+  portuguese: 'Portuguese',
+  english: 'English',
+}
diff --git a/locales/pt.ts b/locales/pt.ts
@@ -0,0 +1,24 @@
+export default {
+  welcome: 'Bem vindo',
+  salutation: 'Olá, eu sou Gabriel Caiana',
+  description:
+    'Sou um engenheiro de software de 26 anos, especializado em tecnologias Javascript, Vue, Web Performance e design.',
+  readMore: 'Leia mais',
+  recentPosts: 'Posts Recentes',
+  recentProjects: 'Projetos Recentes',
+  aboutMe: 'Sobre Mim',
+  about1:
+    'Meu nome é <strong>Gabriel Caiana</strong> e sou um engenheiro de software de 26 anos. Sou especializado em tecnologias Javascript, Vue, Web Performance e design.',
+  about2:
+    ' Sou formado em Análise e desenvolvimento de sistemas pela FIAP, além de possuir diversas formações de especialização em tecnologias de Frontend, Design e UX.',
+  about3:
+    ' Adoro desenvolver aplicações aleatórias para experimentar novas tecnologias e arquiteturas de projeto, então fique a vontade para visitar meu Github e portfólio pois sempre estou me aventurando em um novo projeto.',
+  about4:
+    'Nos últimos anos trabalhei com diversas tecnologias, algumas que gosto bastante e fazem parte do meu dia a dia como desenvolvedor são (Javascript, Typescript, Vue, Nuxt, Vuex, Pinia, Jest, GraphQL, Storybook, Vite, Vuetify, Tailwind, Node).',
+  twitter: 'Twitter',
+  linkedin: 'Linkedin',
+  github: 'Github',
+  email: 'Email',
+  portuguese: 'Português',
+  english: 'Inglês',
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,11 +1,14 @@
+import pt from './locales/pt'
+import en from './locales/en'
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
     pageTransition: { name: 'page', mode: 'out-in' },
   },
   css: ['@/assets/css/tailwind.css'],
   components: [{ path: '@/components', pathPrefix: false }],
-  modules: ['nuxt-icon', '@nuxt/content'],
+  modules: ['nuxt-icon', '@nuxt/content', '@nuxtjs/i18n'],
   content: {
     documentDriven: true,
     highlight: {
@@ -16,6 +19,16 @@ export default defineNuxtConfig({
     },
   },
 
+  i18n: {
+    locales: ['pt', 'en'],
+    defaultLocale: 'pt',
+    vueI18n: {
+      legacy: false,
+      locale: 'pt',
+      messages: { pt, en },
+    },
+  },
+
   runtimeConfig: {
     algoliaAppId: process.env.ALGOLIA_APP_ID,
     algoliaApiKey: process.env.ALGOLIA_API_KEY,

diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@commitlint/config-conventional": "^17.3.0",
     "@nuxt/content": "^2.3.0",
     "@nuxtjs/eslint-config-typescript": "^9.0.0",
+    "@nuxtjs/i18n": "^8.0.0-beta.7",
     "@vitejs/plugin-vue": "^3.1.0",
     "@vitest/coverage-c8": "^0.25.7",
     "@vitest/ui": "^0.25.7",

diff --git a/pages/about.vue b/pages/about.vue
@@ -7,35 +7,25 @@ useHead({
   <main class="flex flex-col">
     <section>
       <h1 class="text-3xl font-medium mb-6 pb-3 border-b border-neutral-800">
-        Sobre Mim
+        {{ $t('aboutMe') }}
       </h1>
       <div class="border-b border-neutral-800 mb-6 pb-3">
         <p class="mb-6">
-          Meu nome é <strong>Gabriel Caiana</strong> e sou um engenheiro de
-          software de 26 anos. Sou especializado em tecnologias Javascript, Vue,
-          Web Performance e design.
+          {{ $t('about1') }}
         </p>
 
         <p class="mb-6">
-          Sou formado em Análise e desenvolvimento de sistemas pela FIAP, além
-          de possuir diversas formações de especialização em tecnologias de
-          Frontend, Design e UX.
+          {{ $t('about2') }}
         </p>
       </div>
 
       <div class="border-b border-neutral-800 mb-8 pb-3">
         <p class="mb-6">
-          Adoro desenvolver aplicações aleatórias para experimentar novas
-          tecnologias e arquiteturas de projeto, então fique a vontade para
-          visitar meu Github e portfólio pois sempre estou me aventurando em um
-          novo projeto.
+          {{ $t('about3') }}
         </p>
 
         <p>
-          Nos últimos anos trabalhei com diversas tecnologias, algumas que gosto
-          bastante e fazem parte do meu dia a dia como desenvolvedor são
-          (Javascript, Typescript, Vue, Nuxt, Vuex, Pinia, Jest, GraphQL,
-          Storybook, Vite, Vuetify, Tailwind, Node).
+          {{ $t('about4') }}
         </p>
       </div>
     </section>
@@ -45,21 +35,23 @@ useHead({
         class="underline text-blue-300 font-medium list-disc flex flex-col gap-3"
       >
         <li>
-          <a href="https://github.com/gabrielcaiana" target="_blank">Github</a>
+          <a href="https://github.com/gabrielcaiana" target="_blank">
+            {{ $t('github') }}</a
+          >
         </li>
         <li>
-          <a href="https://twitter.com/gabrielgueedes" target="_blank"
-            >Twitter</a
+          <a href="https://twitter.com/gabrielgueedes" target="_blank">
+            {{ $t('twitter') }}</a
           >
         </li>
         <li>
-          <a href="https://www.linkedin.com/in/gabrielcaiana/" target="_blank"
-            >LinkedIn</a
+          <a href="https://www.linkedin.com/in/gabrielcaiana/" target="_blank">
+            {{ $t('linkedin') }}</a
           >
         </li>
         <li>
-          <a href="mailto:gabrielcaianaguedes@gmail.com" target="_blank"
-            >Email</a
+          <a href="mailto:gabrielcaianaguedes@gmail.com" target="_blank">
+            {{ $t('email') }}</a
           >
         </li>
       </ul>

diff --git a/pages/index.vue b/pages/index.vue
@@ -21,20 +21,19 @@ const { data: posts } = await useAsyncData('home', () =>
   <main class="flex flex-col gap-[80px]">
     <section>
       <h1 class="text-3xl font-medium mb-6 pb-3 border-b border-neutral-800">
-        Olá, Eu sou Gabriel Caiana
+        {{ $t('salutation') }},
       </h1>
       <p>
-        Sou um engenheiro de software de 26 anos, especializado em tecnologias
-        Javascript, Vue, Web Performance e design.
-        <nuxt-link to="/about" class="text-blue-300 font-medium underline"
-          >Leia mais <Icon name="ph:arrow-right" size="14"
+        {{ $t('description') }},
+        <nuxt-link to="/about" class="text-blue-300 font-medium underline">
+          {{ $t('readMore') }} <Icon name="ph:arrow-right" size="14"
         /></nuxt-link>
       </p>
     </section>
 
     <section>
       <h2 class="text-3xl font-medium mb-6 pb-3 border-b border-neutral-800">
-        Posts Recentes
+        {{ $t('recentPosts') }}
       </h2>
       <div class="flex flex-col gap-[48px]">
         <CardPost
@@ -50,7 +49,7 @@ const { data: posts } = await useAsyncData('home', () =>
 
     <section>
       <h3 class="text-3xl font-medium mb-6 pb-3 border-b border-neutral-800">
-        Projetos Recentes
+        {{ $t('recentProjects') }}
       </h3>
 
       <div class="flex flex-col gap-[48px]">