PostHTML plugin to insert noscript content
npm install posthtml-noscript[![NPM][npm]][npm-url]
[![Deps][deps]][deps-url]
[![Build][build]][build-badge]
[![Coverage][codecov-shield]][codecov]
posthtml-noscript is a PostHTML plugin to insert noscript content.
Use Cases:
- Display a "Enable JavaScript" message in a Single Page Application (SPA)
- Specify resource link elements (e.g. stylesheets) to load if JavaScript is disabled
---
Before:
``html`
After:
`html`
`bash`
yarn add -D posthtml-noscriptOR
npm i posthtml-noscript
`js
const fs = require('fs');
const posthtml = require('posthtml');
const { noscript } = require('posthtml-noscript');
const html = fs.readFileSync('./index.html');
posthtml()
.use(noscript({ content: 'You need to enable JavaScript to run this app.' }))
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));
`
By default, the plugin prepends noscript markup inside the body tag.
Optionally, specify "head" as the parent tag to insert noscript content inside the head tag.
Before:
In this example, custom fonts are loaded via Adobe Typekit using JavaScript. Without a resource link fallback, custom fonts can't be loaded.
`html`
Config:
`js
const fs = require('fs');
const posthtml = require('posthtml');
const { noscript } = require('posthtml-noscript');
const html = fs.readFileSync('./index.html');
posthtml()
.use(
noscript({
content: '',
parent: 'head'
})
)
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));
`
After:
If JavaScript is disabled, custom fonts can still be loaded.
`html``
See the PostHTML Guidelines.
[npm]: https://img.shields.io/npm/v/posthtml-noscript.svg?color=blue
[npm-url]: https://npmjs.com/package/posthtml-noscript
[deps]: https://david-dm.org/metonym/posthtml-noscript.svg
[deps-url]: https://david-dm.org/metonym/posthtml-noscript
[build]: https://travis-ci.com/metonym/posthtml-noscript.svg?branch=master
[build-badge]: https://travis-ci.com/metonym/posthtml-noscript
[codecov]: https://codecov.io/gh/metonym/posthtml-noscript
[codecov-shield]: https://img.shields.io/codecov/c/github/metonym/posthtml-noscript.svg