Properly center and overflow tables

.parcelrc

@@ -8,10 +8,12 @@
       "./plugins/homepage.js"
     ],
     "*.norg": [
-      "./plugins/norg.js"
+      "./plugins/norg.js",
+      "./plugins/article.js"
     ],
     "*.ipynb": [
-      "./plugins/ipynb.js"
+      "./plugins/ipynb.js",
+      "./plugins/article.js"
     ],
     "embed-iframe:*": [
       "./plugins/embed-iframe.js",

plugins/article.js

@@ -0,0 +1,26 @@
+import { Transformer } from "@parcel/plugin";
+
+import toc from "posthtml-toc";
+import posthtml from "posthtml";
+import { postHtmlWrapTables } from "./posthtmlPlugins.js";
+
+export default new Transformer({
+  async transform({ asset }) {
+    const templated = await asset.getCode();
+
+    const rendered = await posthtml()
+      .use(postHtmlWrapTables)
+      .use(
+        toc({
+          title: "Tabela de Conteúdos",
+          insert: { beforeChildren: ".prose" },
+        }),
+      )
+      .process(templated);
+
+    asset.type = "html";
+    asset.setCode(rendered.html);
+
+    return [asset];
+  },
+});

plugins/ipynb.js

@@ -4,7 +4,6 @@ import posthtml from "posthtml";
 
 import { run, createEtaInstance } from "./utils.js";
 import {
-  renderToc,
   postHtmlShiftHeadings,
   postHtmlAssignHeadingId,
 } from "./posthtmlPlugins.js";
@@ -55,14 +54,11 @@ export default new Transformer({
       content: content.html,
     });
 
-    const rendered = await renderToc(templated);
-
     for (const path of config.eta.includedPaths) {
       asset.invalidateOnFileChange(path);
     }
 
-    asset.type = "html";
-    asset.setCode(rendered);
+    asset.setCode(templated);
 
     return [asset];
   },

plugins/norg.js

@@ -1,7 +1,7 @@
 import { Transformer } from "@parcel/plugin";
 
 import { run, createEtaInstance } from "./utils.js";
-import { convertAllExclidraw, renderToc } from "./posthtmlPlugins.js";
+import { convertAllExclidraw } from "./posthtmlPlugins.js";
 
 export default new Transformer({
   async loadConfig({ config }) {
@@ -51,14 +51,11 @@ export default new Transformer({
       content,
     });
 
-    const rendered = await renderToc(templated);
-
     for (const path of config.eta.includedPaths) {
       asset.invalidateOnFileChange(path);
     }
 
-    asset.type = "html";
-    asset.setCode(rendered);
+    asset.setCode(templated);
 
     return [asset];
   },

plugins/posthtmlPlugins.js

@@ -114,17 +114,31 @@ export function postHtmlAssignHeadingId(tree) {
   );
 }
 
-export async function renderToc(templated) {
-  const rendered = await posthtml()
-    .use(
-      toc({
-        title: "Tabela de Conteúdos",
-        insert: { beforeChildren: ".prose" },
-      }),
-    )
-    .process(templated);
+export function postHtmlWrapTables(tree) {
+  function traverse(tree) {
+    if (Array.isArray(tree)) {
+      for (let i = 0; i < tree.length; i++) {
+        tree[i] = traverse(tree[i]);
+      }
+    } else if (tree && typeof tree === "object") {
+      if (tree.tag == "table") {
+        return {
+          tag: "div",
+          attrs: {
+            class: "wrapped-table",
+          },
+          content: [tree],
+        };
+      }
 
-  return rendered.html;
+      if (Object.prototype.hasOwnProperty.call(tree, "content"))
+        traverse(tree.content);
+    }
+
+    return tree;
+  }
+
+  traverse(tree);
 }
 
 export async function convertAllExclidraw(asset, resolve, logger, templated) {

tailwind.config.mjs

@@ -63,10 +63,12 @@ export default {
               color: theme("colors.accent"),
             },
 
+            ".wrapped-table": {
+              width: "100%",
+              "overflow-x": "auto",
+            },
             table: {
-              display: "block",
               width: "fit-content",
-              "overflow-x": "auto",
               "margin-left": "auto",
               "margin-right": "auto",
             },