Base URL

Define a base URL that will be prepended to all sources and hrefs in your HTML.

Useful if you already host your images somewhere like a CDN, so you don't have to write the full URL every time when developing.

Usage

Make it globally available by setting it in your environment config:

config.js
module.exports = {
  baseURL: 'https://cdn.example.com/'
}

Customization

You'll most likely want to customize the transformer so that it applies only to certain elements.

For example, apply the base URL only to <img> elements:

config.js
module.exports = {
  baseURL: {
    url: 'https://cdn.example.com/',
    tags: {
      img: {
        src: 'https://foo.com/',
        srcset: 'https://bar.com/',
      },
    },
  },
}

Front Matter

You may override it for a single Template, through Front Matter:

src/templates/example.html
---
baseURL: 'https://res.cloudinary.com/user/image/upload/v.../'
---

<extends src="src/layouts/base.html">
  <block name="template">
    <img src="example.jpg">
  </block>
</extends>

Trailing slash

Mind the trailing slash on your URL, this influences how you reference images:

src/templates/example.html
<!-- baseURL: 'https://cdn.example.com/img' -->
<img src="/folder/product-1.png">

<!-- baseURL: 'https://cdn.example.com/img/' -->
<img src="folder/product-1.png">

Disabling

If you have baseURL set globally (in your config), you may disable it for a Template by setting its value to an empty string or a falsy value in Front Matter:

src/templates/example.html
---
baseURL: ''
---

or

src/templates/example.html
---
baseURL: false
---

API

app.js
const {applyBaseUrl} = require('@maizzle/framework')
const config = {
  url: 'https://cdn.example.com/img/',
}

const html = await applyBaseUrl('<img src="image.jpg">', config)

Copyright © 2022 Maizzle Edit this page on GitHub