A pretty HTML template for the competition announcement email

AlphaSheep commented 1 year ago

The current competition announcement emails are sent in a text format and are quite ugly. Let's revamp our competition announcement emails with a new and visually appealing HTML template.

The email template should be clear, minimalist design, and contain all information a person would need - competition name, venue, city, dates, and a registration link.

This update will not only make our announcements stand out but also provide a better user experience for our members. Feel free to share any design ideas or suggestions to make our competition announcement emails more attractive and user-friendly.

elfishhenry commented 1 month ago

Starting to work on this.

elfishhenry commented 1 month ago

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CubingZA Competition Announcement</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }
    .container {
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
    }
    h1 {
      color: #333;
    }
    p {
      line-height: 1.6;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>New Cubing Competition: {{competitionName}}</h1>
    <p>Hi {{userName}},</p>
    <p>Get ready for the <strong>{{competitionName}}</strong> competition!</p>
    <p><strong>Venue:</strong> {{venue}}<br>
       <strong>City:</strong> {{city}}<br>
       <strong>Dates:</strong> {{startDate}} - {{endDate}} </p> 
    <p>Don't miss out on this exciting event. Register now!</p>
    <a href="{{registrationLink}}" class="button">Register Now</a>
    <p>Regards,<br>
       The CubingZA Team</p>
  </div>
</body>
</html>

Will this work and are any improvements needed?

That should output something like this:

AlphaSheep commented 3 weeks ago

Yes, this is already much better! You could save this template to server/components/notificationEmailer/notification.template.html, and load it into notificationEmailer.js using Node's fs.readFile . You'd then need to do the necessary substitutions manually (using .replace) and set the html property of the object you send (see the Mailgun documentation here).

If you do choose to do this, please work in a branch with this change only, because the email stuff needs extensive manual testing on a staging server that is hooked up to a Mailgun sandbox domain, and it will have to wait until I have some time to do that. I don't want that to hold up any other changes in the mean time.

elfishhenry commented 3 weeks ago

Alright, I'll see what I can do.

elfishhenry commented 3 weeks ago

I'll start this tomorrow.

elfishhenry commented 1 week ago

Should've fixed it.

CubingZA / CubingZA-Website

A pretty HTML template for the competition announcement email #141