Custom headers in Saber

Use custom headers to include JavaScript libraries in your Saber web site

cover
Photo credit:

I'm in the process of building a Bootstrap 4-based blog theme for Saber. Bootstrap 4 requires 3 JavaScript libraries to function:

There isn't a Saber plug-in for Boostrap and it's not obvious from the documentation how to include external JavaScript libraries, but it is possible. The answer is to customise the setHead function in saber-browser.js.

Boostrap's bootstrap.bundle.js (and its minified equivalent, bootstrap.bundle.min.js) include Popper.js, so that means we just need to include two JavaScript libraries. I prefer to use the CDNJS-hosted libraries and the function to include them looks like this.

export default ({ setHead }) => {
setHead({
script: [
{
src: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js",
integrity: "sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=",
crossorigin: "anonymous"
},
{
src: "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js",
integrity: "sha256-fzFFyH01cBVPYzl16KT40wqjhgPtq6FFUB6ckN2+GGw=",
crossorigin: "anonymous"
}
]
})
}