project setup

src/layouts/components/AuthorCard.astro

@@ -1,10 +1,12 @@
 ---
+import { getLangFromUrl } from "@/lib/utils/i18nUtils";
 import { plainify } from "@/lib/utils/textConverter";
 import ImageMod from "./ImageMod.astro";
 import Social from "./Social.astro";
 
 const { data } = Astro.props;
 const { title, image, social } = data.data;
+const lang = getLangFromUrl(Astro.url);
 ---
 
 <div
@@ -23,7 +25,9 @@ const { title, image, social } = data.data;
     )
   }
   <h4 class="mb-3">
-    <a href={`/authors/${data.slug}`}>{title}</a>
+    <a href={`/${lang === "en" ? "authors" + "/" : lang}/${data.slug}`}
+      >{title}</a
+    >
   </h4>
   <p class="mb-4">
     {plainify(data.body?.slice(0, 100))}

src/layouts/components/BlogCard.astro

@@ -4,6 +4,7 @@ import dateFormat from "@/lib/utils/dateFormat";
 import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
 import { FaRegFolder, FaRegUserCircle } from "react-icons/fa";
 import ImageMod from "./ImageMod.astro";
+import { getLangFromUrl } from "@/lib/utils/i18nUtils";
 
 const {
   summary_length,
@@ -11,6 +12,9 @@ const {
 }: { summary_length: number; blog_folder: string } = config.settings;
 const { data } = Astro.props;
 const { title, image, date, author, categories } = data.data;
+
+const lang = getLangFromUrl(Astro.url);
+const path = Astro.url.pathname;
 ---
 
 <div class="bg-body dark:bg-darkmode-body">
@@ -27,13 +31,17 @@ const { title, image, date, author, categories } = data.data;
     )
   }
   <h4 class="mb-3">
-    <a href={`/${blog_folder}/${data.slug}`}>
+    <a
+      href={path.includes("/categories")
+        ? `/${lang === "en" ? "/" : lang}/blog/${data.slug}`
+        : `/${lang === "en" ? "/" : lang}/${data.slug}`}
+    >
       {title}
     </a>
   </h4>
   <ul class="mb-4">
     <li class="mr-4 inline-block">
-      <a href={`/authors/${slugify(author)}`}>
+      <a href={`/${lang}/authors/${slugify(author)}`}>
         <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
         {humanize(author)}
       </a>
@@ -42,7 +50,7 @@ const { title, image, date, author, categories } = data.data;
       <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
       {
         categories.map((category: string, index: number) => (
-          <a href={`/categories/${slugify(category)}`}>
+          <a href={`/${lang}/categories/${slugify(category)}`}>
             {humanize(category)}
             {index !== categories.length - 1 && ","}
           </a>
@@ -54,7 +62,9 @@ const { title, image, date, author, categories } = data.data;
   <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
   <a
     class="btn btn-outline-primary btn-sm"
-    href={`/${blog_folder}/${data.slug}`}
+    href={path.includes("/categories")
+    ? `/${lang === "en" ? "/" : lang}/blog/${data.slug}`
+    : `/${lang === "en" ? "/" : lang}/${data.slug}`}
   >
     read more
   </a>

src/layouts/components/Pagination.astro

@@ -1,10 +1,18 @@
 ---
+import { getLangFromUrl } from "@/lib/utils/i18nUtils";
+
+const lang = getLangFromUrl(Astro.url);
+
 type Pagination = {
   section?: string;
   currentPage?: number;
   totalPages?: number;
 };
-const { section, currentPage = 1, totalPages = 1 }: Pagination = Astro.props;
+const {
+  section,
+  currentPage = 1,
+  totalPages = 1
+}: Pagination = Astro.props;
 
 const indexPageLink = currentPage === 2;
 const hasPrevPage = currentPage > 1;
@@ -27,8 +35,8 @@ for (let i = 1; i <= totalPages; i++) {
         <a
           href={
             indexPageLink
-              ? `${section ? "/" + section : "/"}`
-              : `${section ? "/" + section : ""}/page/${currentPage - 1}`
+              ? `/${lang}/${section ? section : ""}`
+              : `/${lang}/${section ? section : ""}/page/${currentPage - 1}`
           }
           class="rounded px-2 py-1.5 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
         >
@@ -79,8 +87,8 @@ for (let i = 1; i <= totalPages; i++) {
           <a
             href={
               i === 0
-                ? `${section ? "/" + section : "/"}`
-                : `${section ? "/" + section : ""}/page/${pagination}`
+                ? `/${lang}/${section ? section : ""}`
+                : `/${lang}/${section ? section : ""}/page/${pagination}`
             }
             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"
@@ -93,7 +101,7 @@ for (let i = 1; i <= totalPages; i++) {
       {/* next page */}
       {hasNextPage ? (
         <a
-          href={`${section ? "/" + section : ""}/page/${currentPage + 1}`}
+          href={`/${lang}/${section ? section : ""}/page/${currentPage + 1}`}
           class="rounded px-2 py-1.5 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
         >
           <span class="sr-only">Next</span>
@@ -132,3 +140,4 @@ for (let i = 1; i <= totalPages; i++) {
     </nav>
   )
 }
+