|
| 1 | +# Copilot Coding Agent Instructions |
| 2 | + |
| 3 | +## Repository Overview |
| 4 | + |
| 5 | +**MicrosoftEdge/Demos** is a collection of standalone web demo applications and sample code used to demonstrate Microsoft Edge browser features (DevTools, PWAs, cross-browser APIs, extensions). Each demo lives in its own top-level directory and is independently deployable. |
| 6 | + |
| 7 | +Demos are hosted as GitHub Pages at `https://microsoftedge.github.io/Demos/<demo-name>/`. |
| 8 | + |
| 9 | +## Repository Structure |
| 10 | + |
| 11 | +``` |
| 12 | +/ <- repo root |
| 13 | +├── .github/ <- GitHub config (this file lives here) |
| 14 | +├── .gitignore |
| 15 | +├── README.md <- index of all demos, grouped by category |
| 16 | +├── <demo-name>/ <- each demo is self-contained in its own directory |
| 17 | +│ ├── index.html |
| 18 | +│ ├── README.md <- required; includes live demo link |
| 19 | +│ └── ... |
| 20 | +└── ... |
| 21 | +``` |
| 22 | + |
| 23 | +### Demos with a build step |
| 24 | + |
| 25 | +Most demos are pure HTML/CSS/JS with no build step. A few have a `package.json` and use tools like webpack or TypeScript: |
| 26 | + |
| 27 | +| Directory | Build tool | Build command | |
| 28 | +|---|---|---| |
| 29 | +| `/1DIV/` | webpack | `npm install && npx webpack` | |
| 30 | +| `/slow-calendar/` | webpack + TypeScript | `npm install && npm run build` | |
| 31 | +| `/devtools-crash-analyzer/` | webpack + TypeScript | `npm install && npm run build-prod` | |
| 32 | +| `/built-in-ai/` | Eleventy (SSG) | `npm install && npm run build` | |
| 33 | +| `/devtools-websocket-demo/` | Node.js server | `npm install && npm run server` | |
| 34 | +| `/heap-snapshot-visualizer/` | webpack | `npm install && npm run build` (check local `package.json`) | |
| 35 | +| `/css-mirroring-sourcemaps-demo/` | (check local `package.json`) | `npm install && npm run build` | |
| 36 | + |
| 37 | +Always check the directory's own `package.json` for available scripts before building. |
| 38 | + |
| 39 | +## Adding a New Demo |
| 40 | + |
| 41 | +1. Create a new top-level directory (e.g., `/my-demo/`). |
| 42 | +2. Create `README.md` in the new directory: |
| 43 | + - Add a self-explanatory title as a h1 header. |
| 44 | + - Immediately below the title, add a link to the live demo: `➡️ **[Open the demo](https://microsoftedge.github.io/Demos/my-demo/)** ⬅️` |
| 45 | + - Add a paragraph that describes what the demonstrated feature is about, and what the demo does. Provide any links to specs or docs about the demonstrated feature. |
| 46 | + - Include instructions to enable the feature in Edge if needed. |
| 47 | +3. Create an `index.html` file for the demo. Prefer embedding all necessary CSS and JS code inside the file directly, but extract to `style.css` and `script.js` files as needed. |
| 48 | +4. Add a row to the appropriate table in the root `README.md`. |
| 49 | + |
| 50 | +## Coding Conventions |
| 51 | + |
| 52 | +- **No global build system.** There is no root-level `package.json`, `Makefile`, or test runner. Each demo is independent. |
| 53 | +- **No test infrastructure.** There are no automated tests anywhere in the repo. Do not add or run tests. |
| 54 | +- **Minimal dependencies.** Demos are plain HTML/CSS/JS whenever possible. Only add npm packages if the demo genuinely needs them. |
| 55 | +- **Self-contained directories.** Each demo directory contains everything it needs. Do not create shared utility packages across demos. |
| 56 | +- **Node modules excluded from git.** The `.gitignore` excludes `node_modules/` globally. Never commit `node_modules/`. |
| 57 | + |
| 58 | +## Common Errors and Workarounds |
| 59 | + |
| 60 | +- **`node_modules` not found:** Run `npm install` inside the specific demo directory before building. There is no root-level install. |
| 61 | +- **Port conflicts for websocket demo:** `/devtools-websocket-demo/` starts a Node.js server (`npm run server`). Make sure the port it uses is free before running. |
| 62 | +- **Built output not in git:** Some demos (e.g., `/1DIV/dist/`, `/slow-calendar/public/`) serve built output that is committed to git. After running a build, check `git status` and commit any generated files that should be tracked (e.g., `dist/`, `public/`). |
| 63 | + |
| 64 | +## Key Links |
| 65 | + |
| 66 | +- Live demos index: `https://microsoftedge.github.io/Demos/` |
| 67 | +- Microsoft Edge DevTools docs: `https://learn.microsoft.com/microsoft-edge/devtools/` |
| 68 | +- PWA docs: `https://learn.microsoft.com/microsoft-edge/progressive-web-apps/` |
| 69 | +- Contributing guide: see `README.md` → Contributing section |
0 commit comments