Skip to content

Commit 317b5d0

Browse files
cossssmincossssmin
committed
chore: add project files
1 parent 015af70 commit 317b5d0

9 files changed

+330
-0
lines changed

‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules
2+
build_local
3+
.vscode
4+
.idea
5+
Thumbs.db
6+
.DS_Store
7+
npm-debug.log
8+
yarn-error.log

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) Cosmin Popovici
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
## Using Maizzle in Node.js
2+
3+
This example shows how to [use Maizzle programmatically](https://maizzle.com/docs/nodejs/) to build HTML email templates in a Node.js application, with Layouts, Components, and the `render()` method.
4+
5+
## Getting Started
6+
7+
```sh
8+
# install the CLI globally
9+
npm i -g @maizzle/cli
10+
11+
# scaffold the project
12+
maizzle new https://github.com/maizzle/example-nodejs.git
13+
14+
# change directory
15+
cd example-nodejs
16+
17+
# install dependencies
18+
npm install
19+
20+
# run the script
21+
node example.js
22+
```
23+
24+
The script will log the compiled HTML to the console.
25+
26+
Pasting the compiled HTML into a tool like [alter.email](https://alter.email) will render this:
27+
28+
![sample output](https://github.com/maizzle/example-nodejs/blob/main/cover.png?raw=true)
29+
30+
## Documentation
31+
32+
Maizzle documentation is available at https://maizzle.com

‎component.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!--[if mso]>
2+
<v:image src="{{ src || 'https://via.placeholder.com/600x400' }}" xmlns:v="urn:schemas-microsoft-com:vml" style="width:{{ width || 600 }}px;height:{{ height || 400 }}px;" />
3+
<v:rect fill="false" stroke="false" style="position:absolute;width:{{ width || 600 }}px;height:{{ height || 400 }}px;">
4+
<v:textbox inset="0,0,0,0"><div><![endif]-->
5+
<content></content>
6+
<!--[if mso]></div></v:textbox></v:rect><![endif]-->

‎example.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const Maizzle = require('@maizzle/framework')
2+
3+
let template = `---
4+
preheader: Using Maizzle on the server
5+
image: https://images.unsplash.com/photo-1565932887479-b18108f07ffd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80
6+
---
7+
8+
<extends src="layout.html">
9+
<block name="template">
10+
<table class="w-600 sm:w-full my-64 mx-auto font-sans">
11+
<tr>
12+
<td class="bg-top bg-no-repeat bg-cover rounded text-left" style="background-image: url('{{ page.image }}');">
13+
<component src="component.html" locals='{"width": 600, "height": 400, "src": "{{ page.image }}"}'>
14+
<div class="leading-64 sm:h-32">&zwnj;</div>
15+
<table class="w-full">
16+
<tr>
17+
<td class="w-48 sm:w-16"></td>
18+
<td>
19+
<h1 class="m-0 mb-16 text-4xl text-white sm:leading-40">Using Maizzle in Node.js</h1>
20+
<p class="m-0 text-white text-lg leading-24">
21+
Using Maizzle programmatically in Node.js, with Layouts, Components, and the \`render()\` method.
22+
</p>
23+
<div class="leading-64 sm:h-32">&zwnj;</div>
24+
<div class="leading-full">
25+
<a
26+
href="https://maizzle.com/docs/nodejs/"
27+
class="inline-block py-16 px-24 rounded text-base font-semibold text-center no-underline text-white bg-indigo-800 hover:bg-indigo-700"
28+
>
29+
<!--[if mso]><i style="letter-spacing: 24px; mso-font-width: -100%; mso-text-raise:30px;">&#8202;</i><![endif]-->
30+
<span style="mso-text-raise: 16px;">Read more &rarr;</span>
31+
<!--[if mso]><i style="letter-spacing: 24px; mso-font-width: -100%;">&#8202;</i><![endif]-->
32+
</a>
33+
</div>
34+
</td>
35+
<td class="w-48 sm:w-16"></td>
36+
</tr>
37+
</table>
38+
<div class="leading-64 sm:h-32">&zwnj;</div>
39+
</component>
40+
</td>
41+
</tr>
42+
</table>
43+
</block>
44+
</extends>
45+
`
46+
47+
Maizzle.render(
48+
template,
49+
{
50+
maizzle: {
51+
env: 'node',
52+
inlineCSS: {
53+
mergeLonghand: true,
54+
},
55+
prettify: {
56+
ocd: true,
57+
},
58+
removeUnusedCSS: true,
59+
},
60+
tailwind: {
61+
css: '@tailwind utilities;',
62+
config: import('./tailwind.config.js'),
63+
}
64+
}
65+
)
66+
.then(({html}) => console.log(html))

‎layout.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE {{{ page.doctype || 'html' }}}>
2+
<html lang="{{ page.language || 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml">
3+
<head>
4+
<meta charset="{{ page.charset || 'utf-8' }}">
5+
<meta name="x-apple-disable-message-reformatting">
6+
<meta http-equiv="x-ua-compatible" content="ie=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
9+
<!--[if mso]>
10+
<noscript>
11+
<xml>
12+
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
13+
<o:PixelsPerInch>96</o:PixelsPerInch>
14+
</o:OfficeDocumentSettings>
15+
</xml>
16+
</noscript>
17+
<style>
18+
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
19+
</style>
20+
<![endif]-->
21+
<if condition="page.title">
22+
<title>{{{ page.title }}}</title>
23+
</if>
24+
<if condition="page.css">
25+
<style>{{{ page.css }}}</style>
26+
</if>
27+
<block name="head"></block>
28+
</head>
29+
<body class="{{ page.bodyClass }}">
30+
<if condition="page.preheader">
31+
<div class="hidden">{{{ page.preheader }}}&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
32+
&#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
33+
&#160;&#847; &#847; &#847; &#847; &#847; </div>
34+
</if>
35+
<div role="article" aria-roledescription="email" aria-label="{{{ page.title || '' }}}" lang="{{ page.language || 'en' }}">
36+
<block name="template"></block>
37+
</div>
38+
</body>
39+
</html>

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"private": true,
3+
"dependencies": {
4+
"@maizzle/framework": "^3.0.0"
5+
}
6+
}

‎tailwind.config.js

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
module.exports = {
2+
mode: 'jit',
3+
theme: {
4+
screens: {
5+
sm: {max: '600px'},
6+
},
7+
extend: {
8+
spacing: {
9+
screen: '100vw',
10+
full: '100%',
11+
px: '1px',
12+
0: '0',
13+
2: '2px',
14+
3: '3px',
15+
4: '4px',
16+
5: '5px',
17+
6: '6px',
18+
7: '7px',
19+
8: '8px',
20+
9: '9px',
21+
10: '10px',
22+
11: '11px',
23+
12: '12px',
24+
14: '14px',
25+
16: '16px',
26+
20: '20px',
27+
24: '24px',
28+
28: '28px',
29+
32: '32px',
30+
36: '36px',
31+
40: '40px',
32+
44: '44px',
33+
48: '48px',
34+
52: '52px',
35+
56: '56px',
36+
60: '60px',
37+
64: '64px',
38+
72: '72px',
39+
80: '80px',
40+
96: '96px',
41+
600: '600px',
42+
'1/2': '50%',
43+
'1/3': '33.333333%',
44+
'2/3': '66.666667%',
45+
'1/4': '25%',
46+
'2/4': '50%',
47+
'3/4': '75%',
48+
'1/5': '20%',
49+
'2/5': '40%',
50+
'3/5': '60%',
51+
'4/5': '80%',
52+
'1/6': '16.666667%',
53+
'2/6': '33.333333%',
54+
'3/6': '50%',
55+
'4/6': '66.666667%',
56+
'5/6': '83.333333%',
57+
'1/12': '8.333333%',
58+
'2/12': '16.666667%',
59+
'3/12': '25%',
60+
'4/12': '33.333333%',
61+
'5/12': '41.666667%',
62+
'6/12': '50%',
63+
'7/12': '58.333333%',
64+
'8/12': '66.666667%',
65+
'9/12': '75%',
66+
'10/12': '83.333333%',
67+
'11/12': '91.666667%',
68+
},
69+
borderRadius: {
70+
none: '0px',
71+
sm: '2px',
72+
DEFAULT: '4px',
73+
md: '6px',
74+
lg: '8px',
75+
xl: '12px',
76+
'2xl': '16px',
77+
'3xl': '24px',
78+
full: '9999px',
79+
},
80+
fontFamily: {
81+
sans: ['ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
82+
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
83+
mono: ['ui-monospace', 'Menlo', 'Consolas', 'monospace'],
84+
},
85+
fontSize: {
86+
0: '0',
87+
xs: '12px',
88+
sm: '14px',
89+
base: '16px',
90+
lg: '18px',
91+
xl: '20px',
92+
'2xl': '24px',
93+
'3xl': '30px',
94+
'4xl': '36px',
95+
'5xl': '48px',
96+
'6xl': '60px',
97+
'7xl': '72px',
98+
'8xl': '96px',
99+
'9xl': '128px',
100+
},
101+
inset: theme => ({
102+
...theme('spacing'),
103+
}),
104+
letterSpacing: theme => ({
105+
...theme('spacing'),
106+
}),
107+
lineHeight: theme => ({
108+
...theme('spacing'),
109+
}),
110+
maxHeight: theme => ({
111+
...theme('spacing'),
112+
}),
113+
maxWidth: theme => ({
114+
...theme('spacing'),
115+
xs: '160px',
116+
sm: '192px',
117+
md: '224px',
118+
lg: '256px',
119+
xl: '288px',
120+
'2xl': '336px',
121+
'3xl': '384px',
122+
'4xl': '448px',
123+
'5xl': '512px',
124+
'6xl': '576px',
125+
'7xl': '640px',
126+
}),
127+
minHeight: theme => ({
128+
...theme('spacing'),
129+
}),
130+
minWidth: theme => ({
131+
...theme('spacing'),
132+
}),
133+
},
134+
},
135+
corePlugins: {
136+
animation: false,
137+
backgroundOpacity: false,
138+
borderOpacity: false,
139+
divideOpacity: false,
140+
placeholderOpacity: false,
141+
textOpacity: false,
142+
},
143+
}

0 commit comments

Comments
 (0)