Giter VIP home page Giter VIP logo

hermes's People

Contributors

akamensky avatar atrox avatar btcdanny avatar crazy-max avatar ernsheong avatar fossabot avatar fridolin-koch avatar mack avatar matcornic avatar mlgd avatar sckelemen avatar thiht avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hermes's Issues

the theme renders two invitecode block

image

this was coused by b496815

there are two if statements to render the InviteCode . i think the first one should be deleted

                              {{ if $action.InviteCode }}
                                <div style="margin-top:30px;margin-bottom:30px">
                                  <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td align="center">
                                        <table align="center" cellpadding="0" cellspacing="0" style="padding:0;text-align:center">
                                          <tr>
                                            <td style="display:inline-block;border-radius:3px;font-family:Consolas, monaco, monospace;font-size:28px;text-align:center;letter-spacing:8px;color:#555;background-color:#eee;padding:20px">
                                              {{ $action.InviteCode }}
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                </div>
                              {{ end }}   
                              {{safe "<![endif]-->" }}
                                    <div>
                                      {{ if $action.Button.Text }}
                                        <a href="{{ $action.Button.Link }}" class="button" style="{{ with $action.Button.Color }}background-color: {{ . }};{{ end }} {{ with $action.Button.TextColor }}color: {{ . }};{{ end }} width: {{$width}}px;" target="_blank">
                                          {{ $action.Button.Text }}
                                        </a>
                                      {{end}}
                                      {{ if $action.InviteCode }}
                                        <span class="invite-code">{{ $action.InviteCode }}</span>
                                      {{end}}
                                    </div>

for any one looking for a temporary solution , just copy the flat.go or default.go , and delete the codes in first code block.

Still cannot get Blackfriday

There are several closed issues relating to this but it still seems to be a problem.

Firstly, I can do

$ go get -u github.com/matcornic/hermes/[email protected]
go: github.com/Masterminds/semver upgrade => v1.5.0
go: github.com/Masterminds/sprig upgrade => v2.22.0+incompatible
go: github.com/shurcooL/sanitized_anchor_name upgrade => v1.0.0
go: github.com/imdario/mergo upgrade => v0.3.10
go: github.com/olekukonko/tablewriter upgrade => v0.0.4
go: github.com/huandu/xstrings upgrade => v1.3.2
go: golang.org/x/crypto upgrade => v0.0.0-20200728195943-123391ffb6de
go: golang.org/x/net upgrade => v0.0.0-20200707034311-ab3426394381
go: github.com/google/uuid upgrade => v1.1.1
go: github.com/mattn/go-runewidth upgrade => v0.0.9
go: github.com/jaytaylor/html2text upgrade => v0.0.0-20200412013138-3577fbdbcff7
go: finding module for package github.com/mitchellh/copystructure
go: found github.com/mitchellh/copystructure in github.com/mitchellh/copystructure v1.0.0
go: github.com/mitchellh/reflectwalk upgrade => v1.0.1

So far, so good.

But then I run

$ go get -u ./...
go: finding module for package github.com/matcornic/hermes
go: found github.com/matcornic/hermes in github.com/matcornic/hermes v1.2.0
go: finding module for package gopkg.in/russross/blackfriday.v2
go: found gopkg.in/russross/blackfriday.v2 in gopkg.in/russross/blackfriday.v2 v2.0.1
go: r4/roster4/mail imports
	github.com/matcornic/hermes imports
	gopkg.in/russross/blackfriday.v2: gopkg.in/russross/[email protected]: parsing go.mod:
	module declares its path as: github.com/russross/blackfriday/v2
	        but was required as: gopkg.in/russross/blackfriday.v2

This is a failure I can't seem to recover from.

There seems to be a problem with Blackfriday which is messing with Hermes. Probably the Hemes dependency should be github.com/russross/blackfriday/v2 instead of gopkg.in/russross/blackfriday.v2
`.

Send email

Hey how could I send an email using this?

Support anonymous Table columns without header text

It would be useful to provide support for anonymous columns, or column renaming with support to define empty name. Maybe Table.Columns.CustomName.

Use case: order notification with following fields:

  • description (name of item, plus details, variant,.. ),
  • anonymous price per unit of measurement (e.g. 14€ / pc, 19€ / liter, 5€ / kg,...),
  • anonymous amount (e.g. 2 pcs, 4 liters, 32 kg,...),
  • price contains price per unit * amount).

I don't really want to display names for price per unit and amount columns. These headers prolong the width of these columns, as header is wider than content. And, it's the meaning of the column pretty much obvious from the content of fields..

HTML Email Body not working

HTML message body generated using the example given was not rendered by gmail properly. Code I have tried so far:

h:=hermes.Hermes{
			//Theme: hermes.Theme,
			Product:            hermes.Product{
				Name:"XYZ",
				Link:"https://xyz.com",
				Copyright: fmt.Sprintf("Copyright © %d XYZ All rights reserved.",time.Now().Year()),
				TroubleText: "",
			},
		}

		emailBody,_:=h.GenerateHTML(hermes.Email{
			Body:hermes.Body{
				Name:         "bhusal.anish12",
				Intros:       []string{"Don't worry we have got you covered"},
				Dictionary:   nil,
				Table:        hermes.Table{},
				Actions: []hermes.Action{
					{
						Instructions: "To reset your account, please click here:",
						Button: hermes.Button{
							Color: "#22BC66", // Optional action button color
							Text:  "Reset Password",
							Link:  "https://xyz.com",
						},
					},
				},
				Outros: []string{
					"Need help, or have questions? Just reply to this email, we'd love to help.",
				},
				Greeting:     "",
				Signature:    "",
				Title:        "",
				FreeMarkdown: "",
			},
		})

This when sent via gmail client for go is not rendering the template.

Plugin system?

Hello !

Is a plugin system planned on Hermes roadmap? :)

I would live to develop one to add support for image charts to hermes. (like I did for mjml with mjml-charts)

On Oct 29, 2018 started getting problems deployment with blackfriday.v2

During deployments I started getting this error:

../github.com/matcornic/hermes/hermes.go:8:2: cannot find package "github.com/russross/blackfriday/v2" in any of:
/usr/local/go/src/github.com/russross/blackfriday/v2 (from $GOROOT)
/go/src/github.com/russross/blackfriday/v2 (from $GOPATH)

I have worked around the problem by forking hermes and changing blackfriday references from github.com to gopkg.in.

MarkdownCommon is undefined

some thing wrong with deps../vendor/github.com/matcornic/hermes/hermes.go:76:23: undefined: blackfriday.MarkdownCommon

Raw HTML displayed

Hey, thanks for such a great library. You made our lives much easier.

I have been struggling with a small issue. Whenever I send an email to a gmail or any other email address with the body of the email generated by using GenerateHTML, I always get the raw HTML. However, if I save the html to a local file it works perfectly well. What seems to be the problem?

About Button

Hi, when using a button, I need two options, yes or no (for moderated emails), is there any way to add two buttons to one email body?

Image integration ?

Hey there !
First of all thanks for the awesome project 😃

I'm wondering if there's a clean way of inserting an image in the generated mail ?
It's possible to use the FreeMarkdown field (using the ![...](https://...) notation), but I don't know if it's currently possible to insert pictures without that technique.

Problem installing

Hello,

I try to install Hermes but there seems to be a problem with blackfriday

[nalkema@prdexp1 src]$ go get -u -v github.com/matcornic/hermes
github.com/matcornic/hermes (download)
github.com/Masterminds/sprig (download)
github.com/Masterminds/goutils (download)
github.com/Masterminds/semver (download)
github.com/google/uuid (download)
github.com/huandu/xstrings (download)
github.com/imdario/mergo (download)
github.com/mitchellh/copystructure (download)
github.com/mitchellh/reflectwalk (download)
github.com/spf13/cast (download)
get "golang.org/x/crypto/bcrypt": found meta tag get.metaImport{Prefix:"golang.org/x/crypto", VCS:"git", RepoRoot:"https://go.googlesource.com/crypto"} at //golang.org/x/crypto/bcrypt?go-get=1
get "golang.org/x/crypto/bcrypt": verifying non-authoritative meta tag
golang.org/x/crypto (download)
get "golang.org/x/crypto/blowfish": found meta tag get.metaImport{Prefix:"golang.org/x/crypto", VCS:"git", RepoRoot:"https://go.googlesource.com/crypto"} at //golang.org/x/crypto/blowfish?go-get=1
get "golang.org/x/crypto/blowfish": verifying non-authoritative meta tag
get "golang.org/x/crypto/scrypt": found meta tag get.metaImport{Prefix:"golang.org/x/crypto", VCS:"git", RepoRoot:"https://go.googlesource.com/crypto"} at //golang.org/x/crypto/scrypt?go-get=1
get "golang.org/x/crypto/scrypt": verifying non-authoritative meta tag
get "golang.org/x/crypto/pbkdf2": found meta tag get.metaImport{Prefix:"golang.org/x/crypto", VCS:"git", RepoRoot:"https://go.googlesource.com/crypto"} at //golang.org/x/crypto/pbkdf2?go-get=1
get "golang.org/x/crypto/pbkdf2": verifying non-authoritative meta tag
github.com/jaytaylor/html2text (download)
github.com/olekukonko/tablewriter (download)
github.com/mattn/go-runewidth (download)
github.com/ssor/bom (download)
get "golang.org/x/net/html": found meta tag get.metaImport{Prefix:"golang.org/x/net", VCS:"git", RepoRoot:"https://go.googlesource.com/net"} at //golang.org/x/net/html?go-get=1
get "golang.org/x/net/html": verifying non-authoritative meta tag
golang.org/x/net (download)
get "golang.org/x/net/html/atom": found meta tag get.metaImport{Prefix:"golang.org/x/net", VCS:"git", RepoRoot:"https://go.googlesource.com/net"} at //golang.org/x/net/html/atom?go-get=1
get "golang.org/x/net/html/atom": verifying non-authoritative meta tag
github.com/russross/blackfriday (download)
package github.com/russross/blackfriday/v2: cannot find package "github.com/russross/blackfriday/v2" in any of:
        /usr/local/go/src/github.com/russross/blackfriday/v2 (from $GOROOT)
        /users/nalkema/go/src/github.com/russross/blackfriday/v2 (from $GOPATH)
github.com/vanng822/go-premailer (download)
github.com/PuerkitoBio/goquery (download)
github.com/andybalholm/cascadia (download)
github.com/vanng822/css (download)
github.com/gorilla/css (download)

button error

I generated email using the welcome example and changed the button link, but it seems that the button doesn't work.

too long link make it out of the div

when I have link with long token, it was not break to another new line, maybe this need to fix break line on style
this issue happen on Aol browser email
Screen Shot 2019-09-27 at 20 53 17

Add "safe/unescape HTML" to templateFuncs

Reason

There are times where we want to style Intros, Outros or other elements in hermes.Body. Adding a html func (like url) to render HTML elements will be helpful for these scenarios.

hermes.go 

var templateFuncs = template.FuncMap{
	"url": func(s string) template.URL {
		return template.URL(s)
	},
+	"html": func(s string) template.HTML {
+		return template.HTML(s)
+	},
}

App Deep Links and #ZgotmplZ

Hi, I'm sure this is a quick solution but I thought I'd post until I figured it out.

When I pass in an app deep link such as mycoolapp-app://someInAppRoute?data=123456 as my .Hermes.Product.Link, it gets converted to #ZgotmplZ.

How can I make the scheme mycoolapp-app:// allowed in Hermes?

undefined: blackfriday.Run

New install:

vendor/github.com/matcornic/hermes/hermes.go:76:23: undefined: blackfriday.Run

Seems blackfriday API has changed:

// ToHTML converts Markdown to HTML
    func (c Markdown) ToHTML() template.HTML {
            return template.HTML(blackfriday.Run([]byte(string(c))))
    }

Adding newline to Instructions: element

Hi,
First of all thank you for the package and community.

I just started exploring hermes. I am looking to add multiline message to email. In below code I tried using \n, \r,
\r\n between two sentences in the Instructions element. It does not add separate my two lines. Is there a way to do so?

		Actions: []hermes.Action{
			{
				Instructions: "Google Groups automation just completed SUCCESSFULLY.\rTo view the logs, please click the View Log button.",

-Kamlesh

Hermes 1.2.0 is using Blackfriday V2 which uses modules dependency

I'm currently using Hermes on a project that has some dependencies issues and cannot be used with modules at the moment.

Thing is, this hermes version supposedly supports the old dep system, but the ToHTML method (line 76) on hermes.go uses the blackfriday/v2 dependency which only works with modules and I can't make a proper build of my project without commenting it.

Minimize themes

Hi!
Would you consider minimizing the html/css themes?

For example we could:

config := hermes.Config{
    // Optional Theme
    // Theme: new(Default) 
    Product: hermes.Product{
        // Appears in header & footer of e-mails
        Name: "Hermes",
        Link: "https://example-hermes.com/",
        // Optional product logo
        Logo: "http://www.duchess-france.org/wp-content/uploads/2016/01/gopher.png",
    },
}

h := hermes.New(config)
...

CSS inlining

It looks like CSS is not inlined. This is an important compatibility problem.

Cannot use "tel:" links

I want to add a button containing a phone number linke this:

email := hermes.Email{}
email.Body.Actions = append(email.Body.Actions, hermes.Action{
	Instructions: lp.Sprintf("Use this button to call sender"),
	Button: hermes.Button{
		Color: "#57cbcc",
		Text:  "Call",
		Link: "tel:0123456789",
	},
})

This is what I get when I render the mail:

<a href="#ZgotmplZ" class="button" style="display:inline-block;border-radius:3px;font-size:15px;line-height:45px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;mso-hide:all;color:#ffffff;background-color:#57cbcc;width:200px" target="_blank" width="200">
Call
</a>

#ZgotmplZ is pretty unexpected. It works well with mailto: links.

I guess Go is treating tel: as unsafe content: https://stackoverflow.com/a/14796642/10385339

Add "TextColor" or similar option for button

New Gmail web client seems to differ from before in how it handles button shown in email.

In previous version the button text was shown colored in accordance with theme, but now it shows as:

screen shot 2018-09-02 at 7 23 04 pm

From what it looks new Gmail web client adds its own style that overrides the embedded CSS from hermes theme:

screen shot 2018-09-02 at 7 25 37 pm

This is fixable by adding inline CSS to the button color: white; (for example) to make it look as below:

screen shot 2018-09-02 at 7 25 03 pm

Or I think this could be fixed by doing what #3 suggests and inlining all CSS.

When I try to install 1.2 version it returns an error

go get -u github.com/matcornic/hermes

../github.com/matcornic/hermes/hermes.go:8:2: cannot find package "github.com/russross/blackfriday/v2" in any of: /usr/local/go/src/github.com/russross/blackfriday/v2 (from $GOROOT) /go/src/github.com/russross/blackfriday/v2 (from $GOPATH)

Changing the Theme

Hello,

I am not able to change the theme to flat. No example was also shown. Please add this to the documentation and tell how to change the default theme to flat?

Feature Request: FreeHTML option

Hi,

Thanks for a great project - loving the ui and clean interface! I have a question and a potential feature request.

I'm working on a project that generates moderately complex html, and I'm trying to have this in the email. Would you be open to adding anFreeMarkdown analogue such as FreeHTML? I've been playing with casting and subclassing hermes.Markdown but not seeing any success.

Essentially I'm trying to get my html template data injected.

Thanks!

Button not rendering properly

Hey guys,

Hope you are having a great day, today we found a kind of bug in our prod enviroment, we are using hermes to generate a simple "Reset your password" email template, unfortunately, it does not show properly the button in Outlook App on Windows 10:

Reset button not showing

The button should read "Reset your password"

I have tried to reproduce this behaviour in other devices with different screen sizes and all of them work flawlessly, but Outlook App on Windows 10.

Tested on:

Android 12, Outlook App - Works as expected
Android 12, Google Chrome Outlook View - Works as expected
Ubuntu 20.04 - Google Chrome Outlook Page - Works as expected
Ubuntu 20.04 - ThunderBird Mail - Works as expected
Windows 10 Pro - Email App - Works as expected
Windows 10 Pro - Google Chrome Outlook Page - Works as expected
Windows 10 Pro - Outlook App - Does not work as expected

All desktop environments were tested under 800x600 and 3440x1440 resolutions.

Any suggestion?

Thanks in advance, regards !

CID Embedded Images

hi,
is it possible to use the library with content - id images and refer them in the HTML?
i understood the library targets more buttons, but for different client campaigns i should not be having the logo images in an external server, therefore the images need to be sent with the email .

thank you

Change Table to []Table

Hello

Could you consider using a slice of type Table, so it is easier to show multiple tables ?

Regards,

William

Add imprint

Hi,
first of all, thanks for this great library.

Currently, the body can be customized via markdown, however this is not possible for copyright.

As required by law, you need the senders contact details (imprint) in the mail, it would be great when the copyright field can be used for that, or even create a new field.

Mostly they have the following structure:

Company Name
John Doe Street 11
<postalcode> Cityname

This will be transformed to Company Name John Doe Street 11 <postalcode> Cityname which is not that great. Thus, markdown or keeping the line breaks at least would be great. This may not work due to html sanitizing.

hermes.Theme has no support for exported fields

Given a Theme like this:

type Theme struct {
    Color string
    Logo  string
}

func (t *Theme) Name() string { ... }
func (t *Theme) HTMLTemplate() string { ... }
func (t *Theme) PlainTextTemplate() string { ... }

And calling hermes like this:

h := hermes.Hermes{
    Theme: new(Theme),
    // ...
}
email := hermes.Email{
    //  ...
}
html, err = h.GenerateHTML(email)
if err != nil {
	...
}

Will result int

panic: reflect: Field index out of range [recovered]
	panic: reflect: Field index out of range

The reason for this is the exported fields, which are tried to be merged into hermes.Default theme which is of type struct{}. Therefore it's not possible to have exported fields on a struct implementing hermes.Theme interface.

GenerateEmails function?

Hello,

I have a question regarding generateEmails function.

as it always generating new HTML & text files for every request and we are using those two files in the email body.

so what will happen, when two requests have been placed at the same time?

Unconfigured Email

I'm running some tests using hermes, but one of the emails appears unconfigured to me. Did I do something wrong?

E-mail image

http://prntscr.com/gj4e4z

My Script

body, err := h.GenerateHTML(email)
if err != nil {
	panic(err)
}

emailAddress := "my-email"
to := []string{emailAddress}
title := "Recuperar senha"

mime := "MIME-version: 1.0;\nContent-Type: text/html; charset=\"UTF-8\";\n\n"
subject := "Subject: " + title + "!\n"
msg := []byte(subject + mime + "\n" + body)
addr := "smtp.gmail.com:587"

auth := smtp.PlainAuth("", emailAddress, "my-password", "smtp.gmail.com")
if err := smtp.SendMail(addr, auth, emailAddress, to, msg); err != nil {
	log.Println("Error")
} else {
	log.Println("Success")
}

Content Email

Date: Sat, 09 Sep 2017 11:00:18 -0700 (PDT)
From: my-email
Subject: Recuperar senha!
MIME-version: 1.0;
Content-Type: text/html; charset="UTF-8";



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css" rel="stylesheet" media="all">
     
    *:not(br):not(tr):not(html) {
      font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    body {
      width: 100% !important;
      height: 100%;
      margin: 0;
      line-height: 1.4;
      background-color: #2c3e50;
      color: #74787E;
      -webkit-text-size-adjust: none;
    }
    a {
      color: #3869D4;
    }

     
    .email-wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: #2c3e50;
    }
    .email-content {
      width: 100%;
      margin: 0;
      padding: 0;
    }
     
    .email-masthead {
      padding: 25px 0;
      text-align: center;
    }
    .email-masthead_logo {
      max-width: 400px;
      border: 0;
    }
    .email-masthead_name {
      font-size: 16px;
      font-weight: bold;
      color: #2F3133;
      text-decoration: none;
      text-shadow: 0 1px 0 white;
    }
    .email-logo {
      max-height: 50px;
    }
     
    .email-body {
      width: 100%;
      margin: 0;
      padding: 0;
      border-top: 1px solid #EDEFF2;
      border-bottom: 1px solid #EDEFF2;
      background-color: #FFF;
    }
    .email-body_inner {
      width: 570px;
      margin: 0 auto;
      padding: 0;
    }
    .email-footer {
      width: 570px;
      margin: 0 auto;
      padding: 0;
      text-align: center;
    }
    .email-footer p {
      color: #eaeaea;
    }
    .body-action {
      width: 100%;
      margin: 30px auto;
      padding: 0;
      text-align: center;
    }

    .body-dictionary {
      width: 100%;
      overflow: hidden;
      margin: 20px auto 20px;
      padding: 0;
    }
    .body-dictionary dt {
      clear: both;
      color: #000;
      font-weight: bold;
      float: left;
      width: 50%;
      padding: 0;
      margin: 0;
      margin-bottom: 0.3em;
    }
    .body-dictionary dd {
      float: left;
      width: 50%;
      padding: 0;
      margin: 0;
    }
    .body-sub {
      margin-top: 25px;
      padding-top: 25px;
      border-top: 1px solid #EDEFF2;
      table-layout: fixed;
    }
    .body-sub a {
      word-break: break-all;
    }
    .content-cell {
      padding: 35px;
    }
    .align-right {
      text-align: right;
    }
     
    h1 {
      margin-top: 0;
      color: #2F3133;
      font-size: 19px;
      font-weight: bold;
    }
    h2 {
      margin-top: 0;
      color: #2F3133;
      font-size: 16px;
      font-weight: bold;
    }
    h3 {
      margin-top: 0;
      color: #2F3133;
      font-size: 14px;
      font-weight: bold;
    }
    blockquote {
      margin: 1.7rem 0;
      padding-left: 0.85rem;
      border-left: 10px solid #F0F2F4;
    }
    blockquote p {
        font-size: 1.1rem;
        color: #999;
    }
    blockquote cite {
        display: block;
        text-align: right;
        color: #666;
        font-size: 1.2rem;
    }
    cite {
      display: block;
      font-size: 0.925rem; 
    }
    cite:before {
      content: "\2014 \0020";
    }
    p {
      margin-top: 0;
      color: #74787E;
      font-size: 16px;
      line-height: 1.5em;
    }
    p.sub {
      font-size: 12px;
    }
    p.center {
      text-align: center;
    }
    table {
      width: 100%;
    }
    th {
      padding: 0px 5px;
      padding-bottom: 8px;
      border-bottom: 1px solid #EDEFF2;
    }
    th p {
      margin: 0;
      color: #9BA2AB;
      font-size: 12px;
    }
    td {
      padding: 10px 5px;
      color: #74787E;
      font-size: 15px;
      line-height: 18px;
    }
    .content {
      align: center;
      padding: 0;
    }
     
    .data-wrapper {
      width: 100%;
      margin: 0;
      padding: 35px 0;
    }
    .data-table {
      width: 100%;
      margin: 0;
    }
    .data-table th {
      text-align: left;
      padding: 0px 5px;
      padding-bottom: 8px;
      border-bottom: 1px solid #EDEFF2;
    }
    .data-table th p {
      margin: 0;
      color: #9BA2AB;
      font-size: 12px;
    }
    .data-table td {
      padding: 10px 5px;
      color: #74787E;
      font-size: 15px;
      line-height: 18px;
    }
     
    .button {
      display: inline-block;
      width: 100%;
      background-color: #00948d;
      color: #ffffff;
      font-size: 15px;
      line-height: 45px;
      text-align: center;
      text-decoration: none;
      -webkit-text-size-adjust: none;
      mso-hide: all;
    }
     
    @media only screen and (max-width: 600px) {
      .email-body_inner,
      .email-footer {
        width: 100% !important;
      }
    }
  </style>
</head>
<body dir="ltr">
  <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td class="content">
        <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
          
          <tr>
            <td class="email-masthead">
              <a class="email-masthead_name" href="https://example-hermes.com/" target="_blank">
                
                  <img src="http://www.duchess-france.org/wp-content/uploads/2016/01/gopher.png" class="email-logo" />
                
                </a>
            </td>
          </tr>

          
          <tr>
            <td class="email-body" width="100%">
              <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
                
                <tr>
                  <td class="content-cell">
                    <h1>Hi Jon Snow,</h1>
                    
                        
                          
                            <p>You have received this email because a password reset request for Hermes account was received.</p>
                          
                        
                    
                    

                      

                      
                      
                        
                        
                        
                      

                      
                      
                        
                          
                            <p>Click the button below to reset your password:</p>
                            <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
                              <tr>
                                <td align="center">
                                  <div>
                                    <a href="https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010" class="button" style="background-color: #DC4D2F" target="_blank">
                                      Reset your password
                                    </a>
                                  </div>
                                </td>
                              </tr>
                            </table>
                          
                        
                      

                    
                     
                        
                          
                            <p>If you did not request a password reset, no further action is required on your part.</p>
                          
                        
                      

                    <p>
                      Thanks,
                      <br />
                      Hermes
                    </p>

                    
                       
                        <table class="body-sub">
                          <tbody>
                              
                                <tr>
                                  <td>
                                    <p class="sub">If you’re having trouble with the button &#39;Reset your password&#39;, copy and paste the URL below into your web browser.</p>
                                    <p class="sub"><a href="https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010">https://hermes-example.com/reset-password?token=d9729feb74992cc3482b350163a1a010</a></p>
                                  </td>
                                </tr>
                              
                          </tbody>
                        </table>
                      
                    
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="content-cell">
                    <p class="sub center">
                      Copyright © 2017 Hermes. All rights reserved.
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
```

Additional actions

When adding a second action/button, the alternative text displays in a table with uneven column widths depending on the url content.

I have tested with adding a new row for each action and the result is much clearer.

Customisation of 'Action Trouble Text'

Currently I can't find any possibility to change the 'action trouble text' inside the footer:

If you’re having trouble with the button 'Hier Anmelden', copy and paste the URL below into your web browser.

This makes it impossible to fully customise the email template (e.g. i18n).

I would propose the following changes: fridolin-koch@44be377

I've you are happy with the proposed solution, I can sent a PR.

Best Regards,
Frido

Considering using Markdown content instead of plain text

Intros and Outros are plain text for now.

Consider using Markdown instead of plain text. For example, with Markdown, we are able to add links, emphase some words, and so on...

But it means that:

  • Rendering should be handled in Plain Text
  • A nice rendering should be handled in both HTML themes

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.