Thanks for wanting to contribute. This document covers everything you need to get from zero to open pull request.
- Ways to Contribute
- Getting Set Up
- Development Workflow
- Pull Request Guidelines
- Code Standards
- Commit Messages
- Reporting Bugs
- Suggesting Features
- Any Questions?
Not everything requires writing code:
- Fix a bug - Check the issues list for open bugs
- Add a feature - From open issues, or add your own
- Improve the docs - If a page is confusing, out of date, or missing something, fix it
- Add a resource - Know a great learning resource we don't have? Add it to the library
- Review PRs - Constructive reviews on open PRs are incredibly helpful
- Report a bug - A well-written bug report is a real contribution
- Suggest improvements - Open an issue with your idea
- Node.js 18 or higher
- npm, yarn, or pnpm
- Git
# Fork the repo on GitHub first, then:
git clone https://github.com/YOUR_USERNAME/website
cd website
# Add the upstream remote
git remote add upstream https://github.com/open-devhub/websitenpm install
npm run devThe site will be at http://localhost:3000.
git checkout main
git pull upstream mainBranch names should be descriptive and use the feature/, fix/, or docs/ prefix:
git checkout -b feature/add-dark-mode-toggle
git checkout -b fix/mobile-nav-overflow
git checkout -b docs/update-getting-startedKeep changes focused. One feature or fix per branch makes review faster and keeps the git history readable.
npm run lint # Fix any linting errors before opening a PR
npm run dev # Verify that your changes are working with no errorsSee Commit Messages below.
git push origin feature/your-branch-nameThen open a pull request on GitHub against the develop branch (not main).
A good PR makes it easy for a reviewer to understand what you changed and why.
-
npm run formatpasses with no errors -
npm run buildsucceeds locally - You've tested your changes in the browser, not just in code
Fill out the PR template. At minimum, include:
- What - What does this PR change?
- Why - Why is this change needed?
- Screenshots (optional) - For any UI changes, before and after screenshots go a long way
- All PRs need at least one approval from a maintainer before merging
- Address review comments with either a code change or a clear explanation of why you disagree
- Once approved, a maintainer will merge it.
If your work is in progress but you want early feedback, open a draft PR. Just mark it as ready for review when it's done.
- Use TypeScript for all new files. Avoid
any- if you're reaching for it, the type probably needs to be defined properly. - Use
interfacefor object shapes,typefor unions and utility types.
- Keep components small and focused. If a component is doing too many things, split it.
- Co-locate component-specific styles and logic. Don't reach into another component's internals.
- Tailwind utility classes for everything. No custom CSS unless there's a specific reason.
We use Prettier with the project's config. Run it before committing:
npm run formatOr set up your editor to format on save - the .vscode in the repo will be picked up automatically if you're using vscode.
We use Conventional Commits. The format:
type(optional-scope): short description
Optional longer description if needed.
Types:
| Type | When to use |
|---|---|
feat |
A new feature |
fix |
A bug fix |
docs |
Documentation changes only |
style |
Formatting, whitespace — no logic changes |
refactor |
Code restructure with no behaviour change |
test |
Adding or updating tests |
chore |
Dependency updates, config changes, build stuff |
Examples:
feat(resources): add Rust learning resources section
fix(nav): correct active state on nested doc pages
docs(contributing): add environment variable table
chore: update Next.js to 15.2Keep the subject line under 72 characters. If you need more context, put it in the body.
Before filing a bug report, check if it's already been reported in open issues.
A good bug report includes:
- What happened - What did you see?
- What you expected - What did you expect to see?
- Steps to reproduce - Exact steps, starting from a fresh page load
- Environment - Browser, OS, screen size if it's a visual bug
- Screenshots or recording - If applicable
Open an issue and describe:
- What you want to be able to do
- Why it would be useful (not just to you, to the community broadly)
- Any ideas on how it might work
Ask in #dev-chat on the DevHub Discord Server, or just open an issue on Github.