Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rreusser/html-inject-meta

Stream meta tags into html
https://github.com/rreusser/html-inject-meta

Last synced: 3 months ago
JSON representation

Stream meta tags into html

Awesome Lists containing this project

README 

        
# html-inject-meta



> Stream meta tags into html



[![Build Status][travis-image]][travis-url]

[![npm version][npm-image]][npm-url]

[![Dependency Status][david-dm-image]][david-dm-url]

[![Semistandard Style][semistandard-image]][semistandard-url]

[![unstable][stability-unstable]][stability-url]



## Introduction



Add metadata tags to a stream of html so that it looks pretty when you share it. See: [indexhtmlify#5](https://github.com/dominictarr/indexhtmlify/issues/5).



## Installation



```

$ npm i html-inject-meta 

```



## Usage



`html-inject-meta` is designed to just work without much configuration, but allows overrides when necessary. The input _must_ be valid html containing `head` and `title` tags. Insertion of the `meta` tags is _not_ idempotent. Used without any arguments, the command line version looks for the nearest `package.json`. For example:



```bash

$ html-inject-meta < input.html

```



Given `package.json`:



```json

{

  "name": "html-inject-meta",

  "description": "Stream meta tags into html",

  "author": "Ricky Reusser"

}

```



and given a minimal html input



```html



  

    -

  

  

  



```



it produces the output:



```html



  

    html-inject-meta

    

    

    

    

    

    

    

    

    

    

    

  

  

  



```



If you don't want to pollute your `package.json` with metadata for sharing, you can override the defaults by adding a `html-inject-meta` field to your `package.json`, e.g:



```json

{

  "name": "html-inject-meta",

  "description": "My npm package description",

  "author": "Ricky Reusser",

  "html-inject-meta": {

    "name": "My html-inject-meta demo",

    "description": "Here's a neat demo",

    "url": "http://html-inject-meta.github.io",

    "author": "Ricky Reusser",

    "image": "http://rawgit.com/rreusser/html-inject-meta/master/images/screenshot.png"

  }

}

```



Even better, use it with [indexhtmlify](https://github.com/dominictarr/indexhtmlify):



```bash

$ browserify index.js | indexhtmlify | html-inject-meta > index.html

```



To override the nearest `package.json` with your own input JSON:



```bash

$ html-inject-meta --input=mydata.json < input.html

```



You can disable json input with `--no-input` and instead specify fields on the command line:



```bash

$ html-inject-meta --no-input --title="My page!" --description="A description..." --author="My Name" < input.html

```



If you need further customization or more specificity, look in the code to see the precise logic. PRs with improvements are welcome!



## API



#### `require('html-inject-meta')([data])`



Returns a transform stream that applies to a stream of html the changes specified in `data`. The format of `data` identically matches the format of `package.json` that is read by the command line version, including the optional `html-inject-meta` field.



***NB: My only use-case for this module is for building static pages. I've done my best to escape entities so that scrapers handle the meta tags well. Escaping via the [entities](https://www.npmjs.com/package/entities) module is too strong so that entities show up in the scraped data. Instead I've escaped `&`, `"`, `<` and `>` which should provide basic sanitization, but you should exercise caution if passing end-user data through to a publicly distributed page. I'm not willing to assert that malicious injection is absolutely impossible. But realistically it seems fine to me and not like the intended use case anyway. I mean why would you construct your own malicious package.json? I just feel like it's important to be transparent about this. Please don't hesitate to file an issue or PR with any issues or concerns.***



## See also



This module is heaviliy inspired by and works great with [indexhtmlify](https://github.com/dominictarr/indexhtmlify). Many thanks to [Dima Yv](https://github.com/dfcreative) for the initial inspiration.



## License



© 2016 Ricky Reusser. MIT License.



[travis-image]: https://travis-ci.org/rreusser/html-inject-meta.svg?branch=master

[travis-url]: https://travis-ci.org/rreusser/html-inject-meta



[npm-image]: https://badge.fury.io/js/html-inject-meta.svg

[npm-url]: https://npmjs.org/package/html-inject-meta



[david-dm-image]: https://david-dm.org/rreusser/html-inject-meta.svg?theme=shields.io

[david-dm-url]: https://david-dm.org/rreusser/html-inject-meta



[semistandard-image]: https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square

[semistandard-url]: https://github.com/Flet/semistandard



[stability-url]: https://github.com/badges/stability-badges

[stability-deprecated]: http://badges.github.io/stability-badges/dist/deprecated.svg

[stability-experimental]: http://badges.github.io/stability-badges/dist/experimental.svg

[stability-unstable]: http://badges.github.io/stability-badges/dist/unstable.svg

[stability-stable]: http://badges.github.io/stability-badges/dist/stable.svg

[stability-frozen]: http://badges.github.io/stability-badges/dist/frozen.svg

[stability-locked]: http://badges.github.io/stability-badges/dist/locked.svg