diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..2024642 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,281 @@ +# Open Source Bazaar - GitHub Copilot Instructions + +Open Source Bazaar is an open-source project showcase platform built with Next.js 15, TypeScript, React Bootstrap, and MobX. It includes license filters, Wiki knowledge base, volunteer showcase, Lark integration, and other features. + +Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here. + +## Critical Requirements + +⚠️ **MANDATORY NODE.JS VERSION**: This project requires **Node.js >=20**. The build works on Node.js 20+ but may have warnings. + +- Check Node.js version: `node --version` +- Development and linting commands work on Node.js 20+ +- Use **PNPM** as package manager, not NPM or Yarn + +## Working Effectively + +### Initial Setup (REQUIRED for all development) + +1. **Install global pnpm**: `npm install -g pnpm` +2. **Install dependencies**: `pnpm install` -- takes 1-3 minutes. NEVER CANCEL. Set timeout to 5+ minutes. +3. **Verify setup**: `pnpm --version` (should be 10.x+) + +**Important**: If you see "node_modules missing" error, you MUST run `pnpm install` first before any other commands. + +### Development Workflow (FULLY VALIDATED) + +- **Start development server**: `pnpm dev` -- starts in 5-15 seconds on http://localhost:3000 +- **Run linting**: `pnpm lint` -- takes 15 seconds. NEVER CANCEL. Set timeout to 2+ minutes. +- **Run tests**: `pnpm test` -- runs lint-staged + lint, takes 15 seconds. Set timeout to 2+ minutes. + +### Build Process + +- **Production build**: `pnpm build` -- works on Node.js 20+ (estimated 30s-2 minutes) + - NEVER CANCEL. Set timeout to 5+ minutes. +- **Static export**: Available but not commonly used in development + +## Validation Scenarios + +After making ANY changes, ALWAYS validate by running through these scenarios: + +### Manual Testing Requirements + +1. **Start development server**: `pnpm dev` and verify it starts without errors +2. **Navigate to homepage**: Visit http://localhost:3000 and verify page loads with navigation menu +3. **Test core pages**: + - License filter: http://localhost:3000/license-filter (interactive license selection tool) + - Wiki pages: http://localhost:3000/wiki (policy documents from GitHub) + - Volunteer page: http://localhost:3000/volunteer (contributor showcase) + - Projects: http://localhost:3000/project (GitHub repository listings) +4. **Test API endpoints**: Verify GitHub API integrations work +5. **Check responsive design**: Test mobile/desktop layouts with React Bootstrap components +6. **Verify i18n functionality**: Check Chinese/English language switching works + +### Pre-commit Validation + +ALWAYS run before committing changes: + +```bash +npm test # Runs linting + staged file checks +``` + +## Key Project Structure + +### Important Directories + +- `pages/` - Next.js pages and API routes +- `components/` - Reusable React components with Bootstrap styling +- `models/` - MobX stores and data models +- `translation/` - i18n language files (zh-CN, en-US, zh-TW) +- `styles/` - CSS and styling files +- `public/` - Static assets + +### Configuration Files + +- `package.json` - Dependencies and scripts +- `next.config.ts` - Next.js configuration with MDX support +- `tsconfig.json` - TypeScript configuration +- `eslint.config.ts` - ESLint configuration +- `babel.config.js` - Babel configuration + +### Key Dependencies + +- **Next.js 15** - React framework +- **React Bootstrap 2.10** - UI component library +- **MobX 6.13** - State management +- **MobX-GitHub 0.4** - GitHub API integration +- **MobX-i18n 0.7** - Internationalization +- **License-Filter 0.2** - License filtering functionality +- **Marked 16.2** - Markdown processing + +## Development Standards and Best Practices + +Based on comprehensive PR review analysis, follow these critical development standards: + +### Architecture and Code Organization + +#### Component and Import Standards + +- **ALWAYS use React Bootstrap components** instead of custom HTML elements +- Use utilities from established libraries: 'web-utility' +- Import `'./Base'` in model files for proper configuration + +#### Error Handling and Static Generation + +- **Natural error throwing** for static generation - let errors bubble up to catch build issues +- Ensure build passes before pushing - resolve issues at compile time + +### UI/UX Standards + +#### Component Usage Patterns + +```typescript +// ✅ Correct - use React Bootstrap components +import { Button, Badge, Breadcrumb, Card, Container } from 'react-bootstrap'; + + + +{label} + +// ❌ Wrong - custom HTML elements +Edit +{label} +``` + +#### Semantic HTML Structure + +- Use ordered lists (`
    `) for countable items, unordered lists (`