feat: add startup mdx (#1039)

next.config.js

@@ -1,16 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
+  experimental: { mdxRs: true },
+  images: { unoptimized: true },
   webpack: (config) => {
     config.module.rules.push({
       test: /\.woff2$/,
       type: "asset/resource",
     })
     return config
   },
-  images: {
-    unoptimized: true,
-  },
 }
 
-module.exports = nextConfig
+const withMDX = require("@next/mdx")()
+module.exports = withMDX(nextConfig)

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@codegouvfr/react-dsfr": "0.73.2",
+    "@next/mdx": "13.4.13",
     "@types/node": "20.4.6",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",

src/app/startups/[id]/get-local-content.tsx

@@ -0,0 +1,12 @@
+import fs from "fs"
+import path from "path"
+
+export default function getLocalContent(id: string) {
+  const filePath = path.join(process.cwd(), `src/content/startups/${id}.mdx`)
+
+  if (fs.existsSync(filePath)) {
+    return fs.readFileSync(filePath, "utf8")
+  }
+
+  return null
+}

src/app/startups/[id]/local-content.tsx

@@ -0,0 +1,18 @@
+import MDXComponent from "@/utils/mdx-component"
+import getLocalContent from "./get-local-content"
+
+export default function LocalContent({ id }: { id: string }) {
+  const markdown = getLocalContent(id)
+
+  return (
+    <>
+      {markdown ? (
+        <div className="fr-py-6w">
+          <div className="fr-container">
+            <MDXComponent markdown={markdown} />
+          </div>
+        </div>
+      ) : null}
+    </>
+  )
+}

src/app/startups/[id]/page.tsx

@@ -1,11 +1,11 @@
 import Image from "next/image"
-import { remark } from "remark"
+
 import { fr } from "@codegouvfr/react-dsfr"
-import type { MDXComponents } from "mdx/types"
-import { MDXRemote } from "next-mdx-remote/rsc"
 
 import getStartup from "./get-startup"
 import getStartups from "../get-startups"
+import RemoteContent from "./remote-content"
+import LocalContent from "./local-content"
 
 export async function generateStaticParams() {
   const startups = getStartups()
@@ -21,6 +21,8 @@ export default async function Details({
   params: { id: string }
 }) {
   const startup = getStartup(id)
+  const theme = fr.getColors(false)
+  const blueCumulus = theme.decisions.background.alt.blueCumulus.default
 
   const {
     attributes: {
@@ -36,36 +38,6 @@ export default async function Details({
     },
   } = startup
 
-  const markdown = await remark().process(
-    decodeURIComponent(content_url_encoded_markdown)
-  )
-
-  const component = {
-    h1: ({ children }: { children: React.ReactNode }) => (
-      <h1 className="fr-h1">{children}</h1>
-    ),
-    h2: ({ children }: { children: React.ReactNode }) => (
-      <h2 className="fr-h2">{children}</h2>
-    ),
-    h3: ({ children }: { children: React.ReactNode }) => (
-      <h2 className="fr-h3">{children}</h2>
-    ),
-    p: ({ children }: { children: React.ReactNode }) => (
-      <p className="mb-6">{children}</p>
-    ),
-    ul: ({ children }: { children: React.ReactNode }) => (
-      <ul className="mb-6">{children}</ul>
-    ),
-    a: ({ children, ...props }: { children: React.ReactNode }) => (
-      <a {...props} target="_blank" rel="noopener">
-        {children}
-      </a>
-    ),
-  } as MDXComponents
-
-  const theme = fr.getColors(false)
-  const blueCumulus = theme.decisions.background.alt.blueCumulus.default
-
   return (
     <div className="startups-details">
       <div className="fr-py-6w">
@@ -116,11 +88,10 @@ export default async function Details({
         </div>
       </div>
 
-      <div className="fr-py-6w">
-        <div className="fr-container">
-          <MDXRemote source={markdown} components={component} />
-        </div>
-      </div>
+      <LocalContent id={id} />
+      <RemoteContent
+        content_url_encoded_markdown={content_url_encoded_markdown}
+      />
     </div>
   )
 }

src/app/startups/[id]/remote-content.tsx

@@ -0,0 +1,21 @@
+import { remark } from "remark"
+
+import MDXComponent from "@/utils/mdx-component"
+
+export default async function RemoteContent({
+  content_url_encoded_markdown,
+}: {
+  content_url_encoded_markdown: string
+}) {
+  const markdown = await remark().process(
+    decodeURIComponent(content_url_encoded_markdown)
+  )
+
+  return (
+    <div className="fr-py-6w">
+      <div className="fr-container">
+        <MDXComponent markdown={markdown} />
+      </div>
+    </div>
+  )
+}

src/content/startups/codedutravail.mdx

@@ -0,0 +1,3 @@
+## Contenu local
+
+Je suis une description du code du travail numérique chargée à la volée !

src/mdx-components.tsx

@@ -0,0 +1,15 @@
+import type { MDXComponents } from "mdx/types"
+
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including components from
+// other libraries.
+
+// This file is required to use MDX in `app` directory.
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // Allows customizing built-in components, e.g. to add styling.
+    // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
+    ...components,
+  }
+}

src/utils/mdx-component.tsx

@@ -0,0 +1,35 @@
+import { MDXRemote } from "next-mdx-remote/rsc"
+
+import type { VFile } from "vfile"
+import type { MDXComponents } from "mdx/types"
+
+export default function MDXComponent({
+  markdown,
+}: {
+  markdown: string | VFile
+}) {
+  const component = {
+    h1: ({ children }: { children: React.ReactNode }) => (
+      <h1 className="fr-h1">{children}</h1>
+    ),
+    h2: ({ children }: { children: React.ReactNode }) => (
+      <h2 className="fr-h2">{children}</h2>
+    ),
+    h3: ({ children }: { children: React.ReactNode }) => (
+      <h2 className="fr-h3">{children}</h2>
+    ),
+    p: ({ children }: { children: React.ReactNode }) => (
+      <p className="mb-6">{children}</p>
+    ),
+    ul: ({ children }: { children: React.ReactNode }) => (
+      <ul className="mb-6">{children}</ul>
+    ),
+    a: ({ children, ...props }: { children: React.ReactNode }) => (
+      <a {...props} target="_blank" rel="noopener">
+        {children}
+      </a>
+    ),
+  } as MDXComponents
+
+  return <MDXRemote source={markdown} components={component} />
+}

yarn.lock

@@ -152,6 +152,13 @@
   dependencies:
     glob "7.1.7"
 
+"@next/[email protected]":
+  version "13.4.13"
+  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-13.4.13.tgz#e2e4d73c4d00cd9ced8f4c47805d8a3784e36c18"
+  integrity sha512-rQHfeyPO6WC+mEqFCNibV8CWXBJ95uRfPv05Xb8ZMUr284grCIAaSfSRDDrwcoknizyfREDp33oV/isIujS4pA==
+  dependencies:
+    source-map "^0.7.0"
+
 "@next/[email protected]":
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz#326c830b111de8a1a51ac0cbc3bcb157c4c4f92c"