Templates for sending emails, based on Foundation for Emails.
Visit wireapp.github.io/wire-emails/dist for the latest ✨ Live Preview ⭐️
Help translate our emails via the Crowdin project.
- Only ever update stuff under
/src/
. Other changes may get overwritten. - Only translate languages supported here: https://github.com/wireapp/wire-emails/blob/master/bin/translate.js#L24-L31
- Find and edit the template in
src/pages/en
. - To update shared text modules like headers, footers or signatures, edit the corresponding files in the
src/partials/en
folder. - Commit your changes to
master
. - Continue in Section "Otto builds" below.
- Find the things you want to edit in the same places as designers (see above).
- Commit your changes to a branch and create a pull request.
- Otto will now automatically upload your English changes to the Crowdin project.
- Continue in Section "For Translators" below.
- All translations are located in the Crowdin project.
- When the original (English) email copy is changed via the GitHub UI or in a local clone and submitted via a pull request, the modified source text is uploaded to Crowdin for translation. Translators use the Crowdin UI to update the localized text strings.
- When the translators are done, merge the pull request to
master
. - The 'Subject' keyword in the translations should not be translated as it is used to split that section into an email subject. The text after the colon should be translated as normal. Example at line 2
- Additionally the 'Layout' keyword as well as the text after it should also not be translated as it refers to a source language file name Example at line 2.
- Continue in Section "Otto builds" below.
If you changed Crowdin content without any changes on github (eg., to fix a translation error), you can try to re-run the travis job that is otherwise triggered automatically on every change on master
.
When you commit to master
, Otto will tell Travis to generate the new email templates and add an Otto build
message to the commits list. The absense of the Otto build
will indicate an error as seen in the screenshot below:
We recommend you set up the wire-emails
repo to run locally on your computer so you can verify your changes before pushing them to the live site.
The instructions below assume you're on a Mac with Homebrew installed.
-
Install the yarn JavaScript package manager via Homebrew:
brew install yarn
-
Clone this repository and run
yarn
from the root directory of your clone to install the necessary dependencies:yarn global add foundation-cli yarn
This repository provides a local preview, so you can see what the final messages will look like.
To start the preview, run yarn start
and check the results at localhost:3000
.
A table of contents appears with links to each message. Click a link to display the rendered message content.
When you update the HTML files in the src
folder, the results should be reflected automatically in the browser.
If not, make sure the local preview server is running or check the console for errors.
Run yarn build
to inline your CSS into your HTML along with the rest of the build process.
Import changes to wire-server
Find the tag you want to update to from here, or from the repo in a shell:
cd ~/src/wire-emails
export TAG=$(git tag -l --sort v:refname | tail -1)
The update the tag in wire-server, run a script to pull the updates, and commit everything to a branch:
cd ~/src/wire-server
git checkout develop && git checkout -b email-templates-$TAG
echo $TAG > ./services/brig/deb/opt/brig/template-version
./services/brig/deb/opt/brig/bin/fetch.py
echo "Updated email templates to $TAG" > changelog.d/5-internal/email-templates-$TAG
git add .
git commit -m "Update email templates to $TAG."
Now make a PR like you always do.
There are two issues for automating this process a little further: https://github.com/zinfra/backend-issues/issues/720, https://github.com/zinfra/backend-issues/issues/1130, but both are labelled P4 at the time of writing this.