breadcrumbs && jsonGenerator updated

scripts/jsonGenerator.js

@@ -1,45 +1,56 @@
 const fs = require("fs");
 const path = require("path");
 const matter = require("gray-matter");
+const languages = require("../src/config/language.json");
 
-const CONTENT_DEPTH = 2;
 const JSON_FOLDER = "./.json";
-const BLOG_FOLDER = "src/content/blog";
+const CONTENT_ROOT = "src/content";
+const CONTENT_DEPTH = 3;
+const BLOG_FOLDER = "blog";
 
 // get data from markdown
 const getData = (folder, groupDepth) => {
-  const getPath = fs.readdirSync(folder);
-  const removeIndex = getPath.filter((item) => !item.startsWith("-"));
+  // get paths
+  const getPaths = languages
+    .map((lang) => {
+      const dir = path.join(CONTENT_ROOT, lang.contentDir, folder);
+      return fs
+        .readdirSync(dir)
+        .filter(
+          (filename) =>
+            !filename.startsWith("-") &&
+            (filename.endsWith(".md") || filename.endsWith(".mdx")),
+        )
+        .map((filename) => {
+          const filepath = path.join(dir, filename);
+          const stats = fs.statSync(filepath);
+          const isFolder = stats.isDirectory();
 
-  const getPaths = removeIndex.flatMap((filename) => {
-    const filepath = path.join(folder, filename);
-    const stats = fs.statSync(filepath);
-    const isFolder = stats.isDirectory();
+          if (isFolder) {
+            return getData(filepath, groupDepth);
+          } else {
+            const file = fs.readFileSync(filepath, "utf-8");
+            const { data, content } = matter(file);
+            const pathParts = filepath.split(path.sep);
+            const slug =
+              data.slug ||
+              pathParts
+                .slice(CONTENT_DEPTH)
+                .join("/")
+                .replace(/\.[^/.]+$/, "");
+            const group = pathParts[groupDepth];
 
-    if (isFolder) {
-      return getData(filepath, groupDepth);
-    } else if (filename.endsWith(".md") || filename.endsWith(".mdx")) {
-      const file = fs.readFileSync(filepath, "utf-8");
-      const { data, content } = matter(file);
-      const pathParts = filepath.split(path.sep);
-      const slug =
-        data.slug ||
-        pathParts
-          .slice(CONTENT_DEPTH)
-          .join("/")
-          .replace(/\.[^/.]+$/, "");
-      const group = pathParts[groupDepth];
-
-      return {
-        group: group,
-        slug: slug,
-        frontmatter: data,
-        content: content,
-      };
-    } else {
-      return [];
-    }
-  });
+            return {
+              lang: lang.languageCode,
+              group: group,
+              slug: slug,
+              frontmatter: data,
+              content: content,
+            };
+          }
+        });
+    })
+    .flat();
 
   const publishedPages = getPaths.filter(
     (page) => !page.frontmatter?.draft && page,
@@ -56,7 +67,7 @@ try {
   // create json files
   fs.writeFileSync(
     `${JSON_FOLDER}/posts.json`,
-    JSON.stringify(getData(BLOG_FOLDER, 2)),
+    JSON.stringify(getData(BLOG_FOLDER, 3)),
   );
 
   // merger json files for search

src/config/language.json

@@ -0,0 +1,20 @@
+[
+  {
+    "languageName": "En",
+    "languageCode": "en",
+    "contentDir": "en",
+    "weight": 1
+  },
+  {
+    "languageName": "Fr",
+    "languageCode": "fr",
+    "contentDir": "fr",
+    "weight": 2
+  },
+  {
+    "languageName": "Ar",
+    "languageCode": "ar",
+    "contentDir": "ar",
+    "weight": 3
+  }
+]

src/layouts/components/Breadcrumbs.astro

@@ -1,19 +1,28 @@
 ---
 import { humanize } from "@/lib/utils/textConverter";
+import config from "@/config/config.json";
+
+const { supported } = config.language;
 
 const { className }: { className?: string } = Astro.props;
 
 const paths = Astro.url.pathname.split("/").filter((x) => x);
+
+let lang = "";
+if (supported.includes(paths[0])) {
+  lang = paths.shift()!;
+}
+
 let parts = [
   {
     label: "Home",
-    href: "/",
-    "aria-label": Astro.url.pathname === "/" ? "page" : undefined,
+    href: `/${lang}`,
+    "aria-label": Astro.url.pathname === `/${lang}` || Astro.url.pathname === `/${lang}/` ? "page" : undefined,
   },
 ];
 
 paths.forEach((label: string, i: number) => {
-  const href = `/${paths.slice(0, i + 1).join("/")}`;
+  const href = `/${lang}/${paths.slice(0, i + 1).join("/")}`;
   label !== "page" &&
     parts.push({
       label: humanize(label.replace(".html", "").replace(/[-_]/g, " ")) || "",
@@ -21,6 +30,7 @@ paths.forEach((label: string, i: number) => {
       "aria-label": Astro.url.pathname === href ? "page" : undefined,
     });
 });
+
 ---
 
 <nav aria-label="Breadcrumb" class={className}>
@@ -28,7 +38,7 @@ paths.forEach((label: string, i: number) => {
     {
       parts.map(({ label, ...attrs }, index) => (
         <li class="mx-1 capitalize" role="listitem">
-          {index > 0 && <span class="inlin-block mr-1">/</span>}
+          {index > 0 && <span class="inline-block mr-1">/</span>}
           {index !== parts.length - 1 ? (
             <a class="text-primary dark:text-darkmode-primary" {...attrs}>
               {label}