diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 165e2cc..c81db9f 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,281 +1,154 @@ -# Open Source Bazaar - GitHub Copilot Instructions +# 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. +These instructions apply to the entire repository. Read +[`AGENTS.md`](../AGENTS.md) first and use +[`CONTRIBUTING.md`](../CONTRIBUTING.md) for the complete workflow. -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. +## Source of truth -## Critical Requirements +Before changing code, inspect the current issue, maintainer comments, relevant +source files, tests, `package.json`, `pnpm-workspace.yaml`, +`eslint.config.ts`, `tsconfig.json`, and affected workflows. -⚠️ **MANDATORY NODE.JS VERSION**: This project requires **Node.js >=20**. The build works on Node.js 20+ but may have warnings. +Executable configuration and the latest maintainer direction take precedence +over prose. Do not repeat commands, versions, routes, or project assumptions +from an older PR without verifying them in the current branch. -- Check Node.js version: `node --version` -- Development and linting commands work on Node.js 20+ -- Use **PNPM** as package manager, not NPM or Yarn +## Current repository -## Working Effectively +- Default branch: `main` +- Package manager: pnpm +- Application: Next.js 16, React 19, and strict TypeScript 5 +- UI and styles: React Bootstrap, Bootstrap utilities, Less/CSS Modules +- State and clients: MobX and the existing models +- Internationalization: `translation/zh-CN.ts`, + `translation/zh-TW.ts`, and `translation/en-US.ts` -### Initial Setup (REQUIRED for all development) +Treat `package.json` and the lockfile as authoritative for exact versions. -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+) +## Setup -**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/policy (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: +The deployment workflow uses Node.js 24. Use a compatible modern Node.js +version and either an installed pnpm command or Corepack: ```bash -npm test # Runs linting + staged file checks +node --version +corepack pnpm --version +corepack pnpm install --frozen-lockfile +corepack pnpm dev ``` -## 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 (`