posthtml-head-elements

0.5.1 • Public • Published

posthtml-head-elements

Build Status devDependency Status npm version Coverage Status

This plugin is intended to work with PostHTML. It will allow you to keep HTML head elements - title, script, link, base and meta - in a separate JSON file:

{
  "meta": [
    {
      "charset": "utf-8"
    },
    {
      "http-equiv": "X-UA-Compatible",
      "content": "IE=edge"
    },
    {
      "name": "description",
      "content": "A front-end template that helps you build fast, modern mobile web apps."
    },
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    }
  ],
  "title": "Web Starter Kit",
  "link": [
    {
      "rel": "manifest",
      "href": "manifest.json"
    },
    {
      "rel": "icon",
      "sizes": "192x192",
      "href": "images/touch/chrome-touch-icon-192x192.png"
    }
  ],
  "script": [
    {
      "src": "//cdn.polyfill.io/v1/polyfill.min.js"
    }
  ],
  "base": [
    {
      "href": "/"
    }
  ]
}

A custom tag, which signifies where the HTML head elements should be inserted during the build process, needs to be placed in the document head:

 
<!doctype html>
<html lang="en">
<head>
 
  <posthtml-head-elements></posthtml-head-elements>
 
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="Web Starter Kit">
 

This is then configured like below if you are using gulp-posthtml. Please read the PostHTML GitHub page for plugin configuration guidelines.

 
var posthtml = require('gulp-posthtml');
var gulp = require('gulp');
var jsonPath = '/data/posthtml-head-elements.json';
 
gulp.task('posthtml', function() {
 
  var plugins = [
    require('posthtml-head-elements')({headElements: jsonPath})
  ];
 
  return gulp.src('/app/index.html')
    .pipe(posthtml(plugins))
    .pipe(gulp.dest('/build/'));
 
});
 

Note that the HTML head elements are inserted into the document in the spatial order they are laid out - from top to bottom

It is possible to mix the head elements, but the JSON syntax requires a unique key. Therefore, if you are using more than one head element, place an underscore immediately afterwards.

An example of a JSON file with multiple head elements:

{
  "meta": [
    {
      "charset": "utf-8"
    },
    {
      "http-equiv": "X-UA-Compatible",
      "content": "IE=edge"
    },
    {
      "name": "description",
      "content": "A front-end template that helps you build fast, modern mobile web apps."
    },
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    }
  ],
  "title": "Web Starter Kit",
  "link": [
    {
      "rel": "manifest",
      "href": "manifest.json"
    }
  ],
  "meta_1": [
    {
      "name": "mobile-web-app-capable",
      "content": "yes"
    },
    {
      "name": "application-name",
      "content": "Web Starter Kit"
    }
  ],
  "link_1": [
    {
      "rel": "icon",
      "sizes": "192x192",
      "href": "images/touch/chrome-touch-icon-192x192.png"
    }
  ],
  "meta_2": [
    {
      "name": "apple-mobile-web-app-capable",
      "content": "yes"
    },
    {
      "name": "apple-mobile-web-app-status-bar-style",
      "content": "black"
    },
    {
      "name": "apple-mobile-web-app-title",
      "content": "Web Starter Kit"
    }
  ],
  "link_2": [
    {
      "rel": "apple-touch-icon",
      "href": "images/touch/apple-touch-icon.png"
    }
  ],
  "meta_3": [
    {
      "name": "msapplication-TileImage",
      "content": "mages/touch/ms-touch-icon-144x144-precomposed.png"
    },
    {
      "name": "msapplication-TileColor",
      "content": "3372DF"
    },
    {
      "name": "theme-color",
      "content": "#3372DF"
    }
  ],
  "link_3": [
    {
      "rel": "stylesheet",
      "href": "styles/main.css"
    }
  ]
}

Package Sidebar

Install

npm i posthtml-head-elements

Weekly Downloads

898

Version

0.5.1

License

MIT

Unpacked Size

19.2 kB

Total Files

8

Last publish

Collaborators

  • tcotton