feat: create remark table plugin

Author: araujogui

apps/site/next.mdx.plugins.mjs

@@ -7,6 +7,8 @@ import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import readingTime from 'remark-reading-time';
 
+import remarkTableTitles from './util/table';
+
 /**
  * Provides all our Rehype Plugins that are used within MDX
  */
@@ -30,4 +32,5 @@ export const REMARK_PLUGINS = [
   remarkHeadings,
   // Calculates the reading time of the content
   readingTime,
+  remarkTableTitles,
 ];

apps/site/package.json

@@ -59,6 +59,7 @@
     "feed": "~5.1.0",
     "github-slugger": "~2.0.0",
     "gray-matter": "~4.0.3",
+    "mdast-util-to-string": "^4.0.0",
     "next": "15.5.0",
     "next-intl": "~4.3.4",
     "next-themes": "~0.4.6",
@@ -73,6 +74,7 @@
     "semver": "~7.7.2",
     "sval": "^0.6.3",
     "tailwindcss": "catalog:",
+    "unist-util-visit": "^5.0.0",
     "vfile": "~6.0.3",
     "vfile-matter": "~5.0.1"
   },
@@ -85,6 +87,7 @@
     "@opennextjs/cloudflare": "^1.6.4",
     "@playwright/test": "^1.54.1",
     "@testing-library/user-event": "~14.6.1",
+    "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
     "@types/semver": "~7.7.0",
     "eslint-config-next": "15.5.0",

apps/site/util/table.ts

@@ -0,0 +1,34 @@
+import type { Root } from 'mdast';
+import { toString } from 'mdast-util-to-string';
+import { visit } from 'unist-util-visit';
+
+/**
+ * Remark plugin that adds data-label attributes to table cells (td)
+ * based on their corresponding table headers (th).
+ */
+export default function remarkTableTitles() {
+  return (tree: Root) => {
+    visit(tree, 'table', table => {
+      // Ensure table has at least a header row and one data row
+      if (table.children.length < 2) return;
+
+      const [headerRow, ...dataRows] = table.children;
+
+      // Extract header labels from the first row
+      const headerLabels = headerRow.children.map(headerCell =>
+        toString(headerCell.children)
+      );
+
+      // Assign data-label to each cell in data rows
+      dataRows.forEach(row => {
+        row.children.forEach((cell, idx) => {
+          cell.data ??= {};
+
+          cell.data.hProperties = {
+            'data-label': headerLabels[idx],
+          };
+        });
+      });
+    });
+  };
+}