metalsmith-content-sections v0.1.0

metalsmith-content-sections

A metalsmith plugin which parses html content into sections. Useful in scenarios like an FAQ's so that you can write your content in markdown but apply additional markup to the resulting file (ex: questions as accordions).

Installation

$ npm install metalsmith-content-sections

Usage

var Metalsmith = require('metalsmith');
var sections = require('metalsmith-content-sections');

Metalsmith(__dirname)
  .use(sections('h2'))
  .build();

Complete example (creating section accordions)

javascript

var Metalsmith = require('metalsmith');
var sections = require('metalsmith-content-sections');
var layouts = require('metalsmith-layouts');
var markdown = require('metalsmith-markdown');

Metalsmith(__dirname)
  .source('./resources')
  .destination('./build')
  .use(markdown())
  .use(layouts({
    engine: 'handlebars',
    pattern: "**/*.html"
  }))
  .use(inplace({
    engine: 'handlebars',
    pattern: "**/*.html"
  }))
  .use(sections("h2"));

Markdown

## Header
Content

##Next header
More content

Handlebars template

<ul class="accordion" data-accordion>
  {{#each contentSections }}
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">{{title}}</a>
    <div class="accordion-content" data-tab-content>
      {{content}}
    </div>
  </li>
  {{/each}}
</ul>

Built html

<ul class="accordion" data-accordion>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Header</a>
    <div class="accordion-content" data-tab-content>
      <p>Content</p>
    </div>
  </li>
  
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Next header</a>
    <div class="accordion-content" data-tab-content>
      <p>More content</p>
    </div>
  </li>
</ul>