e83cd1f7d2
The buildParameters function returns events sorted newest-first (sortBy created_at, slice(0,100)), and the mjml section is already labeled 'Latest Activity'. The object keys Popular/HasPopular no longer reflect the semantics, so rename them to Latest/HasLatest.
90 lines
4.3 KiB
XML
90 lines
4.3 KiB
XML
<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 {{brandAccent}}; 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: {{brandAccent}}; 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>
|
|
|
|
{{#HasLatest}}
|
|
<mj-section background-color="#ffffff" padding="0 32px 24px 32px">
|
|
<mj-column>
|
|
<mj-text css-class="section-header">Latest Activity</mj-text>
|
|
{{#Latest}}
|
|
<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>
|
|
{{/Latest}}
|
|
</mj-column>
|
|
</mj-section>
|
|
{{/HasLatest}}
|
|
|
|
<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>
|