Merge pull request #30 from retrozinndev/devel

✨ feat: use new i18n system and static paths

Author: retrozinndev

package-lock.json

@@ -1,17 +1,10 @@
 ---
+import { useTranslations } from "../i18n/utils.ts";
 import "../styles/global.css";
 
-var options = {
-    Home: "Home", 
-    About: "About Me",
-    Projects: "Projects"
-};
+const tr = useTranslations(Astro.params.lang as never);
 ---
 
-<script>
-    console.log(Astro.currentLocale);
-</script>
-
 <header>
     <div class="nav-left">
         <a rel="author" href="https://github.com/retrozinndev">
@@ -21,13 +14,13 @@ var options = {
     <nav class="navbar">
         <ul class="links">
             <li class="link">
-                <a href="/#top" target="_self">{ options.Home }</a>
+                <a href="/#top" target="_self">{ tr("nav.home") }</a>
             </li>
             <li class="link">
-                <a href="/#chars" target="_self">{ options.About }</a>
+                <a href="/#chars" target="_self">{ tr("nav.about") }</a>
             </li>
             <li class="link">
-                <a href="/projects" target="_self">{ options.Projects }</a>
+                <a href="/projects" target="_self">{ tr("nav.projects") }</a>
             </li>
         </ul>
     </nav>

src/components/NavBar.astro

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/env.d.ts

@@ -0,0 +1,24 @@
+export const en = {
+    
+    nav: {
+        home: "Home",
+        about: "About",
+        projects: "Projects"
+    },
+    
+    about: {
+        title: "Hi, I'm",
+        description: `I'm a self-taught programmer and tech enthusiast who's learning software 
+            development stuff! I absolutely love making open-source projects! I like: coding, 
+            learning about Linux and making games and apps in my free time!`,
+        socials_title: "You can find me in:",
+        projects: "Get in touch with my projects"
+    },
+
+    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!"
+    }
+} as const;

src/i18n/en.ts

@@ -0,0 +1,24 @@
+export const pt = {
+
+    nav: {
+        home: "Início",
+        about: "Sobre mim",
+        projects: "Projetos"
+    },
+    
+    about: {
+        title: "Olá, sou o",
+        description: `Sou um programador autodidata e entusiasta de tecnologia que está amando o 
+        mundo da programação! Eu gosto muito de fazer projetos open-source! Eu curto: programar, 
+        aprender sobre GNU/Linux, fazer jogos e aplicativos no meu tempo livre!`,
+        socials_title: "Você pode me encontrar em:",
+        projects: "Veja os meus projetos"
+    },
+
+    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!"
+    }
+} as const;

src/i18n/pt.ts

@@ -0,0 +1,5 @@
+
+import { languages } from "./ui";
+
+export const getStaticPaths = () => 
+    languages.map(lang => ({ params: { lang } }));

src/i18n/route.ts

@@ -0,0 +1,17 @@
+
+import { en } from"./en.ts";
+import { pt } from "./pt.ts";
+
+export let i18n: object = { 
+    en: {
+        ...en
+    },
+    pt: {
+        ...pt
+    }
+};
+
+export const languages: Array<string> = Object.keys(i18n);
+export const defaultLang = "en" as keyof typeof i18n;
+
+console.log(languages);

src/i18n/ui.ts

@@ -0,0 +1,27 @@
+
+import { i18n, defaultLang } from "./ui.ts";
+
+export function getLanguageFromURL(url: URL): string {
+    var splittedURL = url.pathname.split("/");
+    var currentIntl = splittedURL[1]; // Gets the second URL part
+    var domain = splittedURL[0].replace("/", "");
+
+    if(currentIntl in i18n) 
+        return currentIntl as keyof typeof i18n;
+
+    return currentIntl as string;
+}
+
+export function useTranslations(lang: keyof typeof i18n): Function {
+    return function tr(key: string): string {
+        const keys = key.split(".");
+        let translation = i18n[lang], defaultTranslation = i18n[defaultLang];
+
+        keys.forEach(key => {
+            translation = translation[key];
+            defaultTranslation = defaultTranslation[key];
+        });
+
+        return translation || defaultTranslation || "Couldn't find key to translate.";
+    }
+}

src/i18n/utils.ts

@@ -1,21 +1,32 @@
 ---
+
 import "../styles/global.css";
 import NavBar from "../components/NavBar.astro";
-import PageLayout from "../layouts/PageLayout.astro";
 ---
 
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>retrozinndev - Not Found!</title>
+    <link rel="icon" href="https://github.com/retrozinndev.png" />
+</head>
 <NavBar />
-<PageLayout title="retrozinndev | Not Found" icon="https://github.com/retrozinndev.png" lang="en-US">
+<body>
     <div class="center">
         <div class="not-found">
-            <h1>404!</h1>
+            <h1> 404! </h1>
             <p>
-                Looks like I didn't developed this yet!<br>
+                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>
             </p>
         </div>
     </div>
-</PageLayout>
+<body>
+    
+</body>
+</html>
 
 <style>
     .not-found h1 {

src/pages/404.astro

@@ -1,23 +1,26 @@
 ---
+import { getStaticPaths } from "../../i18n/route.ts";
+import { useTranslations }  from "../../i18n/utils.ts";
 import SocialLinks from '../../components/SocialLinks.astro';
 import PageLayout from '../../layouts/PageLayout.astro';
 import "../../styles/about_page.css";
+
+export { getStaticPaths };
+const tr = useTranslations(Astro.params.lang as never);
 ---
 
 <PageLayout title={ "retrozinndev" + " | " + "Home" } icon="https://github.com/retrozinndev.png" lang="en-US">
     <body>
         <div class="container">
             <div class="about-section title">
-                    <h1>Hi, I'm <span class="highlight">João!</span></h1>
+                    <h1>{ tr("about.title")  } <span class="highlight">João!</span> </h1>
             </div>
             <div class="about" id="about">
-                I'm a self-taught programmer and tech enthusiast that's learning software development stuff! <br>
-                I absolutely love making open-source projects! <br>
-                I like: coding, learning about Linux and making games and apps in my free time! <br>
+                { tr("about.description") }
             </div>
-            <a href="/projects"><h3 class="projects" id="projects">Get in touch with my projects &UpperRightArrow;</h3></a>
+            <a href="/projects"><h3 class="projects" id="projects">{ tr("about.projects") } &UpperRightArrow;</h3></a>
             <div class="socials ul" id="socials">
-                <h2>You can find me in: </h2>
+                <h2>{ tr("about.socials_title") }</h2>
                 <SocialLinks />
             </div>
         </div>