buttondown · jmduke · Jul 22, 2025
diff --git a/jekyll/Gemfile b/jekyll/Gemfile
@@ -0,0 +1,18 @@
+source "https://rubygems.org"
+
+gem "jekyll", "~> 4.3"
+gem "minima", "~> 2.5"
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", ">= 1", "< 3"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
diff --git a/jekyll/README.md b/jekyll/README.md
@@ -0,0 +1,88 @@
+# Jekyll Buttondown Example
+
+A static website built with Jekyll featuring an integrated Buttondown newsletter subscription form.
+
+## Getting Started
+
+### Prerequisites
+
+- Ruby 2.5 or higher
+- RubyGems
+- Bundler (`gem install bundler`)
+
+### Setup
+
+1. Clone this repository
+2. Navigate to the Jekyll directory:
+   ```bash
+   cd jekyll
+   ```
+
+3. Install dependencies:
+   ```bash
+   bundle install
+   ```
+
+4. Update `_config.yml` and replace `{username}` with your Buttondown username:
+   ```yaml
+   buttondown_username: "your-actual-username"
+   ```
+
+5. Run the development server:
+   ```bash
+   bundle exec jekyll serve
+   ```
+
+6. Open http://localhost:4000 in your browser
+
+## Features
+
+- **Static Site Generation**: Jekyll converts Markdown files into a complete website
+- **Newsletter Integration**: Buttondown subscription form embedded in every page
+- **Blog Support**: Full blogging capabilities with posts, categories, and permalinks
+- **Responsive Design**: Mobile-friendly layout
+- **Client-side Form Handling**: JavaScript-powered form submission with status messages
+
+## Project Structure
+
+```
+jekyll/
+├── _config.yml          # Jekyll configuration
+├── _layouts/           
+│   └── default.html    # Main layout with newsletter form
+├── _posts/             # Blog posts
+│   └── 2025-07-22-welcome-to-jekyll.md
+├── index.md            # Homepage
+├── about.md            # About page
+├── Gemfile             # Ruby dependencies
+└── README.md           # This file
+```
+
+## Customization
+
+### Styling
+Edit the `<style>` section in `_layouts/default.html` to customize the appearance.
+
+### Configuration
+Update `_config.yml` to change site title, description, and other settings.
+
+### Content
+- Add new pages by creating `.md` files in the root directory
+- Add blog posts in `_posts/` following the `YYYY-MM-DD-title.md` format
+
+## Deployment
+
+Jekyll sites can be deployed to:
+- GitHub Pages
+- Netlify
+- Vercel
+- Any static hosting service
+
+For GitHub Pages, simply push to a repository and enable Pages in settings.
+
+## Notes
+
+- The newsletter form uses client-side JavaScript to handle submissions
+- No server-side code is required
+- The form works in iframes
+- All subscription data is handled by Buttondown
diff --git a/jekyll/_config.yml b/jekyll/_config.yml
@@ -0,0 +1,23 @@
+# Jekyll configuration for Buttondown example
+title: Newsletter Example with Jekyll
+description: A simple Jekyll site with Buttondown newsletter integration
+email: [email protected]
+baseurl: "" # the subpath of your site, e.g. /blog
+url: "" # the base hostname & protocol for your site
+
+# Build settings
+markdown: kramdown
+theme: minima
+
+# Buttondown settings
+buttondown_username: "{username}" # Replace with your Buttondown username
+
+# Exclude from processing
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - node_modules
+  - vendor/bundle/
+  - vendor/cache/
+  - vendor/gems/
+  - vendor/ruby/
diff --git a/jekyll/_layouts/default.html b/jekyll/_layouts/default.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
+    <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+    <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem;
+        line-height: 1.6;
+      }
+      .newsletter-form {
+        background: #f5f5f5;
+        padding: 2rem;
+        border-radius: 8px;
+        margin: 2rem 0;
+      }
+      .newsletter-form h3 {
+        margin-top: 0;
+      }
+      .newsletter-form input[type="email"] {
+        width: 100%;
+        padding: 0.5rem;
+        margin: 0.5rem 0;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 16px;
+      }
+      .newsletter-form button {
+        background: #4CAF50;
+        color: white;
+        padding: 0.5rem 1.5rem;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 16px;
+      }
+      .newsletter-form button:hover {
+        background: #45a049;
+      }
+      .newsletter-form button:disabled {
+        background: #cccccc;
+        cursor: not-allowed;
+      }
+      .status-message {
+        margin-top: 1rem;
+        padding: 0.5rem;
+        border-radius: 4px;
+      }
+      .status-message.success {
+        background: #d4edda;
+        color: #155724;
+        border: 1px solid #c3e6cb;
+      }
+      .status-message.error {
+        background: #f8d7da;
+        color: #721c24;
+        border: 1px solid #f5c6cb;
+      }
+    </style>
+  </head>
+  <body>
+    <header class="site-header">
+      <h1>{{ site.title | escape }}</h1>
+      <nav>
+        <a href="{{ "/" | relative_url }}">Home</a>
+        <a href="{{ "/about/" | relative_url }}">About</a>
+      </nav>
+    </header>
+
+    <main class="page-content" aria-label="Content">
+      {{ content }}
+    </main>
+
+    <div class="newsletter-form">
+      <h3>Subscribe to our Newsletter</h3>
+      <p>Get the latest updates delivered to your inbox.</p>
+      <form id="buttondown-form" action="https://buttondown.com/api/emails/embed-subscribe/{{ site.buttondown_username }}" method="post">
+        <input type="email" id="bd-email" name="email" placeholder="Enter your email" required>
+        <button type="submit" id="submit-btn">Subscribe</button>
+        <div id="status-message" class="status-message" style="display: none;"></div>
+      </form>
+    </div>
+
+    <footer class="site-footer">
+      <p>&copy; {{ site.title }} {{ 'now' | date: "%Y" }}</p>
+    </footer>
+
+    <script>
+      document.getElementById('buttondown-form').addEventListener('submit', async function(e) {
+        e.preventDefault();
+
+        const email = document.getElementById('bd-email').value;
+        const submitBtn = document.getElementById('submit-btn');
+        const statusMessage = document.getElementById('status-message');
+
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Subscribing...';
+        statusMessage.style.display = 'none';
+
+        try {
+          const response = await fetch(this.action, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: `email=${encodeURIComponent(email)}`
+          });
+
+          if (response.ok) {
+            statusMessage.textContent = 'Thanks for subscribing!';
+            statusMessage.className = 'status-message success';
+            statusMessage.style.display = 'block';
+            document.getElementById('bd-email').value = '';
+          } else {
+            throw new Error('Subscription failed');
+          }
+        } catch (error) {
+          statusMessage.textContent = 'Something went wrong. Please try again.';
+          statusMessage.className = 'status-message error';
+          statusMessage.style.display = 'block';
+        } finally {
+          submitBtn.disabled = false;
+          submitBtn.textContent = 'Subscribe';
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/jekyll/_posts/2025-07-22-welcome-to-jekyll.md b/jekyll/_posts/2025-07-22-welcome-to-jekyll.md
@@ -0,0 +1,32 @@
+---
+layout: default
+title: "Welcome to Jekyll with Buttondown"
+date: 2025-07-22 10:00:00 -0000
+categories: jekyll update
+---
+
+Welcome to our Jekyll site with Buttondown integration! This is a sample blog post to demonstrate how Jekyll processes Markdown files into blog posts.
+
+## Why Jekyll + Buttondown?
+
+Combining Jekyll with Buttondown gives you:
+
+1. **Static Site Benefits**: Fast, secure, and easy to host
+2. **Newsletter Integration**: Grow your audience with email subscriptions
+3. **Markdown Simplicity**: Write content in plain text
+4. **Full Control**: Customize every aspect of your site
+
+## Getting Started
+
+To use this example:
+
+1. Clone the repository
+2. Update `_config.yml` with your Buttondown username
+3. Run `bundle exec jekyll serve`
+4. Visit `http://localhost:4000`
+
+## Adding Content
+
+Create new posts by adding Markdown files to the `_posts` directory. Follow the naming convention: `YYYY-MM-DD-title.md`.
+
+Happy blogging!
diff --git a/jekyll/about.md b/jekyll/about.md
@@ -0,0 +1,34 @@
+---
+layout: default
+title: About
+permalink: /about/
+---
+
+# About This Example
+
+This Jekyll site demonstrates how to integrate Buttondown email subscriptions into a static website.
+
+## What is Jekyll?
+
+Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. It takes text written in your favorite markup language and uses layouts to create a static website.
+
+## What is Buttondown?
+
+Buttondown is a small, elegant tool for producing newsletters. It's simple, reliable, and privacy-focused.
+
+## How It Works
+
+1. Jekyll generates static HTML pages from your Markdown content
+2. The newsletter form is embedded in the layout template
+3. Form submissions are handled client-side with JavaScript
+4. Subscriptions are processed through Buttondown's API
+
+## Customization
+
+You can customize this example by:
+- Modifying the layout in `_layouts/default.html`
+- Updating styles in the layout file
+- Changing the site configuration in `_config.yml`
+- Adding your own posts in the `_posts` directory
+
+Remember to replace `{username}` with your actual Buttondown username in the configuration file!
diff --git a/jekyll/index.md b/jekyll/index.md
@@ -0,0 +1,30 @@
+---
+layout: default
+title: Home
+---
+
+# Welcome to our Newsletter Example
+
+This is a simple Jekyll site demonstrating how to integrate Buttondown newsletter subscriptions into your Jekyll website.
+
+## Features
+
+- Static site generation with Jekyll
+- Integrated newsletter subscription form
+- Client-side form handling with vanilla JavaScript
+- Responsive design
+- No additional dependencies required
+
+## Recent Posts
+
+{% for post in site.posts %}
+  <article>
+    <h3><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
+    <time>{{ post.date | date: "%B %d, %Y" }}</time>
+    <p>{{ post.excerpt }}</p>
+  </article>
+{% endfor %}
+
+## Getting Started
+
+Check out the [about page]({{ "/about/" | relative_url }}) to learn more about this example.