From 76555e70870cfbe85ecc7a25e0d625c3ae9c327e Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Tue, 18 Jun 2024 17:07:34 +0100
Subject: [PATCH 01/10] fix: blog highlighted in nav for child pages

---
 _includes/header.liquid | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/_includes/header.liquid b/_includes/header.liquid
index 805280b0963c..0c55768c5f49 100644
--- a/_includes/header.liquid
+++ b/_includes/header.liquid
@@ -95,7 +95,8 @@
                   </div>
                 </li>
               {% else %}
-                <li class="nav-item {% if page.url contains p.permalink %}active{% endif %}">
+              {% assign parent_link = p.permalink | remove: 'index.html' %}
+                <li class="nav-item {% if page.url contains parent_link %}active{% endif %}">
                   {% if p.permalink contains '/blog/' %}{% assign url = '/blog/' %} {% else %}{% assign url = p.url %}{% endif %}
                   <a class="nav-link" href="{{ url | relative_url }}">
                     {{- p.title }}

From 2760964a05b58a0f657e74fe03c328267e10da64 Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Tue, 18 Jun 2024 17:17:12 +0100
Subject: [PATCH 02/10] prettier

---
 _includes/header.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/header.liquid b/_includes/header.liquid
index 0c55768c5f49..d07fc9818337 100644
--- a/_includes/header.liquid
+++ b/_includes/header.liquid
@@ -95,7 +95,7 @@
                   </div>
                 </li>
               {% else %}
-              {% assign parent_link = p.permalink | remove: 'index.html' %}
+                {% assign parent_link = p.permalink | remove: 'index.html' %}
                 <li class="nav-item {% if page.url contains parent_link %}active{% endif %}">
                   {% if p.permalink contains '/blog/' %}{% assign url = '/blog/' %} {% else %}{% assign url = p.url %}{% endif %}
                   <a class="nav-link" href="{{ url | relative_url }}">

From 452f0f8c9465dc6c1c894c917c5be17dea3929e6 Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Tue, 18 Jun 2024 18:50:49 +0100
Subject: [PATCH 03/10] added newsletter field to config

---
 _config.yml | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/_config.yml b/_config.yml
index 2177c4a2a8ae..ccf0164cc562 100644
--- a/_config.yml
+++ b/_config.yml
@@ -174,6 +174,15 @@ external_sources:
       - url: https://blog.google/technology/ai/google-gemini-update-flash-ai-assistant-io-2024/
         published_date: 2024-05-14
 
+# -----------------------------------------------------------------------------
+# Newsletter
+# -----------------------------------------------------------------------------
+
+newsletter:
+  enabled: false
+  endpoint: # your loops endpoint (e.g., https://app.loops.so/api/newsletter-form/YOUR-ENDPOINT)
+  # https://loops.so/docs/forms/custom-form
+
 # -----------------------------------------------------------------------------
 # Collections
 # -----------------------------------------------------------------------------

From 3c633ece1ddd9e18cceb1ec9942312bfa66bae21 Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Tue, 18 Jun 2024 18:51:25 +0100
Subject: [PATCH 04/10] added newsletter subscribe button code and styling

---
 _includes/scripts/newsletter.liquid | 176 ++++++++++++++++++++++++++++
 _sass/_base.scss                    | 109 +++++++++++++++++
 2 files changed, 285 insertions(+)
 create mode 100644 _includes/scripts/newsletter.liquid

diff --git a/_includes/scripts/newsletter.liquid b/_includes/scripts/newsletter.liquid
new file mode 100644
index 000000000000..0204ffa9028c
--- /dev/null
+++ b/_includes/scripts/newsletter.liquid
@@ -0,0 +1,176 @@
+<div
+  class="newsletter-form-container"
+  {% if include.center %}
+    style="margin: 20px"
+  {% endif %}
+>
+  <form
+    class="newsletter-form"
+    action="https://app.loops.so/api/newsletter-form/{{ site.newsletter.endpoint }}"
+    method="POST"
+    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+  >
+    <input
+      class="newsletter-form-input"
+      name="newsletter-form-input"
+      type="email"
+      placeholder="user@example.com"
+      required=""
+    >
+
+    <button
+      type="submit"
+      class="newsletter-form-button"
+      style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+    >
+      subscribe
+    </button>
+
+    <button
+      type="button"
+      class="newsletter-loading-button"
+      style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+    >
+      Please wait...
+    </button>
+  </form>
+
+  <div
+    class="newsletter-success"
+    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+  >
+    <p class="newsletter-success-message">You're subscribed!</p>
+  </div>
+
+  <div
+    class="newsletter-error"
+    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+  >
+    <p class="newsletter-error-message">Oops! Something went wrong, please try again</p>
+  </div>
+
+  <button
+    class="newsletter-back-button"
+    type="button"
+    onmouseout='this.style.textDecoration="none"'
+    onmouseover='this.style.textDecoration="underline"'
+  >
+    &larr; Back
+  </button>
+</div>
+
+<script>
+  function submitHandler(event) {
+    event.preventDefault();
+    var container = event.target.parentNode;
+    var form = container.querySelector('.newsletter-form');
+    var formInput = container.querySelector('.newsletter-form-input');
+    var success = container.querySelector('.newsletter-success');
+    var errorContainer = container.querySelector('.newsletter-error');
+    var errorMessage = container.querySelector('.newsletter-error-message');
+    var backButton = container.querySelector('.newsletter-back-button');
+    var submitButton = container.querySelector('.newsletter-form-button');
+    var loadingButton = container.querySelector('.newsletter-loading-button');
+
+    const rateLimit = () => {
+      errorContainer.style.display = 'flex';
+      errorMessage.innerText = 'Too many signups, please try again in a little while';
+      submitButton.style.display = 'none';
+      formInput.style.display = 'none';
+      backButton.style.display = 'block';
+    };
+
+    // Compare current time with time of previous sign up
+    var time = new Date();
+    var timestamp = time.valueOf();
+    var previousTimestamp = localStorage.getItem('loops-form-timestamp');
+
+    // If last sign up was less than a minute ago
+    // display error
+    if (previousTimestamp && Number(previousTimestamp) + 60000 > timestamp) {
+      rateLimit();
+      return;
+    }
+    localStorage.setItem('loops-form-timestamp', timestamp);
+
+    submitButton.style.display = 'none';
+    loadingButton.style.display = 'flex';
+
+    var formBody = 'userGroup=&email=' + encodeURIComponent(formInput.value);
+    fetch(event.target.action, {
+      method: 'POST',
+      body: formBody,
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    })
+      .then((res) => [res.ok, res.json(), res])
+      .then(([ok, dataPromise, res]) => {
+        if (ok) {
+          // If response successful
+          // display success
+          success.style.display = 'flex';
+          form.reset();
+        } else {
+          // If response unsuccessful
+          // display error message or response status
+          dataPromise.then((data) => {
+            errorContainer.style.display = 'flex';
+            errorMessage.innerText = data.message ? data.message : res.statusText;
+          });
+        }
+      })
+      .catch((error) => {
+        // check for cloudflare error
+        if (error.message === 'Failed to fetch') {
+          rateLimit();
+          return;
+        }
+        // If error caught
+        // display error message if available
+        errorContainer.style.display = 'flex';
+        if (error.message) errorMessage.innerText = error.message;
+        localStorage.setItem('loops-form-timestamp', '');
+      })
+      .finally(() => {
+        formInput.style.display = 'none';
+        loadingButton.style.display = 'none';
+        backButton.style.display = 'block';
+      });
+  }
+  function resetFormHandler(event) {
+    var container = event.target.parentNode;
+    var formInput = container.querySelector('.newsletter-form-input');
+    var success = container.querySelector('.newsletter-success');
+    var errorContainer = container.querySelector('.newsletter-error');
+    var errorMessage = container.querySelector('.newsletter-error-message');
+    var backButton = container.querySelector('.newsletter-back-button');
+    var submitButton = container.querySelector('.newsletter-form-button');
+
+    success.style.display = 'none';
+    errorContainer.style.display = 'none';
+    errorMessage.innerText = 'Oops! Something went wrong, please try again';
+    backButton.style.display = 'none';
+    formInput.style.display = 'flex';
+    submitButton.style.display = 'flex';
+  }
+
+  var formContainers = document.getElementsByClassName('newsletter-form-container');
+
+  for (var i = 0; i < formContainers.length; i++) {
+    var formContainer = formContainers[i];
+    var handlersAdded = formContainer.classList.contains('newsletter-handlers-added');
+    if (handlersAdded) continue;
+    formContainer.querySelector('.newsletter-form').addEventListener('submit', submitHandler);
+    formContainer.querySelector('.newsletter-back-button').addEventListener('click', resetFormHandler);
+    formContainer.classList.add('newsletter-handlers-added');
+  }
+</script>
+
+<noscript>
+  <style>
+    .newsletter-form-container {
+      display: none;
+    }
+  </style>
+</noscript>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index f863d53fc5dc..a5b1b4ac9a4d 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1134,3 +1134,112 @@ ninja-keys::part(ninja-input) {
 ninja-keys::part(ninja-input-wrapper) {
   background: var(--global-bg-color);
 }
+
+// newsletter
+
+.newsletter-form-container {
+  margin-bottom: 20px;
+}
+
+.newsletter-form {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+.newsletter-form-input {
+  color: var(--global-bg-color);
+  background: var(--global-text-color);
+  border: 1px solid var(--global-bg-color);
+  outline: none;
+  margin: 0px 10px 0px 0px;
+  width: 100%;
+  max-width: 350px;
+  min-width: 100px;
+  box-sizing: border-box;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
+  border-radius: 6px;
+  padding: 8px 12px;
+}
+
+.newsletter-form-input:focus {
+  border-color: var(--global-theme-color) !important;
+}
+
+.newsletter-form-button {
+  background: var(--global-theme-color);
+  color: var(--global-bg-color);
+  display: flex;
+  width: min-content;
+  max-width: 200px;
+  white-space: nowrap;
+  height: 38px;
+  align-items: center;
+  flex-direction: row;
+  padding: 9px 17px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
+  border-radius: 6px;
+  text-align: center;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  border: none;
+  cursor: pointer;
+}
+
+.newsletter-loading-button {
+  background: var(--global-theme-color);
+  color: var(--global-bg-color);
+  display: none;
+  width: min-content;
+  max-width: 300px;
+  white-space: nowrap;
+  height: 38px;
+  align-items: center;
+  flex-direction: row;
+  padding: 9px 17px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
+  border-radius: 6px;
+  text-align: center;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  border: none;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+.newsletter-success {
+  color: var(--global-text-color);
+  display: none;
+  align-items: center;
+  width: 100%;
+}
+
+.newsletter-error {
+  color: var(--global-theme-color);
+  display: none;
+  align-items: center;
+  width: 100%;
+}
+
+.newsletter-back-button {
+  color: var(--global-theme-color);
+  margin: 10px auto;
+  text-align: center;
+  display: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+@media (max-width: 575px) {
+  .newsletter-form-input,
+  .newsletter-form-button,
+  .newsletter-loading-button,
+  .newsletter-success,
+  .newsletter-error {
+    font-size: 16px !important;
+  }
+}

From 94c9ac03da6e364c0a973b6425c704768de307a6 Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Tue, 18 Jun 2024 18:52:05 +0100
Subject: [PATCH 05/10] display newsletter at bottom of about if enabled and
 fixed footer

---
 _layouts/about.liquid | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_layouts/about.liquid b/_layouts/about.liquid
index 094bc3379bb2..67e044283e6e 100644
--- a/_layouts/about.liquid
+++ b/_layouts/about.liquid
@@ -72,5 +72,9 @@ layout: default
         <div class="contact-note">{{ site.contact_note }}</div>
       </div>
     {% endif %}
+
+    {% if site.newsletter.enabled and site.footer_fixed %}
+      {% include scripts/newsletter.liquid center=true %}
+    {% endif %}
   </article>
 </div>

From eecf66dec15ade9c2d63a3a7f601ba07f19acc30 Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Tue, 18 Jun 2024 18:52:43 +0100
Subject: [PATCH 06/10] display newsletter signup in footer if footer not
 pinned

---
 _includes/footer.liquid | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_includes/footer.liquid b/_includes/footer.liquid
index 7541c96ca834..feecc1bb0f7b 100644
--- a/_includes/footer.liquid
+++ b/_includes/footer.liquid
@@ -15,6 +15,10 @@
   </footer>
 {% else %}
   <footer class="sticky-bottom mt-5" role="contentinfo">
+    {% if site.newsletter.enabled %}
+      {% include scripts/newsletter.liquid %}
+    {% endif %}
+
     <div class="container">
       &copy; Copyright {{ site.time | date: '%Y' }}
       {{ site.first_name }}

From 93e0f96b8eb97a8ec1db9746a28af245b202af64 Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Tue, 18 Jun 2024 18:53:45 +0100
Subject: [PATCH 07/10] display newsletter signup at bottom of related posts if
 enabled and footer is fixed

---
 _includes/related_posts.liquid | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_includes/related_posts.liquid b/_includes/related_posts.liquid
index 4cf4ffbd7a26..08d1b8851d39 100644
--- a/_includes/related_posts.liquid
+++ b/_includes/related_posts.liquid
@@ -16,3 +16,7 @@
     <a class="text-pink-700 underline font-semibold hover:text-pink-800" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
   </li>
 {% endfor %}
+{% if site.newsletter.enabled and site.footer_fixed %}
+  <p class="mb-2" style="margin-top: 1.5rem !important">Subscribe to be notified of future articles:</p>
+  {% include scripts/newsletter.liquid left=true %}
+{% endif %}

From ac76f3b014f073ad61a28010389927983fedd6a8 Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Tue, 18 Jun 2024 19:19:23 +0100
Subject: [PATCH 08/10] fix: responsive for mobile

---
 _sass/_base.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index a5b1b4ac9a4d..9765051742d1 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1242,4 +1242,8 @@ ninja-keys::part(ninja-input-wrapper) {
   .newsletter-error {
     font-size: 16px !important;
   }
+  .newsletter-form-container {
+    margin-right: 20px;
+    margin-left: 20px;
+  }
 }

From 84b07bca42b5f2708cfdf98d3b5a94e52b84d5b9 Mon Sep 17 00:00:00 2001
From: Andrew Boyer <asboyer@gmail.com>
Date: Wed, 19 Jun 2024 17:13:07 +0100
Subject: [PATCH 09/10] fix: background color for light mode

---
 _sass/_base.scss   | 6 +++---
 _sass/_themes.scss | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index 9765051742d1..243f3202202e 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1149,9 +1149,9 @@ ninja-keys::part(ninja-input-wrapper) {
 }
 
 .newsletter-form-input {
-  color: var(--global-bg-color);
-  background: var(--global-text-color);
-  border: 1px solid var(--global-bg-color);
+  color: var(--global-newsletter-text-color);
+  background: var(--global-newsletter-bg-color);
+  border: 1px solid var(--global-newsletter-text-color);
   outline: none;
   margin: 0px 10px 0px 0px;
   width: 100%;
diff --git a/_sass/_themes.scss b/_sass/_themes.scss
index e4d05d65e7a7..7982cec5f02c 100644
--- a/_sass/_themes.scss
+++ b/_sass/_themes.scss
@@ -19,6 +19,8 @@
   --global-highlight-color: #{$red-color-dark};
   --global-back-to-top-bg-color: rgba(#{red($black-color)}, #{green($black-color)}, #{blue($black-color)}, 0.4);
   --global-back-to-top-text-color: #{$white-color};
+  --global-newsletter-bg-color: #{$white-color};
+  --global-newsletter-text-color: #{$black-color};
 
   --global-tip-block: #42b983;
   --global-tip-block-bg: #e2f5ec;
@@ -81,6 +83,8 @@ html[data-theme="dark"] {
   --global-card-bg-color: #{$grey-900};
   --global-back-to-top-bg-color: rgba(#{red($white-color)}, #{green($white-color)}, #{blue($white-color)}, 0.5);
   --global-back-to-top-text-color: #{$black-color};
+  --global-newsletter-bg-color: #{$grey-color-light};
+  --global-newsletter-text-color: #{$grey-color-dark};
 
   --global-tip-block: #42b983;
   --global-tip-block-bg: #e2f5ec;

From 9a2a09461f017cae1e0fe0067c3ea3372e1f7e48 Mon Sep 17 00:00:00 2001
From: George <31376482+george-gca@users.noreply.github.com>
Date: Wed, 19 Jun 2024 14:42:33 -0300
Subject: [PATCH 10/10] Fixed prettier complaints

---
 _sass/_base.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index 2947e21684f7..90bdeb085337 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1258,7 +1258,7 @@ ninja-keys::part(ninja-input-wrapper) {
     color: var(--global-text-color); // Header text color
     border-bottom: 1px solid var(--global-divider-color);
   }
-  
+
   .popover-body {
     color: var(--global-text-color); // Body text color
   }
@@ -1269,7 +1269,7 @@ ninja-keys::part(ninja-input-wrapper) {
   .arrow::after {
     border-top-color: var(--global-bg-color);
   }
-  
+
   // arrow border color
   .arrow:before {
     border-top-color: var(--global-divider-color);
@@ -1281,7 +1281,7 @@ ninja-keys::part(ninja-input-wrapper) {
   .arrow::after {
     border-bottom-color: var(--global-bg-color);
   }
-  
+
   // arrow border color
   .arrow:before {
     border-bottom-color: var(--global-divider-color);