diff --git a/about.html b/about.html index c56ca54..d3139eb 100644 --- a/about.html +++ b/about.html @@ -100,6 +100,7 @@

Want to build with us?

Susheem on LinkedIn ↗ Tisha on LinkedIn ↗ + @@ -120,6 +121,7 @@

Want to build with us?

+ 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
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 = + ''; + + function agentplaneSubscribeMarkup(url) { + return [ + '
', + AGENTPLANE_MAIL_ICON, + '
', + '

' + AGENTPLANE_COPY.heading + '

', + '

' + AGENTPLANE_COPY.body + '

', + '
', + '' + AGENTPLANE_COPY.cta + ' ↗', + '
', + ].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 @@

Writing, talks & videos.

+
+
+ +
+
+
@@ -76,6 +82,7 @@

Writing, talks & videos.

+