From ee3d3cde19f49ca10261c3abec1814b40ec57d18 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Apr 2026 19:36:59 +0000
Subject: [PATCH] feat: add snek speech bubble promoting newsletter signup

Adds a dismissible speech bubble above the smol snek announcing the
newsletter. Clicking the bubble jumps to the footer signup form;
dismissal is persisted in localStorage so it only shows until a
visitor acknowledges it.

https://claude.ai/code/session_017HZSVp3xRBBfzXgoyAS7sc
---
 _includes/footer.html    |  2 +-
 _includes/sneks.html     |  6 ++++
 static/css/deadlines.css | 78 +++++++++++++++++++++++++++++++++++++++-
 static/js/snek.js        | 39 ++++++++++++++++++++
 4 files changed, 123 insertions(+), 2 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index ae5a6981e00..1298807fc53 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -4,7 +4,7 @@
 	</div>
 	<div class="row">
 		<div class="col-12">
-			<form action="https://buttondown.com/api/emails/embed-subscribe/python-deadlines" method="post" class="embeddable-buttondown-form" referrerpolicy="unsafe-url" style="margin-top: 0.75rem; display: flex; gap: 0.5rem; max-width: 420px; margin-left: auto; margin-right: auto;">
+			<form id="newsletter-signup" action="https://buttondown.com/api/emails/embed-subscribe/python-deadlines" method="post" class="embeddable-buttondown-form" referrerpolicy="unsafe-url" style="margin-top: 0.75rem; display: flex; gap: 0.5rem; max-width: 420px; margin-left: auto; margin-right: auto;">
 				<input type="email" name="email" placeholder="you@example.com" required style="flex: 1; padding: 0.35rem 0.75rem; border: 1px solid #6c757d; border-radius: 0.25rem; background: transparent; color: inherit; font-size: 0.9rem;" />
 				<input type="hidden" name="tag" value="sub_tag_1jhefwqj9v8d7svhb8dtn13cqc" />
 				<input type="hidden" name="tag" value="lang-{{ site.lang }}" />
diff --git a/_includes/sneks.html b/_includes/sneks.html
index bdc2cfb77b8..6fc3ef6f62a 100644
--- a/_includes/sneks.html
+++ b/_includes/sneks.html
@@ -1,4 +1,10 @@
 <div class="container">
+	<div id="snek-speech" class="snek-speech-bubble d-none d-md-block" style="display: none" role="status" aria-live="polite">
+		<button type="button" id="snek-speech-close" class="snek-speech-close" aria-label="Dismiss">&times;</button>
+		<a href="#newsletter-signup" class="snek-speech-link">
+			<strong>Psst!</strong> We have a newsletter now &mdash; {% t global.subscribe %}!
+		</a>
+	</div>
 	<div id="left-snek" class="location-pin d-none d-md-block" style="display: none">
 		<div>
 			<svg xmlns="http://www.w3.org/2000/svg" width="40" height="62" viewBox="0 0 315 885">
diff --git a/static/css/deadlines.css b/static/css/deadlines.css
index b504b2f0393..e564be2961d 100644
--- a/static/css/deadlines.css
+++ b/static/css/deadlines.css
@@ -503,6 +503,80 @@ footer .row * {
 	bottom: 1rem;
 }
 
+.snek-speech-bubble {
+	position: fixed;
+	right: 2rem;
+	bottom: 5.5rem;
+	max-width: 220px;
+	padding: 0.6rem 1.75rem 0.6rem 0.9rem;
+	background: #fff;
+	color: #333;
+	border: 2px solid #646464;
+	border-radius: 0.9rem;
+	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
+	font-size: 0.85rem;
+	line-height: 1.3;
+	z-index: 1004;
+	opacity: 0;
+	transform: translateY(0.5rem);
+	transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+}
+
+.snek-speech-bubble.visible {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.snek-speech-bubble::after {
+	content: '';
+	position: absolute;
+	bottom: -12px;
+	right: 24px;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	border-top: 12px solid #646464;
+}
+
+.snek-speech-bubble::before {
+	content: '';
+	position: absolute;
+	bottom: -8px;
+	right: 26px;
+	border-left: 8px solid transparent;
+	border-right: 8px solid transparent;
+	border-top: 10px solid #fff;
+	z-index: 1;
+}
+
+.snek-speech-link {
+	color: inherit;
+	text-decoration: none;
+}
+
+.snek-speech-link:hover,
+.snek-speech-link:focus {
+	color: #4584b6;
+	text-decoration: underline;
+}
+
+.snek-speech-close {
+	position: absolute;
+	top: 1px;
+	right: 6px;
+	background: none;
+	border: none;
+	font-size: 1.1rem;
+	line-height: 1;
+	cursor: pointer;
+	color: #888;
+	padding: 0 0.25rem;
+}
+
+.snek-speech-close:hover,
+.snek-speech-close:focus {
+	color: #333;
+}
+
 #right-snek.wiggle {
 	bottom: 2rem;
 }
@@ -528,7 +602,8 @@ footer .row * {
 
 /* Only show on medium screens and up (≥768px) */
 @media (max-width: 767.98px) {
-	.location-pin {
+	.location-pin,
+	.snek-speech-bubble {
 		display: none !important;
 	}
 }
@@ -536,6 +611,7 @@ footer .row * {
 /* Print styles */
 @media print {
 	.location-pin,
+	.snek-speech-bubble,
 	.skip-nav,
 	.navbar,
 	.conference-actions,
diff --git a/static/js/snek.js b/static/js/snek.js
index 292786897a7..298e4e8b51f 100644
--- a/static/js/snek.js
+++ b/static/js/snek.js
@@ -175,6 +175,45 @@ $(function () {
 		$('#smol-snek-all').show().addClass('visible');
 	}, 3250);
 
+	// Speech bubble: announce the newsletter unless dismissed
+	var speechDismissed = false;
+	try {
+		speechDismissed = localStorage.getItem('snek-speech-dismissed') === '1';
+	} catch (e) {
+		// localStorage unavailable (private mode); show the bubble anyway
+	}
+
+	if (!speechDismissed) {
+		setTimeout(function () {
+			$('#snek-speech').show();
+			// next tick so the transition runs
+			setTimeout(function () {
+				$('#snek-speech').addClass('visible');
+			}, 50);
+		}, 4000);
+	}
+
+	function dismissSpeechBubble() {
+		$('#snek-speech').removeClass('visible');
+		setTimeout(function () {
+			$('#snek-speech').hide();
+		}, 400);
+		try {
+			localStorage.setItem('snek-speech-dismissed', '1');
+		} catch (e) {
+			// ignore
+		}
+	}
+
+	$('#snek-speech-close').on('click', function (e) {
+		e.preventDefault();
+		dismissSpeechBubble();
+	});
+
+	$('.snek-speech-link').on('click', function () {
+		dismissSpeechBubble();
+	});
+
 	// Show on scroll
 	$(window).scroll(function () {
 		if ($(window).scrollTop() > 100) {