@project-r/template-newsletter v1.5.0

Mdast Utils

This repository contains utilities we've used to combine mdast and Slate in our CMS—Publikator.

Packages in this repo, all available on NPM:

• slate-mdast-serializer
• mdast-react-render
• @orbiting/remark-preset
• @project-r/template-newsletter

Serializer

The first challange was to convert a Slate tree to an mdast tree.

slate-mdast-serializer takes care of that with customizable rules.

The API is inspired by slate-html-serializer—deserialize and serialize are available to convert between Slate Value and a mdast tree. Additionally fromMdast and toMdast is available to convert any Slate json to mdast nodes.

import MarkdownSerializer from 'slate-mdast-serializer'

new MarkdownSerializer({
  rules: [
    paragraph,
    bold
  ]
})

• Try it in your browser
• Readme with API docs

Remark Preset

Preconfigured remark with plugins for zone, sub, sup and span types and yaml meta data.

Use this on your server if you want to persist mdast tree as strings—markdown files. In your editor to import and export markdown. Or as a helper in your tests to skip writing mdast trees by hand.

import { parse, stringify } from '@orbiting/remark-preset'

const md = 'Hello **World**\n'
const mdast = parse(md)

md === stringify(mdast)

• Readme with API docs

Renderer

Your front ends shouldn't load Slate or remark (the mdast processor) for just displaying content. Send you front end an mdast tree (as json) and let it be rendered with react and this under hundred-lines-of-code-long util.

mdast-react-render renders your mdast tree according to a schema.

import { renderMdast } from 'mdast-react-render'

const schema = {
  rules: [{
    matchMdast: matchType('root'),
    component: Container,
    rules: [paragraph, bold]
  }]
}

renderMdast(mdast, schema)

• Try it in your browser
• Readme with API docs

Example Template

This isn't meant for direct usage but for understanding how you might use above utils, Publikator and a starting point for your own templates.

In packages/template-newsletter you'll find the newsletter template schema of Project R that can render to web and email. It also contains editor information and can be initiated with our CMS to author newsletters according to the schema.

• Web schema
• Email schema