feat: mdx playground + height full on layout

incubateur-ademe · Nov 26, 2024 · a0beb24 · a0beb24
1 parent 391c76b
commit a0beb24
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 71 deletions.
diff --git a/src/app/debug/MdxPlayground/page.tsx b/src/app/debug/MdxPlayground/page.tsx
@@ -1,56 +1,55 @@
 "use client";
 
-import { MDXProvider } from "@mdx-js/react";
-import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote";
-import { serialize } from "next-mdx-remote/serialize";
+import { compileMDX } from "next-mdx-remote/rsc";
 import { type ChangeEvent, useState } from "react";
 
-const MdxPlayground = () => {
+import { defaultMdxComponents } from "@/mdx-components";
+
+export default function MDXEditorPage() {
   const [mdxContent, setMdxContent] = useState<string>("");
-  const [renderedContent, setRenderedContent] = useState<MDXRemoteSerializeResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [renderedContent, setRenderedContent] = useState<React.ReactNode | null>(null);
 
-  const handleMdxChange = async (event: ChangeEvent<HTMLTextAreaElement>) => {
-    const content = event.target.value;
-    setMdxContent(content);
-    setError(null);
+  const handleRender = async (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const mdxContent = event.target.value;
+    setMdxContent(mdxContent);
 
     try {
-      setRenderedContent(await serialize(content));
+      const { content } = await compileMDX({
+        source: mdxContent,
+        components: defaultMdxComponents,
+        options: {
+          parseFrontmatter: false,
+        },
+      });
+
+      setRenderedContent(content);
     } catch (error) {
-      console.error(error);
+      console.error("MDX Compilation Error:", error);
 
-      if (error instanceof Error) {
-        setError(error.toString());
-      }
-      setRenderedContent(null);
-      return;
+      setRenderedContent(
+        <div className="text-red-500">
+          <p>Error rendering MDX</p>
+          {error instanceof Error && <p>{error.toString()}</p>}
+        </div>,
+      );
     }
   };
 
   return (
-    <div className="flex min-h-full col-span-3">
-      <textarea
-        className="w-1/2 h-full p-4 text-lg"
-        value={mdxContent}
-        onChange={event => {
-          handleMdxChange(event).catch(console.error);
-        }}
-        placeholder="Enter your MDX content here..."
-      />
-      <div className="w-1/2 h-full p-4 overflow-y-auto bg-gray-100">
-        <MDXProvider>
-          {error ? (
-            <p className="text-red-500">{error}</p>
-          ) : renderedContent ? (
-            <MDXRemote {...renderedContent} />
-          ) : (
-            <p>Enter MDX content to see the rendered output.</p>
-          )}
-        </MDXProvider>
+    <div className="flex h-full col-span-3">
+      <div className="w-1/2 p-4 h-full bg-gray-100">
+        <textarea
+          className="w-full h-full p-2 border rounded"
+          value={mdxContent}
+          onChange={event => {
+            handleRender(event).catch(console.error);
+          }}
+          placeholder="Write your MDX here. "
+        />
+      </div>
+      <div className="w-1/2 p-4 bg-white h-full overflow-x-hidden overflow-y-auto">
+        <div className="border p-4">{renderedContent}</div>
       </div>
     </div>
   );
-};
-
-export default MdxPlayground;
+}
diff --git a/src/app/debug/MdxPlaygroundOld/page.tsx b/src/app/debug/MdxPlaygroundOld/page.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { MDXProvider } from "@mdx-js/react";
+import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote";
+import { serialize } from "next-mdx-remote/serialize";
+import { type ChangeEvent, useState } from "react";
+
+const MdxPlayground = () => {
+  const [mdxContent, setMdxContent] = useState<string>("");
+  const [renderedContent, setRenderedContent] = useState<MDXRemoteSerializeResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleMdxChange = async (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const content = event.target.value;
+    setMdxContent(content);
+    setError(null);
+
+    try {
+      setRenderedContent(await serialize(content));
+    } catch (error) {
+      console.error(error);
+
+      if (error instanceof Error) {
+        setError(error.toString());
+      }
+      setRenderedContent(null);
+      return;
+    }
+  };
+
+  return (
+    <div className="flex min-h-full col-span-3">
+      <textarea
+        className="w-1/2 h-full p-4 text-lg"
+        value={mdxContent}
+        onChange={event => {
+          handleMdxChange(event).catch(console.error);
+        }}
+        placeholder="Enter your MDX content here..."
+      />
+      <div className="w-1/2 h-full p-4 overflow-y-auto bg-gray-100">
+        <MDXProvider>
+          {error ? (
+            <p className="text-red-500">{error}</p>
+          ) : renderedContent ? (
+            <MDXRemote {...renderedContent} />
+          ) : (
+            <p>Enter MDX content to see the rendered output.</p>
+          )}
+        </MDXProvider>
+      </div>
+    </div>
+  );
+};
+
+export default MdxPlayground;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -44,7 +44,11 @@ export const metadata: Metadata = {
 
 const RootLayout = ({ children }: PropsWithChildren) => {
   return (
-    <html lang="fr" {...getHtmlAttributes({ defaultColorScheme, lang: "fr" })} className={cx(GeistSans.variable)}>
+    <html
+      lang="fr"
+      {...getHtmlAttributes({ defaultColorScheme, lang: "fr" })}
+      className={cx(GeistSans.variable, "h-full")}
+    >
       <head>
         <StartDsfr />
         <DsfrHead
@@ -68,7 +72,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
           <Matomo env={config.env} />
         </Suspense>
       </head>
-      <body>
+      <body className="h-full">
         <DsfrProvider lang="fr">
           <NextAppDirEmotionCacheProvider options={{ key: "css" }}>
             <MuiDsfrThemeProvider>
@@ -93,7 +97,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
               {/* <Banner
             title={<>Le simulateur est en construction. Inscrivez-vous et nous vous préviendrons lors de sa sortie.</>}
           /> */}
-              <div className="min-h-full">
+              <div className="min-h-full flex flex-col">
                 {/* <Header
               brandTop={<Brand />}
               homeLinkProps={{
@@ -116,7 +120,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
                 <main
                   role="main"
                   id={contentId}
-                  className="grid grid-cols-[16px_1fr_16px] md:grid-cols-[minmax(90px,_1fr)_minmax(320px,_1200px)_minmax(90px,_1fr)] lg:grid-cols-[minmax(120px,_1fr)_minmax(320px,_1200px)_minmax(120px,_1fr)] xl:grid-cols-[minmax(180px,_1fr)_minmax(900px,_1200px)_minmax(180px,_1fr)] gap-y-12 md:gap-y-24"
+                  className="flex-grow grid grid-cols-[16px_1fr_16px] md:grid-cols-[minmax(90px,_1fr)_minmax(320px,_1200px)_minmax(90px,_1fr)] lg:grid-cols-[minmax(120px,_1fr)_minmax(320px,_1200px)_minmax(120px,_1fr)] xl:grid-cols-[minmax(180px,_1fr)_minmax(900px,_1200px)_minmax(180px,_1fr)] gap-y-12 md:gap-y-24"
                 >
                   {children}
                 </main>

diff --git a/src/components/PacoupaHeader.tsx b/src/components/PacoupaHeader.tsx
@@ -9,25 +9,27 @@ import styles from "./PacoupaHeader.module.scss";
 
 export const PacoupaHeader = () => {
   return (
-    <Header
-      brandTop={<Brand />}
-      homeLinkProps={{
-        href: "/",
-        title: `Accueil - ${config.name}`,
-      }}
-      operatorLogo={{
-        alt: "Logo de l'opérateur",
-        imgUrl: "/img/ademe.svg",
-        orientation: "vertical",
-      }}
-      serviceTitle={
-        <>
-          <span className="inline-block align-middle">
-            <Logo />
-          </span>
-          <span className={cx(styles.title, "ml-2")}>{config.name}</span>
-        </>
-      }
-    />
+    <div>
+      <Header
+        brandTop={<Brand />}
+        homeLinkProps={{
+          href: "/",
+          title: `Accueil - ${config.name}`,
+        }}
+        operatorLogo={{
+          alt: "Logo de l'opérateur",
+          imgUrl: "/img/ademe.svg",
+          orientation: "vertical",
+        }}
+        serviceTitle={
+          <>
+            <span className="inline-block align-middle">
+              <Logo />
+            </span>
+            <span className={cx(styles.title, "ml-2")}>{config.name}</span>
+          </>
+        }
+      />
+    </div>
   );
 };
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
@@ -50,16 +50,20 @@ export const paragraphContentMDXComponents: MDXComponents = {
   p: Fragment,
 };
 
+export const defaultMdxComponents: MDXComponents = {
+  a: MdxLink,
+  CTA,
+  Card,
+  Details,
+  Question,
+  Reponse,
+  Separateur,
+  ...anchorHeadingMDXComponents,
+};
+
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
-    a: MdxLink,
-    CTA,
-    Card,
-    Details,
-    Question,
-    Reponse,
-    Separateur,
-    ...anchorHeadingMDXComponents,
+    ...defaultMdxComponents,
     ...components,
   };
 }