@xmark/transform-section-template v0.24.1

@xmark/transform-section-template

XMark plugin to compose landing pages with markdown, must be used together with @xmark/transform-wrap-headings

Usage

const fs = require('fs');
const h = require('hastscript');
const inspect = require('unist-util-inspect');
const XMark = require('@xmark/core');
const wrap = require('@xmark/transform-wrap-headings');
const plugin = require('@xmark/transform-section-template');

const markdownExtensions = {
  ContactForm: h('contact-form', {}),
  ActionButton: h('action-button', {
    text: '::content::',
    href: '::argument::',
    icon: '::prop::icon::',
    border: '::prop::border::',
    theme: '::prop::theme::',
    size: '::prop::size::',
    width: '::prop::width::',
    color: '::prop::color::',
    gradient: '::prop::gradient::',
  }),
  ContentIcon: h('content-icon', { name: '::content::', color: '::argument::' }),
  MuiPaper: h('mui-paper'),
};

const xmark = XMark({
  extensionConfig: {
    elements: Object.keys(markdownExtensions).reduce((acc, x) => {
      delete markdownExtensions[x].type;
      acc[x] = { html: markdownExtensions[x] };
      return acc;
    }, {}),
  },
});

xmark.useTransform(wrap, {
  parseAttributes: true,
  parseStyleAttributes: true,
  wrapperTag: 'section',
  enabledHeadings: ['h2', 'h4', 'h5', 'h6'],
  wrapperClasses: {
    wrapper: 'section',
    modifier: x => `section--level${x}`,
  },
});

xmark.useTransform(plugin, {
  selectors: {
    sectionImage: 'p:has(img)',
  },
});

const hast = xmark.toHAST(fs.readFileSync(`./tests/markdown/${template}.md`).toString());
console.log(template, inspect(hast));