Add email newsletter signup to blogs

This commit is contained in:
Ben Visness 2024-05-20 17:00:03 -05:00
parent 1aab3b47b3
commit 04db4ad709
4 changed files with 61 additions and 11 deletions

View File

@ -39,12 +39,14 @@
{{ end }} {{ end }}
<!-- Main post --> <!-- Main post -->
<div class="mb3"> <div>
<div class="post-content overflow-x-auto"> <div class="post-content overflow-x-auto">
{{ .MainPost.Content }} {{ .MainPost.Content }}
</div> </div>
</div> </div>
{{ template "newsletter_signup.html" . }}
<div class="optionbar"></div> <div class="optionbar"></div>
{{ range .Comments }} {{ range .Comments }}

View File

@ -0,0 +1,46 @@
<div class="pv3 flex flex-column g2 items-center">
<form id="newsletter-form" class="flex flex-column items-center">
<div class="b pv2">Sign up for our email newsletter:</div>
<div class="flex g2 justify-center">
<input id="newsletter-email" type="email" class="input--jam flex-grow-1 flex-grow-0-ns" placeholder="me@example.com">
<button id="newsletter-button" class="white">Sign up</button>
</div>
<div id="newsletter-message" class="f7 pt1">
&nbsp;
</div>
</form>
</div>
<script>
{
const form = document.querySelector("#newsletter-form");
const emailField = document.querySelector("#newsletter-email");
const button = document.querySelector("#newsletter-button");
const message = document.querySelector("#newsletter-message");
form.addEventListener("submit", async e => {
e.preventDefault();
button.disabled = true;
try {
const res = await fetch("{{ .NewsletterSignupUrl }}", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
"email": emailField.value,
}),
});
if (res.status >= 400) {
throw new Error("bad request");
}
message.innerText = "Signed up successfully!";
} catch (err) {
message.innerText = "There was an error signing up.";
}
button.disabled = false;
});
}
</script>

View File

@ -21,6 +21,7 @@ type BaseData struct {
LoginPageUrl string LoginPageUrl string
ProjectCSSUrl string ProjectCSSUrl string
DiscordInviteUrl string DiscordInviteUrl string
NewsletterSignupUrl string
Project Project Project Project
User *User User *User

View File

@ -52,6 +52,7 @@ func getBaseData(c *RequestContext, title string, breadcrumbs []templates.Breadc
LoginPageUrl: hmnurl.BuildLoginPage(c.FullUrl()), LoginPageUrl: hmnurl.BuildLoginPage(c.FullUrl()),
ProjectCSSUrl: hmnurl.BuildProjectCSS(project.Color1), ProjectCSSUrl: hmnurl.BuildProjectCSS(project.Color1),
DiscordInviteUrl: "https://discord.gg/hmn", DiscordInviteUrl: "https://discord.gg/hmn",
NewsletterSignupUrl: hmnurl.BuildAPINewsletterSignup(),
Project: templates.ProjectToTemplate(&project, c.UrlContext.BuildHomepage()), Project: templates.ProjectToTemplate(&project, c.UrlContext.BuildHomepage()),
User: templateUser, User: templateUser,