fix: change lib (#171)

* fix: change lib

* clean

app/blog/[blog]/CustomMDX.tsx

@@ -0,0 +1,45 @@
+"use client"
+import React, { Suspense } from "react"
+import { MDXRemote } from "next-mdx-remote-client/rsc"
+import type { MDXRemoteOptions } from "next-mdx-remote-client/rsc"
+import { ANDROID_URL, IOS_URL } from "~/constants"
+import appStorePic from "~/public/images/other/app-store-fr.png"
+import googlePlayPic from "~/public/images/other/google-play-fr.png"
+
+const components = {
+  DownloadButtons: () => (
+    <div className="mt-[70px] mb-1 grid max-w-[200px] sm:max-w-[400px] sm:grid-flow-col gap-6 auto-cols-fr md:w-5/6 m-auto">
+      <a href={ANDROID_URL} target="_blank" rel="noopener noreferrer">
+        <img
+          className="object-contain w-full"
+          src={googlePlayPic.src}
+          alt="télécharger dans Google Play"
+        />
+      </a>
+      <a href={IOS_URL} target="_blank" rel="noopener noreferrer">
+        <img
+          className="object-contain w-full"
+          src={appStorePic.src}
+          alt="télécharger dans l'App Store"
+        />
+      </a>
+    </div>
+  ),
+}
+const options: MDXRemoteOptions = {
+  mdxOptions: {
+    // ...
+  },
+  parseFrontmatter: true,
+  // scope: {
+  //   readingTime: calculateSomeHow(source),
+  // },
+}
+
+export default function CustomMDX({ source }) {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <MDXRemote options={options} components={components} source={source} />
+    </Suspense>
+  )
+}

app/blog/[blog]/page.tsx

@@ -1,41 +1,16 @@
 import React from "react"
-import { serialize } from "next-mdx-remote/serialize"
-import { MDXRemote } from "next-mdx-remote/rsc"
 import fs from "fs"
 import path from "path"
 import matter from "gray-matter"
 import { HiChevronLeft } from "react-icons/hi"
-import styles from "~/style/bloga.module.css"
-import { ANDROID_URL, IOS_URL } from "~/constants"
-import appStorePic from "~/public/images/other/app-store-fr.png"
-import googlePlayPic from "~/public/images/other/google-play-fr.png"
 import { parse } from "date-fns"
 import { fr } from "date-fns/locale"
+import styles from "~/style/bloga.module.css"
+import CustomMDX from "./CustomMDX"
 
 export default async function Blog({ params }) {
   const { mdxSource, data } = await getBlogPost(params)
 
-  const components = {
-    DownloadButtons: () => (
-      <div className="mt-[70px] mb-1 grid max-w-[200px] sm:max-w-[400px] sm:grid-flow-col gap-6 auto-cols-fr md:w-5/6 m-auto">
-        <a href={ANDROID_URL} target="_blank" rel="noopener noreferrer">
-          <img
-            className="object-contain w-full"
-            src={googlePlayPic.src}
-            alt="télécharger dans Google Play"
-          />
-        </a>
-        <a href={IOS_URL} target="_blank" rel="noopener noreferrer">
-          <img
-            className="object-contain w-full"
-            src={appStorePic.src}
-            alt="télécharger dans l'App Store"
-          />
-        </a>
-      </div>
-    ),
-  }
-
   return (
     <>
       <div className="p-4 lg:pt-16 sm:mx-20 xl:mx-auto xl:w-[1100px]">
@@ -66,7 +41,7 @@ export default async function Blog({ params }) {
       <div
         className={`p-10 sm:rounded-xl md:rounded-3xl sm:mx-20 xl:mx-auto xl:w-[1100px] mb-8 text-base ${styles.blogContent}`}
       >
-        <MDXRemote components={components} source={mdxSource} />
+        <CustomMDX source={mdxSource} />
       </div>
     </>
   )
@@ -76,11 +51,6 @@ async function getBlogPost(params: { blog: string }) {
   const filePath = path.join(process.cwd(), "content", `${params.blog}.mdx`)
   const fileContents = fs.readFileSync(filePath, "utf-8")
   const { content, data } = matter(fileContents)
-  const mdxSource = await serialize(content, {
-    mdxOptions: {
-      development: false,
-    },
-  })
 
   const articleDate = parse(data.date, "MMMM d, yyyy", new Date(), {
     locale: fr,
@@ -94,7 +64,7 @@ async function getBlogPost(params: { blog: string }) {
     }
   }
   return {
-    mdxSource,
+    mdxSource: content,
     data,
   }
 }

package.json

@@ -9,7 +9,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@socialgouv/matomo-next": "^1.2.2",
-    "@types/mdx": "^2.0.10",
     "chart.js": "^4.4.2",
     "date-fns": "^3.0.6",
     "eslint-config-next": "latest",
@@ -18,7 +17,7 @@
     "gray-matter": "^4.0.3",
     "next": "latest",
     "next-compose-plugins": "^2.2.1",
-    "next-mdx-remote": "0.0.0-canary-20240321205249",
+    "next-mdx-remote-client": "^1.0.3",
     "react": "latest",
     "react-device-detect": "^2.2.3",
     "react-dom": "latest",
@@ -39,6 +38,8 @@
   "devDependencies": {
     "@socialgouv/eslint-config-react": "^1.89.0",
     "@socialgouv/sre-secrets": "^1.4.0",
+    "@types/mdx": "^2.0.10",
+    "@types/react": "^18.3.2",
     "autoprefixer": "^10.4.13",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
@@ -52,32 +53,23 @@
   },
   "eslintConfig": {
     "rules": {
+      "react/no-unescaped-entities": "off",
+      "@next/next/no-img-element": "off",
       "react/prop-types": "warn",
       "simple-import-sort/sort": "off",
       "jsx-a11y/anchor-is-valid": "warn",
       "simple-import-sort/imports": "warn",
       "jsx-a11y/no-static-element-interactions": "off",
       "jsx-a11y/click-events-have-key-events": "off",
       "react/react-in-jsx-scope": "off",
-      "jsx-a11y/tabindex-no-positive": "warn",
-      "react/no-unescaped-entities": [
-        "error",
-        {
-          "forbid": [
-            ">",
-            "}"
-          ]
-        }
-      ]
+      "jsx-a11y/tabindex-no-positive": "warn"
     },
     "extends": [
-      "@socialgouv/eslint-config-react"
+      "@socialgouv/eslint-config-react",
+      "eslint:recommended",
+      "next"
     ]
   },
-  "resolutions": {
-    "@mdx-js/mdx": "2.1.5",
-    "@mdx-js/react": "2.1.5"
-  },
   "engines": {
     "npm": "please-use-yarn",
     "yarn": ">= 4",