Skip to content
This repository has been archived by the owner on Feb 21, 2023. It is now read-only.

A Metalsmith plugin to convert to relative paths within HTML.

License

Notifications You must be signed in to change notification settings

emmercm/metalsmith-html-relative

Repository files navigation

metalsmith-html-relative

⚠️ This repistory has been moved to metalsmith-plugins. ⚠️

npm Version npm Weekly Downloads

Known Vulnerabilities Test Coverage Maintainability

GitHub 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

About

A Metalsmith plugin to convert to relative paths within HTML.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages