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"
        }
      ]
    }

    Install

    npm i posthtml-head-elements

    DownloadsWeekly Downloads

    328

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    19.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • tcotton