mailship/src/emails/digest.mjml

<mjml>
  <mj-head>
    <mj-title>New activity on Flotilla</mj-title>
    <mj-font name="Inter" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700" />
    <mj-style inline="inline">
      .header { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; }
      .subheader { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 15px; color: #64748b; line-height: 1.5; }
      .event-item { margin-bottom: 20px; border-left: 3px solid #7161FF; padding-left: 12px; }
      .event-meta { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
      .event-meta-left { display: flex; align-items: center; }
      .event-author { font-family: Inter, Helvetica, Arial, sans-serif; font-weight: 600; margin-right: 4px; color: #1e293b; }
      .event-content { font-family: Inter, Helvetica, Arial, sans-serif; white-space: pre-wrap; color: #334155; font-size: 14px; }
      .event-timestamp { color: #94a3b8; font-size: 12px; }
      .event-link { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; }
      .event-link a { color: {{brandAccent}}; text-decoration: none; }
      .section-header { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 700; color: #1e293b; margin-top: 15px; }
      .profile-image { width: 20px; height: 20px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
      .user-photo { width: 32px; height: 32px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
      .event-stats { margin-top: 8px; color: #64748b; font-size: 13px; }
      .stat-item { display: inline-flex; align-items: center; margin-right: 12px; }
      .footer { font-family: Inter, Helvetica, Arial, sans-serif; color: #94a3b8; font-size: 12px; line-height: 1.5; }
      .footer a { color: #7161FF; text-decoration: underline; }
      .logo { max-width: 48px; max-height: 48px; }
      a { text-decoration: none; }
    </mj-style>
  </mj-head>
  <mj-body background-color="#f0f2f5">
    <mj-section background-color="#ffffff" padding="32px 32px 8px 32px">
      <mj-column>
        {{#brandLogo}}
        <mj-image src="{{brandLogo}}" alt="{{brandName}}" align="center" width="40px" padding="0 0 8px 0" />
        {{/brandLogo}}
        <mj-text css-class="header" align="center">
          <span style="color: {{brandAccent}};">{{brandName}}</span>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding="8px 32px 24px 32px">
      <mj-column>
        <mj-text css-class="subheader" align="center">
          {{UserName}}, here's what's happening in your communities.
        </mj-text>
        <mj-divider border-color="#e2e8f0" />
      </mj-column>
    </mj-section>

    {{#HasPopular}}
    <mj-section background-color="#ffffff" padding="0 32px 24px 32px">
      <mj-column>
        <mj-text css-class="section-header">Latest Activity</mj-text>
        {{#Popular}}
        <mj-text>
          <div class="event-item">
            <div class="event-meta">
              <div class="event-meta-left">
                {{#Icon}}<img src="{{Icon}}" class="profile-image" />{{/Icon}}
                <span class="event-author">{{Name}}</span>
                <span class="event-timestamp">at {{Timestamp}}</span>
              </div>
              <div class="event-link">
                <a href="{{Link}}">Open</a>
              </div>
            </div>
            <div class="event-content">{{{Content}}}</div>
            <div class="event-stats">
              <span class="stat-item">
                {{Replies}} replies
              </span>
              <span class="stat-item">
                {{Reactions}} reactions
              </span>
            </div>
          </div>
        </mj-text>
        {{/Popular}}
      </mj-column>
    </mj-section>
    {{/HasPopular}}

    <mj-section background-color="#ffffff" padding="0 32px 24px 32px">
      <mj-column>
        <mj-divider border-color="#e2e8f0" />
        <mj-text css-class="footer">
          You're receiving this email because you subscribed to {{brandName}} notifications.
          You can manage your subscriptions <a href="{{settingsUrl}}">here</a> or <a href="{{unsubscribeUrl}}">unsubscribe</a>.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>