/submarine

:rowboat: Markdown files to a static site

Primary LanguageJavaScript

Submarine Build Status js-standard-style

Submarine takes a directory full of markdown files and convert them into a static site of HTML pages, including a table of contents page.

Install

npm install submarine -g

Usage

API Example

var submarine = require('submarine')
var options = {
  input_dir: 'content',
  output_dir: 'site',
  header: 'API Example', // optional
  footer: 'hi this shows in the footer', // optional
  template: 'custom/default.html', // optional
  assets: 'custom/assetsdirectory' // optional
}

submarine(options, callback)

function callback (err) {
  if(err) return console.log(err)
  console.log('how wonderful.')
}

Command Line

Submarine takes 2 arguments, [input_dir] for where the markdown files live, and [output_dir] for where your static site will live.

Usage: submarine [input_directory] [output_directory]

Options:
  --header=<header>    customize static site header, default to "Submarine"
  --footer=<footer>    customize static site footer
  --template=<file>    use a custom template
  --assets=<directory> use a custom assets directory
  --version            prints current version

Command Line Example

Imagine your file structure looks like this:

guide/
  1_hello_world.md
  2_sup_world.md
  3_cool_story_world.md
  4_yolo_world.md

Then run this in this directory:

$ submarine guide site --header=Submarine --footer='Nice footer.'

The markdown files in ./guide will be converted, and a static site will be created in ./site. Your new file structure will look like this:

guide/
  1_hello_world.md
  2_sup_world.md
  3_cool_story_world.md
  4_yolo_world.md
site/
  1_hello_world.html
  2_sup_world.html
  3_cool_story_world.html
  4_yolo_world.html
  index.html
  assets/main.css

Template

You can specify a custom template with --template=cooltemplate.html, see the default template for an example. It's super easy, just write a single HTML file that contains these variables:

  • {{> header }} a string, retrived through options.header
  • {{> footer }} a string, retrived through options.footer
  • {{# index }} an array of objects(markdown -> html pages), each has 2 keys: href, name
  • {{{ content }}} markdown converted to HTML
  • {{ previous }} file name of the previous page
  • {{ next }} file name of the next page

Assets

You can specify a custom assets directory with --assets=assetsdirectory. This directory will be copied into your chosen output directory so you can include all your css, javascript and any other static assets you want. And don't worry, sub-directories will also be copied.

License

MIT

About

This, as well as many node modules now exist in the world, was inspired by a conversation with @maxogden. Perhaps you should hang out with him some time too.