rehype-sectionize's Introduction

rehype-sectionize

Divide headings into sections

⚠️ This is a work in progress.

Usage

This package is available as a Rehype plugin.

API usage:

require("@rstacruz/rehype-sectionize").plugin(options)(root);

Usage with rehype:

const rehype = require("rehype");
const sectionize = require("@rstacruz/rehype-sectionize").plugin;

rehype()
  .use(sectionize, { level: "h2" })
  .process(fs.readFileSync("hello.html"), (err, file) => {
    if (err) throw err;
    console.log(String(file));
  });

Usage with gatsby-plugin-mdx:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        rehypePlugins: [
          [
            require("@rstacruz/rehype-sectionize").plugin,
            {
              /* Options here */
              level: "h2",
            },
          ],
        ],
      },
    },
  ],
};

Configuration

Key	Default value	Description
`level`	`"h2"`	The heading to fix up
`allowedTypes`	`{ element: true, jsx: true, text: true }`	What node types to allow to be placed inside a section

`prelude.enabled`	`true`	If true, then elements before the first h2 is wrapped on its own section
`prelude.tagName`	`"section"`	Tag name used in the prelude section
`prelude.properties`	`{}`	Properties to add to the prelude section

`section.tagName`	`"section"`	Tag name used in the section
`section.properties`	`{}`	Properties to add to the section
`section.addHeadingClass`	`true`	If true, class names from the H2 will be added to the section

`body.enabled`	`false`	Enables the body wrapper
`body.tagName`	`"div"`	Tag name used in the body inside the section
`body.properties`	`{}`	Properties to add to the body wrapper
`body.addHeadingClass`	`false`	If true, class names from the H2 will be added to the body element