Fixing language problems

Added cv download icon Added translation to download cv icon
MacKey-255 · Jul 31, 2023 · 04426d7 · 04426d7
1 parent 1d04921
commit 04426d7
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 13 deletions.
diff --git a/components/layout/LangSwitcher.vue b/components/layout/LangSwitcher.vue
@@ -7,18 +7,35 @@
 <script>
 export default {
   name: "LangSwitcher",
+  data() {
+    return {
+      lang: this.$i18n.locale,
+    }
+  },
   computed: {
     nextLocale() {
-      return this.$i18n.locale === 'en' ? 'es' : 'en';
+      return this.lang === 'en' ? 'es' : 'en';
     },
     countryCode() {
-      return this.$i18n.locale === 'en' ? 'gb' : 'es';
+      return this.lang === 'en' ? 'gb' : 'es';
     }
   },
   methods: {
-    async changeLocale(locale) {
+    changeLocale(locale) {
       this.$i18n.setLocale(locale);
-      await this.$router.push({ path: '', query: { lang: locale }, hash: this.$router.currentRoute.hash});
+      this.lang = locale;
+      const hash = ['', '#'].includes(this.$router.currentRoute.hash) ? {} : {
+        hash: this.$router.currentRoute.hash.replace('#', '')};
+      this.$router.push({ path: '', query: { lang: locale }, ...hash});
+    },
+    mounted() {
+      this.lang = this.$i18n.locale;
+    },
+    updated() {
+      this.lang = this.$i18n.locale;
+    },
+    unmounted() {
+      this.lang = this.$i18n.locale;
     }
   }
 }

diff --git a/components/tabs/Home.vue b/components/tabs/Home.vue
@@ -59,14 +59,15 @@
           </p>
         </bg-saturate>
         <div class="flex mt-2 justify-center md:justify-end">
-            <a class="btn-more mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
-              href="/cv/es/portfolio.pdf"
-              target="_blank"
-              rel="noreferrer"
-              aria-label="download cv"
-              download>
-              Download CV
-            </a>
+          <a class="btn-more mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
+             href="/cv/es/portfolio.pdf"
+             target="_blank"
+             rel="noreferrer"
+             aria-label="download cv"
+             download>
+            <span class="mr-1">{{ $t('download_cv') }}</span>
+            <font-awesome-icon icon="download"/>
+          </a>
           <button class="btn-more bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
                   @click="SET_PAGE(2)">
             <span class="mr-2">{{ $t('see_more') }}</span>

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -8,6 +8,7 @@ export default {
   dark_mode: 'Dark mode',
   /* Home */
   see_more: 'See more',
+  download_cv: 'Download CV',
   profile_profession: ['Full-Stack Web developer', 'Software Engineer', 'Backend developer'],
   profile_description: 'I\'m a experienced Software Engineer adept in bringing forth expertise in design, installation, testing and maintenance of software systems. Proficient in various frameworks (FastAPI/Django/Flask), languages (Python/C#/Java), and embedded systems. Able to effectively self-manage during independent projects, as well as collaborate as part of a productive team.',
   /* Skills */

diff --git a/locales/es-ES.js b/locales/es-ES.js
@@ -8,6 +8,7 @@ export default {
   dark_mode: 'Tema',
   /* Home */
   see_more: 'Ver más',
+  download_cv: 'Descargar CV',
   profile_profession: ['Desarrollador Web Full-Stack', 'Ingeniero de Software', 'Desarrollador Backend'],
   profile_description: 'Soy un ingeniero de software con experiencia en diseño, codificación, prueba y mantenimiento de sistemas de software. Competente en varios frameworks (Django/FastAPI/Flask), lenguajes (Python/C#/Java) y sistemas embebidos. Capaz de autogestionar mi tiempo de manera efectiva durante los proyectos independientes, así como colaborar formando parte de un equipo de desarrollo.',
   /* Skills */

diff --git a/plugins/route-lang.js b/plugins/route-lang.js
@@ -13,7 +13,9 @@ export default ({ app, store }) => {
 
     // Detect page
     const value = to.hash.replace('#', '');
-    store.commit('SET_PAGE', value);
+    if (value !== '') {
+      store.commit('SET_PAGE', value);
+    }
 
     // Set title
     const title = (value !== '' ? app.i18n.t(value) + ' - ' : '') + "Michel Suarez";

diff --git a/store/index.js b/store/index.js
@@ -19,6 +19,7 @@ export const mutations = {
     state.isDarkMode = bool;
   },
   SET_PAGE: (state, value) => {
+    if (!value || value === '') {return;}
     state.activePage = value;
     if (process.client) {
       window.scrollTo(0, 0);