npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mkpage

v1.0.6

Published

Convert markdown to an HTML page

Downloads

24

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

mujimujitmpfstmpfs

Keywords

markdowncommonmarkasttransformstreamhtmlpage

Readme

Page

Build Status npm version Coverage Status

Create an HTML page

Converts a markdown document stream to a full HTML page with html, head and body elements.

Install

npm i mkpage --save

For the command line interface install mkdoc globally (npm i -g mkdoc).

Example

Create an HTML page:

mkcat README.md | mkpage --title=README | mkhtml > README.html

Use a stylesheet:

mkcat README.md | mkpage --title=README --style=style.css | mkhtml > README.html

Usage

Create the stream and write a commonmark document:

var page = require('mkpage')
  , ast = require('mkast');
ast.src('## Heading\n\nParagraph.')
  .pipe(page())
  .pipe(ast.stringify({indent: 2}))
  .pipe(process.stdout);

Help

Usage: mkpage [-h] [--async] [--help] [--version] [--doctype=<val>]
              [--charset=<val>] [--lang=<val>] [--title=<val>]
              [--style=<path...>] [--script=<path...>] [--css=<file>]
              [--javascript=<file>] [--favicon=<path>] [--media=<val>]
              [--html-[ATTR]=<val...>] [--meta-[NAME]=<desc...>]
              [--equiv-[NAME]=<desc...>] [--body-[ATTR]=<val...>]
              [--element=<name>] [--attr-[NAME]=<val...>] [--app=<path...>]
              [--header=<file>] [--footer=<file>]

  Convert a document to an HTML page.

Options
  -d, --doctype=[VAL]     Doctype declaration (default: <!doctype html>)
  -r, --charset=[VAL]     Document charset (default: utf-8)
  -l, --lang=[VAL]        Language attribute (default: en-us)
  -t, --title=[VAL]       Document title
  -s, --style=[PATH...]   Paths for link elements
  -S, --script=[PATH...]  Paths for script elements
  -c, --css=[FILE]        Create style element from FILE
  -j, --javascript=[FILE] Create script element from FILE
  -f, --favicon=[PATH]    Path to use for a favicon
  -m, --media=[VAL]       Set media attribute for stylesheets
  --html-[ATTR]=[VAL...]  Set attributes on the html element
  --meta-[NAME]=[DESC...] Set meta data in document head
  --equiv-[NAME]=[DESC...] 
                          Set http-equiv meta data in document head
  --body-[ATTR]=[VAL...]  Set attributes on the body element
  --element=[NAME]        Container element for the input document
  --attr-[NAME]=[VAL...]  Set attributes on container element
  --app=[PATH...]         Script elements before the end of the body
  --header=[FILE]         Include file at start of document body
  --footer=[FILE]         Include file at end of document body
  --async                 Add async attribute to script elements
  -h, --help              Display help and exit
  --version               Print the version and exit

[email protected]

API

page

page([opts][, cb])

Create an HTML page.

See HtmlPage for more options.

Returns an output stream.

  • opts Object processing options.
  • cb Function callback function.

Options

  • input Readable input stream.
  • output Writable output stream.

HtmlPage

HtmlPage([opts])

Wraps a document stream with HTML code blocks for the doctype, html, head and body elements.

This implementation wraps the entire output in a DOCUMENT node which is terminated with an EOF after all output has been sent.

If the element option is given the input markdown document is wrapped in a container element using the tag name given with the element option. In this case you can use the attr map to set attributes on the container element.

The meta option allows setting <meta name="" content="" /> elements in the head of the document; for example keywords or author information.

Both the header and footer options are file paths; when specified the files are loaded and parsed as markdown.

The data from the header file is written after the body element but before any container element. The data for the footer file is written after any container element and before the end of the body element.

If the title option is not given no title element is created.

The style and script options correspond to link and script elements created in the head of the document, each entry should be the URL to use for the href or src attribute.

When the favicon option is given it is a URL to an image to use as a shortcut icon, the path should have a .png or .ico extension so that the MIME type may be determined.

If the async option is given all script elements are given the async attribute.

The app array lists URLs for script elements to create just before the body element is closed; these script elements when given are guaranteed to be the final elements before the body element is closed (after any footer or container element).

You can set attributes on the html and body elements using the html and body options.

  • opts Object stream options.

Options

  • doctype String document type declaration.
  • lang String=en-us language attribute for the html element.
  • charset String=utf-8 document character set.
  • title String document title.
  • style Array paths for link elements.
  • script Array paths for script elements.
  • css String file path to inline css contents.
  • javascript String file path to inline javascript contents.
  • favicon String path to use for a favicon link element.
  • media String stylesheet media attribute.
  • async Boolean=false add async attribute to script elements.
  • html Object map of attributes for the html element.
  • meta Object map of name and descriptions for meta elements.
  • equiv Object map of name and content for meta http-equiv elements.
  • body Object map of attributes for the body element.
  • element String container element name.
  • attr Object map of attributes for the container element.
  • app Array paths for script elements before end of body.
  • header Array|String include files at start of body.
  • footer Array|String include files at end of body.

License

MIT

Created by mkdoc on May 19, 2016