Merge pull request #160 from github/migration/frontmatter-assets

Add Learn frontmatter and asset paths

Author: DanWahlin

.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.*