Refactor language selection links in Header.svelte and +page.svelte

Michael-Liendo · Jan 19, 2024 · 3e84bf1 · 3e84bf1
1 parent 83a3d4f
commit 3e84bf1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 25 deletions.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -7,12 +7,14 @@
   import Notebook from '~icons/mdi/book';
   import PodiumGold from '~icons/mdi/podium-gold';
 
-  import LL, { setLocale } from '$i18n/i18n-svelte';
+  import LL, { locale, setLocale } from '$i18n/i18n-svelte';
   import { page } from '$app/stores';
   import { replaceLocaleInUrl } from '$lib/utils/locale';
 
   import type { Locales } from '$i18n/i18n-types';
 
+  const baseLocaleUrl = $locale === 'es' ? '' : `/${$locale}`;
+
   let useDarkMode = false;
   let isLangMenuOpen = false;
 
@@ -48,16 +50,14 @@
   }
 
   function changeLanguage(locale: Locales): void {
-    const lang = $page.params.lang;
+    const lang = $locale;
 
     if (lang === locale) {
       isLangMenuOpen = false;
       return;
     }
 
-    const next = replaceLocaleInUrl($page.url, locale);
     setLocale(locale);
-    window.location.href = next;
   }
 </script>
 
@@ -71,25 +71,22 @@
       class="hidden sm:flex text-xl items-center sm:space-x-10 md:space-x-16 px-10 py-2 bg-white dark:bg-black border border-black dark:border-white rounded-full"
     >
       <li>
-        <a href="/{$page.params.lang ?? 'en'}/">{$LL.LAYOUT.NAV.HOME()}</a>
+        <a href="{baseLocaleUrl}/">{$LL.LAYOUT.NAV.HOME()}</a>
       </li>
       <li>
-        <a href="/{$page.params.lang ?? 'en'}/notes">{$LL.LAYOUT.NAV.NOTES()}</a
-        >
+        <a href="{baseLocaleUrl}/notes">{$LL.LAYOUT.NAV.NOTES()}</a>
       </li>
       <li>
-        <a href="/{$page.params.lang ?? 'en'}/projects"
-          >{$LL.LAYOUT.NAV.PROJECTS()}</a
-        >
+        <a href="{baseLocaleUrl}/projects">{$LL.LAYOUT.NAV.PROJECTS()}</a>
       </li>
     </ul>
     <ul
       class="text-xl flex sm:hidden items-center space-x-6 px-5 py-2 bg-white dark:bg-black border border-black dark:border-white rounded-full"
     >
-      <li><a href="/{$page.params.lang ?? 'en'}/"><Home /></a></li>
-      <li><a href="/{$page.params.lang ?? 'en'}/notes"><Notebook /></a></li>
+      <li><a href="{baseLocaleUrl}/"><Home /></a></li>
+      <li><a href="{baseLocaleUrl}/notes"><Notebook /></a></li>
       <li>
-        <a href="/{$page.params.lang ?? 'en'}/projects"><PodiumGold /></a>
+        <a href="{baseLocaleUrl}/projects"><PodiumGold /></a>
       </li>
     </ul>
   </nav>
@@ -121,20 +118,24 @@
               class="absolute right-0 flex flex-col space-y-2 p-2 shadow-xl border-1 border-gray-400 dark:border-gray-900 bg-white dark:bg-slate-800 rounded-lg"
             >
               <li class="lang-opt">
-                <button
-                  class:lang-active={$page.params.lang === 'en'}
+                <a
+                  href={replaceLocaleInUrl($page.url, 'en')}
+                  hreflang="en"
+                  class:lang-active={$locale === 'en'}
                   on:click={() => changeLanguage('en')}
                 >
                   🇺🇸&nbsp;English
-                </button>
+                </a>
               </li>
               <li>
-                <button
-                  class:lang-active={$page.params.lang === 'es'}
+                <a
+                  href={`${replaceLocaleInUrl($page.url)}`}
+                  hreflang="es"
+                  class:lang-active={$locale === 'es'}
                   on:click={() => changeLanguage('es')}
                 >
                   🇪🇸&nbsp;Español
-                </button>
+                </a>
               </li>
             </ul>
           </div>

diff --git a/src/lib/utils/locale.ts b/src/lib/utils/locale.ts
@@ -7,14 +7,19 @@
 // e.g. https://mywebsite.com/en/blog/article-1 => /de/blog/article-1
 export const replaceLocaleInUrl = (
   url: URL,
-  locale: string,
+  locale?: string, // Ahora es opcional
   full = false,
 ): string => {
-  const [, , ...rest] = url.pathname.split('/');
-  const new_pathname = `/${[locale, ...rest].join('/')}`;
+  const [, ...rest] = url.pathname.split('/');
+
+  const new_pathname = locale
+    ? `/${[locale, ...rest].join('/')}`
+    : `/${rest.join('/')}`;
+
   if (!full) {
     return `${new_pathname}${url.search}`;
   }
+
   const newUrl = new URL(url.toString());
   newUrl.pathname = new_pathname;
   return newUrl.toString();

diff --git a/src/routes/[[lang=lang]]/+page.svelte b/src/routes/[[lang=lang]]/+page.svelte
@@ -9,6 +9,8 @@
     notes: Note[];
   };
 
+  const baseLocaleUrl = $locale === 'es' ? '' : `/${$locale}`;
+
   let title = 'Michael Liendo | Software Developer';
   let description =
     'A Software Developer interested in Systems Programming and Web Development.';
@@ -119,7 +121,7 @@
     {#each data.notes as note, index}
       {#if index === 0}
         <a
-          href={`/${$locale}/notes/${note.slug}`}
+          href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="rounded-2xl flex flex-col justify-between w-full h-full bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-2 xl:row-span-2"
           itemprop="blogPost"
           itemscope
@@ -175,7 +177,7 @@
       {/if}
       {#if index === 1 || index === 4}
         <a
-          href={`/${$locale}/notes/${note.slug}`}
+          href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="rounded-2xl flex flex-col justify-between w-full h-full px-5 py-4 bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-2"
           itemprop="blogPost"
           itemscope
@@ -221,7 +223,7 @@
       {/if}
       {#if index === 2 || index === 3}
         <a
-          href={`/${$locale}/notes/${note.slug}`}
+          href={`${baseLocaleUrl}/notes/${note.slug}`}
           class="block md:flex rounded-2xl w-full h-full bg-[#f5f5f5] dark:bg-slate-900 xl:col-span-4"
           itemprop="blogPost"
           itemscope