Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move subscribe form out of the global footer #9

Merged
merged 4 commits into from
May 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 1 addition & 59 deletions assets/css/extended/footer.css
Original file line number Diff line number Diff line change
@@ -1,62 +1,4 @@
.mailing-list-container {
.global-footer {
background: var(--code-bg);
border-top: 1px solid var(--content);
}

form.mailing-list {
padding: 10px;
text-align: center;
max-width: calc(var(--nav-width) + var(--gap) * 2);
margin-inline-start: auto;
margin-inline-end: auto;
}

form.mailing-list label {
display: block;
font-weight: bold;
}

form.mailing-list input[type="email"] {
background: var(--theme);
border-radius: 4px;
color: var(--primary);
margin: 8px;
padding: 4px;
min-width: 50%;
}

form.mailing-list button {
background: var(--primary);
border-radius: 18px;
color: var(--theme);
font-size: 16px;
padding: 0 16px;
}

.mailing-list-container .footer {
padding-bottom: 10px;
padding-top: 0;
}

.mailing-list-link {
background: var(--tertiary);
color: var(--primary);
font-size: 14px;
border-radius: 2px;
padding: 6px;
visibility: hidden;
position: fixed;
top: 5px;
right: 10px;
z-index: 99;
transition: visibility 0.5s, opacity 0.8s linear;
}

.mailing-list-link:hover {
background: var(--primary);
color: var(--theme);
}

.mailing-list-link:focus {
outline: 0;
}
64 changes: 64 additions & 0 deletions assets/css/extended/subscribe.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.mailing-list-container {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved from footer.css with minor tweaks.

background: var(--code-bg);
border: 2px solid var(--content);
border-radius: 5px;
margin-top: 20px;
}

form.mailing-list {
text-align: center;
max-width: calc(var(--nav-width) + var(--gap) * 2);
margin-inline-start: auto;
margin-inline-end: auto;
}

form.mailing-list label {
display: block;
font-weight: bold;
padding-top: 5px;
}

form.mailing-list input[type="email"] {
background: var(--theme);
border-radius: 4px;
color: var(--primary);
margin: 8px;
padding: 4px;
min-width: 80%;
}

form.mailing-list button {
background: var(--primary);
border-radius: 18px;
color: var(--theme);
font-size: 16px;
padding: 0 16px;
}

.mailing-list-container .footer {
padding-bottom: 10px;
padding-top: 0;
}

.mailing-list-link {
background: var(--tertiary);
color: var(--primary);
font-size: 14px;
border-radius: 2px;
padding: 6px;
visibility: hidden;
position: fixed;
top: 5px;
right: 10px;
z-index: 99;
transition: visibility 0.5s, opacity 0.8s linear;
}

.mailing-list-link:hover {
background: var(--primary);
color: var(--theme);
}

.mailing-list-link:focus {
outline: 0;
}
6 changes: 4 additions & 2 deletions content/contact/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ Feel free to contact me about topics discussed on this website, potential work,
* [Connect on LinkedIn](https://www.linkedin.com/in/yanirseroussi)
* [Email me](mailto:[email protected])

## Subscribe to the mailing list
## Subscribe to my mailing list

To get new posts delivered to your mailbox, scroll to the bottom of this page, enter your email address, and tap Subscribe. You may unsubscribe at any time.
To get new posts delivered to your mailbox, enter your email address below and tap Subscribe. You may unsubscribe at any time.

{{<subscribe_form>}}
4 changes: 1 addition & 3 deletions content/posts/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,5 @@ title: Browse Posts
description: |
Browse my main posts in reverse chronological order below, or [by tag](/tags/). You may also want to check out my
shorter-form [TIL (today I learned) posts](/til/).

[Subscribe to the mailing list at the bottom of any page](#mailing-list-email) to get new posts delivered to your
mailbox.
{{<subscribe_form>}}
---
4 changes: 2 additions & 2 deletions content/til/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
title: "TIL: Today I learned..."
description: |
Short, rough posts about things I learned, inspired by [Simon Willison's TIL](https://til.simonwillison.net/).
[Subscribe to the mailing list](#mailing-list-email) to receive a digest of recent TILs whenever I publish more
significant posts.
Subscribe to the mailing list to receive a digest of recent TILs whenever I publish [longer-form posts](/posts/).
{{<subscribe_form>}}
---
3 changes: 3 additions & 0 deletions layouts/partials/comments.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{{- partial "subscribe_hover.html" . }}
{{- partial "subscribe_form.html" . }}

<section class="comment-section">
{{ $comments := index $.Site.Data.comments .File.ContentBaseName | default slice }}

Expand Down
52 changes: 2 additions & 50 deletions layouts/partials/extend_footer.html
Original file line number Diff line number Diff line change
@@ -1,40 +1,4 @@
<a href="/contact/#mailing-list-email" target="_blank" aria-label="subscribe to mailing list" class="mailing-list-link" id="mailing-list-link">
Subscribe
</a>

<div class="mailing-list-container">
<script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
<form
class="mailing-list seva-form formkit-form"
action="https://app.convertkit.com/forms/6549537/subscriptions"
method="post"
data-sv-form="6549537"
data-uid="9157759fce"
data-format="inline"
data-version="5"
data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;:&quot;message&quot;,&quot;success_message&quot;:&quot;Success! Now check your email to confirm your subscription.&quot;,&quot;redirect_url&quot;:&quot;&quot;},&quot;analytics&quot;:{&quot;google&quot;:null,&quot;fathom&quot;:null,&quot;facebook&quot;:null,&quot;segment&quot;:null,&quot;pinterest&quot;:null,&quot;sparkloop&quot;:null,&quot;googletagmanager&quot;:null},&quot;modal&quot;:{&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;powered_by&quot;:{&quot;show&quot;:true,&quot;url&quot;:&quot;https://convertkit.com/features/forms?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic&quot;},&quot;recaptcha&quot;:{&quot;enabled&quot;:false},&quot;return_visitor&quot;:{&quot;action&quot;:&quot;show&quot;,&quot;custom_content&quot;:&quot;&quot;},&quot;slide_in&quot;:{&quot;display_in&quot;:&quot;bottom_right&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;sticky_bar&quot;:{&quot;display_in&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15}},&quot;version&quot;:&quot;5&quot;}"
>
<div data-style="clean">
<ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert"></ul>
<div data-element="fields" data-stacked="false">
<label for="mailing-list-email">Get weekly posts in your mailbox</label>
<input
id="mailing-list-email"
name="email_address"
aria-label="Email address"
placeholder="Email address"
required=""
type="email"
>
<button data-element="submit">Subscribe</button>
</div>
</div>
</form>

<div class="footer">
Alternatively, <a href="https://yanirseroussi.com/index.xml">subscribe to RSS feed</a>.
</div>

<div class="global-footer">
<div class="footer">
<span>{{ site.Copyright | markdownify }}&nbsp;&nbsp;|</span>
<span>
Expand All @@ -46,7 +10,7 @@
</div>

<script>
// Set up the collapsible menu.
// Set up the collapsible top-level menu.
const menuTrigger = document.querySelector("#menu-trigger");
const menuElem = document.querySelector(".menu");
menuTrigger.addEventListener("click", function () {
Expand All @@ -57,16 +21,4 @@
menuElem.classList.add("hidden");
}
});

// Show / hide mailing list link when scrolling (adapted from top-link functionality).
const mailingListButton = document.getElementById("mailing-list-link");
window.onscroll = function () {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mailingListButton.style.visibility = "visible";
mailingListButton.style.opacity = "1";
} else {
mailingListButton.style.visibility = "hidden";
mailingListButton.style.opacity = "0";
}
};
</script>
34 changes: 34 additions & 0 deletions layouts/partials/subscribe_form.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{{- /* An embeddable subscribe form. Annoyingly also includes ConvertKit's script, but this will be sorted later. */}}

<div class="mailing-list-container">
<script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
<form
class="mailing-list seva-form formkit-form"
action="https://app.convertkit.com/forms/6549537/subscriptions"
method="post"
data-sv-form="6549537"
data-uid="9157759fce"
data-format="inline"
data-version="5"
data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;:&quot;message&quot;,&quot;success_message&quot;:&quot;Success! Now check your email to confirm your subscription.&quot;,&quot;redirect_url&quot;:&quot;&quot;},&quot;analytics&quot;:{&quot;google&quot;:null,&quot;fathom&quot;:null,&quot;facebook&quot;:null,&quot;segment&quot;:null,&quot;pinterest&quot;:null,&quot;sparkloop&quot;:null,&quot;googletagmanager&quot;:null},&quot;modal&quot;:{&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;powered_by&quot;:{&quot;show&quot;:true,&quot;url&quot;:&quot;https://convertkit.com/features/forms?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic&quot;},&quot;recaptcha&quot;:{&quot;enabled&quot;:false},&quot;return_visitor&quot;:{&quot;action&quot;:&quot;show&quot;,&quot;custom_content&quot;:&quot;&quot;},&quot;slide_in&quot;:{&quot;display_in&quot;:&quot;bottom_right&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15},&quot;sticky_bar&quot;:{&quot;display_in&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;timer&quot;,&quot;scroll_percentage&quot;:null,&quot;timer&quot;:5,&quot;devices&quot;:&quot;all&quot;,&quot;show_once_every&quot;:15}},&quot;version&quot;:&quot;5&quot;}"
>
<div data-style="clean">
<ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert"></ul>
<div data-element="fields" data-stacked="false">
<label for="mailing-list-email">Get weekly posts in your mailbox</label>
<input
id="mailing-list-email"
name="email_address"
aria-label="Email address"
placeholder="Email address"
required=""
type="email"
>
<button data-element="submit">Subscribe</button>
</div>
</div>
</form>
<div class="footer">
Alternatively, <a href="https://yanirseroussi.com/index.xml">subscribe to RSS feed</a>.
</div>
</div>
19 changes: 19 additions & 0 deletions layouts/partials/subscribe_hover.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{{- /* A subscribe button that fades in as users scroll down the page. */}}

<a href="/contact/#mailing-list-email" target="_blank" aria-label="subscribe to mailing list" class="mailing-list-link" id="mailing-list-link">
Subscribe
</a>

<script>
// Show / hide mailing list link when scrolling (adapted from top-link functionality).
const mailingListButton = document.getElementById("mailing-list-link");
window.onscroll = function () {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mailingListButton.style.visibility = "visible";
mailingListButton.style.opacity = "1";
} else {
mailingListButton.style.visibility = "hidden";
mailingListButton.style.opacity = "0";
}
};
</script>
1 change: 1 addition & 0 deletions layouts/shortcodes/subscribe_form.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{{- partial "subscribe_form.html" . }}
Loading