https://github.com/posthtml/posthtml-noscript
PostHTML plugin to insert noscript content
https://github.com/posthtml/posthtml-noscript
noscript posthtml posthtml-plugin
Last synced: 11 months ago
JSON representation
PostHTML plugin to insert noscript content
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-noscript
- Owner: posthtml
- License: mit
- Created: 2019-08-17T01:22:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-06T02:34:29.000Z (over 2 years ago)
- Last Synced: 2024-10-29T21:06:06.680Z (over 1 year ago)
- Topics: noscript, posthtml, posthtml-plugin
- Language: TypeScript
- Homepage:
- Size: 286 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# posthtml-noscript 
[![NPM][npm]][npm-url]
`posthtml-noscript` is a [PostHTML](https://github.com/posthtml/posthtml) plugin to insert [noscript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) content.
**Use Cases:**
- Display an "Enable JavaScript" message in a Single Page Application (SPA)
- Specify resourcs (e.g. StyleSheets) to load if JavaScript is disabled
---
**Before:**
```html
```
**After:**
```html
You need to enable JavaScript to run this app.
```
## Installation
```bash
# Yarn
yarn add -D posthtml-noscript
# NPM
npm i -D posthtml-noscript
# pnpm
pnpm i -D posthtml-noscript
```
## Usage
```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));
```
## Options
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](https://fonts.adobe.com/) using JavaScript. Without a resource link fallback, custom fonts can't be loaded.
```html
try { Typekit.load({ async: true }); } catch(e) {}
```
**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
try { Typekit.load({ async: true }); } catch(e) {}
```
## Contributing
See the [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs).
## [Changelog](CHANGELOG.md)
## License
[MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/posthtml-noscript.svg?color=blue
[npm-url]: https://npmjs.com/package/posthtml-noscript