Refactor visual quickstart content and structure; add build script for comic generation

- Updated chapter footers to remove narration and simplify links.
- Enhanced index page with a more concise introduction and chapter selection.
- Created a new build script to automate the generation of the visual quickstart comic from a content YAML file.
- Added a content YAML file to manage comic text and structure, allowing for easier updates and maintenance.
- Adjusted chapter content to align with new YAML structure, ensuring consistency across the visual quickstart.

Author: DanWahlin

.github/scripts/build-comic.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/**
+ * Build the visual-quickstart comic site from its content file.
+ *
+ * Usage:
+ *   npm run build:comic
+ *
+ * Edit the words in visual-quickstart/content.yaml, then run this to regenerate
+ * the HTML/CSS into visual-quickstart/. Do NOT hand-edit the generated *.html -
+ * it is overwritten on every build.
+ *
+ * The rendering engine (SVG comic frames, speech bubbles, auto-placement, etc.)
+ * lives in the reusable comic-strip-site skill; this is a thin launcher that
+ * points that engine at this repo's content file and output dir.
+ *
+ * Optional env overrides:
+ *   COMIC_SKILL_DIR  path to the comic-strip-site skill folder
+ *   PYTHON           python executable to use (default: python3)
+ */
+
+const { spawnSync } = require('child_process');
+const { existsSync } = require('fs');
+const { join } = require('path');
+const os = require('os');
+
+const repoRoot = join(__dirname, '..', '..'); // .github/scripts -> repo root
+const docsDir = join(repoRoot, 'visual-quickstart');
+const contentFile = join(docsDir, 'content.yaml');
+
+const skillDir =
+  process.env.COMIC_SKILL_DIR ||
+  join(os.homedir(), '.copilot', 'skills', 'comic-strip-site');
+const buildScript = join(skillDir, 'scripts', 'build_site.py');
+
+if (!existsSync(buildScript)) {
+  console.error(
+    `\u2716 Comic engine not found at:\n  ${buildScript}\n` +
+      'Set COMIC_SKILL_DIR to the comic-strip-site skill folder, or install the skill.',
+  );
+  process.exit(1);
+}
+if (!existsSync(contentFile)) {
+  console.error(`\u2716 Content file not found:\n  ${contentFile}`);
+  process.exit(1);
+}
+
+const python = process.env.PYTHON || 'python3';
+console.log(`Building comic from ${contentFile}`);
+const result = spawnSync(python, [buildScript], {
+  stdio: 'inherit',
+  env: { ...process.env, COMIC_DOCS: docsDir, COMIC_CONTENT: contentFile },
+});
+
+if (result.error) {
+  console.error(`\u2716 Failed to run ${python}: ${result.error.message}`);
+  process.exit(1);
+}
+process.exit(result.status ?? 0);

package.json

@@ -9,6 +9,7 @@
     "generate:vhs": "node .github/scripts/generate-demos.js",
     "verify:gifs": "node .github/scripts/verify-gifs.js",
     "copy:content-engine": "node .github/scripts/copy-content-engine-files.js",
+    "build:comic": "node .github/scripts/build-comic.js",
     "generate:demos": "npm run create:tapes && npm run generate:vhs && npm run verify:gifs",
     "release": "npm run generate:demos",
     "release:ci": "npm run generate:headers"

visual-quickstart/assets/css/style.css

@@ -1,16 +1,30 @@
+/*
+  AUTO-GENERATED - DO NOT EDIT THIS FILE.
+  It is regenerated by the comic-strip-site skill (build_site.py) and your
+  edits here will be overwritten on the next build.
+  
+  How to make changes:
+    - WORDS (titles, subtitle, CTA, footer, captions, character dialogue,
+      terminal commands, chapter list): edit visual-quickstart/content.yaml
+    - STYLES (CSS): edit the CSS block in build_site.py
+    - HTML STRUCTURE / layout: edit the page templates in build_site.py
+      (index_page / chapter_page / banner / nav / panel)
+  
+  Then rebuild:  npm run build:comic
+*/
 :root{
   --ink:#1f2937; --cream:#fdf3df; --card:#fce9c7; --teal:#0f8a8a; --orange:#e8702a;
   --shadow:0 14px 34px rgba(31,41,55,.16);
 }
 *{box-sizing:border-box}
 body{margin:0;font-family:'Poppins',Verdana,Segoe UI,sans-serif;color:var(--ink);
-  background:radial-gradient(1200px 600px at 50% -10%,#fff6e3 0%,var(--cream) 55%) ,var(--cream);
+  background:#ffffff;
   min-height:100vh}
 a{color:var(--teal)}
 /* chapter banner (Option 2) - full-width band, content centered */
 .banner-wrap{position:relative;width:100%;overflow:hidden;color:#fff;
   background:linear-gradient(125deg,#11999e 0%,#0a6a72 52%,#0a4f63 100%);
-  box-shadow:0 18px 42px rgba(13,90,98,.30)}
+}
 .banner-wrap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
   radial-gradient(600px 300px at 82% -28%,rgba(255,255,255,.16),transparent 70%),
   radial-gradient(440px 280px at -3% 130%,rgba(232,112,42,.28),transparent 70%)}
@@ -39,7 +53,7 @@ a{color:var(--teal)}
 /* nav */
 .nav{display:flex;gap:12px;justify-content:center;align-items:center;
   flex-wrap:wrap;padding:18px 16px;position:sticky;top:0;z-index:5;
-  background:linear-gradient(var(--cream),rgba(253,243,223,.86) 70%,rgba(253,243,223,0))}
+  background:linear-gradient(#ffffff,rgba(255,255,255,.86) 70%,rgba(255,255,255,0))}
 .nav-btn,.nav-home{display:inline-block;text-decoration:none;font-weight:600;
   padding:11px 20px;border-radius:999px}
 .nav-btn{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(15,138,138,.32)}
@@ -78,6 +92,9 @@ body.home{display:flex;flex-direction:column;min-height:100vh}
   display:flex;flex-direction:column}
 .home-intro{margin:6px 0 0}
 .home-intro .cap{text-align:center;padding-left:0;font-size:1.12rem}
+.intro-cta{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3}
+.intro-cta .cta{border:3px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.40)}
+.intro-cta .cta:hover{transform:translateY(-2px)}
 .cta{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;
   font-weight:700;font-size:1.12rem;padding:14px 30px;border-radius:999px;
   box-shadow:0 10px 22px rgba(232,112,42,.4)}

visual-quickstart/chapter-00.html

@@ -1,4 +1,18 @@
 <!DOCTYPE html>
+<!--
+  AUTO-GENERATED - DO NOT EDIT THIS FILE.
+  It is regenerated by the comic-strip-site skill (build_site.py) and your
+  edits here will be overwritten on the next build.
+  
+  How to make changes:
+    - WORDS (titles, subtitle, CTA, footer, captions, character dialogue,
+      terminal commands, chapter list): edit visual-quickstart/content.yaml
+    - STYLES (CSS): edit the CSS block in build_site.py
+    - HTML STRUCTURE / layout: edit the page templates in build_site.py
+      (index_page / chapter_page / banner / nav / panel)
+  
+  Then rebuild:  npm run build:comic
+-->
 <html lang="en">
 <head>
 <meta charset="utf-8"/>
@@ -29,7 +43,6 @@ <h1>Quick Start</h1>
 <figure class="cell"><span class="badge">5</span><figcaption class="cap">You&#x27;re ready!</figcaption><svg class="panel" viewBox="0 0 1536 1024" role="img" aria-label="Pip cheers beside Professor Quill, who gives a thumbs up next to a trophy." xmlns="http://www.w3.org/2000/svg"><image href="assets/img/ch00-ready.png" x="0" y="0" width="1536" height="1024" preserveAspectRatio="xMidYMid slice"/><g><rect x="780" y="24" width="560" height="140" rx="34" fill="#ffffff" stroke="#1f2937" stroke-width="6"/><polygon points="780,88 720,132 780,148" fill="#ffffff"/><line x1="780" y1="88" x2="780" y2="148" stroke="#ffffff" stroke-width="9"/><line x1="780" y1="88" x2="720" y2="132" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><line x1="780" y1="148" x2="720" y2="132" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><text x="1060" y="78" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Setup complete! The real</text><text x="1060" y="124" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">fun starts in Chapter 01.</text></g><g><rect x="996" y="240" width="470" height="140" rx="34" fill="#ffffff" stroke="#1f2937" stroke-width="6"/><polygon points="1101,380 1080,416 1161,380" fill="#ffffff"/><line x1="1101" y1="380" x2="1161" y2="380" stroke="#ffffff" stroke-width="9"/><line x1="1101" y1="380" x2="1080" y2="416" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><line x1="1161" y1="380" x2="1080" y2="416" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><text x="1231" y="294" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Well done. You</text><text x="1231" y="340" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">earned this trophy!</text></g><rect x="8" y="8" width="1520" height="1008" rx="14" fill="none" stroke="#1f2937" stroke-width="14"/></svg></figure>
 </main>
 <nav class="nav"><a class="nav-home" href="index.html">Home</a><a class="nav-btn" href="chapter-01.html">Next Chapter &rarr;</a></nav>
-<footer class="foot">Narrated by Pip the Fox &middot; A visual summary of the
-<a href="https://github.com/github/copilot-cli-for-beginners">GitHub Copilot CLI for Beginners</a> course.</footer>
+<footer class="foot"><a href="https://github.com/github/copilot-cli-for-beginners">GitHub Copilot CLI for Beginners course</a>.</footer>
 </body>
 </html>

visual-quickstart/chapter-01.html

@@ -1,4 +1,18 @@
 <!DOCTYPE html>
+<!--
+  AUTO-GENERATED - DO NOT EDIT THIS FILE.
+  It is regenerated by the comic-strip-site skill (build_site.py) and your
+  edits here will be overwritten on the next build.
+  
+  How to make changes:
+    - WORDS (titles, subtitle, CTA, footer, captions, character dialogue,
+      terminal commands, chapter list): edit visual-quickstart/content.yaml
+    - STYLES (CSS): edit the CSS block in build_site.py
+    - HTML STRUCTURE / layout: edit the page templates in build_site.py
+      (index_page / chapter_page / banner / nav / panel)
+  
+  Then rebuild:  npm run build:comic
+-->
 <html lang="en">
 <head>
 <meta charset="utf-8"/>
@@ -29,7 +43,6 @@ <h1>First Steps</h1>
 <figure class="cell"><span class="badge">5</span><figcaption class="cap">On to Chapter 02!</figcaption><svg class="panel" viewBox="0 0 1536 1024" role="img" aria-label="Pip waves goodbye beside Professor Quill while walking toward a glowing arrow." xmlns="http://www.w3.org/2000/svg"><image href="assets/img/ch01-next.png" x="0" y="0" width="1536" height="1024" preserveAspectRatio="xMidYMid slice"/><g><rect x="834" y="60" width="500" height="186" rx="34" fill="#ffffff" stroke="#1f2937" stroke-width="6"/><polygon points="834,170 773,213 834,230" fill="#ffffff"/><line x1="834" y1="170" x2="834" y2="230" stroke="#ffffff" stroke-width="9"/><line x1="834" y1="170" x2="773" y2="213" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><line x1="834" y1="230" x2="773" y2="213" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><text x="1084" y="114" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Next: give me context</text><text x="1084" y="160" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">with the @ symbol.</text><text x="1084" y="206" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">See you in Chapter 02!</text></g><g><rect x="1068" y="726" width="440" height="140" rx="34" fill="#ffffff" stroke="#1f2937" stroke-width="6"/><polygon points="1181,726 1165,684 1241,726" fill="#ffffff"/><line x1="1181" y1="726" x2="1241" y2="726" stroke="#ffffff" stroke-width="9"/><line x1="1181" y1="726" x2="1165" y2="684" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><line x1="1241" y1="726" x2="1165" y2="684" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><text x="1288" y="780" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Keep going -</text><text x="1288" y="826" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">you&#x27;re doing great!</text></g><rect x="8" y="8" width="1520" height="1008" rx="14" fill="none" stroke="#1f2937" stroke-width="14"/></svg></figure>
 </main>
 <nav class="nav"><a class="nav-btn" href="chapter-00.html">&larr; Previous Chapter</a><a class="nav-home" href="index.html">Home</a><a class="nav-btn" href="chapter-02.html">Next Chapter &rarr;</a></nav>
-<footer class="foot">Narrated by Pip the Fox &middot; A visual summary of the
-<a href="https://github.com/github/copilot-cli-for-beginners">GitHub Copilot CLI for Beginners</a> course.</footer>
+<footer class="foot"><a href="https://github.com/github/copilot-cli-for-beginners">GitHub Copilot CLI for Beginners course</a>.</footer>
 </body>
 </html>

visual-quickstart/chapter-02.html

@@ -1,4 +1,18 @@
 <!DOCTYPE html>
+<!--
+  AUTO-GENERATED - DO NOT EDIT THIS FILE.
+  It is regenerated by the comic-strip-site skill (build_site.py) and your
+  edits here will be overwritten on the next build.
+  
+  How to make changes:
+    - WORDS (titles, subtitle, CTA, footer, captions, character dialogue,
+      terminal commands, chapter list): edit visual-quickstart/content.yaml
+    - STYLES (CSS): edit the CSS block in build_site.py
+    - HTML STRUCTURE / layout: edit the page templates in build_site.py
+      (index_page / chapter_page / banner / nav / panel)
+  
+  Then rebuild:  npm run build:comic
+-->
 <html lang="en">
 <head>
 <meta charset="utf-8"/>
@@ -28,7 +42,6 @@ <h1>Context and Conversations</h1>
 <figure class="cell"><span class="badge">4</span><figcaption class="cap">Resume any conversation</figcaption><svg class="panel" viewBox="0 0 1536 1024" role="img" aria-label="Pip stands beside Professor Quill near a laptop showing a refresh and clock icon." xmlns="http://www.w3.org/2000/svg"><image href="assets/img/ch02-sessions.png" x="0" y="0" width="1536" height="1024" preserveAspectRatio="xMidYMid slice"/><g><rect x="44" y="848" width="1448" height="154" rx="18" fill="#0d1117" stroke="#30363d" stroke-width="3"/><circle cx="78" cy="878" r="11" fill="#ff5f56"/><circle cx="114" cy="878" r="11" fill="#ffbd2e"/><circle cx="150" cy="878" r="11" fill="#27c93f"/><text x="78" y="922" font-family="ui-monospace,Menlo,Consolas,monospace" font-size="32" fill="#d1f7c4">copilot --continue  <tspan fill="#6e7681">  # resume your last session</tspan></text><text x="78" y="968" font-family="ui-monospace,Menlo,Consolas,monospace" font-size="32" fill="#d1f7c4">copilot --resume    <tspan fill="#6e7681">  # or pick one from a list</tspan></text></g><g><rect x="672" y="204" width="560" height="140" rx="34" fill="#ffffff" stroke="#1f2937" stroke-width="6"/><polygon points="672,220 647,219 672,280" fill="#ffffff"/><line x1="672" y1="220" x2="672" y2="280" stroke="#ffffff" stroke-width="9"/><line x1="672" y1="220" x2="647" y2="219" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><line x1="672" y1="280" x2="647" y2="219" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><text x="952" y="258" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Stopped for the day?</text><text x="952" y="304" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Pick up where we left off.</text></g><g><rect x="708" y="24" width="600" height="140" rx="34" fill="#ffffff" stroke="#1f2937" stroke-width="6"/><polygon points="1004,164 1055,222 1064,164" fill="#ffffff"/><line x1="1004" y1="164" x2="1064" y2="164" stroke="#ffffff" stroke-width="9"/><line x1="1004" y1="164" x2="1055" y2="222" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><line x1="1064" y1="164" x2="1055" y2="222" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><text x="1008" y="78" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Sessions save automatically.</text><text x="1008" y="124" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Nothing is lost.</text></g><rect x="8" y="8" width="1520" height="1008" rx="14" fill="none" stroke="#1f2937" stroke-width="14"/></svg></figure>
 </main>
 <nav class="nav"><a class="nav-btn" href="chapter-01.html">&larr; Previous Chapter</a><a class="nav-home" href="index.html">Home</a><a class="nav-btn" href="chapter-03.html">Next Chapter &rarr;</a></nav>
-<footer class="foot">Narrated by Pip the Fox &middot; A visual summary of the
-<a href="https://github.com/github/copilot-cli-for-beginners">GitHub Copilot CLI for Beginners</a> course.</footer>
+<footer class="foot"><a href="https://github.com/github/copilot-cli-for-beginners">GitHub Copilot CLI for Beginners course</a>.</footer>
 </body>
 </html>

visual-quickstart/chapter-03.html

@@ -1,4 +1,18 @@
 <!DOCTYPE html>
+<!--
+  AUTO-GENERATED - DO NOT EDIT THIS FILE.
+  It is regenerated by the comic-strip-site skill (build_site.py) and your
+  edits here will be overwritten on the next build.
+  
+  How to make changes:
+    - WORDS (titles, subtitle, CTA, footer, captions, character dialogue,
+      terminal commands, chapter list): edit visual-quickstart/content.yaml
+    - STYLES (CSS): edit the CSS block in build_site.py
+    - HTML STRUCTURE / layout: edit the page templates in build_site.py
+      (index_page / chapter_page / banner / nav / panel)
+  
+  Then rebuild:  npm run build:comic
+-->
 <html lang="en">
 <head>
 <meta charset="utf-8"/>
@@ -28,7 +42,6 @@ <h1>Development Workflows</h1>
 <figure class="cell"><span class="badge">4</span><figcaption class="cap">Refactor, test, and ship</figcaption><svg class="panel" viewBox="0 0 1536 1024" role="img" aria-label="Pip gives a thumbs up beside Professor Quill near a laptop showing green checkmarks." xmlns="http://www.w3.org/2000/svg"><image href="assets/img/ch03-test.png" x="0" y="0" width="1536" height="1024" preserveAspectRatio="xMidYMid slice"/><g><rect x="44" y="848" width="1448" height="154" rx="18" fill="#0d1117" stroke="#30363d" stroke-width="3"/><circle cx="78" cy="878" r="11" fill="#ff5f56"/><circle cx="114" cy="878" r="11" fill="#ffbd2e"/><circle cx="150" cy="878" r="11" fill="#27c93f"/><text x="78" y="922" font-family="ui-monospace,Menlo,Consolas,monospace" font-size="32" fill="#d1f7c4">&gt; @samples/book-app-project/books.py Add unit tests</text><text x="78" y="968" font-family="ui-monospace,Menlo,Consolas,monospace" font-size="32" fill="#d1f7c4">pytest  <tspan fill="#6e7681">  # run the new tests</tspan></text></g><g><rect x="636" y="78" width="520" height="140" rx="34" fill="#ffffff" stroke="#1f2937" stroke-width="6"/><polygon points="636,142 608,201 636,202" fill="#ffffff"/><line x1="636" y1="142" x2="636" y2="202" stroke="#ffffff" stroke-width="9"/><line x1="636" y1="142" x2="608" y2="201" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><line x1="636" y1="202" x2="608" y2="201" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><text x="896" y="132" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Refactor it, test it,</text><text x="896" y="178" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">then ship it with git.</text></g><g><rect x="924" y="294" width="560" height="140" rx="34" fill="#ffffff" stroke="#1f2937" stroke-width="6"/><polygon points="1164,434 1187,487 1224,434" fill="#ffffff"/><line x1="1164" y1="434" x2="1224" y2="434" stroke="#ffffff" stroke-width="9"/><line x1="1164" y1="434" x2="1187" y2="487" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><line x1="1224" y1="434" x2="1187" y2="487" stroke="#1f2937" stroke-width="6" stroke-linecap="round"/><text x="1204" y="348" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Tests are your safety net.</text><text x="1204" y="394" text-anchor="middle" font-family="Poppins,Verdana,sans-serif" font-size="34" fill="#1f2937">Always run them.</text></g><rect x="8" y="8" width="1520" height="1008" rx="14" fill="none" stroke="#1f2937" stroke-width="14"/></svg></figure>
 </main>
 <nav class="nav"><a class="nav-btn" href="chapter-02.html">&larr; Previous Chapter</a><a class="nav-home" href="index.html">Home</a><a class="nav-btn" href="chapter-04.html">Next Chapter &rarr;</a></nav>
-<footer class="foot">Narrated by Pip the Fox &middot; A visual summary of the
-<a href="https://github.com/github/copilot-cli-for-beginners">GitHub Copilot CLI for Beginners</a> course.</footer>
+<footer class="foot"><a href="https://github.com/github/copilot-cli-for-beginners">GitHub Copilot CLI for Beginners course</a>.</footer>
 </body>
 </html>