Add a newsletter subscribe block, off until a publication exists

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>

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;
+  }
+}

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();
+  }
+})();

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>