Skip to content

Commit 992d389

Browse files
george-gcaTeusner
george-gca
authored and
Teusner
committed
Added missing newsletter components (alshedivat#2913)
Signed-off-by: George Araújo <[email protected]>
1 parent cc32c3c commit 992d389

File tree

7 files changed

+184
-3
lines changed

7 files changed

+184
-3
lines changed

‎_includes/distill_scripts.liquid

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -278,3 +278,7 @@
278278
<script src="{{ '/assets/js/search-data.js' | relative_url }}"></script>
279279
<script src="{{ '/assets/js/shortcut-key.js' | relative_url | bust_file_cache }}"></script>
280280
{% endif %}
281+
282+
{% if site.newsletter.enabled %}
283+
<script defer src="{{ '/assets/js/newsletter.js' | relative_url | bust_file_cache }}"></script>
284+
{% endif %}

‎_includes/footer.liquid

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
{% else %}
1717
<footer class="sticky-bottom mt-5" role="contentinfo">
1818
{% if site.newsletter.enabled %}
19-
{% include scripts/newsletter.liquid %}
19+
{% include newsletter.liquid %}
2020
{% endif %}
2121

2222
<div class="container">

‎_includes/newsletter.liquid

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<div
2+
class="newsletter-form-container"
3+
{% if include.center %}
4+
style="margin: 20px"
5+
{% endif %}
6+
>
7+
<form
8+
class="newsletter-form"
9+
action="https://app.loops.so/api/newsletter-form/{{ site.newsletter.endpoint }}"
10+
method="POST"
11+
style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
12+
>
13+
<input
14+
class="newsletter-form-input"
15+
name="newsletter-form-input"
16+
type="email"
17+
placeholder="[email protected]"
18+
required=""
19+
>
20+
21+
<button
22+
type="submit"
23+
class="newsletter-form-button"
24+
style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
25+
>
26+
subscribe
27+
</button>
28+
29+
<button
30+
type="button"
31+
class="newsletter-loading-button"
32+
style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
33+
>
34+
Please wait...
35+
</button>
36+
</form>
37+
38+
<div
39+
class="newsletter-success"
40+
style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
41+
>
42+
<p class="newsletter-success-message">You're subscribed!</p>
43+
</div>
44+
45+
<div
46+
class="newsletter-error"
47+
style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
48+
>
49+
<p class="newsletter-error-message">Oops! Something went wrong, please try again</p>
50+
</div>
51+
52+
<button
53+
class="newsletter-back-button"
54+
type="button"
55+
onmouseout='this.style.textDecoration="none"'
56+
onmouseover='this.style.textDecoration="underline"'
57+
>
58+
&larr; Back
59+
</button>
60+
</div>
61+
62+
<noscript>
63+
<style>
64+
.newsletter-form-container {
65+
display: none;
66+
}
67+
</style>
68+
</noscript>

‎_includes/related_posts.liquid

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@
1818
{% endfor %}
1919
{% if site.newsletter.enabled and site.footer_fixed %}
2020
<p class="mb-2" style="margin-top: 1.5rem !important">Subscribe to be notified of future articles:</p>
21-
{% include scripts/newsletter.liquid left=true %}
21+
{% include newsletter.liquid left=true %}
2222
{% endif %}

‎_includes/scripts.liquid

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,3 +310,7 @@
310310
<script src="{{ '/assets/js/search-data.js' | relative_url }}"></script>
311311
<script src="{{ '/assets/js/shortcut-key.js' | relative_url | bust_file_cache }}"></script>
312312
{% endif %}
313+
314+
{% if site.newsletter.enabled %}
315+
<script defer src="{{ '/assets/js/newsletter.js' | relative_url | bust_file_cache }}"></script>
316+
{% endif %}

‎_layouts/about.liquid

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ layout: default
7474
{% endif %}
7575

7676
{% if site.newsletter.enabled and site.footer_fixed %}
77-
{% include scripts/newsletter.liquid center=true %}
77+
{% include newsletter.liquid center=true %}
7878
{% endif %}
7979
</article>
8080
</div>

‎assets/js/newsletter.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
function submitHandler(event) {
2+
event.preventDefault();
3+
var container = event.target.parentNode;
4+
var form = container.querySelector(".newsletter-form");
5+
var formInput = container.querySelector(".newsletter-form-input");
6+
var success = container.querySelector(".newsletter-success");
7+
var errorContainer = container.querySelector(".newsletter-error");
8+
var errorMessage = container.querySelector(".newsletter-error-message");
9+
var backButton = container.querySelector(".newsletter-back-button");
10+
var submitButton = container.querySelector(".newsletter-form-button");
11+
var loadingButton = container.querySelector(".newsletter-loading-button");
12+
13+
const rateLimit = () => {
14+
errorContainer.style.display = "flex";
15+
errorMessage.innerText = "Too many signups, please try again in a little while";
16+
submitButton.style.display = "none";
17+
formInput.style.display = "none";
18+
backButton.style.display = "block";
19+
};
20+
21+
// Compare current time with time of previous sign up
22+
var time = new Date();
23+
var timestamp = time.valueOf();
24+
var previousTimestamp = localStorage.getItem("loops-form-timestamp");
25+
26+
// If last sign up was less than a minute ago
27+
// display error
28+
if (previousTimestamp && Number(previousTimestamp) + 60000 > timestamp) {
29+
rateLimit();
30+
return;
31+
}
32+
localStorage.setItem("loops-form-timestamp", timestamp);
33+
34+
submitButton.style.display = "none";
35+
loadingButton.style.display = "flex";
36+
37+
var formBody = "userGroup=&email=" + encodeURIComponent(formInput.value);
38+
fetch(event.target.action, {
39+
method: "POST",
40+
body: formBody,
41+
headers: {
42+
"Content-Type": "application/x-www-form-urlencoded",
43+
},
44+
})
45+
.then((res) => [res.ok, res.json(), res])
46+
.then(([ok, dataPromise, res]) => {
47+
if (ok) {
48+
// If response successful
49+
// display success
50+
success.style.display = "flex";
51+
form.reset();
52+
} else {
53+
// If response unsuccessful
54+
// display error message or response status
55+
dataPromise.then((data) => {
56+
errorContainer.style.display = "flex";
57+
errorMessage.innerText = data.message ? data.message : res.statusText;
58+
});
59+
}
60+
})
61+
.catch((error) => {
62+
// check for cloudflare error
63+
if (error.message === "Failed to fetch") {
64+
rateLimit();
65+
return;
66+
}
67+
// If error caught
68+
// display error message if available
69+
errorContainer.style.display = "flex";
70+
if (error.message) errorMessage.innerText = error.message;
71+
localStorage.setItem("loops-form-timestamp", "");
72+
})
73+
.finally(() => {
74+
formInput.style.display = "none";
75+
loadingButton.style.display = "none";
76+
backButton.style.display = "block";
77+
});
78+
}
79+
function resetFormHandler(event) {
80+
var container = event.target.parentNode;
81+
var formInput = container.querySelector(".newsletter-form-input");
82+
var success = container.querySelector(".newsletter-success");
83+
var errorContainer = container.querySelector(".newsletter-error");
84+
var errorMessage = container.querySelector(".newsletter-error-message");
85+
var backButton = container.querySelector(".newsletter-back-button");
86+
var submitButton = container.querySelector(".newsletter-form-button");
87+
88+
success.style.display = "none";
89+
errorContainer.style.display = "none";
90+
errorMessage.innerText = "Oops! Something went wrong, please try again";
91+
backButton.style.display = "none";
92+
formInput.style.display = "flex";
93+
submitButton.style.display = "flex";
94+
}
95+
96+
var formContainers = document.getElementsByClassName("newsletter-form-container");
97+
98+
for (var i = 0; i < formContainers.length; i++) {
99+
var formContainer = formContainers[i];
100+
var handlersAdded = formContainer.classList.contains("newsletter-handlers-added");
101+
if (handlersAdded) continue;
102+
formContainer.querySelector(".newsletter-form").addEventListener("submit", submitHandler);
103+
formContainer.querySelector(".newsletter-back-button").addEventListener("click", resetFormHandler);
104+
formContainer.classList.add("newsletter-handlers-added");
105+
}

0 commit comments

Comments
 (0)