Hero collapse, section blocks, editor polish, rubric scores

public/editor.dd81f5171b14.js → public/editor.a4a7766e1b9b.js

@@ -1,5 +1,5 @@
 import { EditorState } from 'https://esm.sh/@codemirror/state@6.5.2';
-import { EditorView } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';
+import { EditorView, lineNumbers } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';
 import { defaultHighlightStyle, syntaxHighlighting } from 'https://esm.sh/@codemirror/language@6.12.3?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1';
 import { python } from 'https://esm.sh/@codemirror/lang-python@6.2.1?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1,@codemirror/language@6.12.3';
 
@@ -15,6 +15,7 @@ if (textarea && form) {
       extensions: [
         python(),
         syntaxHighlighting(defaultHighlightStyle),
+        lineNumbers(),
         EditorView.lineWrapping,
         EditorView.updateListener.of((update) => {
           if (update.docChanged) textarea.value = update.state.doc.toString();

public/editor.js

@@ -1,5 +1,5 @@
 import { EditorState } from 'https://esm.sh/@codemirror/state@6.5.2';
-import { EditorView } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';
+import { EditorView, lineNumbers } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';
 import { defaultHighlightStyle, syntaxHighlighting } from 'https://esm.sh/@codemirror/language@6.12.3?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1';
 import { python } from 'https://esm.sh/@codemirror/lang-python@6.2.1?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1,@codemirror/language@6.12.3';
 
@@ -15,6 +15,7 @@ if (textarea && form) {
       extensions: [
         python(),
         syntaxHighlighting(defaultHighlightStyle),
+        lineNumbers(),
         EditorView.lineWrapping,
         EditorView.updateListener.of((update) => {
           if (update.docChanged) textarea.value = update.state.doc.toString();

public/site.1452cc5609f2.css → public/site.57a55415849b.css

@@ -20,17 +20,47 @@
     .cm-scroller { font-family: inherit; line-height: 1.5; }
     .cm-content { padding: 0; }
     .cm-line { padding: 0; }
-    .cm-gutters { display: none; }
+    .cm-gutters { background: transparent; border-right: 1px solid var(--hairline-soft); color: var(--muted); font-variant-numeric: tabular-nums; }
+    .cm-lineNumbers .cm-gutterElement { padding: 0 var(--space-2) 0 0; min-width: 2ch; text-align: right; font-size: .85em; }
     .cm-activeLine, .cm-activeLineGutter { background: transparent; }
     .cm-selectionBackground, .cm-focused .cm-selectionBackground { background: rgba(255, 72, 1, 0.18) !important; }
     code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
     .syntax-inline { padding: .08rem .25rem; border-radius: .25rem; background: var(--accent-soft); color: var(--text); font-size: .94em; }
     .brand { font-weight: 800; }
     .nav-links { display: flex; gap: .35rem; }
     .nav-links a { padding: 0 .9rem; color: var(--muted); }
-    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.5rem, 5vw, 4rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); }
-    .hero p { max-width: 66ch; color: var(--muted); font-size: 1.08rem; }
+    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.25rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transform-origin: top left; }
+    .hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-3); transform-origin: top left; }
+    .hero p { max-width: 60ch; color: var(--muted); font-size: 1rem; }
+    @supports (animation-timeline: scroll()) {
+      @media (prefers-reduced-motion: no-preference) {
+        .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
+        .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
+        .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
+        body:has(.hero) { padding-top: var(--space-2); }
+        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; margin-bottom: var(--space-2); animation: header-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
+        body:has(.hero) header .brand { filter: blur(4px); transform: scale(0.88); animation: brand-focus linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
+      }
+    }
+    @keyframes hero-fade {
+      to { opacity: 0; transform: scale(0.92) translateY(-8px); }
+    }
+    @keyframes hero-h1-morph {
+      to { transform: scale(0.32) translate(-32%, -50%); opacity: 0; }
+    }
+    @keyframes hero-p-fade {
+      to { opacity: 0; transform: translateY(-4px); }
+    }
+    @keyframes brand-focus {
+      to { filter: blur(0); transform: scale(1); }
+    }
+    @keyframes header-emerge {
+      to { opacity: 1; background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
+    }
     .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
+    .home-section { margin-top: var(--space-6); }
+    .home-section:first-of-type { margin-top: 0; }
+    .home-section .eyebrow { margin: 0 0 var(--space-2); }
     .card { display: block; min-height: 10rem; border: 1px solid var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface-2); color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transition-property: transform, background-color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
     .card:hover { transform: translateY(-2px); background: var(--surface-3); border-color: var(--accent); }
     .card h2 { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: .18em; }
@@ -81,9 +111,12 @@
     .playground { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
     .playground > h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.03em; margin-bottom: var(--space-3); }
     .runner-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: var(--space-4); align-items: stretch; }
+    @media (max-width: 980px) { .runner-grid { grid-template-columns: 1fr; } }
     .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
-    .runner-panel h2 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
+    .runner-panel h3 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
     .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
+    .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04); transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
+    .runner-editor:focus-within { box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04), 0 0 0 3px rgba(255, 72, 1, 0.12); }
     .execution-time { min-height: 1.5rem; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline-soft); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
     .playground-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 1rem; }
     .tool-button { min-height: 40px; border: 1px solid var(--hairline); border-radius: 9999px; padding: .62rem .9rem; background: var(--surface-2); color: var(--text); cursor: pointer; transition-property: transform, background-color, border-style; transition-duration: 150ms; }

public/site.css

@@ -20,17 +20,47 @@
     .cm-scroller { font-family: inherit; line-height: 1.5; }
     .cm-content { padding: 0; }
     .cm-line { padding: 0; }
-    .cm-gutters { display: none; }
+    .cm-gutters { background: transparent; border-right: 1px solid var(--hairline-soft); color: var(--muted); font-variant-numeric: tabular-nums; }
+    .cm-lineNumbers .cm-gutterElement { padding: 0 var(--space-2) 0 0; min-width: 2ch; text-align: right; font-size: .85em; }
     .cm-activeLine, .cm-activeLineGutter { background: transparent; }
     .cm-selectionBackground, .cm-focused .cm-selectionBackground { background: rgba(255, 72, 1, 0.18) !important; }
     code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
     .syntax-inline { padding: .08rem .25rem; border-radius: .25rem; background: var(--accent-soft); color: var(--text); font-size: .94em; }
     .brand { font-weight: 800; }
     .nav-links { display: flex; gap: .35rem; }
     .nav-links a { padding: 0 .9rem; color: var(--muted); }
-    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.5rem, 5vw, 4rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); }
-    .hero p { max-width: 66ch; color: var(--muted); font-size: 1.08rem; }
+    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.25rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transform-origin: top left; }
+    .hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-3); transform-origin: top left; }
+    .hero p { max-width: 60ch; color: var(--muted); font-size: 1rem; }
+    @supports (animation-timeline: scroll()) {
+      @media (prefers-reduced-motion: no-preference) {
+        .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
+        .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
+        .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
+        body:has(.hero) { padding-top: var(--space-2); }
+        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; margin-bottom: var(--space-2); animation: header-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
+        body:has(.hero) header .brand { filter: blur(4px); transform: scale(0.88); animation: brand-focus linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
+      }
+    }
+    @keyframes hero-fade {
+      to { opacity: 0; transform: scale(0.92) translateY(-8px); }
+    }
+    @keyframes hero-h1-morph {
+      to { transform: scale(0.32) translate(-32%, -50%); opacity: 0; }
+    }
+    @keyframes hero-p-fade {
+      to { opacity: 0; transform: translateY(-4px); }
+    }
+    @keyframes brand-focus {
+      to { filter: blur(0); transform: scale(1); }
+    }
+    @keyframes header-emerge {
+      to { opacity: 1; background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
+    }
     .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
+    .home-section { margin-top: var(--space-6); }
+    .home-section:first-of-type { margin-top: 0; }
+    .home-section .eyebrow { margin: 0 0 var(--space-2); }
     .card { display: block; min-height: 10rem; border: 1px solid var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface-2); color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transition-property: transform, background-color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
     .card:hover { transform: translateY(-2px); background: var(--surface-3); border-color: var(--accent); }
     .card h2 { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: .18em; }
@@ -81,9 +111,12 @@
     .playground { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
     .playground > h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.03em; margin-bottom: var(--space-3); }
     .runner-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: var(--space-4); align-items: stretch; }
+    @media (max-width: 980px) { .runner-grid { grid-template-columns: 1fr; } }
     .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
-    .runner-panel h2 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
+    .runner-panel h3 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
     .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
+    .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04); transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
+    .runner-editor:focus-within { box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04), 0 0 0 3px rgba(255, 72, 1, 0.12); }
     .execution-time { min-height: 1.5rem; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline-soft); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
     .playground-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 1rem; }
     .tool-button { min-height: 40px; border: 1px solid var(--hairline); border-radius: 9999px; padding: .62rem .9rem; background: var(--surface-2); color: var(--text); cursor: pointer; transition-property: transform, background-color, border-style; transition-duration: 150ms; }

scripts/build_prototypes.py

@@ -102,7 +102,7 @@ def render_article(example: dict, *, banners: dict[str, str] | None = None) -> s
     output = html.escape(example.get("expected_output", ""))
     return f"""
 <article class="example-shell">
-  <div class="example-top"><a class="text-link" href="/">← All examples</a><a class="text-link" href="{html.escape(example['doc_url'])}">Python docs reference</a></div>
+  <div class="example-top"><a class="text-link" href="/">↑ All examples</a><a class="text-link" href="{html.escape(example['doc_url'])}">Python docs reference</a></div>
   <section class="example-intro">
     <p class="eyebrow">{html.escape(example['section'])}</p>
     <h1>{html.escape(example['title'])}</h1>
@@ -115,10 +115,10 @@ def render_article(example: dict, *, banners: dict[str, str] | None = None) -> s
     <h2>Run the complete example</h2>
     <div class="runner-grid">
       <div class="runner-panel runner-editor">
-        <h2>Example code</h2>
+        <h3>Example code</h3>
         <pre><code class="language-python">{code}</code></pre>
       </div>
-      <section class="runner-panel output-panel"><h2>Expected output</h2><pre><code>{output}</code></pre></section>
+      <section class="runner-panel output-panel"><h3>Expected output</h3><pre><code>{output}</code></pre></section>
     </div>
   </section>
 </article>

src/app.py

@@ -499,22 +499,38 @@ def _layout(title: str, content: str, description: str | None = None, path: str
 
 
 def render_home() -> str:
-    cards = []
+    # Group examples by section in the order each section first appears
+    # in the manifest. Each section gets its own .home-section wrapper
+    # holding an eyebrow (tight, ~12px above its cards) and the
+    # section's grid; sections are spaced ~48px apart for clear
+    # separation. The shared outer .grid is gone — using one grid
+    # per section gives explicit control over the eyebrow's vertical
+    # relationship to its own cards vs the previous section.
+    by_section: dict[str, list[dict]] = {}
     for example in list_examples():
-        cards.append(
+        by_section.setdefault(example["section"], []).append(example)
+    sections_html = []
+    for section, examples in by_section.items():
+        card_markup = "".join(
             _replace(
-                '<a class="card" href="/examples/__SLUG__"><p class="eyebrow">__SECTION__</p><h2>__TITLE__</h2><p class="meta">__SUMMARY__</p></a>',
+                '<a class="card" href="/examples/__SLUG__"><h2>__TITLE__</h2><p class="meta">__SUMMARY__</p></a>',
                 {
-                    "SECTION": html.escape(example["section"]),
                     "SLUG": html.escape(example["slug"]),
                     "TITLE": html.escape(example["title"]),
                     "SUMMARY": html.escape(example["summary"]),
                 },
             )
+            for example in examples
+        )
+        sections_html.append(
+            f'<section class="home-section">'
+            f'<p class="eyebrow">{html.escape(section)}</p>'
+            f'<div class="grid">{card_markup}</div>'
+            f'</section>'
         )
     content = _replace(
         _template("home.html"),
-        {"PYTHON_VERSION": html.escape(PYTHON_VERSION), "CARDS": "".join(cards)},
+        {"PYTHON_VERSION": html.escape(PYTHON_VERSION), "CARDS": "".join(sections_html)},
     )
     return _layout(
         "Python By Example",
@@ -542,7 +558,7 @@ def render_journeys_index():
 <section class="hero">
   <p class="eyebrow">Journeys</p>
   <h1>Python learning journeys</h1>
-  <p>These paths compose individual examples into larger mental maps. They are inspired by the way Apprenticeship Patterns treats small patterns as material for longer learning journeys.</p>
+  <p>These paths compose individual examples into larger mental maps. They are inspired by the way <a class="text-link" href="https://www.oreilly.com/library/view/apprenticeship-patterns/9780596806842/">Apprenticeship Patterns</a> treats small patterns as material for longer learning journeys.</p>
 </section>
 <section class="grid journey-grid">{"".join(cards)}</section>
 '''
@@ -576,7 +592,7 @@ def render_journey_page(journey):
         sections.append(f'<section class="journey-section"><h2>{html.escape(section["title"])}</h2><p class="meta">{html.escape(section["summary"])}</p>{figure_html}<ul class="journey-list">{"".join(rows)}</ul></section>')
     content = f'''
 <article class="example-shell journey-page">
-  <div class="example-top"><a class="text-link" href="/">← All examples</a><a class="text-link" href="{html.escape(REFERENCE_URL)}">Python docs reference</a></div>
+  <div class="example-top"><a class="text-link" href="/">↑ All examples</a><a class="text-link" href="{html.escape(REFERENCE_URL)}">Python docs reference</a></div>
   <section class="example-intro">
     <p class="eyebrow">Journey</p>
     <h1>{html.escape(journey["title"])}</h1>

src/asset_manifest.py

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.1452cc5609f2.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
-HTML_CACHE_VERSION = '2ef350ca9050'
+ASSET_PATHS = {'SITE_CSS': '/site.57a55415849b.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.a4a7766e1b9b.js'}
+HTML_CACHE_VERSION = '324f7ab4825b'