# mjml-pardot

> Mailchimp compatible MJML v4 components

Latest version **0.0.23** (published 2020-11-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install mjml-pardot
pnpm add mjml-pardot
yarn add mjml-pardot
bun add mjml-pardot
```

Provides the command `mjml-pardot`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.23 |
| Published | 2020-11-25 |
| First published | 2020-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 53.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Alexander Nortung |
| Maintainers | alexnortung |

## Links

- npm: https://www.npmjs.com/package/mjml-pardot
- Repository: https://github.com/alexnortung/mjml-pardot
- Homepage: https://github.com/alexnortung/mjml-pardot#readme
- Issues: https://github.com/alexnortung/mjml-pardot/issues
- npm.io page: https://npm.io/package/mjml-pardot

## Dependencies (10)

- [mjml](https://npm.io/package/mjml.md) ^4.7.1
- [mjml-cli](https://npm.io/package/mjml-cli.md) ^4.7.1
- [mjml-core](https://npm.io/package/mjml-core.md) ^4.4.0-beta.1
- [mjml-text](https://npm.io/package/mjml-text.md) ^4.4.0-beta.1
- [mjml-image](https://npm.io/package/mjml-image.md) ^4.4.0-beta.1
- [mjml-button](https://npm.io/package/mjml-button.md) ^4.4.0-beta.1
- [mjml-column](https://npm.io/package/mjml-column.md) ^4.7.1
- [mjml-section](https://npm.io/package/mjml-section.md) ^4.4.0-beta.1
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0
- [mjml-validator](https://npm.io/package/mjml-validator.md) ^4.4.0-beta.1

## Recent versions

- 0.0.23 (latest) — 2020-11-25
- 0.0.22 — 2020-11-25
- 0.0.21 — 2020-11-20
- 0.0.20 — 2020-11-20
- 0.0.19 — 2020-11-20
- 0.0.18 — 2020-11-20
- 0.0.17 — 2020-11-20
- 0.0.16 — 2020-11-20
- 0.0.15 — 2020-11-12
- 0.0.14 — 2020-11-12
- 0.0.13 — 2020-11-12
- 0.0.12 — 2020-11-12
- 0.0.11 — 2020-11-12
- 0.0.10 — 2020-11-12
- 0.0.9 — 2020-11-12
- … 4 more at https://npm.io/package/mjml-pardot/versions

## README

# MJML Pardot

Pardot compatible MJML components.
This is a fork of [mjml-mailchimp](https://github.com/homerjam/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](https://github.com/mjmlio/mjml/tree/master/packages/mjml-cli).

### Globally (recommended)

Globally with mjml-cli interface:

```bash
npm i -g mjml-pardot
```

### Project

For project:

```bash
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

```js
// 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](https://github.com/mjmlio/mjml/tree/master/packages/mjml-cli).

the base command is `mjml-pardot` instead of `mjml`

examples

```bash
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:

```js
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](https://help.salesforce.com/articleView?id=pardot_content_regions.htm&type=5).

### mp-button

Extends [mj-button](https://github.com/mjmlio/mjml/tree/master/packages/mjml-button) see its docs for more info.

| Attribute         | Unit    | Description                                                 | Default value |
|-------------------|---------|-------------------------------------------------------------|---------------|
| pardot-region     | boolean | if true, adds pardot-region to inner text tag               | false         |
| pardot-removable  | boolean | if true, adds pardot-removable to outer table tag on button | false         |
| pardot-repeatable | boolean | if true, adds pardot-repeatable to out table tag on button  | false         |

-------

### mp-column

Extends [mj-column](https://github.com/mjmlio/mjml/tree/master/packages/mjml-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.

| Attribute                  | Unit    | Description                                                                                                                                                                          | Default value |
|----------------------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
| pardot-repeatable-children | boolean | if true, adds pardot-repeatable to all <tr> children of the column. This also allows the user to rearrange the column, which can be very useful.                                     | false         |
| pardot-removable           | boolean | if true, adds pardot-removable to out div tag on button (NOT recommended). Since mjml sets the width of columns on compile time it will keep its width when removed or repeated.tton | false         |
| pardot-repeatable          | boolean | if true, adds pardot-repeatable to out div tag on button (NOT recommended). Since mjml sets the width of columns on compile time it will keep its width when removed or repeated.    | false         |

-------

### mp-image

Extends [mj-image](https://github.com/mjmlio/mjml/tree/master/packages/mjml-image) see its docs for more info.

| Attribute        | Unit    | Description                                           | Default value |
|------------------|---------|-------------------------------------------------------|---------------|
| pardot-region    | boolean | If true, adds pardot-region to <img> tag        | false         |
| pardot-removable | boolean | if true, adds pardot-removable to outer <table> | false         |
| pardot-responsive-image | percentage | if true, adds percentage wiidth to img tag | undefined      |

-------

### mp-section

Extends [mj-section](https://github.com/mjmlio/mjml/tree/master/packages/mjml-section) see its docs for more info.

| attribute | unit | description | default value |
|---|---|---|---|
|pardot-removable|boolean|if true, adds a pardot-removable tag to the outer div| false|
|pardot-repeatable|boolean|if true, adds a pardot-repeatable tag to the outer div| false|
|pardot-region|boolean|if true, adds a pardot-region tag to the outer div| false|

-------

### mp-social-element

Extends [mj-social-element](https://github.com/mjmlio/mjml/tree/master/packages/mjml-social) 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"`.

| Attribute         | Unit    | Description                                              | Default value |
|-------------------|---------|----------------------------------------------------------|---------------|
| pardot-region     | boolean | If true, adds pardot-region to outer <tr> tag.     | false         |
| pardot-removable  | boolean | If true, adds pardot-removable to outer <tr> tag.  | false         |
| pardot-repeatable | boolean | If true, adds pardot-repeatable to outer <tr> tag. | false         |

-------

### mp-text

Extends [mj-social-element](https://github.com/mjmlio/mjml/tree/master/packages/mjml-social) see its docs for more info.

| Attribute        | Unit    | Description                                                | Default value |
|------------------|---------|------------------------------------------------------------|---------------|
| pardot-region    | boolean | If true, adds pardot-region to content <div> tag.    | false         |
| pardot-removable | boolean | If true, adds pardot-removable to content <div> tag. | false         |

## Contributing

see [contributing.md](./contributing.md)

## Development

Make sure to install all dependencies

```bash
npm i
```

### Building

Build all components.

```bash
npm run build
```

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

---
_Source: https://npm.io/package/mjml-pardot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._