|
| 1 | +# ADR 2025-06-10: Documentation strategy for GitHub Copilot and developer docs |
| 2 | + |
| 3 | +## Context |
| 4 | + |
| 5 | +We need a consistent, maintainable documentation approach that serves both developers and AI-assisted coding |
| 6 | +tools (GitHub Copilot) without duplicating effort. The documentation must cover component usage, variants, props, |
| 7 | +examples, and allow Copilot to answer questions like "What variants does the Button support?" without manually |
| 8 | +opening multiple files. |
| 9 | + |
| 10 | +Key requirements: |
| 11 | + |
| 12 | +- Single source of truth for component documentation. |
| 13 | +- Automatic inclusion of context in Copilot Chat for both IDEs, VS Code and IntelliJ. |
| 14 | +- Developer-friendly Markdown for manual reading and static site generation. |
| 15 | +- Compatibility with LLM context conventions (llms.txt; to be integrated in a later phase) and GitHub Copilot Custom Instructions (`copilot-instructions.md`). |
| 16 | + |
| 17 | +## Decision |
| 18 | + |
| 19 | +1. Documentation Format & Location |
| 20 | + |
| 21 | + - Use Markdown files per component, stored in packages/components/docs/ or packages/components/src/components/docs/. |
| 22 | + - Central table of contents in docs/llms.txt listing all component docs with relative paths. |
| 23 | + |
| 24 | +2. GitHub Copilot Custom Instructions |
| 25 | + |
| 26 | + - Place `copilot-instructions.md` in the project root (under .github/) to provide global guidance. |
| 27 | + - Instruct Copilot Chat to load this file automatically; it will include links to llms.txt and recommended file paths. |
| 28 | + |
| 29 | +3. Automatic Context Loading |
| 30 | + |
| 31 | + - In VS Code and IntelliJ, Copilot Chat will automatically read `.github/copilot-instructions.md` on new chats. |
| 32 | + - To surface specific details, embed documentation (e.g., Button.md) directly in `copilot-instructions.md`. |
| 33 | + |
| 34 | +4. Interactive Context Attachment |
| 35 | + |
| 36 | + - For deeper or ad-hoc queries, use the "Attach Context" feature in Copilot Chat to load component Markdown files during the session. |
| 37 | + |
| 38 | +5. Static Site & Developer Docs (future usage, not part of the current scope) |
| 39 | + |
| 40 | + - Integrate component docs via Astro as a package in the monorepo, referencing Markdown sources in packages/components/... . |
| 41 | + - Render pages dynamically under /components/[slug] and /api/[slug] for manual browsing. |
| 42 | + |
| 43 | +6. Automated Propagation of Copilot Instructions |
| 44 | + |
| 45 | + We add a `postinstall` hook to our component package that: |
| 46 | + |
| 47 | + - copies or appends the package-specific file `.github/copilot-instructions.md` to the target project, |
| 48 | + - uses unique markers to automatically replace outdated blocks during future installations, |
| 49 | + - handles missing or already existing files as well as idempotent updates cleanly, ensuring that every installation immediately provides the latest Copilot context for our package. |
| 50 | + |
| 51 | +7. Automate generation and propagation of Copilot instructions on package build. |
| 52 | + |
| 53 | + - Define `generate:agent` in `package.json` and hook into `prepare`. |
| 54 | + - Only include `*.md` files whose filename matches the parent directory converted to PascalCase (e.g. `custom-select` → `CustomSelect.md`), ensuring no unrelated MDs are merged. |
| 55 | + |
| 56 | +## Alternatives Considered |
| 57 | + |
| 58 | +- Rely solely on Code Search: Let Copilot use workspace search to locate docs dynamically. Rejected due to inconsistency and limited to agent mode. |
| 59 | +- TypeDoc-only approach: Generate API docs from TypeScript. Provides type detail but lacks usage narratives and cross-framework examples. |
| 60 | +- Mitosis Metadata Model: Embed JSON metadata via useMetadata and generate docs. Promising, but requires custom plugins and not widely adopted yet. |
| 61 | + |
| 62 | +## Consequences |
| 63 | + |
| 64 | +- Pros: |
| 65 | + |
| 66 | + - Clear separation: manual design guidance (Markdown) vs. AI context (`copilot-instructions.md` + `llms.txt` snippets). |
| 67 | + - Maintains single source (docs in packages/components/docs). |
| 68 | + - Enables Copilot to provide accurate, component-specific suggestions without manual file opening. |
| 69 | + - Developer site generation remains straightforward via Astro. |
| 70 | + - Consumers always receive the latest Copilot context without manual steps. |
| 71 | + - Guarantees that only the intended component documentation is merged into Copilot instructions. |
| 72 | + |
| 73 | +- Cons: |
| 74 | + - Requires maintaining excerpts in `copilot-instructions.md` when docs change. |
| 75 | + - Copilot cannot truly auto-load all linked docs; manual attachment or excerpt embedding needed for deep context. |
| 76 | + - Postinstall hooks may be disabled for security reasons, making it impossible to automate the copying of the copilot instructions. |
| 77 | + - Relies on strict naming conventions; any divergence between folder and file names will cause a component’s docs to be skipped. |
0 commit comments