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.
This commit is contained in:
Ricardo
2026-02-18 12:12:28 +01:00
parent f7bc5d9112
commit 0d63dde15c
+8
View File
@@ -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 // HTML minification — only during initial build, skip during watch rebuilds
eleventyConfig.addTransform("htmlmin", async function (content, outputPath) { eleventyConfig.addTransform("htmlmin", async function (content, outputPath) {
if (outputPath && outputPath.endsWith(".html") && process.env.ELEVENTY_RUN_MODE === "build") { if (outputPath && outputPath.endsWith(".html") && process.env.ELEVENTY_RUN_MODE === "build") {