{"id":24983689,"url":"https://github.com/posthtml/posthtml-head-elements","last_synced_at":"2025-04-19T16:39:59.138Z","repository":{"id":57328796,"uuid":"46165012","full_name":"posthtml/posthtml-head-elements","owner":"posthtml","description":"Build HTML head elements from a JSON file","archived":false,"fork":false,"pushed_at":"2019-06-06T13:39:55.000Z","size":40,"stargazers_count":11,"open_issues_count":1,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T21:06:05.155Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posthtml.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-14T06:55:23.000Z","updated_at":"2024-06-18T22:21:06.000Z","dependencies_parsed_at":"2022-09-12T10:42:07.632Z","dependency_job_id":null,"html_url":"https://github.com/posthtml/posthtml-head-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-head-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-head-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-head-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-head-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posthtml","download_url":"https://codeload.github.com/posthtml/posthtml-head-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838362,"owners_count":21004571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-04T09:20:16.782Z","updated_at":"2025-04-19T16:39:59.108Z","avatar_url":"https://github.com/posthtml.png","language":"HTML","readme":"# posthtml-head-elements \n\n[![Build Status][ci-img]][ci]\n[![devDependency Status](https://david-dm.org/tcotton/portfolio/dev-status.svg?style=flat-square)](https://david-dm.org/tcotton/posthtml-head-elements#info=devDependencies)\n[![npm version](https://badge.fury.io/js/posthtml-head-elements.svg)](http://badge.fury.io/js/posthtml-head-elements)\n[![Coverage Status](https://coveralls.io/repos/posthtml/posthtml-head-elements/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/posthtml/posthtml-head-elements?branch=master)\n\n[ci-img]: https://travis-ci.org/posthtml/posthtml-head-elements.svg\n[ci]: https://travis-ci.org/posthtml/posthtml-head-elements\n\nThis plugin is intended to work with [PostHTML](https://github.com/posthtml/posthtml). It will allow you to keep HTML head elements - title, script, link, base and meta - in a separate JSON file:\n\n```json\n{\n  \"meta\": [\n    {\n      \"charset\": \"utf-8\"\n    },\n    {\n      \"http-equiv\": \"X-UA-Compatible\",\n      \"content\": \"IE=edge\"\n    },\n    {\n      \"name\": \"description\",\n      \"content\": \"A front-end template that helps you build fast, modern mobile web apps.\"\n    },\n    {\n      \"name\": \"viewport\",\n      \"content\": \"width=device-width, initial-scale=1\"\n    }\n  ],\n  \"title\": \"Web Starter Kit\",\n  \"link\": [\n    {\n      \"rel\": \"manifest\",\n      \"href\": \"manifest.json\"\n    },\n    {\n      \"rel\": \"icon\",\n      \"sizes\": \"192x192\",\n      \"href\": \"images/touch/chrome-touch-icon-192x192.png\"\n    }\n  ],\n  \"script\": [\n    {\n      \"src\": \"//cdn.polyfill.io/v1/polyfill.min.js\"\n    }\n  ],\n  \"base\": [\n    {\n      \"href\": \"/\"\n    }\n  ]\n}\n```\n\nA custom tag, which signifies where the HTML head elements should be inserted during the build process, needs to be placed in the document head:\n\n```html\n\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n\n  \u003cposthtml-head-elements\u003e\u003c/posthtml-head-elements\u003e\n\n  \u003c!-- Add to homescreen for Chrome on Android --\u003e\n  \u003cmeta name=\"mobile-web-app-capable\" content=\"yes\"\u003e\n  \u003cmeta name=\"application-name\" content=\"Web Starter Kit\"\u003e\n\n```\n\nThis is then configured like below if you are using [gulp-posthtml](https://www.npmjs.com/package/gulp-posthtml).\nPlease read the [PostHTML GitHub page](https://github.com/posthtml/posthtml) for plugin configuration guidelines.\n\n```javascript\n\nvar posthtml = require('gulp-posthtml');\nvar gulp = require('gulp');\nvar jsonPath = '/data/posthtml-head-elements.json';\n\ngulp.task('posthtml', function() {\n\n  var plugins = [\n    require('posthtml-head-elements')({headElements: jsonPath})\n  ];\n\n  return gulp.src('/app/index.html')\n    .pipe(posthtml(plugins))\n    .pipe(gulp.dest('/build/'));\n\n});\n\n```\n\nNote that the HTML head elements are inserted into the document in the spatial order they are laid out - from top to bottom\n\nIt 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.\n\nAn example of a JSON file with multiple head elements:\n\n```json\n{\n  \"meta\": [\n    {\n      \"charset\": \"utf-8\"\n    },\n    {\n      \"http-equiv\": \"X-UA-Compatible\",\n      \"content\": \"IE=edge\"\n    },\n    {\n      \"name\": \"description\",\n      \"content\": \"A front-end template that helps you build fast, modern mobile web apps.\"\n    },\n    {\n      \"name\": \"viewport\",\n      \"content\": \"width=device-width, initial-scale=1\"\n    }\n  ],\n  \"title\": \"Web Starter Kit\",\n  \"link\": [\n    {\n      \"rel\": \"manifest\",\n      \"href\": \"manifest.json\"\n    }\n  ],\n  \"meta_1\": [\n    {\n      \"name\": \"mobile-web-app-capable\",\n      \"content\": \"yes\"\n    },\n    {\n      \"name\": \"application-name\",\n      \"content\": \"Web Starter Kit\"\n    }\n  ],\n  \"link_1\": [\n    {\n      \"rel\": \"icon\",\n      \"sizes\": \"192x192\",\n      \"href\": \"images/touch/chrome-touch-icon-192x192.png\"\n    }\n  ],\n  \"meta_2\": [\n    {\n      \"name\": \"apple-mobile-web-app-capable\",\n      \"content\": \"yes\"\n    },\n    {\n      \"name\": \"apple-mobile-web-app-status-bar-style\",\n      \"content\": \"black\"\n    },\n    {\n      \"name\": \"apple-mobile-web-app-title\",\n      \"content\": \"Web Starter Kit\"\n    }\n  ],\n  \"link_2\": [\n    {\n      \"rel\": \"apple-touch-icon\",\n      \"href\": \"images/touch/apple-touch-icon.png\"\n    }\n  ],\n  \"meta_3\": [\n    {\n      \"name\": \"msapplication-TileImage\",\n      \"content\": \"mages/touch/ms-touch-icon-144x144-precomposed.png\"\n    },\n    {\n      \"name\": \"msapplication-TileColor\",\n      \"content\": \"3372DF\"\n    },\n    {\n      \"name\": \"theme-color\",\n      \"content\": \"#3372DF\"\n    }\n  ],\n  \"link_3\": [\n    {\n      \"rel\": \"stylesheet\",\n      \"href\": \"styles/main.css\"\n    }\n  ]\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-head-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposthtml%2Fposthtml-head-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-head-elements/lists"}