🌐 Português (Brasil) | Español

🎮 Mona Mayhem

VS Code & GitHub Copilot CLI Workshop — Build a GitHub Contribution Battle Arena

A workshop template for building a retro arcade-themed website with Astro that compares GitHub contribution graphs of two users. This is the starting point — you'll build the app step by step using GitHub Copilot.

What you'll build by the end of the workshop

📚 Workshop

The workshop supports two tracks — follow the one that matches your preferred workflow:

• VS Code track — Chat, Plan Mode, Agent Mode, background agents, and editor-native review loops
• CLI track — copilot, @file context, /plan, autonomous edits, /fleet, /delegate, and /review

Part	Title	Copilot Focus
00	Overview	Track selection and learning goals
01	Setup & Context Engineering	Instructions, permissions, and environment setup
02	Plan & Scaffold	Planning the API and page architecture
03	Build the Game	Agentic implementation and iteration
04	Design-First Theming	Visual design planning and implementation
05	Polish & Parallel Work	Parallelism, reviews, and quality passes
06	Bonus & Extensions	Open-ended feature ideas and extra Copilot experiments

🚀 Quick Start

1. Create your own repo first by either:
   • clicking Use this template to create a new repo, or
   • forking this repository.
2. Choose your workshop path:
   • VS Code: clone your repo and open it in VS Code.
   • GitHub Copilot CLI: clone your repo locally, install copilot, and work from your terminal.
3. Follow the workshop guide

Prerequisites

Shared

• GitHub Copilot (Pro, Business, or Enterprise)
• Git
• Node.js

VS Code track

• VS Code v1.107+
• GitHub Copilot extension signed in

CLI track

• GitHub Copilot CLI (copilot)
• Node.js 22+ if you plan to install the CLI via npm install -g @github/copilot
• Or Homebrew / WinGet if you prefer a native package manager install

Technology Stack

• Framework: Astro v6
• Runtime: Node.js with @astrojs/node adapter
• Font: Press Start 2P (retro gaming font)
• API: GitHub's contribution graph API

Deployment Notes

Current GitHub Pages setup

The workflow in .github/workflows/deploy.yml currently deploys static workshop/docs content from docs/ and workshop/ to GitHub Pages. It does not build or deploy the Astro app from src/.

If you want to deploy the Astro app to GitHub Pages

GitHub Pages is static hosting, so the Astro app should use static output.

1. Change output in astro.config.mjs from server to static.
2. Remove the Node adapter (@astrojs/node) from astro.config.mjs and package.json.
3. Update the GitHub Actions workflow to run npm ci and npm run build, then upload dist/ as the Pages artifact.
4. If deploying to a project page (https://<user>.github.io/<repo>/), set site and base in astro.config.mjs.

If you plan to keep API routes running in production, use a server platform instead of GitHub Pages (for example, Vercel, Netlify, or a Node host).

License

MIT