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">
+  <div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
-      <AboutModule row="0" image="/temp.jpg">
+    <!-- Automaticly generate n (=3) bars with content -->
-        <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>
+      [0,1,2].map(i => 
-      </AboutModule>
+        <AboutModule
-      <AboutModule row="1" image="/temp.jpg" flipped>
+          row={i}
-        <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">Ipsum</h1>
+          image={t("about")[i].image}
-        <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>
+          flipped={i % 2}
-      </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">
-        <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">Dolor</h1>
+            {t("about")[i].title}
-        <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>
+          </h1>
-      </AboutModule>
+          <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 t = useTranslations(getLangFromUrl(Astro.url))
-const { title, description } = dictionary[Astro.currentLocale];
 ---
 
 <SinglePage>
     <!-- Hero Image -->
     <div class="w-full flex justify-center mt-20">
-        <img src="/temp.jpg" alt="" class="rounded-full" />
+        <img src={t("hero").image} alt="" class="rounded-full" />
-        <!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
     </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
+            {t("hero").content}
-            facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque
-            dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio,
-            animi dolorum?
         </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

src/i18n/cs.js

@@ -1,33 +1,85 @@
 export const cs = {
-  title: "CS Test",
+  title: "Lorem Ipsum", // Title of the main page in browser's handlebard
-  showcase: [
+  description: "Page description here", // HTML page description
+
+  /*
+	Hero module of the page
+	*/
+  hero: {
+    title: "Lorem",
+    content: "ipsum dolor",
+    image: "/temp.jpg",
+    buttons: ["Button 1", "Button 2"],
+  },
+
+  /*
+	About module of the page
+	*/
+  about: [
     {
-      value: "thisPage",
+      // About page first block title
-      handle: "Projekt 1",
+      title: "Lorem",
-      title: "This Page",
+      // Content of about page first block
-      href: "/potato",
+      content:
-      description:
+        "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.",
-        "random text os iuoiu fsd ufiodsu foid sufo dsufois dufoisd eee sfsdffsdfsd sd sd ds dsfsv sd dss ds ds ufiosdufi osdufsdfsd iofusdoifudu siofsdfids ofudsiouoi",
+      // Image
       image: "/temp.jpg",
-      imageAlt: "text",
     },
     {
-      value: "thatPage",
+      // About page second block title
-      title: "That Page",
+      title: "Ipsum",
-      handle: "Projekt 2",
+      // Content of about page's second block
-      href: "/potat2",
+      content:
-      description: "random text",
+        "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.",
+      // Image
       image: "/temp.jpg",
-      imageAlt: "text",
     },
     {
-      value: "otherPage",
+      // About page third block title
-      title: "Other Page",
+      title: "Ipsum",
-      handle: "Projekt 3",
+      // Content of about page's third block
-      href: "/kartoffeln",
+      content:
-      description: "random text",
+        "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.",
+      // Image
       image: "/temp.jpg",
-      imageAlt: "text",
     },
   ],
+
+  /*
+	Showcase module of the page
+	*/
+  showcase: [
+    {
+      value: "first",
+      handle: "Website",
+      title: "My personal webpage",
+      href: "/potato",
+      description:
+        "My personal website, clearly you've found it. Made in Astro.js with help of shadcnui components.",
+      image: "/temp.jpg",
+      imageAlt: "Screenshot of this website",
+    },
+    {
+      value: "second",
+      title: "Self-hostable",
+      handle: "HomeLab",
+      href: "/potat2",
+      description:
+        "It has now been a few years since I've started with selfhosting. It started as one single Raspberry Pi 4, then it grew to cluster of 4 Pis... and now I have 2 old IBM servers (x3550 m4).",
+      image: "/temp.jpg",
+      imageAlt: "Photo of my personal homelab",
+    },
+    {
+      value: "third",
+      title: "ESA's Astro Pi Challenge 2022/23",
+      handle: "ESA Astro Pi",
+      href: "/kartoffeln",
+      description:
+        "Astro Pi is a competition for high school students by the European Space Agency. It's goal is to make it possible for students to run their code on the ISS. I was part of the Barrande team from our school. As our mission we chose Classification of Earth's topology using AI in Real-Time and I was the one tasked with programmign the AI. The mission was very successfull and we were nominated to 10 best teams. Reports and other data can be found on ESA's website.",
+      image: "/temp.jpg",
+      imageAlt: "Image for of our task and results explanation",
+    },
+  ],
+
+  postsTagged: "All posts tagged with",
 };

src/i18n/de.js

@@ -1,34 +1,86 @@
 export const de = {
-	title: "DE Test",
+	title: "Lorem Ipsum", // Title of the main page in browser's handlebard
-	showcase: [
+	description: "Page description here", // HTML page description
+  
+	/*
+	  Hero module of the page
+	  */
+	hero: {
+	  title: "Lorem",
+	  content: "ipsum dolor",
+	  image: "/temp.jpg",
+	  buttons: ["Button 1", "Button 2"],
+	},
+  
+	/*
+	  About module of the page
+	  */
+	about: [
 	  {
-		value: "thisPage",
+		// About page first block title
-		handle: "Projekt 1 DE",
+		title: "Lorem",
-		title: "This Page",
+		// Content of about page first block
-		href: "/potato",
+		content:
-		description:
+		  "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.",
-		  "random text os iuoiu fsd ufiodsu foid sufo dsufois dufoisd eee sfsdffsdfsd sd sd ds dsfsv sd dss ds ds ufiosdufi osdufsdfsd iofusdoifudu siofsdfids ofudsiouoi",
+		// Image
 		image: "/temp.jpg",
-		imageAlt: "text",
 	  },
 	  {
-		value: "thatPage",
+		// About page second block title
-		title: "That Page",
+		title: "Ipsum",
-		handle: "Projekt 2 DE",
+		// Content of about page's second block
-		href: "/potat2",
+		content:
-		description: "random text",
+		  "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.",
+		// Image
 		image: "/temp.jpg",
-		imageAlt: "text",
 	  },
 	  {
-		value: "otherPage",
+		// About page third block title
-		title: "Other Page",
+		title: "Ipsum",
-		handle: "Projekt 3 DE",
+		// Content of about page's third block
-		href: "/kartoffeln",
+		content:
-		description: "random text",
+		  "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.",
+		// Image
 		image: "/temp.jpg",
-		imageAlt: "text",
 	  },
 	],
+  
+	/*
+	  Showcase module of the page
+	  */
+	showcase: [
+	  {
+		value: "first",
+		handle: "Website",
+		title: "My personal webpage",
+		href: "/potato",
+		description:
+		  "My personal website, clearly you've found it. Made in Astro.js with help of shadcnui components.",
+		image: "/temp.jpg",
+		imageAlt: "Screenshot of this website",
+	  },
+	  {
+		value: "second",
+		title: "Self-hostable",
+		handle: "HomeLab",
+		href: "/potat2",
+		description:
+		  "It has now been a few years since I've started with selfhosting. It started as one single Raspberry Pi 4, then it grew to cluster of 4 Pis... and now I have 2 old IBM servers (x3550 m4).",
+		image: "/temp.jpg",
+		imageAlt: "Photo of my personal homelab",
+	  },
+	  {
+		value: "third",
+		title: "ESA's Astro Pi Challenge 2022/23",
+		handle: "ESA Astro Pi",
+		href: "/kartoffeln",
+		description:
+		  "Astro Pi is a competition for high school students by the European Space Agency. It's goal is to make it possible for students to run their code on the ISS. I was part of the Barrande team from our school. As our mission we chose Classification of Earth's topology using AI in Real-Time and I was the one tasked with programmign the AI. The mission was very successfull and we were nominated to 10 best teams. Reports and other data can be found on ESA's website.",
+		image: "/temp.jpg",
+		imageAlt: "Image for of our task and results explanation",
+	  },
+	],
+  
+	postsTagged: "All posts tagged with",
   };
   

src/i18n/en.js

@@ -1,34 +1,86 @@
 export const en = {
-	title: "EN Test",
+  title: "Lorem Ipsum", // Title of the main page in browser's handlebard
-	showcase: [
+  description: "Page description here", // HTML page description
-	  {
+  favicon: "/favicon.svg",
-		value: "thisPage",
+
-		handle: "Projekt 1 EN",
+  /*
-		title: "This Page",
+	Hero module of the page
-		href: "/potato",
+	*/
-		description:
+  hero: {
-		  "random text os iuoiu fsd ufiodsu foid sufo dsufois dufoisd eee sfsdffsdfsd sd sd ds dsfsv sd dss ds ds ufiosdufi osdufsdfsd iofusdoifudu siofsdfids ofudsiouoi",
+    title: "Lorem",
-		image: "/temp.jpg",
+    content: "ipsum dolor",
-		imageAlt: "text",
+    image: "/temp.jpg",
-	  },
+    buttons: ["Button 1", "Button 2"],
-	  {
+  },
-		value: "thatPage",
+
-		title: "That Page",
+  /*
-		handle: "Projekt 2 EN",
+	About module of the page
-		href: "/potat2",
+	*/
-		description: "random text",
+  about: [
-		image: "/temp.jpg",
+    {
-		imageAlt: "text",
+      // About page first block title
-	  },
+      title: "Lorem",
-	  {
+      // Content of about page first block
-		value: "otherPage",
+      content:
-		title: "Other Page",
+        "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.",
-		handle: "Projekt 3 EN",
+      // Image
-		href: "/kartoffeln",
+      image: "/temp.jpg",
-		description: "random text",
+    },
-		image: "/temp.jpg",
+    {
-		imageAlt: "text",
+      // About page second block title
-	  },
+      title: "Ipsum",
-	],
+      // Content of about page's second block
-  };
+      content:
-  
+        "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.",
+      // Image
+      image: "/temp.jpg",
+    },
+    {
+      // About page third block title
+      title: "Ipsum",
+      // Content of about page's third block
+      content:
+        "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.",
+      // Image
+      image: "/temp.jpg",
+    },
+  ],
+
+  /*
+	Showcase module of the page
+	*/
+  showcase: [
+    {
+      value: "first",
+      handle: "Website",
+      title: "My personal webpage",
+      href: "/potato",
+      description:
+        "My personal website, clearly you've found it. Made in Astro.js with help of Shadcn/UI components.",
+      image: "/temp.jpg",
+      imageAlt: "Screenshot of this website",
+    },
+    {
+      value: "second",
+      title: "Self-hostable",
+      handle: "HomeLab",
+      href: "/potat2",
+      description:
+        "It has now been a few years since I've started with selfhosting. It started as one single Raspberry Pi 4, then it grew to cluster of 4 Pis... and now I have 2 old IBM servers (x3550 m4).",
+      image: "/temp.jpg",
+      imageAlt: "Photo of my personal homelab",
+    },
+    {
+      value: "third",
+      title: "ESA's Astro Pi Challenge 2022/23",
+      handle: "ESA Astro Pi",
+      href: "/kartoffeln",
+      description:
+        "Astro Pi is a competition for high school students by the European Space Agency. It's goal is to make it possible for students to run their code on the ISS. I was part of the Barrande team from our school. As our mission we chose Classification of Earth's topology using AI in Real-Time and I was the one tasked with programmign the AI. The mission was very successfull and we were nominated to 10 best teams. Reports and other data can be found on ESA's website.",
+      image: "/temp.jpg",
+      imageAlt: "Image for of our task and results explanation",
+    },
+  ],
+
+  postsTagged: "All posts tagged with",
+};

src/i18n/fr.js

@@ -1,34 +1,86 @@
 export const fr = {
-	title: "FR Test",
+	title: "Lorem Ipsum", // Title of the main page in browser's handlebard
-	showcase: [
+	description: "Page description here", // HTML page description
+  
+	/*
+	  Hero module of the page
+	  */
+	hero: {
+	  title: "Lorem",
+	  content: "ipsum dolor",
+	  image: "/temp.jpg",
+	  buttons: ["Button 1", "Button 2"],
+	},
+  
+	/*
+	  About module of the page
+	  */
+	about: [
 	  {
-		value: "thisPage",
+		// About page first block title
-		handle: "Projekt 1 FR",
+		title: "Lorem",
-		title: "This Page",
+		// Content of about page first block
-		href: "/potato",
+		content:
-		description:
+		  "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.",
-		  "random text os iuoiu fsd ufiodsu foid sufo dsufois dufoisd eee sfsdffsdfsd sd sd ds dsfsv sd dss ds ds ufiosdufi osdufsdfsd iofusdoifudu siofsdfids ofudsiouoi",
+		// Image
 		image: "/temp.jpg",
-		imageAlt: "text",
 	  },
 	  {
-		value: "thatPage",
+		// About page second block title
-		title: "That Page",
+		title: "Ipsum",
-		handle: "Projekt 2 FR",
+		// Content of about page's second block
-		href: "/potat2",
+		content:
-		description: "random text",
+		  "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.",
+		// Image
 		image: "/temp.jpg",
-		imageAlt: "text",
 	  },
 	  {
-		value: "otherPage",
+		// About page third block title
-		title: "Other Page",
+		title: "Ipsum",
-		handle: "Projekt 3 FR",
+		// Content of about page's third block
-		href: "/kartoffeln",
+		content:
-		description: "random text",
+		  "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.",
+		// Image
 		image: "/temp.jpg",
-		imageAlt: "text",
 	  },
 	],
+  
+	/*
+	  Showcase module of the page
+	  */
+	showcase: [
+	  {
+		value: "first",
+		handle: "Website",
+		title: "My personal webpage",
+		href: "/potato",
+		description:
+		  "My personal website, clearly you've found it. Made in Astro.js with help of shadcnui components.",
+		image: "/temp.jpg",
+		imageAlt: "Screenshot of this website",
+	  },
+	  {
+		value: "second",
+		title: "Self-hostable",
+		handle: "HomeLab",
+		href: "/potat2",
+		description:
+		  "It has now been a few years since I've started with selfhosting. It started as one single Raspberry Pi 4, then it grew to cluster of 4 Pis... and now I have 2 old IBM servers (x3550 m4).",
+		image: "/temp.jpg",
+		imageAlt: "Photo of my personal homelab",
+	  },
+	  {
+		value: "third",
+		title: "ESA's Astro Pi Challenge 2022/23",
+		handle: "ESA Astro Pi",
+		href: "/kartoffeln",
+		description:
+		  "Astro Pi is a competition for high school students by the European Space Agency. It's goal is to make it possible for students to run their code on the ISS. I was part of the Barrande team from our school. As our mission we chose Classification of Earth's topology using AI in Real-Time and I was the one tasked with programmign the AI. The mission was very successfull and we were nominated to 10 best teams. Reports and other data can be found on ESA's website.",
+		image: "/temp.jpg",
+		imageAlt: "Image for of our task and results explanation",
+	  },
+	],
+  
+	postsTagged: "All posts tagged with",
   };
   

src/layouts/MainLayout.astro

@@ -3,7 +3,10 @@ const { title, description, lang, themeOverride } = Astro.props;
 import { ViewTransitions } from 'astro:transitions';
 import Navbar from "../components/Navbar.astro";
 import "../style/index.css";
+import { useTranslations } from '../i18n/utils';
 //import "../style/globals.css";
+
+const t = useTranslations(lang)
 ---
 
 <!doctype html>
@@ -12,7 +15,7 @@ import "../style/index.css";
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content={description} />
-        <link rel="shortcut icon" href="/favicon.svg">
+        <link rel="shortcut icon" href={t("favicon")}>
         <title>{title}</title>
         <ViewTransitions />
     </head>

src/pages/[lang]/blog/[...slug].astro

@@ -32,6 +32,11 @@ const { Content } = await page.render();
       <!--<img src={page.data.image.url} alt={page.data.image.alt} class="rounded-lg max-h-[25vh] m-auto"> -->
       <h1 class="lg:text-4xl text-2xl">{page.data.title}</h1>
       <p>{page.data.author} • {formattedDate}</p>
+      <div class="flex justify-center">
+        { page.data.tags?.map((tag) => 
+          <a href={`${Astro.url.origin}/${Astro.currentLocale}/blog/tags/${tag}`}>#{tag}</a>
+        )}
+      </div>
     </div>
     <Content />
   </article>

src/pages/[lang]/blog/index.astro

@@ -18,6 +18,7 @@ var posts = await getBlogPosts();
 var filtered_posts = posts.filter(
   (post) => post.data.language == Astro.currentLocale,
 );
+
 ---
 
 <MainLayout title={title} description={description} lang={Astro.currentLocale}>

src/pages/[lang]/blog/tags/[tag].astro

@@ -1,7 +1,7 @@
 ---
 import MainLayout from "../../../../layouts/MainLayout.astro";
 import SinglePageBlogMode from "../../../../layouts/SinglePageBlogMode.astro";
-import { LANGUAGES } from "../../../../i18n/utils";
+import { LANGUAGES, getLangFromUrl, useTranslations } from "../../../../i18n/utils";
 import { getBlogPosts } from "../../../../content/config";
 import PostsList from "../../../../components/PostsList.astro";
 
@@ -10,19 +10,23 @@ export async function getStaticPaths() {
   const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
 
   var paths = [];
-
+  
   tags.map((tag) => {
     Object.keys(LANGUAGES).map((lang) => {
-      paths.push({
+      if(tag){
+        paths.push({
         params: { lang: lang, tag: tag },
         props: { posts: allPosts },
       });
+      }
     });
   });
-
+  
   return paths;
 }
 
+const t = useTranslations(getLangFromUrl(Astro.url))
+
 const { lang, tag } = Astro.params;
 const { posts } = Astro.props;
 
@@ -31,6 +35,7 @@ const filteredPosts = posts.filter((post) => post.data.tags?.includes(tag) && po
 
 <MainLayout title={tag} description={"desc"} lang={lang}>
   <SinglePageBlogMode>
+    <h1 class="text-2xl text-center font-bold text-content mb-10 mt-5">{t("postsTagged")} "{tag}"</h1>
     <PostsList filteredPosts={filteredPosts} lang={Astro.currentLocale} />
   </SinglePageBlogMode>
 </MainLayout>

src/pages/[lang]/index.astro

@@ -5,9 +5,9 @@ import About from "../../components/About.astro";
 import Showcase from "../../components/Showcase.astro";
 
 //@ts-ignore
-import { dictionary } from "../../i18n/dictionary";
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 
-const { title, description } = dictionary[Astro.currentLocale];
+const t = useTranslations(getLangFromUrl(Astro.url));
 
 export async function getStaticPaths() {
   return ["en", "fr", "cs", "de"].map((lang) => {
@@ -15,7 +15,7 @@ export async function getStaticPaths() {
   });
 }
 ---
-<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="theme_auto">
+<MainLayout title={t("title")} description={t("description")} lang={Astro.currentLocale} themeOverride="theme_auto">
   <Hero />
   <About />
   <Showcase />

src/style/index.css

@@ -12,7 +12,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
             Light mode
         */
         --light-color-bkg: 0deg, 0%, 94%;
-        --light-color-bkgNavbar: 0deg, 0%, 20%;
+        --light-color-bkgNavbar: 0deg, 0%, 50%;
         --light-color-content: 240deg, 4%, 9%;
         --light-color-primary: 54deg, 100%, 50%;
         --light-color-secondary: 237deg, 100%, 93%;
@@ -25,8 +25,8 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --light-input: 214.3 31.8% 91.4%;
         --light-muted: 210 40% 96.1%;
         --light-muted-foreground: 215 17% 34%;
-        --light-popover: 0 0% 100%; /* merge to bkgNavbar */
+        --light-popover: 0 0% 100%; 
-        --light-popover-foreground: 222.2 47.4% 11.2%; /* merge to bkg */
+        --light-popover-foreground: 222.2 47.4% 11.2%; 
         --light-border: 214.3 31.8% 91.4%;
         --light-card: 0 0% 100%;
         --light-card-foreground: 222.2 47.4% 11.2%;
@@ -52,8 +52,8 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --dark-input: 216 34% 17%;
         --dark-muted: 0 0% 15%;
         --dark-muted-foreground: 215.4 31% 71%;
-        --dark-popover: 224 71% 4%; /* merge to bkgNavbar */
+        --dark-popover: 224 71% 4%; 
-        --dark-popover-foreground: 215 20.2% 65.1%; /* merge to bkg */
+        --dark-popover-foreground: 215 20.2% 65.1%; 
         --dark-border: 9 20% 21%;
         --dark-card: 0 0% 15%;
         --dark-card-foreground: 213 31% 91%;