From e995c9e779f7ab2db369b61e3bd99a477cbe7e1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Capucho?= <jcapucho7@gmail.com>
Date: Fri, 15 Dec 2023 10:30:24 +0000
Subject: [PATCH] Properly center and overflow tables

---
 .parcelrc                  |  6 ++++--
 plugins/article.js         | 26 ++++++++++++++++++++++++++
 plugins/ipynb.js           |  6 +-----
 plugins/norg.js            |  7 ++-----
 plugins/posthtmlPlugins.js | 34 ++++++++++++++++++++++++----------
 tailwind.config.mjs        |  6 ++++--
 6 files changed, 61 insertions(+), 24 deletions(-)
 create mode 100644 plugins/article.js

diff --git a/.parcelrc b/.parcelrc
index c4eb865..bbc7c87 100644
--- a/.parcelrc
+++ b/.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",
diff --git a/plugins/article.js b/plugins/article.js
new file mode 100644
index 0000000..b03d0da
--- /dev/null
+++ b/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];
+  },
+});
diff --git a/plugins/ipynb.js b/plugins/ipynb.js
index e6bef7a..2dcd407 100644
--- a/plugins/ipynb.js
+++ b/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];
   },
diff --git a/plugins/norg.js b/plugins/norg.js
index bb5d373..044174e 100644
--- a/plugins/norg.js
+++ b/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];
   },
diff --git a/plugins/posthtmlPlugins.js b/plugins/posthtmlPlugins.js
index eef07d9..77462ac 100644
--- a/plugins/posthtmlPlugins.js
+++ b/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) {
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 48f1955..615823b 100644
--- a/tailwind.config.mjs
+++ b/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",
             },