Manup NPM | npm.io

ManUp.js

Provides the function manup() which given a Web App Manifest object generates according meta and link tags for older browsers. Output is an array of arrays of which the first value is the tag (meta or link) and the second value is the object of attribute/value pairs.

Install

npm i manup

Usage

import manup from 'manup';

const manifest = JSON.parse(fs.readFileSync('./manifest.json', 'utf8'));
const headElements = manup(manifest);

Example manifest.json:

{
  "short_name": "ManUp.js",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#f44336"
}

Example output headElements array:

[
  [ 'meta', { name: 'theme-color', content: '#f44336' } ],
  [ 'meta', { name: 'mobile-web-app-capable', content: 'yes' } ],
  [ 'meta', { name: 'apple-mobile-web-app-capable', content: 'yes' } ],
  [ 'meta', { name: 'apple-mobile-web-app-title', content: 'ManUp.js' } ],
  [ 'meta', { name: 'application-name', content: 'ManUp.js' } ],
  [ 'meta', { name: 'msapplication-navbutton-color', content: '#f44336' } ],
  [ 'link', { rel: 'icon', sizes: '192x192', href: '/icon-192.png' } ]
]

Browsers will choose whether to use the manifest.json or the tags.

Usage with React

const Html = ({ headElements }) => (
  <html lang='en-EN'>
    <head>
      <title>ManUp.js</title>
      <link rel='manifest' href='/manifet.json' />
      {headElements.map(([tag, props], idx) =>
        React.createElement(tag, { ...props, key: idx })
      )}
    </head>
    <body>
      <div id='app' />
    </body>
  </html>
);

Props

The foundation for this comes from https://github.com/boyofgreen/ManUp.js -- thanks! The code was simplified and rewritten as a node module and some more supported tags added.

manifest.json meta link icons app

@everything-registry/sub-chunk-2128 @zalastax/nolb-manu

1.0.1

9 years ago

1.0.0

9 years ago