fixed react-error with mdx on mobile (#4919)

Extracted mdx compilation logic to the server component to prevent
hydration bugs

<img width="538" alt="Screenshot 2024-04-11 at 14 03 36"
src="https://github.com/twentyhq/twenty/assets/102751374/53383da5-2e5d-4ab6-829c-550b8af2ca25">

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/src/app/releases/get-releases.tsx

@@ -1,5 +1,9 @@
+import { JSXElementConstructor, ReactElement } from 'react';
 import fs from 'fs';
 import matter from 'gray-matter';
+import { compileMDX } from 'next-mdx-remote/rsc';
+import remarkBehead from 'remark-behead';
+import gfm from 'remark-gfm';
 
 import { ReleaseNote } from '@/app/releases/api/route';
 import { compareSemanticVersions } from '@/shared-utils/compareSemanticVersions';
@@ -45,3 +49,23 @@ export async function getReleases(baseUrl?: string): Promise<ReleaseNote[]> {
 
   return releasenotes;
 }
+
+export async function getMdxReleasesContent(
+  releases: ReleaseNote[],
+): Promise<ReactElement<any, string | JSXElementConstructor<any>>[]> {
+  const mdxSourcesPromises = releases.map(async (release) => {
+    const mdxSource = await compileMDX<{ title: string; position?: number }>({
+      source: release.content,
+      options: {
+        parseFrontmatter: true,
+        mdxOptions: {
+          development: process.env.NODE_ENV === 'development',
+          remarkPlugins: [gfm, [remarkBehead, { depth: 2 }]],
+        },
+      },
+    });
+    return mdxSource.content;
+  });
+
+  return await Promise.all(mdxSourcesPromises);
+}