html-merge-cmd

Merge HTML documents, using CSS selectors

Usage no npm install needed!

<script type="module">
  import htmlMergeCmd from 'https://cdn.skypack.dev/html-merge-cmd';
</script>

README

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.html

Running 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-merge

And 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.