al_newsletter 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b91a5ec7be8efd68015e56d997f7495c8f9cbb03e0f6d20637a8621e866db2eb
+  data.tar.gz: bdaaf9639c284628c107e12095e0ef471e4c8d29708d51c2489fa818406fa11d
+SHA512:
+  metadata.gz: 70b41ee8378ca4d30fafd6d5e63c904dec1129bf2a708e6e04c4f7aad3a417048d0f84d2e679142b6df9716f4c45243f2c939dd100364a77202af034f5a3f699
+  data.tar.gz: 73c895e6150c77837c2de451370bf180f702d1dbb727cbd6b6bcdbadf5f40fb3538d6befc8946424434fc4ea1fe41a40158e0522fe2513cb99ae249a558d7aee

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0 - 2026-02-07
+- Initial gem release.
+- Added standalone newsletter form and script tags for Jekyll/al-folio sites.

data/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Maruan Al-Shedivat.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,26 @@
+# Al-Newsletter
+
+A Jekyll plugin that provides a reusable newsletter form and JS handlers.
+
+## Installation
+
+```ruby
+gem 'al_newsletter'
+```
+
+Enable in `_config.yml`:
+
+```yaml
+plugins:
+  - al_newsletter
+```
+
+## Usage
+
+```liquid
+{% al_newsletter_form align=center margin=true %}
+```
+
+```liquid
+{% al_newsletter_scripts %}
+```

data/lib/al_newsletter.rb

@@ -0,0 +1,99 @@
+require 'jekyll'
+
+module AlNewsletter
+  PLUGIN_NAME = 'al_newsletter'
+  ASSETS_DIR = 'assets'
+  JS_DIR = 'js'
+
+  class PluginStaticFile < Jekyll::StaticFile; end
+
+  class AssetsGenerator < Jekyll::Generator
+    safe true
+    priority :low
+
+    def generate(site)
+      plugin_lib_path = File.expand_path('.', __dir__)
+      source_path = File.join(plugin_lib_path, ASSETS_DIR, PLUGIN_NAME, JS_DIR, 'newsletter.js')
+      return unless File.exist?(source_path)
+
+      site.static_files << PluginStaticFile.new(site, plugin_lib_path, File.join(ASSETS_DIR, PLUGIN_NAME, JS_DIR), 'newsletter.js')
+    end
+  end
+
+  class NewsletterFormTag < Liquid::Tag
+    def initialize(tag_name, markup, tokens)
+      super
+      @opts = parse_options(markup)
+    end
+
+    def render(context)
+      site = context.registers[:site]
+      return '' unless site
+      return '' unless site.config['newsletter'].is_a?(Hash)
+
+      endpoint = site.config.dig('newsletter', 'endpoint').to_s
+      align = @opts['align'] || infer_align(@opts)
+      justify = case align
+                when 'left' then 'flex-start'
+                when 'right' then 'flex-end'
+                else 'center'
+                end
+      margin = @opts['margin'] == 'true' ? ' style="margin: 20px"' : ''
+
+      <<~HTML
+        <div class="newsletter-form-container"#{margin}>
+          <form class="newsletter-form" action="https://app.loops.so/api/newsletter-form/#{endpoint}" method="POST" style="justify-content: #{justify}">
+            <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: #{justify}">subscribe</button>
+            <button type="button" class="newsletter-loading-button" style="justify-content: #{justify}">Please wait...</button>
+          </form>
+
+          <div class="newsletter-success" style="justify-content: #{justify}">
+            <p class="newsletter-success-message">You're subscribed!</p>
+          </div>
+
+          <div class="newsletter-error" style="justify-content: #{justify}">
+            <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>
+
+        <noscript>
+          <style>
+            .newsletter-form-container {
+              display: none;
+            }
+          </style>
+        </noscript>
+      HTML
+    end
+
+    private
+
+    def parse_options(markup)
+      opts = {}
+      markup.to_s.scan(/(\w+)=(\w+)/) { |k, v| opts[k] = v }
+      opts
+    end
+
+    def infer_align(opts)
+      return 'left' if opts['left'] == 'true'
+      return 'right' if opts['right'] == 'true'
+      'center'
+    end
+  end
+
+  class NewsletterScriptsTag < Liquid::Tag
+    def render(context)
+      site = context['site'] || {}
+      baseurl = site['baseurl'] || ''
+      %(<script defer src="#{baseurl}/assets/al_newsletter/js/newsletter.js"></script>)
+    end
+  end
+end
+
+Liquid::Template.register_tag('al_newsletter_form', AlNewsletter::NewsletterFormTag)
+Liquid::Template.register_tag('al_newsletter_scripts', AlNewsletter::NewsletterScriptsTag)

data/lib/assets/al_newsletter/js/newsletter.js

@@ -0,0 +1,105 @@
+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");
+}

metadata

@@ -0,0 +1,126 @@
+--- !ruby/object:Gem::Specification
+name: al_newsletter
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- al-org
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2026-02-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.9'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.9'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: liquid
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+description: Jekyll plugin extracted from al-folio that renders configurable newsletter
+  forms and ships frontend JavaScript handlers.
+email:
+- dev@al-org.dev
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE
+- README.md
+- lib/al_newsletter.rb
+- lib/assets/al_newsletter/js/newsletter.js
+homepage: https://github.com/al-org-dev/al-newsletter
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/al-org-dev/al-newsletter
+  source_code_uri: https://github.com/al-org-dev/al-newsletter
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '2.7'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3.1
+signing_key: 
+specification_version: 4
+summary: Newsletter form tag and assets for Jekyll
+test_files: []