Skip to content

Commit 6263c2b

Browse files
tcapettcapet
committed
Merge branch 'master' into fix/replace-html-minifier
2 parents 87e378e + 375c593 commit 6263c2b

File tree

89 files changed

+2550
-384
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+2550
-384
lines changed

‎.eslintrc‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
{
2-
"extends": [
3-
"airbnb-base",
4-
"prettier"
5-
],
2+
"extends": ["airbnb-base", "prettier"],
63
"parser": "babel-eslint",
74
"rules": {
8-
"comma-dangle": [ 2, "always-multiline" ],
9-
"semi": [ 2, "never" ],
5+
"comma-dangle": [2, "always-multiline"],
6+
"semi": [2, "never"],
107
"no-mixed-operators": 0,
118
"no-shadow": 0,
129
"no-param-reassign": 0,
13-
"no-restricted-syntax": 0
10+
"no-restricted-syntax": 0,
1411
},
1512
"env": {
16-
"node": true
17-
}
13+
"node": true,
14+
"mocha": true,
15+
},
16+
"overrides": [
17+
{
18+
"files": ["packages/mjml/test/*.test.js"],
19+
"rules": {
20+
"prefer-arrow-callback": "off",
21+
"func-names": "off",
22+
},
23+
},
24+
],
1825
}

‎.github/workflows/mjml-workflow.yml‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,4 @@ jobs:
1717
yarn install
1818
yarn build
1919
yarn lint
20-
cd packages/mjml-parser-xml
21-
yarn install
22-
yarn test --debug
23-
cd ../../packages/mjml-core
24-
yarn test --debug
25-
cd ../../packages/mjml
2620
yarn test

‎.github/workflows/npm-publish.yml‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
name: Publish Package to NPM
2+
on:
3+
workflow_dispatch:
4+
inputs:
5+
release_type:
6+
description: 'Version bump type'
7+
required: true
8+
default: 'patch'
9+
type: choice
10+
options:
11+
- patch
12+
- minor
13+
- major
14+
jobs:
15+
build:
16+
runs-on: ubuntu-latest
17+
permissions:
18+
contents: write
19+
id-token: write
20+
steps:
21+
- uses: actions/checkout@v5
22+
with:
23+
fetch-depth: 0
24+
- uses: actions/setup-node@v4
25+
with:
26+
node-version: '20.x'
27+
registry-url: 'https://registry.npmjs.org'
28+
- run: yarn install
29+
- run: yarn build
30+
- run: yarn build-browser
31+
- name: Configure git user
32+
run: |
33+
git config user.name "github-actions[bot]"
34+
git config user.email "github-actions[bot]@users.noreply.github.com"
35+
- name: Bump version
36+
id: bump
37+
run: |
38+
yarn lerna version ${{ github.event.inputs.release_type }} --no-push --no-git-tag-version --yes --no-private --force-publish
39+
NEW_VERSION=$(jq -r '.version' lerna.json)
40+
echo "version=$NEW_VERSION" >> $GITHUB_OUTPUT
41+
- name: Commit & tag release
42+
run: |
43+
git add lerna.json packages/*/package.json
44+
git commit -m "chore(release): v${{ steps.bump.outputs.version }}"
45+
git push origin HEAD
46+
- name: Create GitHub Release
47+
uses: softprops/action-gh-release@v2
48+
with:
49+
tag_name: v${{ steps.bump.outputs.version }}
50+
generate_release_notes: true
51+
- name: Publish packages to NPM
52+
run: yarn lerna publish from-package --yes

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ lib
55
node_modules
66
test.html
77
/**/npmignore
8+
/testing-manual

‎doc/basic.md‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ In this section, you're going to learn how to code a basic email template using
66
Here is the final render we want to end with:
77

88
<p style="text-align: center;" >
9-
<a href="https://mjml.io/try-it-live/templates/basic"><img width="350px" src="https://cloud.githubusercontent.com/assets/6558790/12779864/d9c20556-ca6a-11e5-9007-d40ac89c5088.png" alt="sexy"></a>
9+
<a href="https://mjml.io/try-it-live/templates/basic"><img width="350px" src="https://static.mailjet.com/mjml-website/documentation/basic-layout-example.png" alt="sexy"></a>
1010
</p>
1111

1212
<p style="text-align: center;" >
@@ -51,10 +51,10 @@ First, we will implement the skeleton which are the sections. Here, our email is
5151
<!-- Company Header -->
5252
<mj-section background-color="#f0f0f0">
5353
<mj-column>
54-
<mj-text align="center"
55-
font-style="italic"
56-
font-size="20px"
57-
color="#626262">
54+
<mj-text align="center"
55+
font-style="italic"
56+
font-size="20px"
57+
color="#626262">
5858
My Company
5959
</mj-text>
6060
</mj-column>
@@ -78,18 +78,17 @@ The text padding represents the inner space around the content within the `mj-te
7878
background-repeat="no-repeat">
7979

8080
<mj-column width="600px">
81-
<mj-text align="center"
82-
color="#fff"
83-
font-size="40px"
84-
font-family="Helvetica Neue">
85-
Slogan here
86-
</mj-text>
81+
<mj-text align="center"
82+
color="#fff"
83+
font-size="40px"
84+
font-family="Helvetica Neue">
85+
Slogan here
86+
</mj-text>
8787

8888
<mj-button background-color="#F63A4D"
8989
href="#">
9090
Promotion
9191
</mj-button>
92-
9392
</mj-column>
9493

9594
</mj-section>
@@ -109,20 +108,21 @@ In order to have the background rendered full-width in the column, set the colum
109108

110109
<!-- Intro text -->
111110
<mj-section background-color="#fafafa">
112-
<mj-column width="400px">
113-
114-
<mj-text font-style="italic"
115-
font-size="20px"
116-
font-family="Helvetica Neue"
117-
color="#626262">My Awesome Text</mj-text>
118-
119-
<mj-text color="#525252">
120-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
121-
</mj-text>
122-
123-
<mj-button background-color="#F45E43"
124-
href="#">Learn more</mj-button>
111+
<mj-column width="400px">
112+
<mj-text font-style="italic"
113+
font-size="20px"
114+
font-family="Helvetica Neue"
115+
color="#626262">
116+
My Awesome Text
117+
</mj-text>
118+
<mj-text color="#525252">
119+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
120+
</mj-text>
125121

122+
<mj-button background-color="#F45E43"
123+
href="#">
124+
Learn more
125+
</mj-button>
126126
</mj-column>
127127
</mj-section>
128128

@@ -154,7 +154,8 @@ The title is a regular `mj-text` that can be customized.
154154
</mj-text>
155155

156156
<mj-text color="#525252">
157-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
157+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.
158+
</mj-text>
158159

159160
</mj-column>
160161
</mj-section>

‎doc/components_1.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ For instance, the `mj-button` component is, on the inside, a complex HTML layout
2626
</table>
2727
```
2828

29+
## Which email clients/versions are supported?
30+
31+
For full details of component support, [please visit our support matrix](https://mjml.io/compatibility).
32+
33+
2934
## mjml
3035

3136
A MJML document starts with a `<mjml>` tag, it can contain only `mj-head` and `mj-body` tags. Both have the same purpose of `head` and `body` in a HTML document.

‎doc/config.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"mjml/doc/ending-tags.md",
3535
"mjml/doc/community-components.md",
3636
"mjml/doc/ports.md",
37+
"mjml/doc/mjml-bar-chart.md",
3738
"mjml/doc/mjml-chart.md",
3839
"mjml/doc/mjml-chartjs.md",
3940
"mjml/doc/mjml-qr-code.md",

‎doc/getting_started.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@
33
This is a responsive email
44

55
<p style="text-align: center;" >
6-
<img width="300px" src="https://cloud.githubusercontent.com/assets/6558790/12751054/322b2c8c-c9bb-11e5-98b9-942f6ea4d585.png" alt="layout">
6+
<img width="300px" src="https://static.mailjet.com/mjml-website/documentation/getting-started-1.png" alt="layout">
77
</p>
88

99
Like a regular HTML template, we can split this one into different parts to fit in a grid.
1010

1111
The body of your email, represented by the `mj-body` tag contains the entire content of your document:
1212

1313
<p style="text-align: center;" >
14-
<img width="300px" src="https://cloud.githubusercontent.com/assets/6558790/12751043/1fd499c4-c9bb-11e5-828f-e0e6e18180b8.png" alt="body">
14+
<img width="300px" src="https://static.mailjet.com/mjml-website/documentation/getting-started-2.png" alt="body">
1515
</p>
1616

1717
From here, you can first define your sections:
1818

1919
<p style="text-align: center;" >
20-
<img width="300px" src="https://cloud.githubusercontent.com/assets/6558790/12751042/1fd191b6-c9bb-11e5-9450-cc15acec72b4.png" alt="sections">
20+
<img width="300px" src="https://static.mailjet.com/mjml-website/documentation/getting-started-3.png" alt="sections">
2121
</p>
2222

2323
Inside any section, there should be columns (even if you need only one column). Columns are what makes MJML responsive.
2424

2525
<p style="text-align: center;" >
26-
<img width="300px" src="https://cloud.githubusercontent.com/assets/6558790/12751041/1fd112d6-c9bb-11e5-97e7-d9c93c743c4d.png" alt="columns">
26+
<img width="300px" src="https://static.mailjet.com/mjml-website/documentation/getting-started-4.png" alt="columns">
2727
</p>
2828

2929
Below, you'll find some basic rules of MJML to keep in mind for later. We'll remind them when useful but better start learning them early on.

‎doc/install.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ You can also run `yarn build:watch` to rebuild the package as you code.
2727
Don't want to install anything? Use the free online editor!
2828

2929
<p style="text-align: center;" >
30-
<a href="https://mjml.io/try-it-live" target="_blank"><img src="https://cloud.githubusercontent.com/assets/6558790/12195421/58a40618-b5f7-11e5-9ed3-80463874ab14.png" alt="try it live" width="75%"></a>
30+
<a href="https://mjml.io/try-it-live" target="_blank"><img src="https://static.mailjet.com/mjml-website/documentation/usage-online.png" alt="try it live" width="75%"></a>
3131
</p>
3232
<br>
3333

‎doc/mjml-bar-chart.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
## mj-bar-chart
2+
3+
`mj-bar-chart` is an open-source component that allows you to create fully embedded static bar charts in your MJML templates.
4+
These bar charts are easily customizable, 100% built with HTML tables, and do not require any external dependencies.
5+
**mjml-bar-chart** package is available on [GitHub](https://github.com/Freezystem/mjml-bar-chart) and [NPM](https://www.npmjs.com/package/@freezystem/mjml-bar-chart).
6+
7+
![Basic mjml-bar-chart rendering](https://static.mailjet.com/mjml-website/documentation/bar-chart-example-1.png)
8+
9+
You can also render as stacked bars, add a link to your sources, vertically align labels, and much more:
10+
11+
![Stacked rendering with vertically aligned legends](https://static.mailjet.com/mjml-website/documentation/bar-chart-example-2.png)
12+
13+
14+
This component is lightweight, written with TypeScript, and is thoroughly tested.
15+
It is available as UMD (CJS + AMD), ESM and TS module format.

0 commit comments

Comments
 (0)