Skip to content

Commit bf5b673

Browse files
committed
Add CONTRIBUTING.md with project guidelines
This adds a comprehensive CONTRIBUTING.md file that includes: - Setup instructions - Development workflow - TDD approach and testing guidelines - Project structure overview - Code style guidelines - Information about special files (CLAUDE.md) - PR guidelines - License information Closes #9
1 parent 7642cb4 commit bf5b673

File tree

1 file changed

+187
-0
lines changed

1 file changed

+187
-0
lines changed

CONTRIBUTING.md

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
# Contributing to OpenTelemetry Changelog
2+
3+
Thank you for your interest in contributing to OpenTelemetry Changelog! This document provides guidelines and instructions for contributing to this project.
4+
5+
## Code of Conduct
6+
7+
This project follows the [OpenTelemetry Community Code of Conduct](https://github.com/open-telemetry/community/blob/main/code-of-conduct.md). By participating, you are expected to uphold this code.
8+
9+
## Getting Started
10+
11+
### Prerequisites
12+
13+
- [Node.js](https://nodejs.org/) (v18 or later)
14+
- npm (comes with Node.js)
15+
16+
### Setting Up Development Environment
17+
18+
1. Fork the repository on GitHub
19+
2. Clone your fork locally:
20+
```bash
21+
git clone https://github.com/YOUR_USERNAME/changelog.opentelemetry.io.git
22+
cd changelog.opentelemetry.io
23+
```
24+
3. Add the upstream repository as a remote:
25+
```bash
26+
git remote add upstream https://github.com/open-telemetry/changelog.opentelemetry.io.git
27+
```
28+
4. Install dependencies:
29+
```bash
30+
npm install
31+
```
32+
5. Install Playwright browsers and dependencies for testing:
33+
```bash
34+
npx playwright install --with-deps
35+
```
36+
37+
### Development Workflow
38+
39+
1. Create a new branch for your changes:
40+
```bash
41+
git checkout -b your-branch-name
42+
```
43+
2. Start the development server:
44+
```bash
45+
npm run dev
46+
```
47+
3. Make your changes
48+
49+
4. Run linting to ensure code style consistency:
50+
```bash
51+
npm run lint
52+
```
53+
5. Run tests:
54+
```bash
55+
npm test
56+
```
57+
6. Commit your changes:
58+
```bash
59+
git commit -m "Your descriptive commit message"
60+
```
61+
7. Push to your fork:
62+
```bash
63+
git push origin your-branch-name
64+
```
65+
8. Create a pull request
66+
67+
## Development Approach
68+
69+
### Test-Driven Development (TDD)
70+
71+
This project uses Test-Driven Development for implementing new features:
72+
73+
1. **Write Tests First**: Begin by writing tests that define the expected behavior
74+
2. **Verify Test Failure**: Run tests to confirm they fail (since the feature isn't implemented yet)
75+
3. **Implement Feature**: Write the code to make the tests pass
76+
4. **Refactor**: Clean up the code while ensuring tests still pass
77+
78+
### Visual Testing
79+
80+
Visual regression testing is critical for this project:
81+
82+
1. **Visual Tests**: Always create visual tests for UI components and layout changes
83+
2. **Multiple Viewports**: Test across different viewport sizes (mobile, tablet, desktop)
84+
3. **Dark Mode**: Test both light and dark modes where applicable
85+
86+
### Testing Tools
87+
88+
- **Playwright**: Used for end-to-end and visual regression testing
89+
- **Test Endpoint**: Use the `/api/test` endpoint in development mode for creating test entries (accessible via the Test Controls button)
90+
- **Test Data Attributes**: Add `data-testid` attributes to elements for reliable test selection
91+
92+
## Project Structure
93+
94+
- `/src/app`: Next.js app router pages and API routes
95+
- `/src/app/api`: API routes for webhook handling and testing
96+
- `/src/components`: React components
97+
- `/src/lib`: Utility functions and shared code
98+
- `/src/types`: TypeScript type definitions
99+
- `/tests`: Playwright tests
100+
101+
## Code Style Guidelines
102+
103+
### TypeScript
104+
105+
- Use strict mode with `strictNullChecks` enabled
106+
- Define proper types for all variables, parameters, and return values
107+
- Avoid using `any` type; use proper TypeScript types instead
108+
109+
### Imports
110+
111+
- Use absolute imports with `@/` prefix for src directory
112+
```typescript
113+
// Good
114+
import { Component } from "@/components/component";
115+
116+
// Avoid
117+
import { Component } from "../../components/component";
118+
```
119+
120+
### React Components
121+
122+
- Use functional React components with TypeScript types
123+
- Props should be properly typed with interfaces
124+
- Use destructuring for props
125+
126+
### Error Handling
127+
128+
- Use try/catch with specific error types when possible
129+
- Log errors with appropriate context
130+
- Provide user-friendly error messages
131+
132+
### Styling
133+
134+
- Use Tailwind CSS with custom theme extensions
135+
- Follow the existing design system and color schemes
136+
- Ensure components are responsive and accessible
137+
138+
## Special Files and Configurations
139+
140+
### CLAUDE.md
141+
142+
The `CLAUDE.md` file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. It contains:
143+
144+
- Build commands
145+
- Development approach guidelines
146+
- Code style standards
147+
- Project structure information
148+
- Copyright header requirements
149+
150+
This file helps ensure consistent development practices whether using AI assistance or not.
151+
152+
### Copyright Headers
153+
154+
All source files must include the following copyright header:
155+
156+
```
157+
/*
158+
* Copyright The OpenTelemetry Authors
159+
* SPDX-License-Identifier: Apache-2.0
160+
*/
161+
```
162+
163+
## Pull Request Guidelines
164+
165+
1. Each PR should address a single issue
166+
2. Reference the issue number in the PR description with "Closes #X"
167+
3. Ensure all linting passes (`npm run lint`)
168+
4. Make sure all copyright headers are present
169+
5. Keep changes focused and minimal
170+
6. Include test coverage for new features or bug fixes
171+
7. Update documentation if necessary
172+
8. All tests must pass including visual regression tests
173+
174+
## Release Process
175+
176+
The OpenTelemetry Changelog website is automatically deployed through Netlify. When changes are merged to the main branch, they will be deployed to production after passing CI checks.
177+
178+
## Getting Help
179+
180+
If you have questions or need help with the contribution process:
181+
182+
- [Open an issue](https://github.com/open-telemetry/changelog.opentelemetry.io/issues/new) with your question
183+
- Ask in the [OpenTelemetry Slack workspace](https://cloud-native.slack.com/archives/C01NFPCV44V) (#otel-ui-ux channel)
184+
185+
## License
186+
187+
By contributing to this project, you agree that your contributions will be licensed under the project's [Apache 2.0 License](./LICENSE).

0 commit comments

Comments
 (0)