From e7da8ab6df3268ad838249151cf3e25479dd73c3 Mon Sep 17 00:00:00 2001
From: Al Murad Uzzaman <murad.themefisher@gmail.com>
Date: Mon, 20 May 2024 12:15:34 +0600
Subject: [PATCH] slugSelector fn added

---
 src/layouts/PostSingle.astro               |  33 ++----
 src/layouts/components/AuthorCard.astro    |  21 +---
 src/layouts/components/BlogCard.astro      |  30 ++----
 src/layouts/components/Logo.astro          |  23 +---
 src/layouts/components/Pagination.astro    |  38 ++-----
 src/layouts/partials/Footer.astro          |  26 +----
 src/layouts/partials/Header.astro          |  38 ++-----
 src/layouts/partials/PostSidebar.astro     |  23 +---
 src/lib/contentParser.astro                |  16 ++-
 src/lib/languageParser.astro               | 118 +++++++++++++++++++++
 src/pages/404.astro                        |  15 +--
 src/pages/[...lang]/categories/index.astro |  26 +----
 src/pages/[...lang]/tags/index.astro       |  26 +----
 13 files changed, 181 insertions(+), 252 deletions(-)
 create mode 100644 src/lib/languageParser.astro

diff --git a/src/layouts/PostSingle.astro b/src/layouts/PostSingle.astro
index f4a95f1..9042b08 100755
--- a/src/layouts/PostSingle.astro
+++ b/src/layouts/PostSingle.astro
@@ -4,15 +4,14 @@ import Share from "@/components/Share.astro";
 import config from "@/config/config.json";
 import Disqus from "@/helpers/Disqus";
 import { getSinglePage } from "@/lib/contentParser.astro";
+import { slugSelector } from "@/lib/languageParser.astro";
 import dateFormat from "@/lib/utils/dateFormat";
-import { constructUrl } from "@/lib/utils/i18nUtils";
 import similarItems from "@/lib/utils/similarItems";
 import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
 import type { ContentEntryMap } from "astro:content";
 import { FaRegClock, FaRegFolder, FaRegUserCircle } from "react-icons/fa";
 import ImageMod from "./components/ImageMod.astro";
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
+const { default_language } = config.settings;
 
 const COLLECTION_FOLDER = "blog";
 const { post } = Astro.props;
@@ -24,29 +23,11 @@ if (!lang) {
 
 const posts = await getSinglePage(
   COLLECTION_FOLDER,
-  lang as keyof ContentEntryMap,
+  lang as keyof ContentEntryMap
 );
 const similarPosts = similarItems(post, posts);
 const { Content } = await post.render();
 const { title, description, author, categories, image, date, tags } = post.data;
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash,
-    );
-  } else {
-    return constructUrl(
-      url,
-      lang as keyof ContentEntryMap,
-      default_language,
-      trailing_slash,
-    );
-  }
-};
 ---
 
 <section class="section pt-7">
@@ -70,7 +51,7 @@ const constructLocalizedUrl = (url: string) => {
         <h1 set:html={markdownify(title)} class="h2 mb-4" />
         <ul class="mb-4">
           <li class="mr-4 inline-block">
-            <a href={constructLocalizedUrl(`/authors/${slugify(author)}`)}>
+            <a href={slugSelector(`/authors/${slugify(author)}`, lang)}>
               <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
               {humanize(author)}
             </a>
@@ -80,9 +61,7 @@ const constructLocalizedUrl = (url: string) => {
             {
               categories.map((category: string, index: number) => (
                 <a
-                  href={constructLocalizedUrl(
-                    `/categories/${slugify(category)}`,
-                  )}
+                  href={slugSelector(`/categories/${slugify(category)}`, lang)}
                 >
                   {humanize(category)}
                   {index !== categories.length - 1 && ","}
@@ -107,7 +86,7 @@ const constructLocalizedUrl = (url: string) => {
                   <li class="inline-block">
                     <a
                       class="m-1 block rounded bg-theme-light px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-theme-light dark:hover:bg-darkmode-primary dark:hover:text-dark"
-                      href={constructLocalizedUrl(`/tags/${slugify(tag)}`)}
+                      href={slugSelector(`/tags/${slugify(tag)}`, lang)}
                     >
                       {humanize(tag)}
                     </a>
diff --git a/src/layouts/components/AuthorCard.astro b/src/layouts/components/AuthorCard.astro
index 9f14be9..9f4a0e1 100644
--- a/src/layouts/components/AuthorCard.astro
+++ b/src/layouts/components/AuthorCard.astro
@@ -1,28 +1,13 @@
 ---
-import { constructUrl, getLangFromUrl } from "@/lib/utils/i18nUtils";
+import { slugSelector } from "@/lib/languageParser.astro";
+import { getLangFromUrl } from "@/lib/utils/i18nUtils";
 import { plainify } from "@/lib/utils/textConverter";
 import ImageMod from "./ImageMod.astro";
 import Social from "./Social.astro";
-import config from "@/config/config.json";
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
 
 const { data } = Astro.props;
 const { title, image, social } = data.data;
 const lang = getLangFromUrl(Astro.url);
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash,
-    );
-  } else {
-    return constructUrl(url, lang, default_language, trailing_slash);
-  }
-};
 ---
 
 <div
@@ -41,7 +26,7 @@ const constructLocalizedUrl = (url: string) => {
     )
   }
   <h4 class="mb-3">
-    <a href={constructLocalizedUrl(`/${data.slug}`)}>{title}</a>
+    <a href={slugSelector(`/${data.slug}`, lang)}>{title}</a>
   </h4>
   <p class="mb-4">
     {plainify(data.body?.slice(0, 100))}
diff --git a/src/layouts/components/BlogCard.astro b/src/layouts/components/BlogCard.astro
index 4b1ed73..de8a5dd 100644
--- a/src/layouts/components/BlogCard.astro
+++ b/src/layouts/components/BlogCard.astro
@@ -1,11 +1,8 @@
 ---
 import config from "@/config/config.json";
+import { slugSelector } from "@/lib/languageParser.astro";
 import dateFormat from "@/lib/utils/dateFormat";
-import {
-  constructUrl,
-  getLangFromUrl,
-  getTranslations,
-} from "@/lib/utils/i18nUtils";
+import { getLangFromUrl, getTranslations } from "@/lib/utils/i18nUtils";
 import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
 import type { ContentEntryMap } from "astro:content";
 import { FaRegFolder, FaRegUserCircle } from "react-icons/fa";
@@ -13,26 +10,11 @@ import ImageMod from "./ImageMod.astro";
 
 const { summary_length }: { summary_length: number; blog_folder: string } =
   config.settings;
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
 const { data } = Astro.props;
 const { title, image, date, author, categories } = data.data;
 
 const lang = getLangFromUrl(Astro.url);
 const { read_more } = await getTranslations(lang as keyof ContentEntryMap);
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash
-    );
-  } else {
-    return constructUrl(url, lang, default_language, trailing_slash);
-  }
-};
 ---
 
 <div class="bg-body dark:bg-darkmode-body">
@@ -49,13 +31,13 @@ const constructLocalizedUrl = (url: string) => {
     )
   }
   <h4 class="mb-3">
-    <a href={constructLocalizedUrl(`/${data.slug}`)}>
+    <a href={slugSelector(`/${data.slug}`, lang)}>
       {title}
     </a>
   </h4>
   <ul class="mb-4">
     <li class="mr-4 inline-block">
-      <a href={constructLocalizedUrl(`/authors/${slugify(author)}`)}>
+      <a href={slugSelector(`/authors/${slugify(author)}`, lang)}>
         <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
         {humanize(author)}
       </a>
@@ -65,7 +47,7 @@ const constructLocalizedUrl = (url: string) => {
       <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
       {
         categories.map((category: string, index: number) => (
-          <a href={constructLocalizedUrl(`/categories/${slugify(category)}`)}>
+          <a href={slugSelector(`/categories/${slugify(category)}`, lang)}>
             {humanize(category)}
             {index !== categories.length - 1 && ","}
           </a>
@@ -77,7 +59,7 @@ const constructLocalizedUrl = (url: string) => {
   <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
   <a
     class="btn btn-outline-primary btn-sm"
-    href={constructLocalizedUrl(`/${data.slug}`)}
+    href={slugSelector(`/${data.slug}`, lang)}
   >
     {read_more}
   </a>
diff --git a/src/layouts/components/Logo.astro b/src/layouts/components/Logo.astro
index 0f0ce1b..19c4f8b 100644
--- a/src/layouts/components/Logo.astro
+++ b/src/layouts/components/Logo.astro
@@ -1,6 +1,7 @@
 ---
 import config from "@/config/config.json";
-import { constructUrl, getLangFromUrl } from "@/lib/utils/i18nUtils";
+import { slugSelector } from "@/lib/languageParser.astro";
+import { getLangFromUrl } from "@/lib/utils/i18nUtils";
 import ImageMod from "./ImageMod.astro";
 
 const { src, srcDarkmode }: { src?: string; srcDarkmode?: string } =
@@ -22,33 +23,17 @@ const {
 } = config.site;
 
 const { theme_switcher }: { theme_switcher: boolean } = config.settings;
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
+const { default_language } = config.settings;
 
 let lang = getLangFromUrl(Astro.url);
 
-// Check if the current language is disabled
 const disabledLanguages = config.settings.disable_languages as string[];
 if (disabledLanguages.includes(lang)) {
-  // Redirect to the default language or handle as per your application logic
   lang = default_language;
 }
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash
-    );
-  } else {
-    return constructUrl(url, lang, default_language, trailing_slash);
-  }
-};
 ---
 
-<a href={constructLocalizedUrl("/")} class="navbar-brand inline-block">
+<a href={slugSelector("/", lang)} class="navbar-brand inline-block">
   {
     src || srcDarkmode || logo || logo_darkmode ? (
       <>
diff --git a/src/layouts/components/Pagination.astro b/src/layouts/components/Pagination.astro
index 8b9722c..e4e2f8f 100644
--- a/src/layouts/components/Pagination.astro
+++ b/src/layouts/components/Pagination.astro
@@ -1,9 +1,6 @@
 ---
-import { constructUrl, getLangFromUrl } from "@/lib/utils/i18nUtils";
-import config from "@/config/config.json";
-import type { ContentEntryMap } from "astro:content";
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
+import { slugSelector } from "@/lib/languageParser.astro";
+import { getLangFromUrl } from "@/lib/utils/i18nUtils";
 
 const lang = getLangFromUrl(Astro.url);
 
@@ -22,24 +19,6 @@ let pageList: number[] = [];
 for (let i = 1; i <= totalPages; i++) {
   pageList.push(i);
 }
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash,
-    );
-  } else {
-    return constructUrl(
-      url,
-      lang as keyof ContentEntryMap,
-      default_language,
-      trailing_slash,
-    );
-  }
-};
 ---
 
 {
@@ -53,9 +32,10 @@ const constructLocalizedUrl = (url: string) => {
         <a
           href={
             indexPageLink
-              ? constructLocalizedUrl(`/${section ? section : ""}`)
-              : constructLocalizedUrl(
+              ? slugSelector(`/${section ? section : ""}`, lang)
+              : slugSelector(
                   `/${section ? section : ""}/page/${currentPage - 1}`,
+                  lang
                 )
           }
           class="rounded px-2 py-1.5 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
@@ -105,24 +85,26 @@ const constructLocalizedUrl = (url: string) => {
           </span>
         ) : (
           <a
-            href={constructLocalizedUrl(
+            href={slugSelector(
               i === 0
                 ? `/${section ? section : ""}`
                 : `/${section ? section : ""}/page/${pagination}`,
+              lang
             )}
             aria-current="page"
             class="rounded px-4 py-2 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
           >
             {pagination}
           </a>
-        ),
+        )
       )}
 
       {/* next page */}
       {hasNextPage ? (
         <a
-          href={constructLocalizedUrl(
+          href={slugSelector(
             `/${section ? section : ""}/page/${currentPage + 1}`,
+            lang
           )}
           class="rounded px-2 py-1.5 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
         >
diff --git a/src/layouts/partials/Footer.astro b/src/layouts/partials/Footer.astro
index 0007f43..3e98bbb 100755
--- a/src/layouts/partials/Footer.astro
+++ b/src/layouts/partials/Footer.astro
@@ -3,17 +3,10 @@ import Logo from "@/components/Logo.astro";
 import Social from "@/components/Social.astro";
 import config from "@/config/config.json";
 import social from "@/config/social.json";
-import {
-  constructUrl,
-  getLangFromUrl,
-  getTranslations,
-} from "@/lib/utils/i18nUtils";
+import { slugSelector } from "@/lib/languageParser.astro";
+import { getLangFromUrl, getTranslations } from "@/lib/utils/i18nUtils";
 import { markdownify } from "@/lib/utils/textConverter";
 import type { ContentEntryMap } from "astro:content";
-import { getRelativeLocaleUrl } from "astro:i18n";
-
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
 
 const lang = getLangFromUrl(Astro.url);
 const menu = await getTranslations(lang as keyof ContentEntryMap);
@@ -21,19 +14,6 @@ let footer: any = [];
 if (menu) {
   footer = menu.footer;
 }
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash
-    );
-  } else {
-    return constructUrl(url, lang, default_language, trailing_slash);
-  }
-};
 ---
 
 <footer class="bg-theme-light dark:bg-darkmode-theme-light">
@@ -47,7 +27,7 @@ const constructLocalizedUrl = (url: string) => {
           {
             footer.map((menu: any) => (
               <li class="m-3 inline-block">
-                <a href={constructLocalizedUrl(menu.url)}>{menu.name}</a>
+                <a href={slugSelector(menu.url, lang)}>{menu.name}</a>
               </li>
             ))
           }
diff --git a/src/layouts/partials/Header.astro b/src/layouts/partials/Header.astro
index 94eefe7..91c04f7 100755
--- a/src/layouts/partials/Header.astro
+++ b/src/layouts/partials/Header.astro
@@ -4,11 +4,8 @@ import ThemeSwitcher from "@/components/ThemeSwitcher.astro";
 import config from "@/config/config.json";
 import languages from "@/config/language.json";
 import LanguageSwitcher from "@/helpers/LanguageSwitcher";
-import {
-  constructUrl,
-  getLangFromUrl,
-  getTranslations,
-} from "@/lib/utils/i18nUtils";
+import { slugSelector } from "@/lib/languageParser.astro";
+import { getLangFromUrl, getTranslations } from "@/lib/utils/i18nUtils";
 import type { ContentEntryMap } from "astro:content";
 import { IoSearch } from "react-icons/io5";
 
@@ -16,30 +13,14 @@ let lang = getLangFromUrl(Astro.url);
 const menu = await getTranslations(lang as keyof ContentEntryMap);
 
 const { navigation_button, settings } = config;
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
+const { default_language } = config.settings;
 const { pathname } = Astro.url;
 const { get_started } = await getTranslations(lang as keyof ContentEntryMap);
 
-// Check if the current language is disabled
 const disabledLanguages = config.settings.disable_languages as string[];
 if (disabledLanguages.includes(lang)) {
-  // Redirect to the default language or handle as per your application logic
   lang = default_language;
 }
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash
-    );
-  } else {
-    return constructUrl(url, lang, default_language, trailing_slash);
-  }
-};
 ---
 
 <header class={`header z-30 ${settings.sticky_header && "sticky top-0"}`}>
@@ -79,8 +60,8 @@ const constructLocalizedUrl = (url: string) => {
                 <span
                   class={`nav-link inline-flex items-center ${
                     menu.children
-                      ?.map(({ url }: { url: any }) =>
-                        constructLocalizedUrl(url)
+                      ?.map(({ url }: { url: string }) =>
+                        slugSelector(url, lang)
                       )
                       .includes(pathname)
                       ? "active"
@@ -96,11 +77,10 @@ const constructLocalizedUrl = (url: string) => {
                   {menu.children?.map((child: any) => (
                     <li class="nav-dropdown-item">
                       <a
-                        href={constructLocalizedUrl(child.url)}
+                        href={slugSelector(child.url, lang)}
                         aria-label={child.name}
                         class={`nav-dropdown-link block ${
-                          pathname === constructLocalizedUrl(child.url) &&
-                          "active"
+                          pathname === slugSelector(child.url, lang) && "active"
                         }`}
                       >
                         {child.name}
@@ -112,9 +92,9 @@ const constructLocalizedUrl = (url: string) => {
             ) : (
               <li class="nav-item">
                 <a
-                  href={constructLocalizedUrl(menu.url)}
+                  href={slugSelector(menu.url, lang)}
                   class={`nav-link block ${
-                    pathname === constructLocalizedUrl(menu.url) && "active"
+                    pathname === slugSelector(menu.url, lang) && "active"
                   }`}
                 >
                   {menu.name}
diff --git a/src/layouts/partials/PostSidebar.astro b/src/layouts/partials/PostSidebar.astro
index e67255c..c5c7562 100755
--- a/src/layouts/partials/PostSidebar.astro
+++ b/src/layouts/partials/PostSidebar.astro
@@ -1,25 +1,10 @@
 ---
-import config from "@/config/config.json";
-import { constructUrl, getLangFromUrl } from "@/lib/utils/i18nUtils";
+import { slugSelector } from "@/lib/languageParser.astro";
+import { getLangFromUrl } from "@/lib/utils/i18nUtils";
 import { humanize } from "@/lib/utils/textConverter";
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
 
 const { tags, categories, allCategories } = Astro.props;
 const lang = getLangFromUrl(Astro.url);
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash
-    );
-  } else {
-    return constructUrl(url, lang, default_language, trailing_slash);
-  }
-};
 ---
 
 <div class="lg:col-4">
@@ -37,7 +22,7 @@ const constructLocalizedUrl = (url: string) => {
               <li>
                 <a
                   class="flex justify-between hover:text-primary dark:hover:text-darkmode-primary"
-                  href={constructLocalizedUrl(`/categories/${category}`)}
+                  href={slugSelector(`/categories/${category}`, lang)}
                 >
                   {humanize(category)} <span>({count})</span>
                 </a>
@@ -59,7 +44,7 @@ const constructLocalizedUrl = (url: string) => {
               <li class="inline-block">
                 <a
                   class="m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
-                  href={constructLocalizedUrl(`/tags/${tag}`)}
+                  href={slugSelector(`/tags/${tag}`, lang)}
                 >
                   {humanize(tag)}
                 </a>
diff --git a/src/lib/contentParser.astro b/src/lib/contentParser.astro
index d7e852a..4e98a64 100644
--- a/src/lib/contentParser.astro
+++ b/src/lib/contentParser.astro
@@ -11,15 +11,14 @@ import languages from "@/config/language.json";
 
 export const getSinglePage = async <C extends CollectionKey>(
   collectionName: C,
-  lang: keyof ContentEntryMap | undefined,
+  lang: keyof ContentEntryMap | undefined
 ): Promise<CollectionEntry<C>[]> => {
   const { default_language } = config.settings;
 
-  // If lang is undefined, use the default language
   const selectedLanguageCode = lang || default_language;
 
   const language = languages.find(
-    (l: any) => l.languageCode === selectedLanguageCode,
+    (l: any) => l.languageCode === selectedLanguageCode
   );
 
   if (!language) {
@@ -28,12 +27,11 @@ export const getSinglePage = async <C extends CollectionKey>(
 
   const { contentDir } = language;
 
-  // Explicitly define the type of pages to CollectionEntry<C>[]
   const pages: CollectionEntry<C>[] = (await getCollection(
     contentDir as any,
     ({ id }: any) => {
       return id.startsWith(collectionName) && !id.endsWith("-index.md");
-    },
+    }
   )) as CollectionEntry<C>[];
 
   // @ts-ignore
@@ -44,15 +42,14 @@ export const getSinglePage = async <C extends CollectionKey>(
 
 export const getListPage = async <C extends CollectionKey>(
   collectionName: C,
-  lang: keyof ContentEntryMap | undefined,
+  lang: keyof ContentEntryMap | undefined
 ): Promise<CollectionEntry<C>[]> => {
   const { default_language } = config.settings;
 
-  // If lang is undefined, use the default language
   const selectedLanguageCode = lang || default_language;
 
   const language = languages.find(
-    (l: any) => l.languageCode == selectedLanguageCode,
+    (l: any) => l.languageCode == selectedLanguageCode
   );
 
   if (!language) {
@@ -61,12 +58,11 @@ export const getListPage = async <C extends CollectionKey>(
 
   const { contentDir } = language;
 
-  // Fetch the collection based on the language
   const pages: CollectionEntry<C>[] = (await getCollection(
     contentDir as any,
     ({ id }: any) => {
       return id.startsWith(collectionName);
-    },
+    }
   )) as CollectionEntry<C>[];
 
   return pages;
diff --git a/src/lib/languageParser.astro b/src/lib/languageParser.astro
new file mode 100644
index 0000000..1813460
--- /dev/null
+++ b/src/lib/languageParser.astro
@@ -0,0 +1,118 @@
+---
+import config from "@/config/config.json";
+import languagesJSON from "@/config/language.json";
+import { getRelativeLocaleUrl } from "astro:i18n";
+const { default_language } = config.settings;
+
+const locales: { [key: string]: any } = {};
+
+// Load menu and dictionary dynamically
+languagesJSON.forEach((language) => {
+  const { languageCode } = language;
+  import(`../../config/menu.${languageCode}.json`).then((menu) => {
+    import(`../../i18n/${languageCode}.json`).then((dictionary) => {
+      locales[languageCode] = { ...menu, ...dictionary };
+    });
+  });
+});
+
+// Extract all languages from the locales object
+const languages = Object.keys(locales);
+
+// Export the locales and languages
+export { languages, locales };
+
+export function getLangFromUrl(url: URL): string {
+  const [, lang] = url.pathname.split("/");
+  if (locales.hasOwnProperty(lang)) {
+    return lang;
+  }
+  return default_language;
+}
+
+export const getTranslations = async (lang: string) => {
+  const {
+    default_language,
+    disable_languages,
+  }: { default_language: string; disable_languages: string[] } =
+    config.settings;
+
+  if (disable_languages.includes(lang)) {
+    lang = default_language;
+  }
+
+  let language = languagesJSON.find((l) => l.languageCode === lang);
+
+  if (!language) {
+    lang = default_language;
+    language = languagesJSON.find((l) => l.languageCode === default_language);
+  }
+
+  if (!language) {
+    throw new Error("Default language not found");
+  }
+
+  const contentDir = language.contentDir;
+
+  let menu, dictionary;
+  try {
+    menu = await import(`../../config/menu.${lang}.json`);
+    dictionary = await import(`../../i18n/${lang}.json`);
+  } catch (error) {
+    menu = await import(`../../config/menu.${default_language}.json`);
+    dictionary = await import(`../../i18n/${default_language}.json`);
+  }
+
+  return { ...menu.default, ...dictionary.default, contentDir };
+};
+
+const supportedLang = ["", ...languagesJSON.map((lang) => lang.languageCode)];
+const disabledLanguages = config.settings.disable_languages as string[];
+
+const filteredSupportedLang = supportedLang.filter(
+  (lang) => !disabledLanguages.includes(lang)
+);
+
+export { filteredSupportedLang as supportedLang };
+
+export const slugSelector = (url: string, lang: string) => {
+  const { default_language, default_language_in_path } = config.settings;
+  const { trailing_slash } = config.site;
+
+  let constructedUrl;
+
+  // Determine the initial URL structure based on language
+  if (url === "/") {
+    constructedUrl = lang === default_language ? "/" : `/${lang}`;
+  } else {
+    constructedUrl = getRelativeLocaleUrl(lang, url, {
+      normalizeLocale: false,
+    });
+  }
+
+  // Adjust for trailing slash
+  if (trailing_slash) {
+    if (!constructedUrl.endsWith("/")) {
+      constructedUrl += "/";
+    }
+  } else {
+    if (constructedUrl.endsWith("/")) {
+      constructedUrl = constructedUrl.slice(0, -1);
+    }
+  }
+
+  // Ensure home URL is absolute
+  if (constructedUrl === "") {
+    constructedUrl = "/";
+  }
+
+  // Add language path if necessary
+  if (lang === default_language) {
+    constructedUrl = default_language_in_path
+      ? `/${lang}${constructedUrl}`
+      : constructedUrl;
+  }
+
+  return constructedUrl;
+};
+---
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 6756ec0..271f5a3 100755
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,14 +1,13 @@
 ---
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
+import { slugSelector } from "@/lib/languageParser.astro";
 import {
-  constructUrl,
   getLangFromUrl,
   getTranslations,
   supportedLang,
 } from "@/lib/utils/i18nUtils";
 import type { ContentEntryMap } from "astro:content";
-const { trailing_slash } = config.site;
 
 export function getStaticPaths() {
   const paths = supportedLang.map((lang) => ({
@@ -19,21 +18,13 @@ export function getStaticPaths() {
 
 let lang = getLangFromUrl(Astro.url);
 
-// Check if the current language is disabled
 const disabledLanguages = config.settings.disable_languages as string[];
 if (disabledLanguages.includes(lang)) {
-  // Redirect to the default language or handle as per your application logic
   lang = config.settings.default_language;
 }
 
 const { page_not_found_content, page_not_found, back_to_home } =
   await getTranslations(lang as keyof ContentEntryMap);
-const href = constructUrl(
-  "/",
-  lang,
-  config.settings.default_language,
-  trailing_slash
-);
 ---
 
 <Base title="Page Not Found">
@@ -50,7 +41,9 @@ const href = constructUrl(
           <div class="content">
             <p>{page_not_found_content}</p>
           </div>
-          <a href={href} class="btn btn-primary mt-8">{back_to_home}</a>
+          <a href={slugSelector("/", lang)} class="btn btn-primary mt-8"
+            >{back_to_home}</a
+          >
         </div>
       </div>
     </div>
diff --git a/src/pages/[...lang]/categories/index.astro b/src/pages/[...lang]/categories/index.astro
index c8af314..1b1c4b9 100755
--- a/src/pages/[...lang]/categories/index.astro
+++ b/src/pages/[...lang]/categories/index.astro
@@ -1,13 +1,13 @@
 ---
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
+import { slugSelector } from "@/lib/languageParser.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
-import { constructUrl, supportedLang } from "@/lib/utils/i18nUtils";
+import { supportedLang } from "@/lib/utils/i18nUtils";
 import { humanize } from "@/lib/utils/textConverter";
 import PageHeader from "@/partials/PageHeader.astro";
 import type { ContentEntryMap } from "astro:content";
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
+const { default_language } = config.settings;
 
 export function getStaticPaths() {
   const paths = supportedLang.map((lang) => ({
@@ -24,24 +24,6 @@ if (!lang) {
 const langCollection: keyof ContentEntryMap = lang as keyof ContentEntryMap;
 const categories = await getTaxonomy(langCollection, "categories");
 const allCategories = await getAllTaxonomy(langCollection, "categories");
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash,
-    );
-  } else {
-    return constructUrl(
-      url,
-      lang as keyof ContentEntryMap,
-      default_language,
-      trailing_slash,
-    );
-  }
-};
 ---
 
 <Base title={"Categories"}>
@@ -55,7 +37,7 @@ const constructLocalizedUrl = (url: string) => {
             return (
               <li class="m-3 inline-block">
                 <a
-                  href={constructLocalizedUrl(`/categories/${category}`)}
+                  href={slugSelector(`/categories/${category}`, lang)}
                   class="block rounded bg-theme-light px-4 py-2 text-xl text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark"
                 >
                   {humanize(category)}{" "}
diff --git a/src/pages/[...lang]/tags/index.astro b/src/pages/[...lang]/tags/index.astro
index 380957c..a6c2979 100644
--- a/src/pages/[...lang]/tags/index.astro
+++ b/src/pages/[...lang]/tags/index.astro
@@ -1,13 +1,13 @@
 ---
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
+import { slugSelector } from "@/lib/languageParser.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
-import { constructUrl, supportedLang } from "@/lib/utils/i18nUtils";
+import { supportedLang } from "@/lib/utils/i18nUtils";
 import { humanize } from "@/lib/utils/textConverter";
 import PageHeader from "@/partials/PageHeader.astro";
 import type { ContentEntryMap } from "astro:content";
-const { default_language, default_language_in_path } = config.settings;
-const { trailing_slash } = config.site;
+const { default_language } = config.settings;
 
 export function getStaticPaths() {
   const paths = supportedLang.map((lang) => ({
@@ -24,24 +24,6 @@ if (!lang) {
 const langCollection: keyof ContentEntryMap = lang as keyof ContentEntryMap;
 const tags = await getTaxonomy(langCollection, "tags");
 const allTags = await getAllTaxonomy(langCollection, "tags");
-
-const constructLocalizedUrl = (url: string) => {
-  if (lang === default_language) {
-    return constructUrl(
-      default_language_in_path ? `/${lang}${url}` : url,
-      lang,
-      default_language,
-      trailing_slash,
-    );
-  } else {
-    return constructUrl(
-      url,
-      lang as keyof ContentEntryMap,
-      default_language,
-      trailing_slash,
-    );
-  }
-};
 ---
 
 <Base title={"Tags"}>
@@ -55,7 +37,7 @@ const constructLocalizedUrl = (url: string) => {
             return (
               <li class="m-3 inline-block">
                 <a
-                  href={constructLocalizedUrl(`/tags/${tag}`)}
+                  href={slugSelector(`/tags/${tag}`, lang)}
                   class="block rounded bg-theme-light px-4 py-2 text-xl text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark"
                 >
                   {humanize(tag)}{" "}