Thank you for your interest in contributing to OpenSource-Compass 🎯
This project has evolved from a simple single-page site into a modular, component-based architecture using JavaScript components and JSON-driven data. This guide will help you understand the new workflow and contribute confidently without breaking existing features.
The project now follows a modular frontend architecture to improve scalability and maintainability.
-
Reusable UI elements like Navbar and Footer are defined in:
js/components.js -
These components are dynamically injected into pages using JavaScript to avoid duplication.
-
Create a placeholder element in your HTML:
<div id="navbar"></div> <div id="footer"></div>
-
Include scripts at the end of the body in this order:
<script src="js/components.js"></script> <script src="js/your-page-script.js"></script>
components.js before page-specific scripts to ensure shared components are available.
Dynamic sections like the Program Hub and Search rely on structured JSON data.
All programs must follow this schema exactly:
{
"id": "unique-program-id",
"name": "Program Name",
"description": "Short description of the program",
"organization": "Hosting Organization",
"tags": ["opensource", "internship", "remote"],
"url": "https://example.com",
"deadline": "YYYY-MM-DD"
}idmust be unique (used internally for search & filtering)tagsmust be an array of lowercase strings- Do NOT remove or rename existing keys
- Keep descriptions concise (1–2 lines)
Invalid entries may break the search logic and will be rejected.
Since the project uses async JavaScript features (fetch, dynamic rendering), it must be run via a local server.
- Install Live Server extension in VS Code
- Right-click
index.html→ Open with Live Server - Access the site at
http://127.0.0.1:5500
This is required to properly test:
- Contributor Wall
- Program Hub
- JSON fetch operations
❌ Opening HTML files directly (file://) will NOT work.
- Fork the repository
- Clone your fork locally
git clone https://github.com/your-username/OpenSource-Compass.gitCreate a descriptive feature branch:
git checkout -b feature/your-feature-name- Copy
.env.example→.env - Update values if required before development
- Push your branch to your fork
- Open a PR against the
mainbranch - Use the required PR template
We follow the type(scope): subject convention:
Examples:
feat: add program hub search filterfix: resolve navbar loading issuedocs: update contributing guidelinesrefactor: simplify component injection logic
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- refactor: Code changes without feature/bug impact
Commits not following this format may be requested to be squashed or rewritten.
We are building an inclusive, positive open-source space.
- Negative or discouraging comments on issues or PRs
- Passive-aggressive or demotivating language
- Wait for an issue to be officially assigned before starting
- Unsolicited PRs for unassigned issues will be closed without review
Repeated violations may lead to warnings or bans.
-
You MUST include:
- Screenshots or GIFs of the implemented changes
-
You MUST include:
- Screenshots of the current state / problem area
PRs or Issues without visuals will be automatically rejected.
- Work must begin immediately after assignment
- Maximum 3 issues per day (more only after completion)
- Ideal completion: 30 minutes – 48 hours
- Grace period: 72 hours
If no progress is shown after 72 hours, the issue will be unassigned.
- PR fails build or breaks functionality
- Linting rules ignored
- Missing mandatory screenshots
- Duplicate PRs for already-assigned issues
- If requested changes are ignored for 24 hours, the PR may be closed
Beginner Friendly 🟢
This contribution focuses on:
- Documentation clarity
- Technical writing
- Understanding project structure
Perfect for first-time open-source contributors 🚀
Happy Contributing 💙