mjml-pardot v0.0.23

MJML Pardot

Pardot compatible MJML components. This is a fork of mjml-mailchimp which has very similar funtionality, but for mailchimp.

Getting started

Install the package for a specific project or globally to use it like the mjml-cli.

Globally (recommended)

Globally with mjml-cli interface:

npm i -g mjml-pardot

Project

For project:

npm i mjml-pardot

When installing for a specific project you can either add the components to your own pipeline in a build.js file, or make an npm script

npm script example

// package.json
{
    "scripts": {
        "build": "mjml-pardot path/to/file.mjml -o path/to/putput.html"
    }
}

Usage

Setup

CLI

Using the cli is as easy as the mjml-cli and uses the same interface. You should check out it's docs.

the base command is mjml-pardot instead of mjml

examples

mjml-pardot
mjml-pardot --help
mjml-pardot path/to/file.mjml
mjml-pardot path/to/file.mjml -o

Project

For package.json use see Getting started.

If you decide to use a pipeline instead, you would have to register the components and their dependencies.

Example:

const mjml2html = require('mjml')
const { registerComponent } = require('mjml-core')
const { registerDependencies } = require('mjml-validator')
const {
  MpSection,
  MpImage,
  MpText,
  MpButton,
  MpColumn,
  MpSocialElement,
} = require('mjml-pardot')

registerComponent(MpSection)
registerComponent(MpImage)
registerComponent(MpText)
registerComponent(MpButton)
registerComponent(MpColumn)
registerComponent(MpSocialElement)

// register your own components
// example of a custom carousel
const MyCustomCarousel = require('./my-custom-carousel.js')
registerComponent(MyCustomCarousel)
// Tell mjml that MyCustomCarousel can be used inside MpColumn
// only if you decide to use MpColumn
registerDependencies({
    'mp-column': ['my-custom-carousel'],
})

// do your other pipeline stuff (like reading file etc.)

console.log(mjml2html(someFileContent))

This is just an example and will get you started if you need to make these components work with your own components.

Components

All components are replacements of the original mjml components. They all have the same prefix mp- instead of mj-.

Also make sure to chack out the pardot docs.

mp-button

Extends mj-button see its docs for more info.

mp-column

Extends mj-column see its docs for more info.

NOTE: repeatable and removable columns are not recommended since mjml sets the width of each column at compilation. If they are removed or repeated, the layout of the section might get messy very quickly.

mp-image

Extends mj-image see its docs for more info.

mp-section

Extends mj-section see its docs for more info.

mp-social-element

Extends mj-social-element see its docs for more info.

This component is made to be able to modify text and icon on mj-social-element and making them repeatable.

NOTE: repeatable might only work correctly in for mj-social tags with attribute mode="vertical".

mp-text

Extends mj-social-element see its docs for more info.

Contributing

see contributing.md

Development

Make sure to install all dependencies

npm i

Building

Build all components.

npm run build

Built components should stay ignored and only be published via npm.