Skip to content

Commit 1adb220

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Publish workshop docs to Pages, move app to /game/ subfolder
- Add docs/index.html and docs/step.html for workshop navigation - Update deploy.yml to serve docs at root, Vite app at /game/ - Update vite.config.ts base path to /{repo}/game/ for Pages - Add game link to first workshop step The GitHub Pages site now shows the workshop material at the root URL, with the Soc Ops bingo app available under /game/. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent c8876b4 commit 1adb220

5 files changed

Lines changed: 686 additions & 3 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,29 @@ jobs:
3030

3131
- run: npm ci
3232

33-
- name: Build
33+
- name: Build app
3434
run: npm run build
3535
env:
3636
VITE_REPO_NAME: ${{ github.event.repository.name }}
3737

38+
- name: Prepare deployment
39+
run: |
40+
mkdir -p ./_site
41+
42+
# Copy workshop docs to deployment root
43+
cp -r docs/* ./_site/
44+
45+
# Copy built app to /game/ subfolder
46+
cp -r dist ./_site/game
47+
48+
# Prevent Jekyll processing
49+
touch ./_site/.nojekyll
50+
3851
- uses: actions/configure-pages@v4
3952

4053
- uses: actions/upload-pages-artifact@v3
4154
with:
42-
path: dist
55+
path: _site
4356

4457
- name: Deploy to GitHub Pages
4558
id: deployment

‎.lab/01-setup.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
In this section, you'll set up your development environment and teach GitHub Copilot about your codebase.
88

9+
> 🎮 **[Play the Soc Ops game](../game/)** — See what you'll be building!
10+
911
---
1012

1113
## 🔧 Initial Setup

‎docs/index.html‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>VS Code GitHub Copilot Agent Lab | TypeScript Edition</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
10+
<style>
11+
:root {
12+
--bg-dark: #0a0a0f;
13+
--bg-card: #12121a;
14+
--neon-cyan: #00f5ff;
15+
--neon-magenta: #ff00ff;
16+
--neon-purple: #b366ff;
17+
--text-primary: #ffffff;
18+
--text-secondary: #a0a0b0;
19+
--border-color: #2a2a3a;
20+
}
21+
22+
* { margin: 0; padding: 0; box-sizing: border-box; }
23+
24+
body {
25+
font-family: 'Space Grotesk', sans-serif;
26+
background: var(--bg-dark);
27+
color: var(--text-primary);
28+
line-height: 1.6;
29+
min-height: 100vh;
30+
}
31+
32+
body::before {
33+
content: '';
34+
position: fixed;
35+
top: 0; left: 0; width: 100%; height: 100%;
36+
background:
37+
linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px),
38+
linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px);
39+
background-size: 50px 50px;
40+
pointer-events: none;
41+
z-index: -1;
42+
}
43+
44+
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
45+
46+
.hero { padding: 6rem 0 4rem; text-align: center; }
47+
.hero-badge {
48+
display: inline-block; padding: 0.5rem 1rem;
49+
background: rgba(0,245,255,0.1); border: 1px solid var(--neon-cyan);
50+
border-radius: 50px; font-size: 0.875rem; color: var(--neon-cyan);
51+
margin-bottom: 2rem; font-family: 'JetBrains Mono', monospace;
52+
}
53+
.hero h1 {
54+
font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; margin-bottom: 1rem;
55+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
56+
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
57+
}
58+
.hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem; }
59+
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
60+
61+
.btn {
62+
display: inline-flex; align-items: center; gap: 0.5rem;
63+
padding: 1rem 2rem; border-radius: 8px; font-weight: 600;
64+
text-decoration: none; transition: all 0.3s ease; font-size: 1rem;
65+
}
66+
.btn-primary {
67+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
68+
color: var(--bg-dark);
69+
}
70+
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,245,255,0.3); }
71+
.btn-secondary { background: transparent; border: 2px solid var(--border-color); color: var(--text-primary); }
72+
.btn-secondary:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
73+
74+
.stats { display: flex; justify-content: center; gap: 3rem; margin-top: 4rem; flex-wrap: wrap; }
75+
.stat { text-align: center; }
76+
.stat-value { font-size: 2rem; font-weight: 700; color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace; }
77+
.stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }
78+
79+
.features { padding: 4rem 0; }
80+
.section-title { font-size: 2rem; text-align: center; margin-bottom: 3rem; }
81+
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
82+
.feature-card {
83+
background: var(--bg-card); border: 1px solid var(--border-color);
84+
border-radius: 12px; padding: 2rem; transition: all 0.3s ease;
85+
}
86+
.feature-card:hover { border-color: var(--neon-cyan); transform: translateY(-4px); }
87+
.feature-icon { font-size: 2.5rem; margin-bottom: 1rem; }
88+
.feature-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
89+
.feature-card p { color: var(--text-secondary); font-size: 0.95rem; }
90+
91+
.workshop { padding: 4rem 0; }
92+
.parts-list { display: flex; flex-direction: column; gap: 1rem; max-width: 800px; margin: 0 auto; }
93+
.part-card {
94+
display: flex; align-items: center; gap: 1.5rem;
95+
background: var(--bg-card); border: 1px solid var(--border-color);
96+
border-radius: 12px; padding: 1.5rem; text-decoration: none;
97+
color: inherit; transition: all 0.3s ease;
98+
}
99+
.part-card:hover { border-color: var(--neon-magenta); background: rgba(255,0,255,0.05); }
100+
.part-number {
101+
width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
102+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
103+
border-radius: 12px; font-weight: 700; font-size: 1.25rem;
104+
color: var(--bg-dark); flex-shrink: 0;
105+
}
106+
.part-content { flex: 1; }
107+
.part-content h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
108+
.part-content p { color: var(--text-secondary); font-size: 0.9rem; }
109+
.part-time {
110+
font-family: 'JetBrains Mono', monospace; font-size: 0.875rem;
111+
color: var(--neon-cyan); padding: 0.25rem 0.75rem;
112+
background: rgba(0,245,255,0.1); border-radius: 50px;
113+
}
114+
115+
.prereqs { padding: 4rem 0; background: var(--bg-card); }
116+
.prereqs-grid {
117+
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
118+
gap: 1rem; max-width: 800px; margin: 0 auto;
119+
}
120+
.prereq-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-dark); border-radius: 8px; }
121+
.prereq-check { color: var(--neon-cyan); font-size: 1.25rem; }
122+
123+
footer { padding: 3rem 0; text-align: center; border-top: 1px solid var(--border-color); }
124+
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
125+
.footer-links a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; }
126+
.footer-links a:hover { color: var(--neon-cyan); }
127+
.footer-credit { color: var(--text-secondary); font-size: 0.875rem; }
128+
129+
@media (max-width: 768px) {
130+
.hero { padding: 4rem 0 3rem; }
131+
.stats { gap: 2rem; }
132+
.part-card { flex-direction: column; text-align: center; }
133+
.part-time { margin-top: 0.5rem; }
134+
}
135+
</style>
136+
</head>
137+
<body>
138+
<div class="container">
139+
<section class="hero">
140+
<span class="hero-badge">🚀 TypeScript + Vite + React + Tailwind</span>
141+
<h1>VS Code GitHub Copilot Agent Lab</h1>
142+
<p class="hero-subtitle">
143+
Build a Social Bingo game while mastering VS Code's Agent Mode with GitHub Copilot.
144+
Learn context engineering, custom agents, and AI-first development workflows.
145+
</p>
146+
<div class="hero-cta">
147+
<a href="step.html?step=00-overview" class="btn btn-primary">🚀 Start Workshop</a>
148+
<a href="https://github.com/copilot-dev-days/agent-lab-typescript" class="btn btn-secondary">📦 GitHub Repo</a>
149+
</div>
150+
<div class="stats">
151+
<div class="stat">
152+
<div class="stat-value">~1hr</div>
153+
<div class="stat-label">Duration</div>
154+
</div>
155+
<div class="stat">
156+
<div class="stat-value">4</div>
157+
<div class="stat-label">Parts</div>
158+
</div>
159+
<div class="stat">
160+
<div class="stat-value">9</div>
161+
<div class="stat-label">Checkpoints</div>
162+
</div>
163+
</div>
164+
</section>
165+
166+
<section class="features">
167+
<h2 class="section-title">What You'll Learn</h2>
168+
<div class="features-grid">
169+
<div class="feature-card">
170+
<div class="feature-icon">🧠</div>
171+
<h3>Context Engineering</h3>
172+
<p>Teach AI about your codebase with instructions, making Copilot suggestions more accurate and relevant.</p>
173+
</div>
174+
<div class="feature-card">
175+
<div class="feature-icon">🤖</div>
176+
<h3>Agentic Primitives</h3>
177+
<p>Use background agents, cloud agents, and custom workflows to scale your development.</p>
178+
</div>
179+
<div class="feature-card">
180+
<div class="feature-icon">🎨</div>
181+
<h3>Design-First Development</h3>
182+
<p>Let AI iterate on UI while you guide the creative vision with specialized design agents.</p>
183+
</div>
184+
<div class="feature-card">
185+
<div class="feature-icon">🧪</div>
186+
<h3>Test-Driven Development</h3>
187+
<p>Build reliable features using TDD agents with Red-Green-Refactor workflow.</p>
188+
</div>
189+
</div>
190+
</section>
191+
192+
<section class="workshop">
193+
<h2 class="section-title">Workshop Parts</h2>
194+
<div class="parts-list">
195+
<a href="step.html?step=01-setup" class="part-card">
196+
<div class="part-number">01</div>
197+
<div class="part-content">
198+
<h3>Setup & Context Engineering</h3>
199+
<p>Clone, configure, and teach the AI about your project</p>
200+
</div>
201+
<span class="part-time">15 min</span>
202+
</a>
203+
<a href="step.html?step=02-design" class="part-card">
204+
<div class="part-number">02</div>
205+
<div class="part-content">
206+
<h3>Design-First Frontend</h3>
207+
<p>Redesign the UI with creative themes using Plan Mode</p>
208+
</div>
209+
<span class="part-time">15 min</span>
210+
</a>
211+
<a href="step.html?step=03-quiz-master" class="part-card">
212+
<div class="part-number">03</div>
213+
<div class="part-content">
214+
<h3>Custom Quiz Master</h3>
215+
<p>Create themed quiz questions with custom agents</p>
216+
</div>
217+
<span class="part-time">10 min</span>
218+
</a>
219+
<a href="step.html?step=04-multi-agent" class="part-card">
220+
<div class="part-number">04</div>
221+
<div class="part-content">
222+
<h3>Multi-Agent Development</h3>
223+
<p>Build new features with TDD and design agents</p>
224+
</div>
225+
<span class="part-time">20 min</span>
226+
</a>
227+
</div>
228+
</section>
229+
</div>
230+
231+
<section class="prereqs">
232+
<div class="container">
233+
<h2 class="section-title">Prerequisites</h2>
234+
<div class="prereqs-grid">
235+
<div class="prereq-item">
236+
<span class="prereq-check">✓</span>
237+
<span>VS Code v1.107+</span>
238+
</div>
239+
<div class="prereq-item">
240+
<span class="prereq-check">✓</span>
241+
<span>GitHub Copilot</span>
242+
</div>
243+
<div class="prereq-item">
244+
<span class="prereq-check">✓</span>
245+
<span>Node.js 22+</span>
246+
</div>
247+
<div class="prereq-item">
248+
<span class="prereq-check">✓</span>
249+
<span>Git installed</span>
250+
</div>
251+
</div>
252+
</div>
253+
</section>
254+
255+
<div class="container">
256+
<footer>
257+
<div class="footer-links">
258+
<a href="https://github.com/copilot-dev-days/agent-lab-typescript">GitHub Repository</a>
259+
<a href="https://www.youtube.com/code">VS Code YouTube</a>
260+
<a href="https://code.visualstudio.com/docs/copilot/overview">Copilot Docs</a>
261+
<a href="https://github.com/github/awesome-copilot">Awesome Copilot</a>
262+
</div>
263+
<p class="footer-credit">Built with 💜 by the VS Code Team</p>
264+
</footer>
265+
</div>
266+
</body>
267+
</html>

0 commit comments

Comments
 (0)