From 0d63dde15ca5e0f178ec05b74f099ade941d43b0 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Wed, 18 Feb 2026 12:12:28 +0100
Subject: [PATCH] fix: wrap tables in table-saw elements for responsive
 behavior

The @zachleat/table-saw component requires tables to be wrapped in
<table-saw> elements. Added an Eleventy transform to do this
automatically for all HTML output.
---
 eleventy.config.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/eleventy.config.js b/eleventy.config.js
index 8315b69..6dcfb53 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -217,6 +217,14 @@ export default function (eleventyConfig) {
     },
   });
 
+  // Wrap <table> elements in <table-saw> for responsive tables
+  eleventyConfig.addTransform("table-saw-wrap", function (content, outputPath) {
+    if (outputPath && outputPath.endsWith(".html")) {
+      return content.replace(/<table(\s|>)/g, "<table-saw><table$1").replace(/<\/table>/g, "</table></table-saw>");
+    }
+    return content;
+  });
+
   // HTML minification — only during initial build, skip during watch rebuilds
   eleventyConfig.addTransform("htmlmin", async function (content, outputPath) {
     if (outputPath && outputPath.endsWith(".html") && process.env.ELEVENTY_RUN_MODE === "build") {