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 + + ... +
+ +
+ + ... +
+
\ No newline at end of file diff --git a/examples/wrapping-elements/package.json b/examples/wrapping-elements/package.json new file mode 100644 index 0000000..23dd70a --- /dev/null +++ b/examples/wrapping-elements/package.json @@ -0,0 +1,15 @@ +{ + "name": "eleventy-plugin-transformdom-examples-wrapping-elements", + "version": "1.0.0", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "eleventy --serve", + "build": "eleventy" + }, + "author": "@rvxlab", + "license": "MIT", + "devDependencies": { + "@11ty/eleventy": "^0.11.0", + "eleventy-plugin-transformdom": "../../" + } + } \ No newline at end of file