From 8de0b48f63cb8f058356d4649a31d1c80cdf02da Mon Sep 17 00:00:00 2001
From: Tisha Chawla <76087547+tishachawla-jg@users.noreply.github.com>
Date: Thu, 3 Sep 2026 17:59:54 +0530
Subject: [PATCH] Add a newsletter subscribe block, off until a publication
 exists

There is no way to follow this project by email. The media page lists what we
have published and offers no way to hear about the next one.

js/subscribe.js renders a subscribe card into any <div data-subscribe> slot.
Slots are on media.html (under the header) and about.html (in the CTA band).

The publication handle is a single constant, AGENTPLANE_SUBSTACK_PUB, and it
ships empty. While it is empty nothing renders and the slots stay hidden, so
the site cannot ship a subscribe button pointing at a publication that does not
exist. Setting it to a handle is the only change needed to turn this on.

Styling reuses the existing tokens and the btn btn-solid class, so it tracks
both themes with no new colours. Stacks on narrow viewports.

Not wired to susheemk.substack.com on purpose: "Susheem's Jottings" is a
personal, three-year-old general software engineering publication, and pointing
the project's subscribe button at it would read as one founder's blog rather
than an AgentPlane channel.

Verified against a local server in both states. Empty handle: slot present,
innerHTML empty, hidden, offsetParent null. Handle set: card renders as a flex
row with the token background and border, and the CTA points at
<pub>.substack.com/subscribe.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 about.html      |  2 ++
 css/style.css   | 62 +++++++++++++++++++++++++++++++++++++++++++++++++
 js/subscribe.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++
 media.html      |  7 ++++++
 4 files changed, 132 insertions(+)
 create mode 100644 js/subscribe.js

diff --git a/about.html b/about.html
index c56ca54..d3139eb 100644
--- a/about.html
+++ b/about.html
@@ -100,6 +100,7 @@ <h2>Want to build with us?</h2>
       <a href="https://www.linkedin.com/in/susheemkoul/" class="btn btn-ghost" target="_blank" rel="noopener">Susheem on LinkedIn ↗</a>
       <a href="https://in.linkedin.com/in/tisha-chawla" class="btn btn-ghost" target="_blank" rel="noopener">Tisha on LinkedIn ↗</a>
     </div>
+    <div data-subscribe hidden style="margin-top:32px;"></div>
   </div>
 </section>
 
@@ -120,6 +121,7 @@ <h2>Want to build with us?</h2>
 
 <script src="js/theme.js"></script>
 <script src="js/nav.js"></script>
+<script src="js/subscribe.js"></script>
 
 </body>
 </html>
diff --git a/css/style.css b/css/style.css
index e3682fd..d9b7e3f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1591,3 +1591,65 @@ footer .container {
     max-width: 160px;
   }
 }
+
+/* ============================================================
+   Newsletter subscribe block (js/subscribe.js)
+   ============================================================ */
+
+.subscribe-card {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  text-align: left;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 24px 28px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+}
+
+.subscribe-icon {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+.subscribe-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.subscribe-text h3 {
+  margin: 0 0 4px;
+  font-size: 17px;
+  line-height: 1.3;
+}
+
+.subscribe-text p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+
+.subscribe-cta {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .subscribe-card {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 20px;
+  }
+
+  .subscribe-cta {
+    width: 100%;
+    text-align: center;
+  }
+}
diff --git a/js/subscribe.js b/js/subscribe.js
new file mode 100644
index 0000000..2ec7fa3
--- /dev/null
+++ b/js/subscribe.js
@@ -0,0 +1,61 @@
+/* ============================================================
+   AgentPlane - newsletter subscribe block
+
+   Renders into every <div data-subscribe></div> on the page.
+
+   TO TURN THE NEWSLETTER ON: create the publication, then set
+   AGENTPLANE_SUBSTACK_PUB below to its handle. That is the only change.
+   While it is empty nothing renders, so the site can never ship a
+   subscribe button pointing at a publication that does not exist.
+   ============================================================ */
+
+(function () {
+  // e.g. 'theagentplane' -> https://theagentplane.substack.com
+  const AGENTPLANE_SUBSTACK_PUB = '';
+
+  const AGENTPLANE_COPY = {
+    heading: 'Get the next one in your inbox',
+    body:
+      'Occasional writing on agent observability, replay testing and token ' +
+      'infrastructure. What we learned building it, not release notes.',
+    cta: 'Subscribe',
+  };
+
+  const AGENTPLANE_MAIL_ICON =
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
+    'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" ' +
+    'class="subscribe-icon"><rect x="2" y="4" width="20" height="16" rx="2"/>' +
+    '<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>';
+
+  function agentplaneSubscribeMarkup(url) {
+    return [
+      '<div class="subscribe-card">',
+      AGENTPLANE_MAIL_ICON,
+      '<div class="subscribe-text">',
+      '<h3>' + AGENTPLANE_COPY.heading + '</h3>',
+      '<p>' + AGENTPLANE_COPY.body + '</p>',
+      '</div>',
+      '<a class="btn btn-solid subscribe-cta" href="' + url + '"',
+      ' target="_blank" rel="noopener">' + AGENTPLANE_COPY.cta + ' &#8599;</a>',
+      '</div>',
+    ].join('');
+  }
+
+  function agentplaneRenderSubscribe() {
+    const pub = AGENTPLANE_SUBSTACK_PUB.trim();
+    const slots = document.querySelectorAll('[data-subscribe]');
+    if (!pub || !slots.length) return;
+
+    const url = 'https://' + pub + '.substack.com/subscribe';
+    slots.forEach(function (slot) {
+      slot.innerHTML = agentplaneSubscribeMarkup(url);
+      slot.removeAttribute('hidden');
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', agentplaneRenderSubscribe);
+  } else {
+    agentplaneRenderSubscribe();
+  }
+})();
diff --git a/media.html b/media.html
index 1aad509..a23261c 100644
--- a/media.html
+++ b/media.html
@@ -60,6 +60,12 @@ <h1>Writing, talks &amp; videos.</h1>
   </div>
 </header>
 
+<section>
+  <div class="container">
+    <div data-subscribe hidden></div>
+  </div>
+</section>
+
 <section>
   <div class="container">
     <div class="media-filters" id="media-filters">
@@ -76,6 +82,7 @@ <h1>Writing, talks &amp; videos.</h1>
 
 <script src="js/theme.js"></script>
 <script src="js/nav.js"></script>
+<script src="js/subscribe.js"></script>
 <script src="js/media.js"></script>
 <script>renderMediaList('media-list');</script>