Update email templates (#550)

* Update email templates

* Fix README

* fix detail
* fix typo

* Changes connected with comment at issue

https://github.com/umputun/remark/issues/494#issuecomment-570801318

* Unify styles between templates

* remove breaking words

* use the same prefix for parent and child
This commit is contained in:
Pavel Mineev
2020-01-15 01:22:00 -06:00
committed by Umputun
parent ce01a347ca
commit 658279379a
2 changed files with 95 additions and 33 deletions
+4 -2
View File
@@ -193,7 +193,9 @@ _this is the recommended way to run remark42_
##### Deprecated
<details><summary>deprecated options</summary>
<details>
<summary>deprecated options</summary>
| Command line | Replacement | Environment | Replacement | Default | Description | Deprecation version |
| ------------------ | ------------- | ------------------ | ------------- | ------- | -------------- | ------------------- |
| auth.email.host | smtp.host | AUTH_EMAIL_HOST | SMTP_HOST | | smtp host | 1.5.0 |
@@ -209,7 +211,7 @@ _this is the recommended way to run remark42_
Most of the parameters have sane defaults and don't require customization. There are only a few parameters user has to define:
1. `SECRET` - secret key, can be any long and hard-to-guess string.
2. `REMARK_URL` - url pointing to your remark42 server, i.e. `https://demo.reamark42.com`
2. `REMARK_URL` - url pointing to your remark42 server, i.e. `https://demo.remark42.com`
3. At least one pair of `AUTH_<PROVIDER>_CID` and `AUTH_<PROVIDER>_CSEC` defining oauth2 provider(s)
The minimal `docker-compose.yml` has to include all required parameters:
+91 -31
View File
@@ -74,13 +74,18 @@ type emailMessage struct {
// msgTmplData store data for message from request template execution
type msgTmplData struct {
CommentUser string
ParentUser string
CommentText string
CommentLink string
PostTitle string
Email string
UnsubscribeLink string
UserName string
UserPicture string
CommentText string
CommentLink string
CommentDate string
ParentUserName string
ParentUserPicture string
ParentCommentText string
ParentCommentLink string
PostTitle string
Email string
UnsubscribeLink string
}
// verifyTmplData store data for verification message template execution
@@ -99,17 +104,65 @@ const (
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>img {max-width: 100%; max-height: 300px;} a {color: #4fbbd6;}</style>
<style type="text/css">
img {
max-width: 100%;
max-height: 250px;
margin: 5px 0;
display: block;
color: #000;
}
a {
text-decoration: none;
color: #0aa;
}
p {
margin: 0 0 12px;
}
</style>
</head>
<!-- Some of blocks on this page have color: #000 because GMail can wrap block in his own tags which can change text color -->
<body>
<div style="font-family: Arial, sans-serif; font-size: 18px;">
<h1 style="text-align: center; position: relative; color: #4fbbd6; margin-top: 0.2em;">Remark42</h1>
<div style="background-color: #eee; width: 90%; max-width: 800px; margin: 0 auto; border-radius: 0.4em; padding: 0.5em;">
<p style="margin: 0 0 0.5em 0; color: #444444;"><b><a href="{{.CommentLink}}" style="color: #4fbbd6 !important;">New reply</a> from {{.CommentUser}} on your comment{{if .PostTitle}} to "{{.PostTitle}}"{{end}}</b></p>
<div style="background-color: #fff; margin: 0; padding: 0.5em; word-break: break-all; border-radius: 0.2em;">{{.CommentText}}</div>
<p style="text-align: center; position: relative; margin: 0.5em 0 0 0; font-size: 0.8em; opacity: 0.8;"><i>Sent to <a style="color:inherit !important; text-decoration: none !important;" href="mailto:{{.Email}}">{{.Email}}</a> for {{.ParentUser}}</i><br/><br/><a style="color: #4fbbd6 !important;" href="{{.UnsubscribeLink}}">Unsubscribe</a></p>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; width: 100%; max-width: 640px; margin: auto;">
<h1 style="text-align: center; position: relative; color: #4fbbd6; margin-top: 10px; margin-bottom: 10px;">Remark42</h1>
<div style="font-size: 16px; text-align: center; margin-bottom: 10px; color:#000!important;">New reply from {{.UserName}} on your comment{{if .PostTitle}} to «{{.PostTitle}}»{{ end }}</div>
<div style="background-color: #eee; padding: 15px 20px 20px 20px; border-radius: 3px;">
<div>
<div style="margin-bottom: 12px; line-height: 24px;">
<img src="{{.ParentUserPicture}}" style="width: 24px; height: 24px; float: left; margin: 0 8px 0 0; border-radius: 3px; background-color: #ccc;"/>
<span style="font-size: 14px; font-weight: bold; color: #777">{{.ParentUserName}}</span>
<span style="color: #999; font-size: 14px; margin: 0 8px;">{{.CommentDate}}</span>
<a href="{{.ParentCommentLink}}" style="color: #0aa; font-size: 14px;"><b>Show</b></a>
</div>
<div style="font-size: 14px; color:#333!important; padding: 0 14px 0 2px; border-radius: 3px; line-height: 1.4;">
{{.ParentCommentText}}
</div>
</div>
<div style="padding-left: 20px; border-left: 1px dotted rgba(0,0,0,0.15); margin-top: 15px; padding-top: 5px; line-height: 24px;">
<div style="margin-bottom: 8px;">
<img src="{{.UserPicture}}" style="width: 24px; height: 24px; float: left; margin: 0 8px 0 0; border-radius: 3px; background-color: #ccc;"/>
<div style="float: left; font-size: 14px; font-weight: bold; color: #777">
{{.UserName}}
</div>
<div style="color: #999; font-size: 14px; margin: 0 8px; float: left;">
{{.CommentDate}}
</div>
<a href="{{.CommentLink}}" style="color: #0aa; font-size: 14px;"><b>Reply</b></a>
</div>
<div style="font-size: 16px; background-color: #fff; color:#000!important; padding: 14px 14px 2px 14px; border-radius: 3px; line-height: 1.4;">
{{.CommentText}}
</div>
</div>
</div>
<div style="text-align: center; font-size: 14px; margin-top: 32px;">
<i style="color: #000!important;">Sent to <a style="color:inherit; text-decoration: none" href="mailto:{{.Email}}">{{.Email}}</a> for {{.ParentUserName}}</i>
<div style="margin: auto; width: 150px; border-top: 1px solid rgba(0, 0, 0, 0.15); padding-top: 15px; margin-top: 15px;">
<a style="color: #0aa;" href="{{.UnsubscribeLink}}">Unsubscribe</a>
<!-- This is hack for remove collapser in Gmail which can collapse end of the message -->
<div style="opacity: 0;">[{{.CommentDate}}]</div>
</div>
</div>
</div>
</div>
</body>
</html>
`
@@ -120,16 +173,17 @@ const (
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div style="text-align: center; font-family: Arial, sans-serif; font-size: 18px;">
<h1 style="position: relative; color: #4fbbd6; margin-top: 0.2em;">Remark42</h1>
<p style="position: relative; max-width: 20em; margin: 0 auto 1em auto; line-height: 1.4em;">Confirmation for <b>{{.User}}</b> on site <b>{{.Site}}</b></p>
<div style="background-color: #eee; max-width: 20em; margin: 0 auto; border-radius: 0.4em; padding: 0.5em;">
<p style="position: relative; margin: 0 0 0.5em 0;">TOKEN</p>
<p style="position: relative; font-size: 0.7em; opacity: 0.8;"><i>Copy and paste this text into “token” field on comments page</i></p>
<p style="position: relative; font-family: monospace; background-color: #fff; margin: 0; padding: 0.5em; word-break: break-all; text-align: left; border-radius: 0.2em; -webkit-user-select: all; user-select: all;">{{.Token}}</p>
<!-- Some of blocks on this page have color: #000 because GMail can wrap block in his own tags which can change text color -->
<div style="text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: 18px;">
<h1 style="position: relative; color: #4fbbd6; margin-top: 0.2em;">Remark42</h1>
<p style="position: relative; max-width: 20em; margin: 0 auto 1em auto; line-height: 1.4em; color:#000!important;">Confirmation for <b>{{.User}}</b> on site <b>{{.Site}}</b></p>
<div style="background-color: #eee; max-width: 20em; margin: 0 auto; border-radius: 0.4em; padding: 0.5em;">
<p style="position: relative; margin: 0 0 0.5em 0;color:#000!important;">TOKEN</p>
<p style="position: relative; font-size: 0.7em; opacity: 0.8;"><i style="color:#000!important;">Copy and paste this text into “token” field on comments page</i></p>
<p style="position: relative; font-family: monospace; background-color: #fff; margin: 0; padding: 0.5em; word-break: break-all; text-align: left; border-radius: 0.2em; -webkit-user-select: all; user-select: all;">{{.Token}}</p>
</div>
<p style="position: relative; margin-top: 2em; font-size: 0.8em; opacity: 0.8;"><i style="color:#000!important;">Sent to {{.Email}}</i></p>
</div>
<p style="position: relative; margin-top: 2em; font-size: 0.8em; opacity: 0.8;"><i>Sent to {{.Email}}</i></p>
</div>
</body>
</html>
`
@@ -240,15 +294,21 @@ func (e *Email) buildMessageFromRequest(req Request) (string, error) {
if err != nil {
return "", errors.Wrapf(err, "error creating token for unsubscribe link")
}
commentUrlPrefix := req.Comment.Locator.URL + uiNav
msg := bytes.Buffer{}
err = e.msgTmpl.Execute(&msg, msgTmplData{
CommentUser: req.Comment.User.Name,
ParentUser: req.parent.User.Name,
CommentText: req.Comment.Text,
CommentLink: req.Comment.Locator.URL + uiNav + req.Comment.ID,
PostTitle: req.Comment.PostTitle,
Email: req.Email,
UnsubscribeLink: unsubscribeLink,
UserName: req.Comment.User.Name,
UserPicture: req.Comment.User.Picture,
CommentText: req.Comment.Text,
CommentLink: commentUrlPrefix + req.Comment.ID,
CommentDate: req.Comment.Timestamp.Format("02.01.2006 at 15:04"),
ParentUserName: req.parent.User.Name,
ParentUserPicture: req.parent.User.Picture,
ParentCommentText: req.parent.Text,
ParentCommentLink: commentUrlPrefix + req.parent.ID,
PostTitle: req.Comment.PostTitle,
Email: req.Email,
UnsubscribeLink: unsubscribeLink,
})
if err != nil {
return "", errors.Wrapf(err, "error executing template to build comment reply message")