diff --git a/examples/svg-inline/.eleventy.js b/examples/svg-inline/.eleventy.js new file mode 100644 index 0000000..d8192f2 --- /dev/null +++ b/examples/svg-inline/.eleventy.js @@ -0,0 +1,65 @@ +const transformDomPlugin = require('eleventy-plugin-transformdom'); + +const staticConfig = { + dir: { + input: ".", + output: "_site", + // relative to input: + includes: "_includes", + data: "_data", + }, +}; + +function getSvgInlineTransformer() { + const srcRoot = staticConfig?.dir?.input || '.'; // global + const fs = require('fs'); + // https://stackoverflow.com/a/54579530/10440128 + const getAllAttributes = el => (el.getAttributeNames() + .reduce((obj, name) => ({ ...obj, [name]: el.getAttribute(name) }), {})); + const domTransformer = { + selector: 'svg[src]', // + transform: ({ elements, document }) => { + for (const element of elements) { + const attributes = getAllAttributes(element); + console.dir({ svg_src_attributes: attributes }); + const srcPath = srcRoot + '/' + attributes.src; + delete attributes.src; + attributes['data-srcpath'] = srcPath; + // read svg file + remove xml header + const srcText = fs.readFileSync(srcPath, 'utf8').replace(/<\?xml.*?\?>/, ''); + const elementTemp = document.createElement('div'); + elementTemp.innerHTML = srcText; + const elementNew = elementTemp.querySelector('svg'); + const { width, height } = attributes; + if (width || height) { + elementNew.removeAttribute('width'); + elementNew.removeAttribute('height'); + if (width) elementNew.setAttribute('width', width); + if (height) elementNew.setAttribute('height', height); + delete attributes.width; + delete attributes.height; + } + if (attributes.class) { + const c1 = elementNew.getAttribute('class'); + const c2 = attributes.class; + elementNew.setAttribute('class', (c1 ? `${c1} ${c2}` : c2)); + delete attributes.class; + } + for (const [key, val] of Object.entries(attributes)) { + elementNew.setAttribute(key, val); + } + element.replaceWith(elementNew); + } + }, + }; + return domTransformer; +} + +module.exports = function (eleventyConfig) { + + const domTransformers = []; + domTransformers.push(getSvgInlineTransformer()); + eleventyConfig.addPlugin(transformDomPlugin, domTransformers); + + return staticConfig; +}; diff --git a/examples/svg-inline/example.svg b/examples/svg-inline/example.svg new file mode 100644 index 0000000..9641b55 --- /dev/null +++ b/examples/svg-inline/example.svg @@ -0,0 +1,4 @@ + + +hello from SVG + diff --git a/examples/svg-inline/index.md b/examples/svg-inline/index.md new file mode 100644 index 0000000..f7e37bc --- /dev/null +++ b/examples/svg-inline/index.md @@ -0,0 +1,37 @@ +# SVG inline demo + +This is a demo of +[eleventy-plugin-transformdom](https://github.com/liamfiddler/eleventy-plugin-transformdom) +which inlines SVG images. + +input: + + + +result: + + + +expected result source: + + diff --git a/examples/svg-inline/package.json b/examples/svg-inline/package.json new file mode 100644 index 0000000..197cfa7 --- /dev/null +++ b/examples/svg-inline/package.json @@ -0,0 +1,14 @@ +{ + "name": "eleventy-plugin-transformdom-examples-svg-inline", + "version": "1.0.0", + "scripts": { + "start": "eleventy --serve", + "build": "eleventy" + }, + "author": "@liamfiddler", + "license": "MIT", + "devDependencies": { + "@11ty/eleventy": "^0.11.0", + "eleventy-plugin-transformdom": "../../" + } +}