will/thistleandmoth-campaigns
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sample campaign, restyle email template to brand
Sync campaigns / sync (push) Failing after 18s
Details

Browse Source 
campaigns/welcome/ is a sample campaign showing the campaign.md format in
practice. Restyled email-templates/campaign.html to thistleandmoth.org's
actual brand colors and fonts (EB Garamond/Source Serif 4), no images, with
web-safe fallbacks for clients that can't load webfonts.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Will Estes
2026-07-23 20:42:08 -04:00
parent 92997db150
commit 6c65fd1379
3 changed files with 46 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
campaigns/.gitkeep
View File
campaigns/welcome/campaign.md
+18
View File
@@ -0,0 +1,18 @@
---
subject: "Welcome to Thistle & Moth"
lists: ["Newsletter"]
from_email: "Thistle & Moth <hello@thistleandmoth.org>"
tags: ["welcome"]
---
{{ if .Subscriber.Attribs.first_name }}Hi {{ .Subscriber.Attribs.first_name }},{{ else }}Hi there,{{ end }}
Welcome to the Thistle & Moth newsletter! We're glad you're here.
From now on, this is where you'll hear about what's new, what's coming, and
anything else worth sharing. No spam, no noise — just the good stuff, when
we actually have something to say.
Thanks for reading with us.
The Thistle & Moth team
email-templates/campaign.html
+28 -18
View File
@@ -1,14 +1,17 @@
<!-- <!--
Listmonk's own stock campaign template (static/email-templates/default.tpl Listmonk's own stock campaign template (static/email-templates/default.tpl
in knadh/listmonk), committed here verbatim as a known-good, unsubscribe- in knadh/listmonk), restyled to match thistleandmoth.org's brand colors and
capable starting point rather than something invented from scratch. Synced fonts (see thistleandmoth-site/assets/css/main.css) — no images, since this
into listmonk via `campaigns template <name> email-templates/campaign.html` domain prefers not to ship graphics in email. The Google Fonts <link> lets
(see internal/campaign/template.go) as the is_default campaign template, so clients that support remote webfonts (Apple/iOS Mail, some Android/web
every campaign this tool creates gets a real unsubscribe link/footer without clients) render the real EB Garamond/Source Serif 4 (the site self-hosts
per-campaign template_id wiring. Restyle freely — the two load-bearing tags these, but email clients can't reach relative site assets, so this pulls the
are `{{ template "content" . }}` (where the campaign body gets injected) and same two families from Google Fonts instead); every font-family below still
`{{ UnsubscribeURL }}` (the actual unsubscribe link); everything else here is lists web-safe fallbacks first-class, since most email clients (Outlook,
just Listmonk's default look. Gmail's own rendering) strip external fonts entirely and need those to look
right. The two load-bearing tags are `{{ template "content" . }}` (where the
campaign body gets injected) and `{{ UnsubscribeURL }}` (the actual
unsubscribe link); everything else here is just this domain's look.
--> -->
<!doctype html> <!doctype html>
<html> <html>
@@ -17,14 +20,21 @@ just Listmonk's default look.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<base target="_blank"> <base target="_blank">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Source+Serif+4:wght@400;700&display=swap" rel="stylesheet">
<style> <style>
body { body {
background-color: #F0F1F3; background-color: #F0F1F3;
font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif; font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
font-size: 15px; font-size: 15px;
line-height: 26px; line-height: 26px;
margin: 0; margin: 0;
color: #444; color: #241C14;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
color: #1A140D;
} }
pre { pre {
@@ -42,7 +52,7 @@ just Listmonk's default look.
} }
.wrap { .wrap {
background-color: #fff; background-color: #F6F0DF;
padding: 30px; padding: 30px;
max-width: 525px; max-width: 525px;
margin: 0 auto; margin: 0 auto;
@@ -50,7 +60,7 @@ just Listmonk's default look.
} }
.button { .button {
background: #0055d4; background: #1D4F91;
border-radius: 3px; border-radius: 3px;
text-decoration: none !important; text-decoration: none !important;
color: #fff !important; color: #fff !important;
@@ -59,7 +69,7 @@ just Listmonk's default look.
display: inline-block; display: inline-block;
} }
.button:hover { .button:hover {
background: #111; background: #163B70;
} }
.footer { .footer {
@@ -82,10 +92,10 @@ just Listmonk's default look.
} }
a { a {
color: #0055d4; color: #1D4F91;
} }
a:hover { a:hover {
color: #111; color: #163B70;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.wrap { .wrap {
@@ -97,9 +107,9 @@ just Listmonk's default look.
} }
</style> </style>
</head> </head>
<body style="background-color: #F0F1F3;font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;font-size: 15px;line-height: 26px;margin: 0;color: #444;"> <body style="background-color: #F0F1F3;font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;font-size: 15px;line-height: 26px;margin: 0;color: #241C14;">
<div class="gutter" style="padding: 30px;">&nbsp;</div> <div class="gutter" style="padding: 30px;">&nbsp;</div>
<div class="wrap" style="background-color: #fff;padding: 30px;max-width: 525px;margin: 0 auto;border-radius: 5px;"> <div class="wrap" style="background-color: #F6F0DF;padding: 30px;max-width: 525px;margin: 0 auto;border-radius: 5px;">
{{ template "content" . }} {{ template "content" . }}
</div> </div>