❤
npm
Sign UpSign In

posthtml-noscript
TypeScript icon, indicating that this package has built-in type declarations

0.2.4 • Public • Published

posthtml-noscript

NPM Deps Build Coverage

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:

<body>
  <div id="root"></div>
</body>

After:

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

Install

yarn add -D posthtml-noscript
# OR 
npm i posthtml-noscript

Usage

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 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>

Contributing

See the PostHTML Guidelines.

Changelog

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i posthtml-noscript

Repository

github.com/metonym/posthtml-noscript

Homepage

github.com/metonym/posthtml-noscript

Weekly Downloads

0

Version

0.2.4

License

MIT

Unpacked Size

8.59 kB

Total Files

10

Last publish

Collaborators

  • metonym
Try on RunKit
Report malware