Metalsmith-html-relative NPM

metalsmith-html-relative

A Metalsmith plugin to convert to relative paths within HTML.

This will change href, src, and other tag attributes that reference local files (pages, CSS, JavaScript, images, etc.) to use relative links (e.g. ../static/css/styles.css) rather than absolute links (e.g. /static/css/styles.css). This allows your website to be more portable, it can exist in any kind of subdomain or subdirectory.

Installation

npm install --save metalsmith-html-relative

JavaScript Usage

const Metalsmith = require('metalsmith');
const relative   = require('metalsmith-html-relative');

Metalsmith(__dirname)
    .use(relative({
        // options here
    }))
    .build((err) => {
        if (err) {
            throw err;
        }
    });

Options

`html` (optional)

Type: string Default: "**/*.html"

A micromatch glob pattern to find HTML files.

`tags` (optional)

Type: object Default:

{
    "a": "href",
    "img": ["src", "data-src"],
    "link": "href",
    "script": "src",
    "form": "action"
}

An object of what tags and attributes to process for glob patterns.

Example HTML

Example Input

Given a file tree:

.
├── contact
│   └── index.html
├── index.html
└── static
    ├── css
    │   └── styles.css
    └── js
        └── scripts.js

And the contents of contact/index.html are:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="/static/css/styles.css">
    </head>
    <body>
        <script src="/static/js/scripts.js"></script>
    </body>
</html>

Example Output

After this plugin is run, the output of contact/index.html will be:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="../static/css/styles.css">
    </head>
    <body>
        <script src="../static/js/scripts.js"></script>
    </body>
</html>