Skip to content

Commit a99904d

Browse files
jamesmontemagnojamesmontemagno
committed
Add lab documentation site with step viewer
- Add docs/step.html for dynamic markdown rendering from GitHub - Update docs/index.html with links to step viewer - Add lab parts (00-04) with consistent navigation - Update deploy.yml to build Blazor app + docs together - Update all URLs to point to dotnet-presentations/vscode-github-copilot-agent-lab
1 parent d86f643 commit a99904d

File tree

10 files changed

+1948
-245
lines changed

10 files changed

+1948
-245
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ name: Deploy to GitHub Pages
33
on:
44
push:
55
branches: [main]
6+
workflow_dispatch:
67

78
permissions:
89
contents: read
@@ -22,25 +23,35 @@ jobs:
2223
steps:
2324
- uses: actions/checkout@v4
2425

25-
- uses: actions/setup-dotnet@v4
26+
- name: Setup .NET
27+
uses: actions/setup-dotnet@v4
2628
with:
2729
dotnet-version: '10.0.x'
2830

29-
- name: Restore dependencies
30-
run: dotnet restore SocOps/SocOps.csproj
31-
32-
- name: Build
33-
run: dotnet publish SocOps/SocOps.csproj -c Release -o release --nologo
31+
- name: Build Blazor App
32+
run: |
33+
cd SocOps
34+
dotnet publish -c Release -o ../publish
3435
35-
- name: Change base-tag in index.html
36+
- name: Prepare deployment
3637
run: |
37-
sed -i 's/<base href="\/" \/>/<base href="\/${{ github.event.repository.name }}\/" \/>/g' release/wwwroot/index.html
38+
# Copy Blazor app output to root
39+
cp -r publish/wwwroot/* ./_site/
40+
41+
# Copy docs folder
42+
cp -r docs/* ./_site/docs/
43+
44+
# Fix base href for GitHub Pages subdirectory
45+
sed -i 's|<base href="/" />|<base href="/vscode-github-copilot-agent-lab/" />|g' ./_site/index.html
46+
47+
# Prevent Jekyll processing
48+
touch ./_site/.nojekyll
3849
3950
- uses: actions/configure-pages@v4
4051

4152
- uses: actions/upload-pages-artifact@v3
4253
with:
43-
path: release/wwwroot
54+
path: _site
4455

4556
- name: Deploy to GitHub Pages
4657
id: deployment

‎.lab/00-overview.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# 🎮 VS Code GitHub Copilot Agent Lab
2+
3+
[🎮 Play Game](https://dotnet-presentations.github.io/vscode-github-copilot-agent-lab/) • [📚 Lab Guide](https://dotnet-presentations.github.io/vscode-github-copilot-agent-lab/docs/) • [← README](../README.md)
4+
5+
---
6+
7+
> **Duration:** ~1 hour
8+
> **Level:** Intermediate
9+
> **Stack:** C# / .NET 10 / Blazor WebAssembly
10+
11+
Welcome to Soc Ops — a hands-on workshop where you'll transform a simple Social Bingo app into something amazing using VS Code's Agent Mode with GitHub Copilot.
12+
13+
---
14+
15+
## 📋 Quick Checklist
16+
17+
Before you begin, verify:
18+
19+
- [ ] VS Code **v1.107+** (no pending updates)
20+
- [ ] Signed in with **GitHub Copilot** (Pro, Business, or Enterprise)
21+
- [ ] Git installed
22+
- [ ] .NET 10 SDK installed
23+
- [ ] Chat panel open and Agent ready
24+
25+
> 💡 **Tip:** Use the DevContainer for a pre-configured environment!
26+
27+
---
28+
29+
## 🎯 What You'll Learn
30+
31+
| # | Skill | Description |
32+
|---|-------|-------------|
33+
| 1 | **Context Engineering** | Teach AI about your codebase with instructions |
34+
| 2 | **Agentic Primitives** | Use background agents, cloud agents, and custom workflows |
35+
| 3 | **Design-First Development** | Let AI iterate on UI while you guide the vision |
36+
| 4 | **Test-Driven Development** | Use TDD agents for reliable feature development |
37+
38+
---
39+
40+
## 📚 Lab Parts
41+
42+
| Part | Title | Time | Description |
43+
|------|-------|------|-------------|
44+
| [**01**](01-setup.md) | Setup & Context Engineering | 15 min | Clone, configure, and teach the AI about your project |
45+
| [**02**](02-design.md) | Design-First Frontend | 15 min | Redesign the UI with creative themes |
46+
| [**03**](03-quiz-master.md) | Custom Quiz Master | 10 min | Create your own quiz themes with custom agents |
47+
| [**04**](04-multi-agent.md) | Multi-Agent Development | 20 min | Build new features with TDD and design agents |
48+
49+
---
50+
51+
## 💡 Pro Tips
52+
53+
1. **Keep the browser open** — Watch live updates as you code
54+
2. **Commit often** — Save working states frequently
55+
3. **Use checkpoints** — Revert unexpected changes with chat Checkpoints & Undo
56+
4. **📌 Pin this guide** — Keep it visible while you work
57+
58+
---
59+
60+
## 🚀 Ready?
61+
62+
👉 **[Start with Part 1: Setup](01-setup.md)**
63+
64+
---
65+
66+
---
67+
68+
[🎮 Play Game](https://dotnet-presentations.github.io/vscode-github-copilot-agent-lab/) • [📚 Lab Guide](https://dotnet-presentations.github.io/vscode-github-copilot-agent-lab/docs/) • [← README](../README.md)
69+
70+
*Created for .NET developers by the VS Code and .NET teams*

‎.lab/01-setup.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
# Part 1: Setup & Context Engineering
2+
3+
[🎮 Live Demo](https://dotnet-presentations.github.io/vscode-github-copilot-agent-lab/) • [📚 Lab Guide](https://dotnet-presentations.github.io/vscode-github-copilot-agent-lab/docs/) • [← Overview](00-overview.md)
4+
5+
---
6+
7+
> ⏱️ **Time:** ~15 minutes
8+
9+
In this section, you'll set up your development environment and teach GitHub Copilot about your codebase.
10+
11+
---
12+
13+
## 🔧 Initial Setup
14+
15+
### Step 1: Create Your Repository
16+
17+
1. Open [github.com/dotnet-presentations/vscode-github-copilot-agent-lab](https://github.com/dotnet-presentations/vscode-github-copilot-agent-lab)
18+
2. Click **Use this template** → **Create a new repository**
19+
- Name: `my-soc-ops-csharp`
20+
- Visibility: **Public**
21+
3. ✅ Your own Soc Ops repo is ready!
22+
23+
### Step 2: Enable GitHub Pages
24+
25+
1. Go to your repo's **Settings** → **Pages**
26+
2. Under "Build and deployment", select **GitHub Actions**
27+
3. ✅ Every commit will now publish to: `https://{username}.github.io/{repo-name}`
28+
29+
### Step 3: Clone & Open in VS Code
30+
31+
1. Open VS Code
32+
2. Run command: `Git: Clone` → `Clone from GitHub`
33+
3. Select your new repository
34+
4. When prompted, install **recommended extensions**
35+
36+
### Step 4: Run the Setup Agent
37+
38+
In the Chat panel:
39+
40+
```
41+
/setup
42+
```
43+
44+
The agent will:
45+
- Detect your environment
46+
- Install any missing dependencies
47+
- Start the development server
48+
49+
✅ **Success:** App is running in your browser!
50+
51+
---
52+
53+
## 📚 Understanding Context Engineering
54+
55+
Context engineering is how you teach AI about your specific codebase. This makes Copilot's suggestions more accurate and relevant.
56+
57+
### Task 1: Generate Workspace Instructions
58+
59+
Instructions guide all agentic interactions, making them efficient and reliable.
60+
61+
**Steps:**
62+
63+
1. Run command: `Chat: Generate Workspace Instructions File`
64+
2. Wait for the agent to analyze your codebase
65+
3. Review the generated instructions (probably too detailed!)
66+
4. Follow up with:
67+
```
68+
Compress down by half and add a mandatory development checklist
69+
(lint, build, test) to the top
70+
```
71+
5. **Commit** the instructions file
72+
73+
✅ **Result:** All future requests have a basic map of your workspace.
74+
75+
---
76+
77+
### Task 2: Background Agents for Parallel Work
78+
79+
Background agents run in isolated git worktrees — perfect for tasks that don't need handholding.
80+
81+
**Steps:**
82+
83+
1. Click `+` in Chat → **New background agent**
84+
2. Enter:
85+
```
86+
Add linting rules for unused vars and async/await usage; fix any errors
87+
```
88+
3. Let it run, then **Review** and **Apply** the changes
89+
4. Right-click the session to delete it when done
90+
91+
**Try a Cloud Agent too:**
92+
93+
1. Click `+` → **New cloud agent**
94+
2. Enter:
95+
```
96+
Make the README more engaging as a landing page to the project
97+
```
98+
99+
✅ **Result:** Linting rules added, errors fixed, README improved — all merged back to main!
100+
101+
---
102+
103+
### Task 3: Explore Existing Instructions
104+
105+
Your repo comes with pre-configured instructions that help the AI understand the project.
106+
107+
#### CSS Utilities Instructions
108+
109+
📄 See `.github/instructions/css-utilities.instructions.md`
110+
111+
These document the custom Tailwind-like CSS classes available in this Blazor project.
112+
113+
> 💡 **Optional:** Delete the main text and re-run the prompt to see how it generates
114+
115+
#### Frontend Design Instructions
116+
117+
📄 See `.github/instructions/frontend-design.instructions.md`
118+
119+
The "no purple gradients" instructions challenge the agent to think like a designer.
120+
121+
> 💡 **Think about:** What other AI biases could you challenge and nudge?
122+
123+
---
124+
125+
## ✅ Part 1 Complete!
126+
127+
You've learned how to:
128+
- Set up your development environment
129+
- Generate and refine workspace instructions
130+
- Use background and cloud agents for parallel work
131+
- Understand existing instruction files
132+
133+
---
134+
135+
[🎮 Live Demo](https://dotnet-presentations.github.io/vscode-github-copilot-agent-lab/) • [📚 Lab Guide](https://dotnet-presentations.github.io/vscode-github-copilot-agent-lab/docs/) • [← Overview](00-overview.md)
136+
137+
👉 **[Continue to Part 2: Design-First Frontend →](02-design.md)**

0 commit comments

Comments
 (0)