Skip to content

Commit

Permalink
[filigran-email] template email
Browse files Browse the repository at this point in the history
  • Loading branch information
jpkha committed Nov 28, 2024
1 parent 33527b3 commit f300ad9
Show file tree
Hide file tree
Showing 40 changed files with 4,504 additions and 248 deletions.
9 changes: 9 additions & 0 deletions packages/filigran-email/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
8 changes: 8 additions & 0 deletions packages/filigran-email/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
node_modules
build_local
.vscode
.idea
Thumbs.db
.DS_Store
npm-debug.log
yarn-error.log
21 changes: 21 additions & 0 deletions packages/filigran-email/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) Cosmin Popovici

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
48 changes: 48 additions & 0 deletions packages/filigran-email/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<div align="center">
<p>
<a href="https://maizzle.com" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/maizzle/maizzle/raw/master/.github/logo-dark.svg">
<img alt="Maizzle Starter" src="https://github.com/maizzle/maizzle/raw/master/.github/logo-light.svg" width="300" height="225" style="max-width: 100%;">
</picture>
</a>
</p>
<p>Quickly build HTML emails with Tailwind CSS</p>
<div>

[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![Downloads][npm-stats-shield]][npm-stats]
[![License][license-shield]][license]

</div>
</div>

## Getting Started

Run this command and follow the prompts:

```bash
npx create-maizzle
```

## Documentation

Maizzle documentation is available at https://maizzle.com

## Issues

Please open all issues in the [framework repository](https://github.com/maizzle/framework).

## License

The Maizzle framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

[npm]: https://www.npmjs.com/package/@maizzle/framework
[npm-stats]: https://npm-stat.com/charts.html?package=%40maizzle%2Fframework&from=2019-03-27
[npm-version-shield]: https://img.shields.io/npm/v/@maizzle/framework.svg
[npm-stats-shield]: https://img.shields.io/npm/dt/@maizzle/framework.svg?color=6875f5
[github-ci]: https://github.com/maizzle/framework/actions
[github-ci-shield]: https://github.com/maizzle/framework/actions/workflows/nodejs.yml/badge.svg
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/@maizzle/framework.svg?color=0e9f6e
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 117 additions & 0 deletions packages/filigran-email/build_production/partner-vault.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<style>
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
</style>
<![endif]-->
<style>
@media (max-width: 600px) {
.sm-my-8 {
margin-top: 32px !important;
margin-bottom: 32px !important
}
.sm-px-4 {
padding-left: 16px !important;
padding-right: 16px !important
}
.sm-px-6 {
padding-left: 24px !important;
padding-right: 24px !important
}
.sm-leading-8 {
line-height: 32px !important
}
}
</style>
</head>
<body style="margin: 0; width: 100%; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word">
<div role="article" aria-roledescription="email" aria-label lang="en">
<div class="sm-px-4" style="background-color: #F1F5F9; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif">
<table align="center" cellpadding="0" cellspacing="0" role="none">
<tr>
<td style="width: 552px; max-width: 100%">
<div class="sm-my-8" style="margin-bottom: 40px; margin-top: 64px; text-align: center">
<a href="https://xtmhub.filigran.io">
<img src="images/logo.png" width="320" alt="XTM Hub logo" style="max-width: 100%; vertical-align: middle">
</a>
</div>
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="none">
<tr>
<td class="sm-px-6" style="border-radius: 4px; background-color: #fffffe; padding: 48px; font-size: 16px; color: #00020c; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)">
<h1 class="sm-leading-8" style="margin: 0 0 24px; font-size: 24px; font-weight: 600; color: #000001">
Dear {{ name }},
</h1>
<p style="margin: 0; line-height: 24px">
Welcome to the {{ partnerVault }}! We're thrilled to have you onboard and look forward to collaborating closely with you.
<br>
<br>
Your Partner Vault is designed to provide all the resources, tools, and updates you need to make our partnership a success.
<br>
<br>
</p>
<div style="text-align: center;">
<a href="{{ partnerVaultLink }}" style="color: #F4F4F6; background-color: #001BDB; display: inline-block; border-radius: 4px; padding: 16px 24px; font-size: 16px; line-height: 1; font-weight: 600; text-decoration: none">
<!--[if mso]>
<i style="mso-font-width: 150%; mso-text-raise: 30px" hidden>&emsp;</i>
<![endif]-->
<span style="mso-text-raise: 16px">
Access {{ partnerVault }}
</span>
<!--[if mso]>
<i hidden style="mso-font-width: 150%;">&emsp;&#8203;</i>
<![endif]-->
</a>
</div>
<p>
If you have any questions or need support, don't hesitate to reach out to us at {{ contactEmail }}.
</p>
<p style="margin: 0;">
Best regards, <br>Filigran
</p>
</td>
</tr>
<tr role="separator">
<td style="line-height: 48px">&zwj;</td>
</tr>
<tr>
<td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #00020c">
<p style="margin: 16px">
<a href="https://filigran.io/" style="margin: 4px"><img src="images/website.png" width="24" alt="Filigran website" style="max-width: 100%; vertical-align: middle;"></a>
<a href="https://filigran-community.slack.com/join/shared_invite/zt-2pp43qkqc-EY7qC7Sk30zZfsNjgXwF5w" style="margin: 4px;"><img src="images/slack.png" width="24" alt="Slack community" style="max-width: 100%; vertical-align: middle;"></a>
<a href="https://www.linkedin.com/company/filigran" style="margin: 4px;"><img src="images/linkedin.png" width="24" alt="Linkedin page" style="max-width: 100%; vertical-align: middle;"></a>
<a href="https://www.youtube.com/@Filigran" style="margin: 4px;"><img src="images/youtube.png" width="24" alt="Youtube channel" style="max-width: 100%; vertical-align: middle;"></a>
<a href="https://x.com/FiligranHQ" style="margin: 4px;"><img src="images/twitter.png" width="24" alt="X link" style="max-width: 100%; vertical-align: middle;"></a>
</p>
<div style="margin-bottom: 8px">
<a href="https://filigran.io">
<img src="images/logo-filigran.png" width="100" alt="Filigran logo" style="max-width: 100%; vertical-align: middle;">
</a>
</div>
<p style="margin: 0 0 40px;">
New York, Paris, London, Sydney
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
113 changes: 113 additions & 0 deletions packages/filigran-email/build_production/welcome.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<style>
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
</style>
<![endif]-->
<style>
@media (max-width: 600px) {
.sm-my-8 {
margin-top: 32px !important;
margin-bottom: 32px !important
}
.sm-px-4 {
padding-left: 16px !important;
padding-right: 16px !important
}
.sm-px-6 {
padding-left: 24px !important;
padding-right: 24px !important
}
.sm-leading-8 {
line-height: 32px !important
}
}
</style>
</head>
<body style="margin: 0; width: 100%; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word">
<div role="article" aria-roledescription="email" aria-label lang="en">
<div class="sm-px-4" style="background-color: #F1F5F9; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif">
<table align="center" cellpadding="0" cellspacing="0" role="none">
<tr>
<td style="width: 552px; max-width: 100%">
<div class="sm-my-8" style="margin-bottom: 40px; margin-top: 64px; text-align: center">
<a href="https://xtmhub.filigran.io">
<img src="images/logo.png" width="320" alt="XTM Hub logo" style="max-width: 100%; vertical-align: middle">
</a>
</div>
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="none">
<tr>
<td class="sm-px-6" style="border-radius: 4px; background-color: #fffffe; padding: 48px; font-size: 16px; color: #00020c; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)">
<h1 class="sm-leading-8" style="margin: 0 0 24px; font-size: 24px; font-weight: 600; color: #000001">
Dear {{ name }},
</h1>
<p style="margin: 0; line-height: 24px">
Welcome to <strong>XTM Hub</strong>! We’re excited to have you join our community and start exploring all the powerful tools and resources the platform has to offer.
<br>
<br>
XTM Hub is designed to help you find resources, and share tradecraft to empower the Filigran community.
</p>
<div role="separator" style="line-height: 24px">&zwj;</div>
<div style="text-align: center;">
<a href="https://maizzle.com" style="color: #F4F4F6; background-color: #001BDB; display: inline-block; border-radius: 4px; padding: 16px 24px; font-size: 16px; line-height: 1; font-weight: 600; text-decoration: none">
<!--[if mso]>
<i style="mso-font-width: 150%; mso-text-raise: 30px" hidden>&emsp;</i>
<![endif]-->
<span style="mso-text-raise: 16px">
Access XTM Hub
</span>
<!--[if mso]>
<i hidden style="mso-font-width: 150%;">&emsp;&#8203;</i>
<![endif]-->
</a>
</div>
<p style="margin: 0; padding-top: 16px">
Best regards, <br>Filigran
</p>
</td>
</tr>
<tr role="separator">
<td style="line-height: 40px">&zwj;</td>
</tr>
<tr>
<td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #00020c">
<p style="margin: 16px">
<a href="https://filigran.io/" style="margin: 4px"><img src="images/website.png" width="24" alt="Filigran website" style="max-width: 100%; vertical-align: middle;"></a>
<a href="https://filigran-community.slack.com/join/shared_invite/zt-2pp43qkqc-EY7qC7Sk30zZfsNjgXwF5w" style="margin: 4px;"><img src="images/slack.png" width="24" alt="Slack community" style="max-width: 100%; vertical-align: middle;"></a>
<a href="https://www.linkedin.com/company/filigran" style="margin: 4px;"><img src="images/linkedin.png" width="24" alt="Linkedin page" style="max-width: 100%; vertical-align: middle;"></a>
<a href="https://www.youtube.com/@Filigran" style="margin: 4px;"><img src="images/youtube.png" width="24" alt="Youtube channel" style="max-width: 100%; vertical-align: middle;"></a>
<a href="https://x.com/FiligranHQ" style="margin: 4px;"><img src="images/twitter.png" width="24" alt="X link" style="max-width: 100%; vertical-align: middle;"></a>
</p>
<div style="margin-bottom: 8px">
<a href="https://filigran.io">
<img src="images/logo-filigran.png" width="100" alt="Filigran logo" style="max-width: 100%; vertical-align: middle;">
</a>
</div>
<p style="margin: 0 0 40px;">
New York, Paris, London, Sydney
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
26 changes: 26 additions & 0 deletions packages/filigran-email/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
|-------------------------------------------------------------------------------
| Development config https://maizzle.com/docs/environments
|-------------------------------------------------------------------------------
|
| The exported object contains the default Maizzle settings for development.
| This is used when you run `maizzle build` or `maizzle serve` and it has
| the fastest build time, since most transformations are disabled.
|
*/

/** @type {import('@maizzle/framework').Config} */
module.exports = {
build: {
templates: {
source: 'src/templates',
destination: {
path: 'build_local',
},
assets: {
source: 'src/images',
destination: 'images',
},
},
},
}
25 changes: 25 additions & 0 deletions packages/filigran-email/config.production.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*
|-------------------------------------------------------------------------------
| Production config https://maizzle.com/docs/environments
|-------------------------------------------------------------------------------
|
| This is where you define settings that optimize your emails for production.
| These will be merged on top of the base config.js, so you only need to
| specify the options that are changing.
|
*/

/** @type {import('@maizzle/framework').Config} */
module.exports = {
build: {
templates: {
destination: {
path: 'build_production',
},
},
},
inlineCSS: true,
removeUnusedCSS: true,
shorthandCSS: true,
prettify: true,
}
15 changes: 15 additions & 0 deletions packages/filigran-email/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"private": true,
"scripts": {
"dev": "maizzle serve",
"build": "maizzle build production"
},
"dependencies": {
"@maizzle/framework": "latest",
"tailwindcss-preset-email": "^1.1.0"
},
"name": "filigran-email",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
Loading

0 comments on commit f300ad9

Please sign in to comment.