fix: table

Author: OlivierCo

apps/www/components/mdx-components.tsx

@@ -87,4 +87,32 @@ export const MDXComponents = {
       </pre>
     );
   },
+  table: ({ children }: { children: React.ReactNode }) => (
+    <div className="my-8 overflow-x-auto">
+      <table className="w-full border-collapse border border-border">
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children }: { children: React.ReactNode }) => (
+    <thead className="bg-muted/50">{children}</thead>
+  ),
+  tbody: ({ children }: { children: React.ReactNode }) => (
+    <tbody>{children}</tbody>
+  ),
+  tr: ({ children }: { children: React.ReactNode }) => (
+    <tr className="border-b border-border hover:bg-muted/30 transition-colors">
+      {children}
+    </tr>
+  ),
+  th: ({ children }: { children: React.ReactNode }) => (
+    <th className="border border-border px-4 py-3 text-left font-semibold text-foreground">
+      {children}
+    </th>
+  ),
+  td: ({ children }: { children: React.ReactNode }) => (
+    <td className="border border-border px-4 py-3 text-foreground/90">
+      {children}
+    </td>
+  ),
 };

apps/www/contentlayer.config.ts

@@ -2,6 +2,7 @@ import { defineDocumentType, makeSource } from "contentlayer/source-files";
 import { format, parseISO } from "date-fns";
 import rehypePrismPlus from "rehype-prism-plus";
 import rehypeSlug from "rehype-slug";
+import remarkGfm from "remark-gfm";
 
 export const Post = defineDocumentType(() => ({
   name: "Post",
@@ -61,7 +62,7 @@ export default makeSource({
   contentDirPath: "posts",
   documentTypes: [Post],
   mdx: {
-    remarkPlugins: [],
+    remarkPlugins: [remarkGfm],
     rehypePlugins: [
       rehypeSlug,
       [

apps/www/package.json

@@ -19,24 +19,25 @@
     "contentlayer": "^0.3.4",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.525.0",
-    "next": "^15.4.1",
+    "next": "^15.4.6",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.4.6",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-highlight": "^7.0.2",
     "rehype-prism-plus": "^2.0.1",
     "rehype-slug": "^6.0.0",
-    "sonner": "^2.0.6"
+    "remark-gfm": "3.0.1",
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
-    "@types/node": "^24.0.14",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/node": "^24.2.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@workspace/eslint-config": "workspace:^",
     "@workspace/typescript-config": "workspace:*",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.2"
   }
 }