# metalsmith-html-relative
[](https://www.npmjs.com/package/metalsmith-html-relative)
[](https://www.npmjs.com/package/metalsmith-html-relative)
[](https://snyk.io/test/npm/metalsmith-html-relative)
[](https://codecov.io/gh/emmercm/metalsmith-html-relative)
[](https://github.com/emmercm/metalsmith-plugins/blob/main/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
```shell
npm install --save metalsmith-html-relative
```
## JavaScript Usage
```javascript
import Metalsmith from 'metalsmith';
import relative from 'metalsmith-html-relative';
Metalsmith(__dirname)
.use(relative({
// options here
}))
.build((err) => {
if (err) {
throw err;
}
});
```
## Options
### `html` (optional)
Type: `string` Default: `"**/*.html"`
A [`micromatch`](https://www.npmjs.com/package/micromatch) glob pattern to find HTML files.
### `tags` (optional)
Type: `object` Default:
```json
{
"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:
```text
.
├── contact
│ └── index.html
├── index.html
└── static
├── css
│ └── styles.css
└── js
└── scripts.js
```
And the contents of `contact/index.html` are:
```html
```
### Example Output
After this plugin is run, the output of `contact/index.html` will be:
```html
```
## Changelog
[Changelog](./CHANGELOG.md)