Commit fb76c74

HPCesia <me@hpcesia.com>
2025-02-07 09:24:30
refactor: statically wrap table
1 parent b69e230
src/components/utils/Markdown.astro
@@ -45,7 +45,6 @@ const firstHasPre = hasPre && (isFirstInstance('md-has-pre', Astro.url) || impor
 <script>
   async function init() {
     prettierPreCode();
-    wrapTables();
   }
 
   function prettierPreCode() {
@@ -105,15 +104,5 @@ const firstHasPre = hasPre && (isFirstInstance('md-has-pre', Astro.url) || impor
     });
   }
 
-  function wrapTables() {
-    const tables = document.querySelectorAll('article table');
-    tables.forEach((table) => {
-      const wrapper = document.createElement('div');
-      wrapper.className = 'overflow-auto';
-      table.parentNode?.insertBefore(wrapper, table);
-      wrapper.appendChild(table);
-    });
-  }
-
   document.addEventListener('astro:page-load', init);
 </script>
src/plugins/rehype-wrap-tables.mjs
@@ -0,0 +1,17 @@
+import { visit } from 'unist-util-visit';
+
+export function rehypeWrapTables() {
+  return (tree) => {
+    visit(tree, 'element', (node, index, parent) => {
+      if (node.tagName === 'table' && parent && typeof index === 'number') {
+        const wrapper = {
+          type: 'element',
+          tagName: 'div',
+          properties: { className: ['overflow-auto'] },
+          children: [node],
+        };
+        parent.children[index] = wrapper;
+      }
+    });
+  };
+}
astro.config.mjs
@@ -1,4 +1,5 @@
 // @ts-check
+import { rehypeWrapTables } from './src/plugins/rehype-wrap-tables.mjs';
 import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs';
 import { rehypeHeadingIds } from '@astrojs/markdown-remark';
 import sitemap from '@astrojs/sitemap';
@@ -58,6 +59,7 @@ export default defineConfig({
           },
         },
       ],
+      rehypeWrapTables,
     ],
   },
 });
package.json
@@ -33,7 +33,8 @@
     "sass": "^1.84.0",
     "sharp": "^0.33.5",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",