worked with lang subdir

astro.config.mjs

@@ -7,6 +7,16 @@ import { defineConfig, squooshImageService } from "astro/config";
 import remarkCollapse from "remark-collapse";
 import remarkToc from "remark-toc";
 import config from "./src/config/config.json";
+import languagesJSON from "./src/config/language.json";
+const { default_language } = config.settings;
+
+const supportedLang = [...languagesJSON.map((lang) => lang.languageCode)];
+const disabledLanguages = config.settings.disable_languages;
+
+// Filter out disabled languages from supportedLang
+const filteredSupportedLang = supportedLang.filter(
+  (lang) => !disabledLanguages.includes(lang),
+);
 
 // https://astro.build/config
 export default defineConfig({
@@ -14,11 +24,8 @@ export default defineConfig({
   base: config.site.base_path ? config.site.base_path : "/",
   trailingSlash: config.site.trailing_slash ? "always" : "never",
   i18n: {
-    locales: ["en", "fr", "ar"],
-    defaultLocale: "en",
-    routing: {
-      prefixDefaultLocale: false,
-    },
+    locales: filteredSupportedLang,
+    defaultLocale: default_language,
   },
   image: {
     service: squooshImageService(),

src/config/config.json

@@ -21,7 +21,8 @@
     "summary_length": 200,
     "blog_folder": "blog",
     "default_language": "en",
-    "disable_languages": []
+    "disable_languages": [],
+    "default_language_in_path": false
   },
 
   "params": {

src/layouts/PostSingle.astro

@@ -5,12 +5,14 @@ import config from "@/config/config.json";
 import Disqus from "@/helpers/Disqus";
 import { getSinglePage } from "@/lib/contentParser.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 } = config.settings;
+const { default_language, default_language_in_path } = config.settings;
+const { trailing_slash } = config.site;
 
 const COLLECTION_FOLDER = "blog";
 const { post } = Astro.props;
@@ -18,11 +20,29 @@ const { lang } = Astro.params;
 
 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">
@@ -46,9 +66,7 @@ const { title, description, author, categories, image, date, tags } = post.data;
         <h1 set:html={markdownify(title)} class="h2 mb-4" />
         <ul class="mb-4">
           <li class="mr-4 inline-block">
-            <a
-              href={`/${lang === default_language ? "authors" + "/" : lang}/authors/${slugify(author)}`}
-            >
+            <a href={constructLocalizedUrl(`/authors/${slugify(author)}`)}>
               <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
               {humanize(author)}
             </a>
@@ -58,7 +76,9 @@ const { title, description, author, categories, image, date, tags } = post.data;
             {
               categories.map((category: string, index: number) => (
                 <a
-                  href={`/${lang === default_language ? "categories" + "/" : lang}/categories/${slugify(category)}`}
+                  href={constructLocalizedUrl(
+                    `/categories/${slugify(category)}`
+                  )}
                 >
                   {humanize(category)}
                   {index !== categories.length - 1 && ","}
@@ -83,7 +103,7 @@ const { title, description, author, categories, image, date, tags } = post.data;
                   <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={`/tags/${slugify(tag)}`}
+                      href={constructLocalizedUrl(`/tags/${slugify(tag)}`)}
                     >
                       {humanize(tag)}
                     </a>

src/layouts/components/BlogCard.astro

@@ -1,7 +1,11 @@
 ---
 import config from "@/config/config.json";
 import dateFormat from "@/lib/utils/dateFormat";
-import { getLangFromUrl, getTranslations } from "@/lib/utils/i18nUtils";
+import {
+  constructUrl,
+  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";
@@ -9,12 +13,26 @@ import ImageMod from "./ImageMod.astro";
 
 const { summary_length }: { summary_length: number; blog_folder: string } =
   config.settings;
-const { default_language } = 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">
@@ -31,26 +49,23 @@ const { read_more } = await getTranslations(lang as keyof ContentEntryMap);
     )
   }
   <h4 class="mb-3">
-    <a href={`${lang === default_language ? "" : `/${lang}`}/${data.slug}`}>
+    <a href={constructLocalizedUrl(`/${data.slug}`)}>
       {title}
     </a>
   </h4>
   <ul class="mb-4">
     <li class="mr-4 inline-block">
-      <a
-        href={`${lang === default_language ? "" : `/${lang}`}/authors/${slugify(author)}`}
-      >
+      <a href={constructLocalizedUrl(`/authors/${slugify(author)}`)}>
         <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
         {humanize(author)}
       </a>
     </li>
+
     <li class="mr-4 inline-block">
       <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
       {
         categories.map((category: string, index: number) => (
-          <a
-            href={`${lang === default_language ? "" : `/${lang}`}/categories/${slugify(category)}`}
-          >
+          <a href={constructLocalizedUrl(`/categories/${slugify(category)}`)}>
             {humanize(category)}
             {index !== categories.length - 1 && ","}
           </a>
@@ -62,7 +77,7 @@ const { read_more } = await getTranslations(lang as keyof ContentEntryMap);
   <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
   <a
     class="btn btn-outline-primary btn-sm"
-    href={`${lang === default_language ? "" : `/${lang}`}/${data.slug}`}
+    href={constructLocalizedUrl(`/${data.slug}`)}
   >
     {read_more}
   </a>

src/layouts/components/Logo.astro

@@ -22,7 +22,7 @@ const {
 } = config.site;
 
 const { theme_switcher }: { theme_switcher: boolean } = config.settings;
-const { default_language } = config.settings;
+const { default_language, default_language_in_path } = config.settings;
 const { trailing_slash } = config.site;
 
 let lang = getLangFromUrl(Astro.url);
@@ -34,10 +34,21 @@ if (disabledLanguages.includes(lang)) {
   lang = default_language;
 }
 
-const url = constructUrl("/", lang, default_language, trailing_slash);
+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={url} class="navbar-brand inline-block">
+<a href={constructLocalizedUrl("/")} class="navbar-brand inline-block">
   {
     src || srcDarkmode || logo || logo_darkmode ? (
       <>

src/layouts/partials/Footer.astro

@@ -3,17 +3,37 @@ 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 { getLangFromUrl, getTranslations } from "@/lib/utils/i18nUtils";
+import {
+  constructUrl,
+  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);
 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">
@@ -27,7 +47,7 @@ if (menu) {
           {
             footer.map((menu: any) => (
               <li class="m-3 inline-block">
-                <a href={getRelativeLocaleUrl(lang, menu.url)}>{menu.name}</a>
+                <a href={constructLocalizedUrl(menu.url)}>{menu.name}</a>
               </li>
             ))
           }

src/layouts/partials/Header.astro

@@ -16,7 +16,7 @@ let lang = getLangFromUrl(Astro.url);
 const menu = await getTranslations(lang as keyof ContentEntryMap);
 
 const { navigation_button, settings } = config;
-const { default_language } = config.settings;
+const { default_language, default_language_in_path } = config.settings;
 const { trailing_slash } = config.site;
 const { pathname } = Astro.url;
 const { get_started } = await getTranslations(lang as keyof ContentEntryMap);
@@ -27,6 +27,19 @@ 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"}`}>
@@ -67,12 +80,7 @@ if (disabledLanguages.includes(lang)) {
                   class={`nav-link inline-flex items-center ${
                     menu.children
                       ?.map(({ url }: { url: any }) =>
-                        constructUrl(
-                          url,
-                          lang,
-                          default_language,
-                          trailing_slash
-                        )
+                        constructLocalizedUrl(url)
                       )
                       .includes(pathname)
                       ? "active"
@@ -88,21 +96,11 @@ if (disabledLanguages.includes(lang)) {
                   {menu.children?.map((child: any) => (
                     <li class="nav-dropdown-item">
                       <a
-                        href={constructUrl(
-                          child.url,
-                          lang,
-                          default_language,
-                          trailing_slash
-                        )}
+                        href={constructLocalizedUrl(child.url)}
                         aria-label={child.name}
                         class={`nav-dropdown-link block ${
-                          pathname ===
-                            constructUrl(
-                              child.url,
-                              lang,
-                              default_language,
-                              trailing_slash
-                            ) && "active"
+                          pathname === constructLocalizedUrl(child.url) &&
+                          "active"
                         }`}
                       >
                         {child.name}
@@ -114,20 +112,9 @@ if (disabledLanguages.includes(lang)) {
             ) : (
               <li class="nav-item">
                 <a
-                  href={constructUrl(
-                    menu.url,
-                    lang,
-                    default_language,
-                    trailing_slash
-                  )}
+                  href={constructLocalizedUrl(menu.url)}
                   class={`nav-link block ${
-                    pathname ===
-                      constructUrl(
-                        menu.url,
-                        lang,
-                        default_language,
-                        trailing_slash
-                      ) && "active"
+                    pathname === constructLocalizedUrl(menu.url) && "active"
                   }`}
                 >
                   {menu.name}

src/layouts/partials/PostSidebar.astro

@@ -1,11 +1,25 @@
 ---
 import config from "@/config/config.json";
-import { getLangFromUrl } from "@/lib/utils/i18nUtils";
-import { humanize, slugify } from "@/lib/utils/textConverter";
-const { default_language } = config.settings;
+import { constructUrl, 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">
@@ -23,7 +37,7 @@ const lang = getLangFromUrl(Astro.url);
               <li>
                 <a
                   class="flex justify-between hover:text-primary dark:hover:text-darkmode-primary"
-                  href={`${lang === default_language ? "" : `/${lang}`}/categories/${slugify(category)}`}
+                  href={constructLocalizedUrl(`/categories/${category}`)}
                 >
                   {humanize(category)} <span>({count})</span>
                 </a>
@@ -45,7 +59,7 @@ const lang = getLangFromUrl(Astro.url);
               <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={`${lang === default_language ? "" : `/${lang}`}/tags/${slugify(tag)}`}
+                  href={constructLocalizedUrl(`/tags/${tag}`)}
                 >
                   {humanize(tag)}
                 </a>

src/lib/utils/i18nUtils.ts

@@ -1,5 +1,5 @@
-import config from "@/config/config.json";
-import languagesJSON from "@/config/language.json";
+import config from "../../config/config.json";
+import languagesJSON from "../../config/language.json";
 import { getRelativeLocaleUrl } from "astro:i18n";
 const { default_language } = config.settings;
 
@@ -29,21 +29,6 @@ export function getLangFromUrl(url: URL): string {
   return default_language;
 }
 
-// export const getTranslations = async (lang: string) => {
-//   const menu = await import(
-//     `../../config/menu.${lang || default_language}.json`
-//   );
-//   const dictionary = await import(
-//     `../../i18n/${lang || default_language}.json`
-//   );
-//   return { ...menu, ...dictionary };
-// };
-
-// export const supportedLang = [""].concat(
-//   languagesJSON.map((lang) => lang.languageCode),
-// );
-// Function to construct the URL based on trailing_slash value
-
 export const getTranslations = async (lang: string) => {
   const {
     default_language,

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

@@ -10,12 +10,12 @@ export async function getStaticPaths() {
 
   const paths = await Promise.all(
     supportedLang.map(async (lang) => {
-      const posts = await getSinglePage(
+      const posts: any = await getSinglePage(
         BLOG_FOLDER,
         lang as keyof ContentEntryMap
       );
 
-      return posts.map((post) => ({
+      return posts.map((post: any) => ({
         params: {
           lang: lang || undefined,
           single: post.slug.split("/").pop(),