i18n finished (no content yet)

"/" path is now i18n complete - text, image, favicon are all defined in dictionaries (src/i18n/<lang>.js)
Blog should be too

src/components/About.astro

@@ -1,22 +1,30 @@
 ---
-import SinglePage from "../layouts/SinglePage.astro"
+import SinglePage from "../layouts/SinglePage.astro";
 
-import { dictionary } from "../i18n/dictionary";
 import AboutModule from "./AboutModule.astro";
-const { title, description } = dictionary[Astro.currentLocale];
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+
+const t = useTranslations(getLangFromUrl(Astro.url));
 ---
+
 <SinglePage>
-   <div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
-      <AboutModule row="0" image="/temp.jpg">
-        <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">Lorem</h1>
-        <p class="text-content text-center text-md xl:text-lg xl:px-10">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.</p>
-      </AboutModule>
-      <AboutModule row="1" image="/temp.jpg" flipped>
-        <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">Ipsum</h1>
-        <p class="text-content text-center text-md xl:text-lg xl:px-10">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.</p>
-      </AboutModule>
-      <AboutModule row="2" image="/temp.jpg" alt="image">
-        <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">Dolor</h1>
-        <p class="text-content text-center text-md xl:text-lg xl:px-10">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.</p>
-      </AboutModule>
+  <div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
+    <!-- Automaticly generate n (=3) bars with content -->
+    {
+      [0,1,2].map(i => 
+        <AboutModule
+          row={i}
+          image={t("about")[i].image}
+          flipped={i % 2}
+        >
+          <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">
+            {t("about")[i].title}
+          </h1>
+          <p class="text-content text-center text-md xl:text-lg xl:px-10">
+            {t("about")[i].content}
+          </p>
+        </AboutModule>
+      )
+    }
+  </div>
 </SinglePage>

src/components/Hero.astro

@@ -1,26 +1,22 @@
 ---
 import SinglePage from "../layouts/SinglePage.astro";
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
 
-import { dictionary } from "../i18n/dictionary";
-const { title, description } = dictionary[Astro.currentLocale];
+const t = useTranslations(getLangFromUrl(Astro.url))
 ---
 
 <SinglePage>
     <!-- Hero Image -->
     <div class="w-full flex justify-center mt-20">
-        <img src="/temp.jpg" alt="" class="rounded-full" />
-        <!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
+        <img src={t("hero").image} alt="" class="rounded-full" />
     </div>
     <!-- Hero Text -->
     <div class="mt-[6rem]">
         <h1 class="text-accent text-4xl w-full text-center font-extrabold">
-            Lorem Ipsum
+            {t("hero").title}
         </h1>
         <h2 class="text-content text-lg w-full text-center mt-[3.2rem]">
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. A suscipit
-            facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque
-            dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio,
-            animi dolorum?
+            {t("hero").content}
         </h2>
     </div>
     <!-- Call action buttons -->
@@ -28,12 +24,12 @@ const { title, description } = dictionary[Astro.currentLocale];
         <button
             type="button"
             class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2"
-            >Lorem</button
+            >{t("hero").buttons[0]}</button
         >
         <button
             type="button"
             class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content"
-            >ipsum dolor</button
+            >{t("hero").buttons[1]}</button
         >
     </div>
 </SinglePage>

src/components/ShowcaseTabs.jsx

@@ -1,3 +1,4 @@
+import { useTranslations } from "../i18n/utils";
 import {
   Card,
   CardContent,
@@ -12,11 +13,10 @@ import {
   TabsTrigger,
 } from "../components/ui/tabs";
 
-import { dictionary } from "../i18n/dictionary";
-
 
 export function ShowcaseTabs({ currentLocale }) {
-  const { showcase } = dictionary[currentLocale];
+  const t = useTranslations(currentLocale);
+  const showcase = t("showcase");
   return (
     <Tabs
       defaultValue={showcase[0].value}

src/components/SinglePostCard.astro

@@ -7,11 +7,11 @@ import {
   CardTitle,
 } from "./ui/card";
 
-const { post, lang } = Astro.props;
+const { post } = Astro.props;
 ---
 
 <div>
-  <a href={`${Astro.url.origin}/${lang ? lang : "en"}/blog/${post.blog_slug}`}>
+  <a href={`${Astro.url.origin}/${Astro.currentLocale}/blog/${post.blog_slug}`}>
     <Card>
       <CardHeader>
         <img