particle-iot/metalsmith-autotoc

Name: metalsmith-autotoc

Owner: Particle

Description: A metalsmith plugin for generating table of contents.

Created: 2015-07-02 01:15:18.0

Updated: 2017-02-24 20:35:48.0

Pushed: 2018-01-03 18:32:57.0

Homepage:

Size: 12

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

metalsmith-autotoc

A metalsmith plugin to generate table of contents of a document.

This plugin generate table of contents object to document's metadata.

Installation

m install metalsmith-autotoc

Configuration

headerIdPrefix

Default: ``

This value will be added to generated header ids as a prefix.

selector

Default: 'h2,h3,h4,h5,h6'

A list of header selectors to search.

Example

Source file src/index.html:

toc: true
late: 'layout.eco'

aaa</h2>
aragraph</p>

bbb</h3>
aragraph</p>

ccc</h3>
aragraph</p>

ddd</h2>
aragraph</p>

Template file templates/layout.eco:

enderToc = (items) => %>
class="toc">
 for item in items: %>
i><a href="#<%= item.id %>"><%= item.text %></a>
<% if item.children.length > 0: %><%- renderToc(item.children) %><% end %>
li>
 end %>
>
nd %>

f @toc: %>
renderToc(@toc) %>
nd %>

@contents %>

Build file build.js:

metalsmith = require('metalsmith');
autotoc = require('metalsmith-autotoc');
templates = require('metalsmith-templates');

lsmith(__dirname)
ource('./src')
estination('./dest')
se(autotoc({selector: 'h2, h3, h4'}))
se(templates({
engine: 'eco',
directory: './templates'
)
uild();

Results file dest/index.html:

class="toc">
i><a href="#aaa">aaa</a>
<ol class="toc">
  <li><a href="#bbb">bbb</a></li>
  <li><a href="#ccc">ccc</a></li>
</ol>
li>
i><a href="#ddd">ddd</a></li>
>

id="aaa">aaa</h2>
aragraph</p>

id="bbb">bbb</h3>
aragraph</p>

id="ccc">ccc</h3>
aragraph</p>

id="ddd">ddd</h2>
aragraph</p>

License

MIT