posthtml-noscript is a PostHTML plugin to insert 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:
<body>
<div id="root"></div>
</body>After:
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body># Yarn
yarn add -D posthtml-noscript
# NPM
npm i -D posthtml-noscript
# pnpm
pnpm i -D posthtml-noscriptconst 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.
<head>
<script src="https://use.typekit.net/XYZ.js">
try { Typekit.load({ async: true }); } catch(e) {}
</script>
</head>Config:
const fs = require("fs");
const posthtml = require("posthtml");
const { noscript } = require("posthtml-noscript");
const html = fs.readFileSync("./index.html");
posthtml()
.use(
noscript({
content: '<link rel="stylesheet" href="fonts.css" />',
parent: "head",
})
)
.process(html)
.then((result) => fs.writeFileSync("./after.html", result.html));After:
If JavaScript is disabled, custom fonts can still be loaded.
<head>
<noscript><link rel="stylesheet" href="fonts.css" /></noscript>
<script src="https://use.typekit.net/XYZ.js">
try { Typekit.load({ async: true }); } catch(e) {}
</script>
</head>See the PostHTML Guidelines.