Reshape hfill

Reshape hfill lets you easily use contextual headings in HTML, like the proposed <h> element.

<!-- before -->
<h>Heading</h>
<p>...</p>
<section>
  <h>Heading</h>
  <p>...</p>
  <section>
    <h>X Heading</h>
    <p>...</p>
  </section>
</section>
<section>
  <p>...</p>
  <h>Heading</h>
  <p>...</p>
</section>
 
<!-- after -->
<h role="heading" aria-level="1">Heading</h>
<p>...</p>
<section>
  <h role="heading" aria-level="2">Heading</h>
  <p>...</p>
  <section>
    <h role="heading" aria-level="3">X Heading</h>
    <p>...</p>
  </section>
</section>
<section>
  <p>...</p>
  <h role="heading" aria-level="2">Heading</h>
  <p>...</p>
</section>
 
<!-- or, alternatively -->
<h1>Heading</h1>
<p>...</p>
<section>
  <h2>Heading</h2>
  <p>...</p>
  <section>
    <h3>X Heading</h3>
    <p>...</p>
  </section>
</section>
<section>
  <p>...</p>
  <h2>Heading</h2>
  <p>...</p>
</section>

Usage

Add Reshape and Reshape hfill to your build tool:

npm install reshape reshape-hfill --save-dev

Use Reshape hfill as a plugin:

import reshape from 'reshape';
import reshapeHfill from 'reshape-hfill';
 
reshape({
  plugins: [
    reshapeHfill(/* options */)
  ]
}).process(YOUR_HTML);

Options

headings

Type: Object
Default: { "h": [ "h", "h1", "h2", "h3", "h4", "h5", "h6" ] }

A list of heading tags that should be created from the array of tags, alternatively transforming them into their calculated hierarchical level by a numerical range.

Example: Only transform <h> tags:

{
  "headings": {
    "h": [
      "h"
    ]
  }
}

Example: Transform many tags into their calculated hierarchical level (1-6):

{
  "headings": {
    "1-6": [ "h", "h1", "h2", "h3", "h4", "h5", "h6" ]
  }
}

sections

Type: Array
Default: [ "article", "aside", "nav", "section" ]

A list of sectioning content tags used to calculate the hierarchical level of heading tags.

Example: Only increase the hierarchical level on <article>, <aside>, and <section> tags:

{
  "sections": [ "article", "aside", "section" ]
}