mjml-fluent
A component for localizing other MJML components using Fluent.
Setup
This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies
:
npm install mjml-fluent
Or for installation via yarn:
yarn add mjml-fluent
(You may also be interested in installing mjml-test-library
to test the output of your MJML components.)
Once installed you need to register the component, instantiate the localizer with your Fluent bundles, and set it as the active localizer:
import { registerComponent } from 'mjml-core';
import MjLocalize, { MjmlLocalization, setLocalizer } from 'mjml-fluent';
registerComponent(MjLocalize);
const localizer = new MjmlLocalization(generateBundles());
setLocalizer(localizer);
With this you should now be able to use the component in your MJML templates.
Examples
Use the <mj-localize>
tag to localize the contents or attributes of MJML components.
Basic text
basic-text = This is some localized basic text
<mj-localize id="basic-text">
<mj-text>This is some basic text</mj-text>
</mj-localize>
Would produce something like:
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"
>
This is some localized basic text
</div>
Text with inner HTML
rich-text = This is a localized <a data-l10n-name="link">link</a>
<mj-localize id="rich-text">
<mj-text
>This is a basic
<a data-l10n-id="link" href="http://mozilla.com">link</a></mj-text
>
</mj-localize>
Would produce something like:
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"
>
This is a localized <a href="http://mozilla.com">link</a>
</div>
Image with attributes
image-with-attrs =
.alt = This is a localized image alt
.title = This is a localized image title
<mj-localize id="image-with-attrs" attrs="alt,title">
<mj-image
src="image.png"
alt="This is basic image alt text"
title="This is basic image title text"
/>
</mj-localize>
Would produce something like:
<img
alt="This is a localized image alt"
height="auto"
src="image.png"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;"
title="This is a localized image title"
width="550"
/>
Button with arguments
button-with-args = This is { $type } button text
<mj-localize id="button-with-args" args='{ "type": "localized" }'>
<mj-button>This is basic button text</mj-button>
</mj-localize>
Would produce something like:
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="vertical-align:top;"
width="100%"
>
<tbody>
<tr>
<td style="font-size:0px;word-break:break-word;">
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"
>
This is some localized basic text
</div>
</td>
</tr>
</tbody>
</table>
Attributes
The <mj-localize>
tag supports three attributes:
Name | Description | Required? | Default |
---|---|---|---|
id | The ID to look up the Fluent value with | Yes | |
attrs | A comma-separated list of attributes to replace | No | '' |
args | A JSON string of values to interpolate into the localization | No | '{}' |
Issues
Looking to contribute? Look for the Good First Issue label.
🐛 Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.
💡 Feature Requests
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.