html-merge-cmd
v1.0.0
Published
Merge HTML documents, using CSS selectors
Downloads
3
Maintainers
geraintluffReadme
HTML Merge
This package provides a command-line tool for minimal static sites, using HTML Merge.
Updates are done in-place - there is no second output directory.
The specification aims to be so simple that you could implement this easily yourself, if you have access to an HTML parser and basic CSS selectors.
Usage
If you have a directory organised like this:
index.html
contact.html
blog/index.html
blog/post-01.htmlRunning html-merge on/in this directory will merge each page into its parent page, in-place. HTML files without the appropriate merge-attributes are left untouched.
Install
This should be installed globally:
npm install -g html-mergeAnd used like this, with an optional target directory:
html-merge <dir>Attributes
You annotate elements using the merge-replace attribute, which contains a CSS selector:
<title merge-replace="head title">New Title!</title>
<div id="main" merge-replace="#main">New body!</div>The tool takes the closest parent (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Old title</title>
</head>
<body>
<div id="nav">(common content)</div>
<div id="main">Old body</div>
</body>
</html>And merges your changes into it (in-place):
<!DOCTYPE html>
<html>
<head>
<title merge-replace="head title">New Title!</title>
</head>
<body>
<div id="nav">(common content)</div>
<div id="main" merge-replace="#main">New body!</div>
</body>
</html>Since everything without merge-replace= is ignored, this is equivalent to our original input.