💥 fix: navbar links pointing to wrong url and i18n

retrozinndev · Jun 20, 2024 · 4407f7e · 4407f7e
1 parent e38240a
commit 4407f7e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 17 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,10 +1,13 @@
 ---
+import { useTranslations } from "../i18n/utils";
+
+const tr = useTranslations(Astro.params.lang as never);
 ---
 
 <footer class="footer">
     <div class="container">
-        Made with &hearts; by retrozinndev
-         · <a href="https://github.com/retrozinndev/retrozinndev.github.io">Improve this Page</a>
+        { tr("footer.txt1") } &hearts; { tr("footer.txt2") }
+         · <a href="https://github.com/retrozinndev/retrozinndev.github.io">{ tr("footer.txt3") }</a>
     </div>
 </footer>
 

diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -15,13 +15,13 @@ const tr = useTranslations(lang as never);
     <nav class="navbar">
         <ul class="links">
             <li class="link">
-                <a href={ `${lang}/#top` } target="_self">{ tr("nav.home") }</a>
+                <a href={ `/${lang}/#top` } target="_self">{ tr("nav.home") }</a>
             </li>
             <li class="link">
-                <a href={ `${lang}/#chars` } target="_self">{ tr("nav.about") }</a>
+                <a href={ `/${lang}/#chars` } target="_self">{ tr("nav.about") }</a>
             </li>
             <li class="link">
-                <a href={ `${lang}/projects` } target="_self">{ tr("nav.projects") }</a>
+                <a href={ `/${lang}/projects` } target="_self">{ tr("nav.projects") }</a>
             </li>
         </ul>
     </nav>

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -17,8 +17,17 @@ export const en = {
 
     not_found: {
         title: "404 - Not found!",
-        description: `Looks like I haven't developed this yet!
-                    Feel free to suggest me anything, talk to me on any of`,
-        social_link: "my socials!"
+        description: {
+            l1: "Looks like I haven't developed this yet!",
+            l2: "Feel free to suggest me anything, talk to me on any of",
+            socials: "my socials!"
+        }
+    },
+
+    footer: {
+        txt1: "Made with",
+        txt2: "by retrozinndev",
+        txt3: "Improve this page"
     }
+
 } as const;
diff --git a/src/i18n/pt.ts b/src/i18n/pt.ts
@@ -17,8 +17,16 @@ export const pt = {
 
     not_found: {
         title: "404 - Não encontrado!",
-        description: `Parece que eu ainda não desenvolvi essa página! 
-                    Feel free to suggest me anything, talk to me on any of`,
-        social_link: "minhas redes sociais!"
+        description: {
+            l1: "Parece que eu ainda não desenvolvi essa página!",
+            l2: "Se quiser sugerir alguma ideia, me chame em qualquer uma das",
+            socials: "minhas redes sociais!"
+        }
+    },
+
+    footer: {
+        txt1: "Feito com",
+        txt2: "por retrozinndev",
+        txt3: "Melhore esta página"
     }
 } as const;
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -1,8 +1,15 @@
 ---
+import { getLanguageFromURL, useTranslations } from "../i18n/utils";
 import "../styles/global.css";
 import NavBar from "../components/NavBar.astro";
 
-Astro.params.lang = "en";
+Astro.params.lang = getLanguageFromURL(Astro.url);
+
+if(Astro.params.lang === undefined) {
+    Astro.params.lang = "en";
+}
+
+const tr = useTranslations(Astro.params.lang as never);
 ---
 
 <!DOCTYPE html>
@@ -17,10 +24,10 @@ Astro.params.lang = "en";
 <body>
     <div class="center">
         <div class="not-found">
-            <h1> 404! </h1>
+            <h1> { tr("not_found.title") } </h1>
             <p>
-                Looks like I haven't developed this yet!<br>
-                Feel free to suggest me anything, talk to me on any of <a href="/#socials">my socials!</a>
+                { tr("not_found.description.l1") } <br>
+                { tr("not_found.description.l2") } <a href={ `/${Astro.params.lang}/#socials` }>{ tr("not_found.description.socials") }</a>
             </p>
         </div>
     </div>

diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
@@ -9,7 +9,7 @@ export { getStaticPaths };
 const tr = useTranslations(Astro.params.lang as never);
 ---
 
-<PageLayout title={ "retrozinndev" + " | " + "Home" } icon="https://github.com/retrozinndev.png" lang="en-US">
+<PageLayout title={ "retrozinndev - Home" } icon="https://github.com/retrozinndev.png" lang="en-US">
     <body>
         <div class="container">
             <div class="about-section title">
@@ -18,7 +18,9 @@ const tr = useTranslations(Astro.params.lang as never);
             <div class="about" id="about">
                 { tr("about.description") }
             </div>
-            <a href="/projects"><h3 class="projects" id="projects">{ tr("about.projects") } &UpperRightArrow;</h3></a>
+            <a href={ `/${Astro.params.lang}/projects` }>
+                <h3 class="projects" id="projects">{ tr("about.projects") } &UpperRightArrow;</h3>
+            </a>
             <div class="socials ul" id="socials">
                 <h2>{ tr("about.socials_title") }</h2>
                 <SocialLinks />