gatsby-remark-sidenotes -- a Gatsby.js plugin to generate markup to style as sidenotes/margin-notes

example.md

I like trains.

A steam engine is a heat engine that performs mechanical work using steam as its working fluid. The steam engine uses the force produced by steam pressure to push a piston back and forth inside a cylinder. This pushing force can be transformed, by a connecting rod and crank, into rotational force for work ¹.

Footnotes

1. https://en.wikipedia.org/wiki/Steam_engine ↩

example.scss

[data-sidenote-contents] {
  float: right;
  clear: right;

  /* width of our gutter */
  width: 220px;
  /* 30px gap between content and sidenotes */
  margin-right: calc(-30px - 220px);

  @media screen and (max-width: 700px) {
    float: unset;
    position: relative;
  }
}

index.js

const visit = require("unist-util-visit")

// import showdown to convert inside of
// sidenotes from markdown to HTML
const showdown = require("showdown")
const converter = new showdown.Converter()

// generate markup for a sidenote
const getSidenote = note => ({
  type: "html",
  value: `<aside data-sidenote-contents>
    ${converter.makeHtml(note)}
    </aside>`,
})

// subroutine for visiting a markdown code block
const visitCodeNode = node => {
  const { value, lang } = node

  if (lang !== "sidenote") {
    // terminate without making changes if
    // this codeblock is not a sidenote
    return
  }

  const { type, value: html } = getSidenote(value)

  node.type = type
  node.value = html
}

const main = ({ markdownAST }) => {
  // visit ever code block
  visit(markdownAST, "code", visitCodeNode)
  return markdownAST
}

module.exports = main

package.json

{
  "name": "gatsby-remark-sidenotes",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "showdown": "^1.9.1",
    "unist-util-visit": "^2.0.3"
  }
}