metalsmith-dom-transform
Infrastructure plugin for transforming page DOM via jsdom. Use this for small tweaks, or build your plugin on top of this one.
Example
const domTransform = require('metalsmith-dom-transform');
metalsmith.use(
domTransform({
transforms: [
function(dom, file, {files, metalsmith}, done) {
Array.from(dom.querySelectorAll('a[href]')).forEach(link => {
link.target = '_blank';
});
done();
},
function(dom, file, {files, metalsmith}, done) {
Array.from(dom.querySelectorAll('img')).forEach(img => {
img.width = 200;
});
done();
},
function(dom, file, {files, metalsmith}, done) {
Array.from(dom.querySelectorAll('iframe')).forEach(iframe => {
iframe.remove();
});
done();
}
]
})
);
Configuration
There is currently only one option:
transforms
: array of functions that serve as DOM transformations. Each function takes three arguments:
dom
: The root of the DOM for that pagefile
: File path for the page being transformedinfo
: Object that holds the same arguments passed to all metalsmith plugins, namely:
files
: Dictionary of all files being processed by this metalsmith instancemetalsmith
: Metalsmith instance
done
: Callback for transformation completion
Requirements
Uses async
/await
, so requires a relatively recent (8.x or higher) version of node.
Plugins built on this one
If you create a plugin on top of this one, add a pull request and add yours to this list.
Changelog
2.0.1
: Upgrade dependencies2.0.0
: Change transform function parameters1.0.1
: Don't serialize HTML if nothing changed (may cause HTML output differences)1.0.0
: Add metalsmith
parameter0.0.2
: Fix stupid bug where async did not work0.0.1
: Initial release
Alternatives
- metalsmith-batch-dom: Manipulations based on query selectors and Cheerio, no metadata, all transforms must be synchronous.