|
| 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