Ship the share-this-code producer

The runner toolbar gains a quiet Copy link tool-button, injected by
the inline script so no-JS pages render no dead chrome. It copies a
URL embedding the editor's current code as the #code= fragment the
page has decoded since the first commit, mirroring that decoder's
encoding exactly; unedited code shares the clean page URL. The
decoder now calls resizeEditor() so a shared payload renders fully
sized in the textarea fallback. The early no-clipboard playground
lesson is deliberately reversed: clipboard code is allowed, server
markup still renders only Run and Reset.

Verified end to end in headless Chromium against the built assets:
click yields Link copied, the copied URL round-trips the edited
unicode code back into the editor, unedited code copies the clean
URL, and with the module CDN unreachable the share, resize, and
copy-button paths all still work.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp

Author: claude

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is inspired by [Keep a Changelog](https://keepachangelog.com/en/1.1.0
 - `/about` page describing how the site is made — the verified-output pipeline, the runner sandbox, the figure grammar, and the quality gates — with a design-language section that renders the live CSS tokens (color swatches, spacing scale, type specimens, and a real walkthrough cell as a specimen). Linked from the nav on every page and listed in the sitemap.
 - Copy buttons on read-only source cells: injected client-side onto `.cell-source` wrappers (so no-JS pages render no dead buttons), clipboard API with a hidden-textarea fallback, and a quiet token-styled treatment that sharpens on hover or focus.
 - Keyboard navigation on example pages: `←`/`→` follow the existing `rel="prev"`/`rel="next"` links, ignoring keystrokes with modifiers or focus inside the editor, inputs, or any editable surface.
+- "Copy link" button in the runner toolbar: copies a URL embedding the editor's current code as the `#code=` fragment the page has decoded since the first commit (the clean page URL when the code is unedited). The decoder now resizes the editor after loading a shared payload.
 
 - Banner position grammar from `docs/visual-explainer-spec.md` is now production: `render_banner(slug, position)` supports `before`, `after-cell-N` (legacy anchor `cell-N`), and `after-walkthrough`, with multiple figures per position rendering as one small-multiple banner. The mutability page ships the canonical two-figure pair (aliased mutation vs. frozen tuple).
 - Curated pair banners on contrast cells: `positional-only-parameters` shows the `/` and `*` separator twins side by side, `metaclasses` pairs the metaclass triangle with the familiar class triangle, and `tuples` pairs the frozen tuple with the growing list on the intent-contrast cell. `iterator-vs-iterable` gains the one-pass caret figure on the exhaustion cell.

README.md

@@ -23,6 +23,7 @@ Production: <https://www.pythonbyexample.dev> (`workers.dev` remains enabled as
 - `/about` page describing the verification pipeline, runner sandbox, figure grammar, and live design tokens
 - Copy buttons on read-only source cells
 - Keyboard prev/next navigation (`←`/`→`) on example pages
+- "Copy link" sharing of the runner's current code via `#code=` URLs
 
 ## Attribution
 

docs/elevation-strategy.md

@@ -207,7 +207,7 @@ all aimed at the scorecard's engagement and return lines:
 **Now (days; mostly small, single-surface changes)**
 
 1. Share-this-code link + copy buttons on code blocks.
-   *(Copy buttons shipped 2026-07-10; the share link is still open.)*
+   *(Both shipped 2026-07-10.)*
 2. `/about` page + edit-on-GitHub links.
    *(`/about` shipped 2026-07-10; edit-on-GitHub links are still open.)*
 3. `/llms.txt`, per-example Markdown endpoints, Atom feed.

src/asset_manifest.py

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
 ASSET_PATHS = {'SITE_CSS': '/site.73603216fda2.css', 'SYNTAX_JS': '/syntax-highlight.95ae4ebe5db8.js', 'EDITOR_JS': '/editor.bbf94cd1abda.js', 'SEARCH_JS': '/search.ab0effeac6ce.js', 'SEARCH_INDEX': '/search-index.f08e8599474a.json'}
-HTML_CACHE_VERSION = '2fa761ca8de2'
+HTML_CACHE_VERSION = '92063e60f2e4'

src/templates/example.html

@@ -111,7 +111,52 @@ <h3>Example code</h3>
 });
 const hash = new URL(window.location.href).hash;
 if (hash.startsWith('#code=')) {
-  try { editor().value = decodeURIComponent(escape(atob(hash.slice(6)))); } catch (error) {}
+  try { editor().value = decodeURIComponent(escape(atob(hash.slice(6)))); resizeEditor(); } catch (error) {}
+}
+async function copyTextToClipboard(text) {
+  if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const holder = document.createElement('textarea');
+  holder.value = text;
+  holder.setAttribute('readonly', '');
+  holder.style.position = 'fixed';
+  holder.style.left = '-9999px';
+  document.body.appendChild(holder);
+  holder.select();
+  const copied = document.execCommand('copy');
+  holder.remove();
+  if (!copied) throw new Error('execCommand copy failed');
+}
+// Share the current editor code as the #code= fragment the loader
+// above has accepted since day one. Injected here so no-JS pages
+// render no dead button; unedited code shares the clean page URL.
+const toolbar = document.querySelector('.playground-toolbar');
+if (toolbar) {
+  const shareButton = document.createElement('button');
+  shareButton.type = 'button';
+  shareButton.className = 'tool-button';
+  shareButton.textContent = 'Copy link';
+  shareButton.setAttribute('aria-live', 'polite');
+  shareButton.setAttribute('aria-label', 'Copy a link to this example with the current code');
+  let shareRestore = null;
+  shareButton.addEventListener('click', async () => {
+    if (window.pythonByExampleEditor) window.pythonByExampleEditor.syncTextarea();
+    const code = editor().value;
+    const pageUrl = window.location.origin + window.location.pathname;
+    const url = code === originalCode ? pageUrl : pageUrl + '#code=' + btoa(unescape(encodeURIComponent(code)));
+    clearTimeout(shareRestore);
+    let feedback = 'Link copied';
+    if (url.length > 8000) {
+      feedback = 'Code too long to link';
+    } else {
+      try { await copyTextToClipboard(url); } catch (error) { feedback = 'Copy failed'; }
+    }
+    shareButton.textContent = feedback;
+    shareRestore = setTimeout(() => { shareButton.textContent = 'Copy link'; }, 1600);
+  });
+  toolbar.append(shareButton);
 }
 document.addEventListener('keydown', (event) => {
   if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;

tests/test_app.py

@@ -369,7 +369,12 @@ def test_cf_workers_design_system_and_playground_lessons(self):
         self.assertIn('.cm-editor', css)
         self.assertIn("function resetCode", html)
         self.assertIn('class="syntax-inline">print()</code>', html)
-        self.assertNotIn("navigator.clipboard", html)
+        # The 2026-07 share-link work deliberately reversed the early
+        # no-clipboard playground lesson. Clipboard code is now allowed,
+        # but copy/share affordances stay JS-injected: server markup
+        # renders only the Run and Reset buttons.
+        self.assertEqual(html.count("<button"), 2)
+        self.assertIn("copyTextToClipboard", html)
         self.assertIn("fetch(form.action", html)
         self.assertIn("new URLSearchParams(formData)", html)
         self.assertIn("application/x-www-form-urlencoded", html)
@@ -811,6 +816,26 @@ def test_arrow_navigation_skips_editable_and_modified_keys(self):
         self.assertIn("event.metaKey", page)
         self.assertIn("event.defaultPrevented", page)
 
+    def test_share_button_copies_a_code_fragment_link(self):
+        page = render_example_page(get_example("values"))
+        self.assertIn("Copy link", page)
+        self.assertIn("btoa(unescape(encodeURIComponent(code)))", page)
+        self.assertIn("code === originalCode ? pageUrl : pageUrl + '#code='", page)
+        self.assertIn("'.playground-toolbar'", page)
+        self.assertIn('aria-live', page)
+
+    def test_share_encoder_mirrors_the_day_one_decoder(self):
+        page = render_example_page(get_example("values"))
+        self.assertIn("decodeURIComponent(escape(atob(hash.slice(6))))", page)
+        self.assertIn("btoa(unescape(encodeURIComponent(code)))", page)
+
+    def test_hash_decode_resizes_the_editor(self):
+        page = render_example_page(get_example("values"))
+        self.assertIn(
+            "editor().value = decodeURIComponent(escape(atob(hash.slice(6)))); resizeEditor();",
+            page,
+        )
+
     def test_arrow_navigation_guards_missing_neighbors_at_catalog_edges(self):
         examples = list_examples()
         first_page = render_example_page(get_example(examples[0]["slug"]))