From 6eac39c31fc9186f05a172b903b9946b2abf304f Mon Sep 17 00:00:00 2001
From: Meysam Azad <meysam@developer-friendly.blog>
Date: Mon, 4 Nov 2024 12:41:38 +0700
Subject: [PATCH] chore(newsletter): add the email template

---
 internal/newsletter/index.html | 225 +++++++++++++++++++++++++++++++++
 1 file changed, 225 insertions(+)
 create mode 100644 internal/newsletter/index.html
diff --git a/internal/newsletter/index.html b/internal/newsletter/index.html
new file mode 100644
index 0000000..1ee3fa1
--- /dev/null
+++ b/internal/newsletter/index.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Developer Friendly Blog</title>
+    <link
+      rel="icon"
+      href="https://newsletter.developer-friendly.blog/favicon.ico"
+      type="image/x-icon"
+    />
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      /* Reset styles for email clients */
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100% !important;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, Cantarell, sans-serif;
+      }
+
+      /* Base styles */
+      .email-wrapper {
+        width: 100%;
+        max-width: 600px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+
+      .content {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Header styles */
+      .header {
+        text-align: center;
+        padding-bottom: 20px;
+        border-bottom: 2px solid #e0e0e0;
+      }
+
+      .logo {
+        max-width: 150px;
+        height: auto;
+      }
+
+      /* Content sections */
+      .section {
+        margin: 25px 0;
+        padding: 15px;
+        border-radius: 6px;
+      }
+
+      .highlight {
+        background-color: #f8f9fa;
+        border-left: 4px solid #0066cc;
+      }
+
+      /* Typography */
+      h1 {
+        color: #333333;
+        font-size: 24px;
+        margin: 0 0 15px 0;
+      }
+
+      h2 {
+        color: #444444;
+        font-size: 20px;
+        margin: 20px 0 10px 0;
+      }
+
+      p {
+        color: #666666;
+        font-size: 16px;
+        line-height: 1.6;
+        margin: 10px 0;
+      }
+
+      /* Links */
+      a {
+        color: #0066cc;
+        text-decoration: none;
+      }
+
+      /* Footer */
+      .footer {
+        text-align: center;
+        padding-top: 20px;
+        border-top: 2px solid #e0e0e0;
+        font-size: 14px;
+        color: #888888;
+      }
+
+      .social-links {
+        margin: 15px 0;
+      }
+
+      .social-links a {
+        margin: 0 10px;
+      }
+
+      p#address {
+        font-size: 12px;
+        color: #999999;
+      }
+
+      /* Dark mode support */
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #1a1a1a !important;
+        }
+
+        .content {
+          background-color: #2d2d2d !important;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        h1,
+        h2 {
+          color: #ffffff !important;
+        }
+
+        p {
+          color: #e0e0e0 !important;
+        }
+
+        .highlight {
+          background-color: #3d3d3d !important;
+          border-left-color: #66b3ff !important;
+        }
+
+        .header,
+        .footer {
+          border-color: #404040 !important;
+        }
+
+        a {
+          color: #66b3ff !important;
+        }
+      }
+
+      /* Responsive design */
+      @media screen and (max-width: 600px) {
+        .email-wrapper {
+          padding: 10px;
+        }
+
+        .content {
+          padding: 15px;
+        }
+
+        h1 {
+          font-size: 20px;
+        }
+
+        h2 {
+          font-size: 18px;
+        }
+
+        p {
+          font-size: 14px;
+        }
+      }
+    </style>
+          <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+  <body>
+    <div class="email-wrapper">
+      <div class="content">
+        <!-- Header Section -->
+        <div class="header">
+          <img
+            src="https://newsletter.developer-friendly.blog/logo.webp"
+            alt="Company Logo"
+            class="logo"
+          />
+          <h1>SRE Weekly Update</h1>
+          <p class="date">{{ Date "January 2, 2006" }}</p>
+        </div>
+
+        <!-- Main Content -->
+        <div class="section">
+          <p>Hi {{ .Subscriber.FirstName | default "Dear" }},</p>
+          {{ template "content" . }}
+        </div>
+
+        <!-- Footer Section -->
+        <div class="footer">
+          <div class="social-links">
+            <a href="https://www.linkedin.com/company/developer-friendly/"
+              >LinkedIn</a
+            >
+            <a href="/developer-friendly/">GitHub</a>
+            <a href="x.com/devfriendly_">Twitter</a>
+          </div>
+          <p>© Developer Friendly Blog. All rights reserved.</p>
+          <p>
+            <a href="{{ UnsubscribeURL }}">Unsubscribe</a> |
+            <a href="https://developer-friendly.blog/privacy/"
+              >Privacy Policy</a
+            >
+          </p>
+          <p id="address">
+            Harju maakond, Tallinn, Kesklinna linnaosa, Kiriku tn 6, 10130
+          </p>
+          <p>
+            You're receiving this email because you opted in at
+            <br />
+            <a href="https://developer-friendly.blog"
+              >https://developer-friendly.blog</a
+            >
+          </p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
