metalsmith-html-relative
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

metalsmith-html-relative

npm: version npm: downloads

Snyk: vulnerabilities codecov: coverage license

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>

Changelog

Changelog

Package Sidebar

Install

npm i metalsmith-html-relative

Weekly Downloads

22

Version

2.0.1

License

GPL-3.0-or-later

Unpacked Size

46.5 kB

Total Files

6

Last publish

Collaborators

  • emmercm