Keep syntax colours visible in the homepage example

Author: wolph

docs/_static/home.css

@@ -79,12 +79,15 @@
 .home-quickstart .demo-animation { display: none; }
 .home-quickstart .demo-source { max-height: 330px; overflow: auto; }
 .home-quickstart .demo-source pre { font-size: 12px; }
-.home-quickstart .demo:has(.demo-editor) .demo-source { display: none; }
+.home-quickstart .demo:has(.demo-editor:not([hidden])) .demo-source { display: none; }
+.home-quickstart .demo-editor[hidden] { display: none; }
 .home-quickstart .demo-editor { font-size: 12px; line-height: 1.6; max-height: 400px; }
 .home-quickstart .demo-terminal { display: none; }
 .home-quickstart .demo-run[data-started] .demo-terminal { display: block; }
 .home-quickstart .demo-controls { border-top: 0; padding: 11px 14px; }
 .home-quickstart .demo-button { padding: 6px 16px; font: 13px var(--font-stack); }
+.home-quickstart .demo-edit { padding: 6px 12px; font: 13px var(--font-stack); border: 1px solid var(--color-background-border); border-radius: 4px; background: var(--color-background-primary); color: var(--color-foreground-primary); cursor: pointer; }
+.home-quickstart .demo-edit:hover { border-color: var(--home-accent); }
 .home-quickstart .demo-run:not(:has(.demo-editor)) { padding: 12px; font-size: 13px; }
 .home-guide-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 48px 40px 42px; padding-top: 27px; border-top: 1px solid var(--color-background-border); }
 .home-guide-links a { text-decoration: none; }

docs/_static/livecode/livecode.js

@@ -91,6 +91,38 @@ function finishRun() {
   if (activePanel) activePanel.setStatus('idle');
 }
 
+/**
+ * @param {HTMLElement} container
+ * @param {HTMLTextAreaElement} editor
+ * @param {HTMLElement} controls
+ * @param {string} source
+ */
+function keepHighlightedHomepageSource(container, editor, controls, source) {
+  if (!container.closest('.home-quickstart')) return;
+
+  editor.hidden = true;
+  editor.id = 'home-example-editor';
+  /** @type {HTMLButtonElement} */
+  const edit = document.createElement('button');
+  edit.className = 'demo-edit';
+  edit.type = 'button';
+  edit.textContent = 'Edit code';
+  edit.setAttribute('aria-controls', editor.id);
+  edit.setAttribute('aria-expanded', 'false');
+  edit.addEventListener('click', () => {
+    editor.hidden = !editor.hidden;
+    edit.textContent = editor.hidden ? 'Edit code' : 'Reset example';
+    edit.setAttribute('aria-expanded', String(!editor.hidden));
+    if (editor.hidden) {
+      editor.value = source;
+      edit.focus();
+    } else {
+      editor.focus();
+    }
+  });
+  controls.append(edit);
+}
+
 function createPanel(container, source) {
   const editor = document.createElement('textarea');
   editor.className = 'demo-editor';
@@ -114,7 +146,9 @@ function createPanel(container, source) {
 
   const controls = document.createElement('div');
   controls.className = 'demo-controls';
-  controls.append(button, status);
+  controls.append(button);
+  keepHighlightedHomepageSource(container, editor, controls, source);
+  controls.append(status);
   container.append(controls, editor, screen);
 
   const terminal = new Terminal({

tests/console/test_homepage.py

@@ -44,6 +44,18 @@ def record_download(request: Request) -> None:
     browser_page.goto(f'{server}/index.html')
     button: Locator = browser_page.locator('.home-quickstart .demo-button')
     playwright_api.expect(button).to_be_visible()
+    source: Locator = browser_page.locator('.home-quickstart .demo-source')
+    playwright_api.expect(source).to_be_visible()
+    theme: str
+    for theme in ('light', 'dark'):
+        browser_page.locator('body').evaluate(
+            '(body, theme) => body.dataset.theme = theme', theme
+        )
+        assert source.locator('.kn').first.evaluate(
+            '(node) => getComputedStyle(node).color'
+        ) != source.locator('pre').evaluate(
+            '(node) => getComputedStyle(node).color'
+        )
     assert _worker_count(browser_page) == 0
     assert not downloads
     button.click()
@@ -52,6 +64,34 @@ def record_download(request: Request) -> None:
     assert not page[1]
 
 
+def test_homepage_can_edit_run_and_reset_the_example(
+    server: str,
+    page: tuple[Page, list[str]],
+) -> None:
+    browser_page: Page = page[0]
+    browser_page.goto(f'{server}/index.html')
+    source: Locator = browser_page.locator('.home-quickstart .demo-source')
+    editor: Locator = browser_page.get_by_role(
+        'textbox', name='Python example source'
+    )
+    edit: Locator = browser_page.get_by_role('button', name='Edit code')
+    edit.click()
+    playwright_api.expect(editor).to_be_focused()
+    playwright_api.expect(source).to_be_hidden()
+    original: str = editor.input_value()
+    editor.fill("print('Edited example ran')")
+    browser_page.get_by_role('button', name='Run', exact=True).click()
+    _wait_for_terminal_text(
+        browser_page, 'Edited example ran', BOOT_TIMEOUT_MS
+    )
+    browser_page.get_by_role('button', name='Reset example').click()
+    playwright_api.expect(source).to_be_visible()
+    playwright_api.expect(editor).to_be_hidden()
+    playwright_api.expect(edit).to_be_focused()
+    assert browser_page.locator('.demo-editor').input_value() == original
+    assert not page[1]
+
+
 def test_showcase_keyboard_updates_recording_title_and_guide(
     server: str,
     page: tuple[Page, list[str]],