fix: blog new structure

content/arreter-alcool.mdx → app/blog/(articles)/arreter-alcool/page.mdx

@@ -1,12 +1,12 @@
----
-title: "Comment arrêter l'alcool ?"
-order: 1
-category: "Santé et bien-être"
-date: Mars 10, 2024
-image: ../images/articles/maitriser consommation alcool .jpg
-alt: "Portrait noir et blanc d'une personne cachant son visage avec sa main. Interprétable comme un signe de refus."
-description: “Découvrez des stratégies concrètes pour arrêter l'alcool, des conseils pour évaluer votre relation avec la boisson, et explorez les ressources et le soutien disponibles pour une vie plus équilibrée.”
----
+export const metadata = {
+  title: "Comment arrêter l'alcool ?"
+  order: 1
+  category: "Santé et bien-être"
+  date: Mars 10, 2024
+  image: ../images/articles/maitriser consommation alcool .jpg
+  alt: "Portrait noir et blanc d'une personne cachant son visage avec sa main. Interprétable comme un signe de refus."
+  description: “Découvrez des stratégies concrètes pour arrêter l'alcool, des conseils pour évaluer votre relation avec la boisson, et explorez les ressources et le soutien disponibles pour une vie plus équilibrée.”
+}
 
 Vous pensez avoir une consommation excessive d’alcool ? Vous souhaitez arrêter de consommer de l’alcool ? Voici notre guide pour diminuer ou arrêter votre consommation au profit d’une meilleure santé !
 

app/blog/[blog]/page.tsx → app/blog/(articles)/blabls.tsx

@@ -1,6 +1,5 @@
 import React from "react"
-import { serialize } from "next-mdx-remote/serialize"
-import { MDXRemote } from "next-mdx-remote/rsc"
+import BlogContent from "./BlogContent"
 import fs from "fs"
 import path from "path"
 import matter from "gray-matter"
@@ -66,35 +65,8 @@ 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} />
+        <BlogContent mdxSource={mdxSource} />
       </div>
     </>
   )
 }
-
-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,
-  })
-
-  const currentDate = new Date()
-
-  if (articleDate >= currentDate) {
-    return {
-      notFound: true,
-    }
-  }
-  return {
-    mdxSource,
-    data,
-  }
-}

app/blog/(articles)/blobol.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import Navigation, { DownloadPopupStandalone } from "~/components/Navigation"
+import Footer from "~/components/Footer"
+import fs from "fs"
+import path from "path"
+import matter from "gray-matter"
+import { parse } from "date-fns"
+import { fr } from "date-fns/locale"
+import type { Metadata } from "next"
+
+// export async function generateMetadata({
+//   params,
+// }: {
+//   params: { blog: string }
+// }): Promise<Metadata> {
+//   // read route params
+//   const filePath = path.join(process.cwd(), "content", `${params.blog}.mdx`)
+//   const fileContents = fs.readFileSync(filePath, "utf-8")
+//   const { data } = matter(fileContents)
+
+//   const articleDate = parse(data.date, "MMMM d, yyyy", new Date(), {
+//     locale: fr,
+//   })
+
+//   const currentDate = new Date()
+
+//   if (articleDate >= currentDate) {
+//     return null
+//   }
+//   return {
+//     title: data.title,
+//     description: data.description,
+//     openGraph: {
+//       title: data.title,
+//       description: data.description,
+//       images: [data.image],
+//     },
+//   }
+// }
+
+export default function BlogLayout({ children }) {
+  return (
+    <>
+      <DownloadPopupStandalone />
+      <Navigation />
+      {children}
+      <Footer />
+    </>
+  )
+}

app/blog/page.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import fs from "fs"
-import path from "path"
 import matter from "gray-matter"
 import Navigation, { DownloadPopupStandalone } from "~/components/Navigation"
 import Footer from "~/components/Footer"
@@ -50,14 +49,18 @@ export default async function Blog() {
 }
 
 async function getBlogPosts() {
-  const files = fs.readdirSync(path.join(process.cwd(), "content"))
+  // in the current folder there is an (articles) folder
+  const folders = fs.readdirSync("./app/blog/(articles)")
+  console.log(folders)
 
   const posts = await Promise.all(
-    files
-      .filter((fn) => fn.endsWith(".mdx"))
-      .map(async (filename) => {
-        const filePath = path.join(process.cwd(), "content", filename)
-        const rawContent = fs.readFileSync(filePath, "utf8")
+    folders
+      .filter((fn) => !fn.endsWith(".tsx"))
+      .map(async (slug) => {
+        const rawContent = fs.readFileSync(
+          `./app/blog/(articles)/${slug}/page.mdx`,
+          "utf8"
+        )
         const { data } = matter(rawContent)
         const articleDate = parse(data.date, "MMMM d, yyyy", new Date(), {
           locale: fr,
@@ -70,7 +73,7 @@ async function getBlogPosts() {
         }
 
         return {
-          slug: filename.replace(".mdx", ""),
+          slug,
           order: data.order || 0,
           image: data.image || "",
           title: data.title || "",

mdx-components.tsx

@@ -0,0 +1,7 @@
+import type { MDXComponents } from "mdx/types"
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}

next.config.js

@@ -1,3 +1,5 @@
+const withMDX = require("@next/mdx")()
+
 /**
  * @type {import('next').NextConfig}
  */
@@ -12,6 +14,7 @@ const nextConfig = {
 
   // Optional: Change the output directory `out` -> `dist`
   // distDir: 'dist',
+  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   webpack: (config) => {
     config.resolve.fallback = { fs: false }
     config.module.rules.push({
@@ -22,4 +25,4 @@ const nextConfig = {
   },
 }
 
-module.exports = nextConfig
+module.exports = withMDX(nextConfig)

package.json

@@ -8,8 +8,11 @@
     "@codegouvfr/react-dsfr": "^1.9.11",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.2.3",
     "@socialgouv/matomo-next": "^1.2.2",
-    "@types/mdx": "^2.0.10",
+    "@types/mdx": "^2.0.13",
     "chart.js": "^4.4.2",
     "date-fns": "^3.0.6",
     "eslint-config-next": "latest",
@@ -18,7 +21,6 @@
     "gray-matter": "^4.0.3",
     "next": "latest",
     "next-compose-plugins": "^2.2.1",
-    "next-mdx-remote": "0.0.0-canary-20240321205249",
     "react": "latest",
     "react-device-detect": "^2.2.3",
     "react-dom": "latest",
@@ -39,6 +41,7 @@
   "devDependencies": {
     "@socialgouv/eslint-config-react": "^1.89.0",
     "@socialgouv/sre-secrets": "^1.4.0",
+    "@types/react": "^18.3.2",
     "autoprefixer": "^10.4.13",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
@@ -74,10 +77,6 @@
       "@socialgouv/eslint-config-react"
     ]
   },
-  "resolutions": {
-    "@mdx-js/mdx": "2.1.5",
-    "@mdx-js/react": "2.1.5"
-  },
   "engines": {
     "npm": "please-use-yarn",
     "yarn": ">= 4",