diff --git a/examples/wrapping-elements/.eleventy.js b/examples/wrapping-elements/.eleventy.js new file mode 100644 index 0000000..98ccc1a --- /dev/null +++ b/examples/wrapping-elements/.eleventy.js @@ -0,0 +1,21 @@ +const transformDomPlugin = require('eleventy-plugin-transformdom'); + +const wrapTableInOverflowDiv = ({ elements, document }) => { + elements.forEach((table) => { + const wrapper = document.createElement('div'); + wrapper.style.overflowX = 'auto'; + wrapper.style.width = '100%'; + + table.parentElement.insertBefore(wrapper, table); + wrapper.appendChild(table); // Moves table into the newly created div + }); +}; + +module.exports = function (eleventyConfig) { + eleventyConfig.addPlugin(transformDomPlugin, [ + { + selector: 'table', + transform: wrapTableInOverflowDiv, + }, + ]); +}; \ No newline at end of file diff --git a/examples/wrapping-elements/index.md b/examples/wrapping-elements/index.md new file mode 100644 index 0000000..b9b05bd --- /dev/null +++ b/examples/wrapping-elements/index.md @@ -0,0 +1,18 @@ +# Element wrapping demo + +This is a demo of +[eleventy-plugin-transformdom](https://github.com/liamfiddler/eleventy-plugin-transformdom) +which shows to wrap elements. + +In this example a table will be wrapped as such: + +```html +