fix(i18n): redirect 404 home link to the canonical locale path

Author: ramistodev

src/pages/404.astro

@@ -1,18 +1,31 @@
 ---
-import Layout from "@layouts/Layout.astro"
-import { translations, defaultLocale, type Locale, locales } from "@i18n/translations"
+import Layout from '@layouts/Layout.astro'
+import { translations, defaultLocale, type Locale, locales } from '@i18n/translations'
 
 const pathName = Astro.url.pathname
-const locale = pathName.split("/")[1] as Locale
+const locale = pathName.split('/')[1] as Locale
 const t = locales.includes(locale) ? translations[locale] : translations[defaultLocale]
+const pathnameToRedirect = locales.includes(locale) && locale !== defaultLocale ? `/${locale}` : `/`
 ---
 
 <Layout title="404 — Page not found">
   <div class="h-screen flex flex-col items-center justify-center gap-6 bg-black text-white px-4">
-
-    <div class="w-12 h-12 rounded-xl bg-white/4 flex items-center justify-center border border-white/8">
-      <svg class="w-6 h-6 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+    <div
+      class="w-12 h-12 rounded-xl bg-white/4 flex items-center justify-center border border-white/8"
+    >
+      <svg
+        class="w-6 h-6 text-white/40"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
+        ></path>
       </svg>
     </div>
 
@@ -25,14 +38,21 @@ const t = locales.includes(locale) ? translations[locale] : translations[default
     </div>
 
     <a
-      href={locales.includes(locale) ? `/${locale}` : `/${defaultLocale}`}
+      href={pathnameToRedirect}
       class="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/6 border border-white/10 text-sm text-neutral-300 hover:text-white hover:bg-white/10 transition-colors"
     >
-      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+      <svg
+        class="w-4 h-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+        ></path>
       </svg>
       {t.backToHome}
     </a>
-
   </div>
-</Layout>
+</Layout>