A component for localizing other MJML components using Fluent.
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.
Use the <mj-localize>
tag to localize the contents or attributes of MJML components.
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>
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-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-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>
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 | '{}' |
Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.