Add Learn frontmatter and asset paths

.github/copilot-instructions.md

@@ -47,15 +47,15 @@ Do not deviate from this structure when editing or adding chapter content.
 ## Markdown Formatting
 
 - Use standard GitHub-Flavored Markdown.
-- Images go in the repo-root `images/` directory.
+- Images go in the repo-root `assets/` directory.
 - Use relative links for cross-chapter references (e.g., `../03-development-workflows/README.md`).
 - Emoji usage is encouraged for section headers (matching existing style).
 
 ## Maintenance Matrix
 
 | Change Made | Files to Update |
 |---|---|
-| New chapter added | `README.md` (course table), `AGENTS.md` (structure table), `images/learning-path.png` |
+| New chapter added | `README.md` (course table), `AGENTS.md` (structure table), `assets/learning-path.png` |
 | Chapter content updated | The chapter's `README.md`, verify cross-references in adjacent chapters |
 | New sample app variant added | `AGENTS.md` (structure table), `samples/` directory, relevant chapter references |
 | Sample app code changed | `samples/book-app-project/tests/` (update/add tests), chapters referencing that code |
@@ -66,5 +66,5 @@ Do not deviate from this structure when editing or adding chapter content.
 | Glossary term introduced | `GLOSSARY.md` — add definition in alphabetical order |
 | npm scripts changed | `package.json`, `AGENTS.md` (build section) |
 | Devcontainer updated | `.devcontainer/devcontainer.json`, Chapter 00 (setup instructions) |
-| Image or banner changed | `images/` directory, any README referencing the image |
+| Image or banner changed | `assets/` directory, any README referencing the image |
 | Copilot CLI version requirements change | Chapter 00, Chapter 01, `.devcontainer/devcontainer.json` |

.github/scripts/create-tapes.js

@@ -136,21 +136,21 @@ console.log('📝 Creating tape files from demos.json...\n');
 let created = 0;
 
 for (const demo of config.demos) {
-  const imagesDir = join(rootDir, demo.chapter, 'images');
-  const tapePath = join(imagesDir, `${demo.name}.tape`);
+  const assetsDir = join(rootDir, demo.chapter, 'assets');
+  const tapePath = join(assetsDir, `${demo.name}.tape`);
 
-  // Ensure images directory exists
-  if (!existsSync(imagesDir)) {
-    mkdirSync(imagesDir, { recursive: true });
-    console.log(`  Created: ${demo.chapter}/images/`);
+  // Ensure assets directory exists
+  if (!existsSync(assetsDir)) {
+    mkdirSync(assetsDir, { recursive: true });
+    console.log(`  Created: ${demo.chapter}/assets/`);
   }
 
   // Generate tape content
   const content = generateTapeContent(demo, config.settings);
 
   // Write tape file
   writeFileSync(tapePath, content);
-  console.log(`  ✓ ${demo.chapter}/images/${demo.name}.tape`);
+  console.log(`  ✓ ${demo.chapter}/assets/${demo.name}.tape`);
   created++;
 }
 

.github/scripts/generate-chapter-headers.py

@@ -23,7 +23,7 @@
 # Get project root (parent of scripts folder)
 SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
 PROJECT_ROOT = os.path.dirname(os.path.dirname(SCRIPT_DIR))
-BACKGROUND_IMAGE = os.path.join(PROJECT_ROOT, "images", "chapter-header-bg.png")
+BACKGROUND_IMAGE = os.path.join(PROJECT_ROOT, "assets", "chapter-header-bg.png")
 
 # Font settings - 25% larger than original 36px
 FONT_SIZE = 45
@@ -112,8 +112,8 @@ def generate_header(chapter_folder, title, font):
         y = (height - text_height) // 2
         draw.text((x, y), title, fill=(255, 255, 255), font=font)
 
-    # Save to chapter's images folder
-    output_dir = os.path.join(PROJECT_ROOT, chapter_folder, "images")
+    # Save to chapter's assets folder
+    output_dir = os.path.join(PROJECT_ROOT, chapter_folder, "assets")
     os.makedirs(output_dir, exist_ok=True)
 
     output_path = os.path.join(output_dir, "chapter-header.png")

.github/scripts/generate-demos.js

@@ -2,7 +2,7 @@
 /**
  * Generate course demo GIFs from .tape files
  *
- * This script finds all .tape files in [chapter]/images/ folders and runs VHS
+ * This script finds all .tape files in [chapter]/assets/ folders and runs VHS
  * to generate GIFs. VHS is run from the project root so that @file references
  * in prompts resolve correctly.
  *
@@ -135,7 +135,7 @@ function cleanupCopilotWrapper() {
   try { rmSync(wrapperDir, { recursive: true }); } catch (e) { /* ignore */ }
 }
 
-// Find all .tape files in [chapter]/images/ folders
+// Find all .tape files in [chapter]/assets/ folders
 function findTapeFiles(dir, chapterFilter) {
   const tapeFiles = [];
 
@@ -151,17 +151,17 @@ function findTapeFiles(dir, chapterFilter) {
         if (!matches) continue;
       }
 
-      const imagesDir = join(fullPath, 'images');
-      if (existsSync(imagesDir)) {
+      const assetsDir = join(fullPath, 'assets');
+      if (existsSync(assetsDir)) {
         try {
-          const imagesEntries = readdirSync(imagesDir);
-          for (const file of imagesEntries) {
+          const assetsEntries = readdirSync(assetsDir);
+          for (const file of assetsEntries) {
             if (file.endsWith('.tape')) {
-              tapeFiles.push(join(imagesDir, file));
+              tapeFiles.push(join(assetsDir, file));
             }
           }
         } catch (e) {
-          // Can't read images folder, skip
+          // Can't read assets folder, skip
         }
       }
     }

.github/scripts/preview-gifs.js

@@ -32,11 +32,11 @@ function findGifs() {
   const gifs = [];
   for (const entry of readdirSync(rootDir)) {
     if (!/^\d{2}-/.test(entry)) continue;
-    const imagesDir = join(rootDir, entry, 'images');
-    if (!existsSync(imagesDir)) continue;
-    for (const file of readdirSync(imagesDir)) {
+    const assetsDir = join(rootDir, entry, 'assets');
+    if (!existsSync(assetsDir)) continue;
+    for (const file of readdirSync(assetsDir)) {
       if (file.endsWith('-demo.gif')) {
-        gifs.push({ path: join(imagesDir, file), chapter: entry });
+        gifs.push({ path: join(assetsDir, file), chapter: entry });
       }
     }
   }

.github/scripts/verify-gifs.js

@@ -41,11 +41,11 @@ function findGifs(dir) {
     const fullPath = join(dir, entry);
     const stat = statSync(fullPath);
     if (stat.isDirectory() && !entry.startsWith('.') && entry !== 'node_modules') {
-      const imagesDir = join(fullPath, 'images');
-      if (existsSync(imagesDir)) {
-        for (const file of readdirSync(imagesDir)) {
+      const assetsDir = join(fullPath, 'assets');
+      if (existsSync(assetsDir)) {
+        for (const file of readdirSync(assetsDir)) {
           if (file.endsWith('-demo.gif')) {
-            gifs.push(join(imagesDir, file));
+            gifs.push(join(assetsDir, file));
           }
         }
       }

.gitignore

@@ -101,4 +101,5 @@ Desktop.ini
 .plans
 .plans.vhs-wrapper
 demo-previews
-blog
+blog
+migration.md

00-quick-start/README.md

@@ -1,4 +1,15 @@
-![Chapter 00: Quick Start](images/chapter-header.png)
+<!--
+---
+id: CopilotCLI-00
+title: !translate Quick Start
+description: !translate Install GitHub Copilot CLI, sign in with your GitHub account, and verify that everything works.
+audience: Developers / Students / Terminal users
+slug: quick-start
+weight: 1
+---
+-->
+
+![Chapter 00: Quick Start](assets/chapter-header.png)
 
 Welcome! In this chapter, you'll get GitHub Copilot CLI (Command Line Interface) installed, signed in with your GitHub account, and verified that everything works. This is a quick setup chapter. Once you're up and running, the real demos start in Chapter 01!
 
@@ -124,7 +135,7 @@ copilot
 
 You'll be asked to trust the folder containing the repository (if you haven't already). You can trust it one time or across all future sessions.
 
-<img src="images/copilot-trust.png" alt="Trusting files in a folder with the Copilot CLI" width="800"/>
+<img src="assets/copilot-trust.png" alt="Trusting files in a folder with the Copilot CLI" width="800"/>
 
 After trusting the folder, you can sign in with your GitHub account.
 
@@ -140,7 +151,7 @@ After trusting the folder, you can sign in with your GitHub account.
 4. Select "Authorize" to grant GitHub Copilot CLI access
 5. Return to your terminal - you're now signed in!
 
-<img src="images/auth-device-flow.png" alt="Device Authorization Flow - showing the 5-step process from terminal login to signed-in confirmation" width="800"/>
+<img src="assets/auth-device-flow.png" alt="Device Authorization Flow - showing the 5-step process from terminal login to signed-in confirmation" width="800"/>
 
 *The device authorization flow: your terminal generates a code, you verify it in the browser, and Copilot CLI is authenticated.*
 
@@ -169,7 +180,7 @@ After you receive a response, you can exit the CLI:
 <details>
 <summary>🎬 See it in action!</summary>
 
-![Hello Demo](images/hello-demo.gif)
+![Hello Demo](assets/hello-demo.gif)
 
 *Demo output varies. Your model, tools, and responses will differ from what's shown here.*
 

01-setup-and-first-steps/README.md

@@ -1,4 +1,15 @@
-![Chapter 01: First Steps](images/chapter-header.png)
+<!--
+---
+id: CopilotCLI-01
+title: !translate First Steps
+description: !translate Experience GitHub Copilot CLI through hands-on demos, then learn when to use interactive, plan, and programmatic modes.
+audience: Developers / Students / Terminal users
+slug: first-steps
+weight: 2
+---
+-->
+
+![Chapter 01: First Steps](assets/chapter-header.png)
 
 > **Watch AI find bugs instantly, explain confusing code, and generate working scripts. Then learn three different ways to use GitHub Copilot CLI.**
 
@@ -20,7 +31,7 @@ By the end of this chapter, you'll be able to:
 
 # Your First Copilot CLI Experience
 
-<img src="images/first-copilot-experience.png" alt="Developer sitting at a desk with code on the monitor and glowing particles representing AI assistance" width="800"/>
+<img src="assets/first-copilot-experience.png" alt="Developer sitting at a desk with code on the monitor and glowing particles representing AI assistance" width="800"/>
 
 Jump right in and see what Copilot CLI can do.
 
@@ -86,7 +97,7 @@ Once inside the interactive Copilot CLI session, run the following:
 <details>
 <summary>🎬 See it in action!</summary>
 
-![Code Review Demo](images/code-review-demo.gif)
+![Code Review Demo](assets/code-review-demo.gif)
 
 *Demo output varies. Your model, tools, and responses will differ from what's shown here.*
 
@@ -111,7 +122,7 @@ Ever stared at code wondering what it does? Try this in your Copilot CLI session
 <details>
 <summary>🎬 See it in action!</summary>
 
-![Explain Code Demo](images/explain-code-demo.gif)
+![Explain Code Demo](assets/explain-code-demo.gif)
 
 *Demo output varies. Your model, tools, and responses will differ from what's shown here.*
 
@@ -167,7 +178,7 @@ Need a function you'd otherwise spend 15 minutes googling? Still in your session
 <details>
 <summary>🎬 See it in action!</summary>
 
-![Generate Code Demo](images/generate-code-demo.gif)
+![Generate Code Demo](assets/generate-code-demo.gif)
 
 *Demo output varies. Your model, tools, and responses will differ from what's shown here.*
 
@@ -189,7 +200,7 @@ When you're done exploring, exit the session:
 
 # Modes and Commands
 
-<img src="images/modes-and-commands.png" alt="Futuristic control panel with glowing screens, dials, and equalizers representing Copilot CLI modes and commands" width="800"/>
+<img src="assets/modes-and-commands.png" alt="Futuristic control panel with glowing screens, dials, and equalizers representing Copilot CLI modes and commands" width="800"/>
 
 You've just seen what Copilot CLI can do. Now let's understand *how* to use these capabilities effectively. The key is knowing which of the three interaction modes to use for different situations.
 
@@ -209,7 +220,7 @@ Think of using GitHub Copilot CLI like going out to eat. From planning the trip
 
 Just like dining out, you'll naturally learn when each approach feels right.
 
-<img src="images/ordering-food-analogy.png" alt="Three Ways to Use GitHub Copilot CLI - Plan Mode (GPS route to restaurant), Interactive Mode (talking to waiter), Programmatic Mode (drive-through)" width="800"/>
+<img src="assets/ordering-food-analogy.png" alt="Three Ways to Use GitHub Copilot CLI - Plan Mode (GPS route to restaurant), Interactive Mode (talking to waiter), Programmatic Mode (drive-through)" width="800"/>
 
 *Choose your mode based on the task: Plan for mapping it out first, Interactive for back-and-forth collaboration, Programmatic for quick one-shot results*
 
@@ -230,7 +241,7 @@ Once you're comfortable, try:
 
 ### Mode 1: Interactive Mode (start here)
 
-<img src="images/interactive-mode.png" alt="Interactive Mode - Like talking to a waiter who can answer questions and adjust the order" width="250"/>
+<img src="assets/interactive-mode.png" alt="Interactive Mode - Like talking to a waiter who can answer questions and adjust the order" width="250"/>
 
 **Best for**: Exploration, iteration, multi-turn conversations. Like talking to a waiter who can answer questions, take feedback, and adjust the order on the fly.
 
@@ -268,7 +279,7 @@ Notice how each prompt builds on the previous answer. You're having a conversati
 
 ### Mode 2: Plan Mode
 
-<img src="images/plan-mode.png" alt="Plan Mode - Like planning a route before a trip using GPS" width="250"/>
+<img src="assets/plan-mode.png" alt="Plan Mode - Like planning a route before a trip using GPS" width="250"/>
 
 **Best for**: Complex tasks where you want to review the approach before execution. Similar to planning a route before a trip using GPS.
 
@@ -324,7 +335,7 @@ Proceed with implementation? [Y/n]
 
 ### Mode 3: Programmatic Mode
 
-<img src="images/programmatic-mode.png" alt="Programmatic Mode - Like using a drive-through for a quick order" width="250"/>
+<img src="assets/programmatic-mode.png" alt="Programmatic Mode - Like using a drive-through for a quick order" width="250"/>
 
 **Best for**: Automation, scripts, CI/CD, single-shot commands. Like using a drive-through for a quick order without needing to talk to a waiter.
 
@@ -499,7 +510,7 @@ copilot
 
 # Practice
 
-<img src="../images/practice.png" alt="Warm desk setup with monitor showing code, lamp, coffee cup, and headphones ready for hands-on practice" width="800"/>
+<img src="../assets/practice.png" alt="Warm desk setup with monitor showing code, lamp, coffee cup, and headphones ready for hands-on practice" width="800"/>
 
 Time to put what you've learned into action.