Merge pull request #78 from GalsenDev221/dev

(FEAT) / Fix error deployment and some update ✅

.gitignore

@@ -37,4 +37,4 @@ next-env.d.ts
 .env*.local
 
 # lock files
-package-lock.json
+pnpm-lock.yaml

app/components/[componentName]/page.tsx

@@ -1,64 +1,78 @@
-// "use client";
 import { promises as fs } from "fs";
 import { serialize } from "next-mdx-remote/serialize";
 import RemoteMdxWrapper from "@/components/Mdx/RemoteMdxWrapper";
 import RenderHTMLFiles from "@/components/galsenUiComponents/RenderHTMLFiles";
 import H1 from "@/components/Mdx/H1";
-// import ErrorMessage from "@/components/Error/ErrorMessage";
 import Link from "next/link";
+import path from "path";
 
 type PageProps = {
   params: { componentName: string };
 };
 
-// TODO: I'll be back to refactor: Because components should not handle logic
 export default async function Page({ params }: PageProps) {
-  // <ErrorMessage message="Veuillez vérifier si cette catégorie de composants existe." />
-
-  // <ErrorMessage
-  // title="Erreur de connexion"
-  // message="Impossible de se connecter au serveur. Veuillez réessayer."
-  //   dismissible
-  //   onDismiss={() => console.log('Message fermé')}
-  //   className="my-8"
-  // />
-
-  // TODO: recuperer les titres et description de chaque composant
-  const componentsData = await fs.readFile(
-    process.cwd() +
-      `/src/data/components/galsen-ui-${params.componentName}.mdx`,
-    "utf8"
+  const componentMdxPath = path.join(
+    process.cwd(),
+    "public",
+    "data",
+    "components",
+    `galsen-ui-${params.componentName}.mdx`
   );
-  const mdxSource = await serialize(componentsData, { parseFrontmatter: true });
 
-  const componentHTMLFiles = await fs.readdir(
-    process.cwd() + `/public/components/${params.componentName}`,
-    "utf8"
-  );
+  // TODO: Need refactor: Implemented error handling but it should be optimized
+  try {
+    const componentsData = await fs.readFile(componentMdxPath, "utf8");
+    const mdxSource = await serialize(componentsData, {
+      parseFrontmatter: true,
+    });
 
-  const mdxScope = {
-    files: componentHTMLFiles,
-    componentSlug: params.componentName,
-    components: mdxSource.frontmatter.components,
-  };
+    const componentHTMLFiles = await fs.readdir(
+      path.join(process.cwd(), "public", "components", params.componentName),
+      "utf8"
+    );
 
-  return (
-    <main className="">
-      <section className="px-4 py-16 sm:max-w-7xl sm:mx-auto">
-        <Link href="/" passHref>
-          <button className="py-2 px-4 mb-3 bg-blue-500 text-white rounded hover:bg-blue-600">
-            Retour
-          </button>
-        </Link>
-        <RemoteMdxWrapper
-          mdxSource={mdxSource}
-          mdxScope={mdxScope}
-          mdxComponents={{
-            h1: H1,
-            RenderHTMLFiles,
-          }}
-        />
-      </section>
-    </main>
-  );
+    const mdxScope = {
+      files: componentHTMLFiles,
+      componentSlug: params.componentName,
+      components: mdxSource.frontmatter.components,
+    };
+
+    return (
+      <main className="">
+        <section className="px-4 py-16 sm:max-w-7xl sm:mx-auto">
+          <Link href="/" passHref>
+            <button className="py-2 px-4 mb-3 bg-blue-500 text-white rounded hover:bg-blue-600">
+              Retour
+            </button>
+          </Link>
+          <RemoteMdxWrapper
+            mdxSource={mdxSource}
+            mdxScope={mdxScope}
+            mdxComponents={{
+              h1: H1,
+              RenderHTMLFiles,
+            }}
+          />
+        </section>
+      </main>
+    );
+  } catch (error) {
+    console.error(
+      `Erreur lors de la lecture du fichier MDX pour ${params.componentName}:`,
+      error
+    );
+    return (
+      <main>
+        <section className="px-4 py-16 text-center">
+          <h1 className="text-4xl font-extrabold text-red-600">
+            Erreur de chargement
+          </h1>
+          <p>
+            Le composant spécifié est introuvable ou une erreur s&apos;est
+            produite.
+          </p>
+        </section>
+      </main>
+    );
+  }
 }

app/page.tsx

@@ -8,7 +8,9 @@ import { GalsenUiComponentGroup } from "@/types/Component";
 async function getComponents() {
   const galsenUiComponentsPath = path.join(
     process.cwd(),
-    "/src/data/components"
+    "public",
+    "data",
+    "components"
   );
 
   const galsenUiComponentsFiles = await fs.readdir(galsenUiComponentsPath);
@@ -17,29 +19,36 @@ async function getComponents() {
     galsenUiComponentsFiles.map(async (file) => {
       const galsenUiComponentPath = path.join(galsenUiComponentsPath, file);
 
-      const galsenUiComponentMdxContent = await fs.readFile(
-        galsenUiComponentPath,
-        "utf8"
-      );
-      const { frontmatter: galsenUiComponentSerializedContent } =
-        await serialize<string, GalsenUiComponentGroup>(
-          galsenUiComponentMdxContent,
-          { parseFrontmatter: true }
+      try {
+        const galsenUiComponentMdxContent = await fs.readFile(
+          galsenUiComponentPath,
+          "utf8"
         );
+        const { frontmatter: galsenUiComponentSerializedContent } =
+          await serialize<string, GalsenUiComponentGroup>(
+            galsenUiComponentMdxContent,
+            {
+              parseFrontmatter: true,
+            }
+          );
 
-      const galsenUiGroupComponentsCount = Object.values(
-        galsenUiComponentSerializedContent.components
-      ).length;
+        const galsenUiGroupComponentsCount = Object.values(
+          galsenUiComponentSerializedContent.components
+        ).length;
 
-      return {
-        ...galsenUiComponentSerializedContent,
-        count: galsenUiGroupComponentsCount,
-        slug: file.replace("galsen-ui-", "").replace(".mdx", ""),
-      };
+        return {
+          ...galsenUiComponentSerializedContent,
+          count: galsenUiGroupComponentsCount,
+          slug: file.replace("galsen-ui-", "").replace(".mdx", ""),
+        };
+      } catch (error) {
+        console.error(`Erreur lors de la lecture du fichier ${file}:`, error);
+        return null;
+      }
     })
   );
 
-  return components as unknown as GalsenUiComponentGroup[];
+  return components.filter(Boolean) as GalsenUiComponentGroup[];
 }
 
 export default async function Home() {

components/Navbar.tsx

@@ -1,23 +1,22 @@
-import { ACCUEIL_PATH, COMPONENTS_PATH } from "@/routes";
+import { HomePath, ComponentsPath } from "@/routes";
 import Link from "next/link";
 import Logo from "./Logo";
 
 export default function Navbar() {
   return (
     <header className="py-5">
       <nav className="px-4 flex items-center justify-between sm:max-w-7xl sm:mx-auto">
-        <Link href={ACCUEIL_PATH}>
+        <Link href={HomePath}>
           <Logo />
         </Link>
 
         {/* TODO: do we need this for now? */}
         <ul className="inline-flex items-center gap-3">
-          {/* TODO: add correct links */}
           <li>
-            <Link href={ACCUEIL_PATH}>Accueil</Link>
+            <Link href={HomePath}>Accueil</Link>
           </li>
           <li>
-            <Link href={COMPONENTS_PATH}>Components</Link>
+            <Link href={ComponentsPath}>Components</Link>
           </li>
         </ul>
       </nav>