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><divid="root"></div></body>After:
<body><noscript>You need to enable JavaScript to run this app.</noscript><divid="root"></div></body># Yarn
yarn add -D posthtml-noscript
# NPM
npm i -D posthtml-noscript
# pnpm
pnpm i -D posthtml-noscriptconstfs=require("fs");constposthtml=require("posthtml");const{ noscript }=require("posthtml-noscript");consthtml=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><scriptsrc="https://use.typekit.net/XYZ.js">try{Typekit.load({async: true});}catch(e){}</script></head>Config:
constfs=require("fs");constposthtml=require("posthtml");const{ noscript }=require("posthtml-noscript");consthtml=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><linkrel="stylesheet" href="fonts.css" /></noscript><scriptsrc="https://use.typekit.net/XYZ.js">try{Typekit.load({async: true});}catch(e){}</script></head>See the PostHTML Guidelines.