Add a Github corner to a stream of html
Tim Holman's Github Corners are great! This is a quick way to avoid having to copy/paste them by hand. 😀
$ npm install html-inject-github-corner
This tool works great with indexhtmlify and html-inject-meta. For example:
$ browserify index.js | indexhtmlify | html-inject-meta | html-inject-github-corner > index.html
This tools takes a stream of html and transforms it to include a github corner. It looks first to direct options, then to the repository
field of the nearest package.json
, and finally will accept any of these options from a github-corner
field in package.json
.
Options:
--help Display this message and exit
--bg Background color
--fg Foreground color
--z-index CSS z-index of corner (default: 10000)
--position CSS position of corner (default: 'absolute')
--class CSS class for element (default: 'github-corner')
--url Repository url (by default, looks at repository url of nearest package.json
--side Either "left" or "right"
$ browserify index.js | indexhtmlify | html-inject-meta | html-inject-github-corner > index.html
This can also be used as a through stream:
This creates a through stream that transforms html to include a github corner. The options are exactly the same as for the command line version:
bg
: A valid CSS color for the triangular backgroundfg
: A valid CSS color for the octocat foregroundzIndex
: The z-index of the corner. Default is10000
.position
: The CSS position of the corner. Default is'absolute'
.repository
: A url to use in the link. Follows the format of thepackage.json
repository
field. If not provided, the nearestpackage.json
will be located and analyzed. Within reason, will transformed to a web url.side
:'left' | 'right'
. Default side for the link is the right side.class
: An optional CSS class for the element. Default is.github-corner
.
Returns: A through stream that appends CSS into the head tag and prepends the github corner to the HTML.
© 2016 Ricky Reusser. MIT License. Original assets are adapted from tholman/github-corners. See LICENSE for more details.