Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
136 lines (129 loc) · 7.92 KB
/
Copy pathindex.html
File metadata and controls
136 lines (129 loc) · 7.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Choose a hands-on GitHub Copilot SDK workshop: build an SDLC accessibility reviewer or a grounded museum curator.">
<title>Choose your workshop | GitHub Copilot SDK</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="light-theme.css">
<script src="theme-toggle.js"></script>
<script src="language-registry.js"></script>
<script src="language-navigation.js"></script>
</head>
<body>
<a class="skip-link" href="#main">Skip to workshop overview</a>
<header class="site-header">
<a href="index.html" class="site-brand" aria-label="GitHub Copilot SDK Workshop home">
<svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 1C5.9 1 1 5.9 1 12c0 4.9 3.2 9 7.5 10.5.6.1.8-.2.8-.5v-2.1c-3.1.7-3.7-1.3-3.7-1.3-.5-1.3-1.2-1.6-1.2-1.6-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 1.7 2.6 1.2 3.2.9.1-.7.4-1.2.7-1.5-2.5-.3-5.1-1.2-5.1-5.4 0-1.2.4-2.2 1.1-2.9-.1-.3-.5-1.4.1-2.9 0 0 .9-.3 3 1.1.9-.2 1.8-.4 2.7-.4.9 0 1.9.1 2.7.4 2.1-1.4 3-1.1 3-1.1.6 1.5.2 2.6.1 2.9.7.8 1.1 1.7 1.1 2.9 0 4.2-2.6 5.1-5.1 5.4.4.3.8 1 .8 2V22c0 .4.2.6.8.5A11 11 0 0 0 23 12c0-6.1-4.9-11-11-11Z"/>
</svg>
<span>GitHub Copilot SDK Workshop</span>
</a>
<nav class="site-nav" aria-label="Workshop resources">
<a id="targetAppLink" href="target-app/index.html" target="_blank" rel="noopener" hidden>Target app ↗</a>
<a id="sdkDocsLink" target="_blank" rel="noopener" aria-disabled="true">📚 SDK docs ↗</a>
<button class="theme-toggle" type="button" onclick="toggleTheme()">☀️ Light</button>
</nav>
</header>
<main class="home-shell" id="main">
<section class="hero-layout" aria-labelledby="hero-title">
<div class="hero-copy">
<h1 id="hero-title">Choose what your agent is here to do.</h1>
<p class="hero-definition">
Two workshops. One SDK. Build an agent for the software lifecycle, or take
Copilot into a completely different domain.
</p>
<fieldset class="workshop-picker" id="workshop-picker">
<legend>Choose a workshop</legend>
<label class="workshop-option" data-workshop="sdlc">
<input type="radio" name="workshop" value="sdlc">
<span class="workshop-option-copy">
<span class="workshop-kicker">Developer tool · 115 minutes</span>
<strong>Review web accessibility</strong>
<span>Build an SDLC agent that inspects a page, consults WCAG guidance, and produces an evidence-based report.</span>
<span class="workshop-capabilities">Streaming · local tools · Playwright MCP · permissions</span>
</span>
</label>
<label class="workshop-option" data-workshop="museum">
<input type="radio" name="workshop" value="museum">
<span class="workshop-option-copy">
<span class="workshop-kicker">Non-SDLC tool · 90 minutes</span>
<strong>Curate a museum exhibit</strong>
<span>Build a grounded interpretive agent that turns approved facts into visitor-ready exhibit copy.</span>
<span class="workshop-capabilities">Custom persona · one application-owned tool · validation · evaluation</span>
</span>
</label>
</fieldset>
<section class="language-picker" id="language-picker" aria-labelledby="language-picker-title">
<h2 id="language-picker-title">Choose your workshop language</h2>
<p id="languageSummary">Choose a workshop first, then select its implementation language.</p>
<fieldset class="language-options" id="languagePicker" disabled>
<legend class="visually-hidden">Programming language</legend>
<label class="language-option" data-language="dotnet">
<input type="radio" name="language" value="dotnet" required>
<span>.NET</span>
</label>
<label class="language-option" data-language="go">
<input type="radio" name="language" value="go">
<span>Go</span>
</label>
<label class="language-option" data-language="java">
<input type="radio" name="language" value="java">
<span>Java</span>
</label>
<label class="language-option" data-language="nodejs">
<input type="radio" name="language" value="nodejs">
<span>Node.js</span>
</label>
<label class="language-option" data-language="python">
<input type="radio" name="language" value="python">
<span>Python</span>
</label>
<label class="language-option" data-language="rust">
<input type="radio" name="language" value="rust">
<span>Rust</span>
</label>
</fieldset>
<p class="language-detail"><code id="installCommand"></code><span id="runtimeNote"></span></p>
</section>
<div class="hero-action">
<a class="primary-action" id="startWorkshopLink" href="#workshop-picker" aria-disabled="true">Start selected workshop</a>
<p id="startGuidance">Choose a workshop and language. No prior agent or SDK experience required.</p>
</div>
</div>
<aside class="terminal-preview" aria-label="Selected workshop preview">
<div class="terminal-bar">
<span></span><span></span><span></span>
<p id="previewTitle">workshop-preview</p>
</div>
<pre><code id="workshopPreview">Select a workshop to preview its agent flow.</code></pre>
</aside>
</section>
<section class="outcomes" aria-labelledby="outcomes-title">
<div>
<h2 id="outcomes-title">Build the app. Understand the boundary.</h2>
</div>
<ul>
<li>Create and manage a Copilot session.</li>
<li>Separate durable agent policy from task data.</li>
<li>Choose the right tool surface for the job.</li>
<li>Validate objective output requirements in code.</li>
<li>Explain where prompt guidance ends and hard controls begin.</li>
</ul>
</section>
</main>
<script>
const pathSegments = window.location.pathname.split('/').filter(Boolean);
const siteRoot = window.location.hostname.endsWith('.github.io') && pathSegments.length > 0
? new URL(`/${pathSegments[0]}/`, window.location.origin)
: new URL('./', window.location.href);
window.workshopSiteRoot = siteRoot;
updateToggleIcon();
</script>
<script src="homepage.js"></script>
</body>
</html>