Thank you for contributing to activist!
Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open-source project. In return, and in accordance with this project's code of conduct, other contributors will reciprocate that respect in addressing your issue or assessing patches and features.
If you have questions or would like to communicate with the team, please join us in our public Matrix chat rooms. We'd be happy to hear from you!
- First steps as a contributor
- Tech stack
- Learning the tech stack
- Development environment
- Style guide
- Linting
- Issues and projects
- Bug reports
- Feature requests
- Pull requests
- Localization
- Documentation
- Accessibility
- Design
First steps as a contributor ⇧
Thank you for your interest in contributing to activist.org! We look forward to welcoming you to the community and working with you to build a global platform for political action :) The following are some suggested steps for people interested in joining our community:
- Please join the public Matrix chat to connect with the community
- Matrix is a network for secure, decentralized communication
- activist would suggest that you use the Element client
- The General and Development channels would be great places to start!
- Feel free to introduce yourself and tell us what your interests are if you're comfortable :)
- Read through this contributing guide and the style guide for all the information you need to contribute
- Look into issues marked
good first issue
and the Projects board to get a better understanding of what you can work on - Check out our public designs on Figma to understand activist's goals and direction
- Consider joining our bi-weekly developer sync!
Tech Stack ⇧
The following are the current and planned technologies for activist.org:
- Nuxt.js • Vue.js • TypeScript • Tailwind CSS • Headless UI
- Django • PostgreSQL (planned)
Note
Those new to any frameworks or technologies who want to work on their skills are more than welcome to contribute!
Learning the tech stack ⇧
activist is very open to contributions from people in the early stages of their coding journey! The following is a select list of documentation pages to help you understand the technologies we use.
Docs for those new to programming
- Mozilla Developer Network Learning Area
- Doing MDN sections for HTML, CSS and JavaScript is the best ways to get into web development!
Frontend tech docs
Development environment ⇧
- First and foremost, please see the suggested IDE setup in the dropdown below to make sure that your editor is ready for development.
Important
Suggested IDE setup
VS Code
Install the following extensions:
- batisteo.vscode-django
- bradlc.vscode-tailwindcss
- charliermarsh.ruff
- esbenp.prettier-vscode
- streetsidesoftware.code-spell-checker
- Vue.volar
WebStorm
- Check out the Vue.js development docs
- Make sure a local Node.js interpreter is configured in your project
- Make sure the Vue.js plugin and JavaScript Debugger are enabled in the plugins page of the settings
- To setup your development environment, first install Docker and Docker Compose.
Note
If you are new to Docker, activist recommends installing Docker Desktop. Docker Desktop comes with many Docker tools and a straightforward user interface.
- Fork the activist repo, clone your fork, and configure the remotes:
Note
Consider using SSH
Alternatively to using HTTPS as in the instructions below, consider SSH to interact with GitHub from the terminal. SSH allows you to connect without a user-pass authentication flow.
To run git commands with SSH, remember then to substitute the HTTPS URL, https://github.com/...
, with the SSH one, [email protected]:...
.
- e.g. Cloning now becomes
git clone [email protected]:<your-username>/activist.git
GitHub also has their documentation on how to Generate a new SSH key 🔑
# Clone your fork of the repo into the current directory.
git clone https://github.com/<your-username>/activist.git
# Navigate to the newly cloned directory.
cd activist
# Assign the original repo to a remote called "upstream".
git remote add upstream https://github.com/activist-org/activist.git
- Now, if you run
git remote -v
you should see two remote repositories named:origin
(forked repository)upstream
(activist repository)
-
Start your docker images with the following:
docker compose --env-file .env.dev up # Or with new dependencies: # docker compose --env-file .env.dev up --build # And to stop the containers when you're done working: # docker compose --env-file .env.dev down
-
You can visit http://localhost:3000/ to see the development build once the container is up and running.
Note
Feel free to contact the team in the Development room on Matrix if you're having problems getting your environment setup!
Tip
For those using LLM coding assistants, LLMPROMPT.txt contains a good prompt to paste as context or add to your settings.
Dockerized environments are resource intensive - specifically for some Windows users - and may take a very long time to load. If you would like to get just the frontend or backend up and running, please follow the steps below:
Frontend: Yarn
# In the root activist directory:
cd frontend
yarn install
yarn run dev
You can then visit http://localhost:3000/ to see the development frontend build once the server is up and running.
Backend: Python
Our backend depends on a connection to a postgres DB, therefore we need to setup the database first. Here our best option is to still use docker to create a postgres DB with the following command:
docker compose --env-file .env.dev up db
In order to connect to the DB, we need to change the DATABASE_HOST
environment variable inside the .env.dev
file first.
# Current
DATABASE_HOST=db
# Changed
DATABASE_HOST=localhost
From here we need the project's dependencies, with the practice being to create a virtual environment first within your local activist directory and then install the dependencies within it:
On Unix or MacOS, run:
python3 -m venv venv # make an environment named venv
source venv/bin/activate # activate the environment
On Windows (using Command Prompt), run:
python -m venv venv
venv\Scripts\activate.bat
After activating the virtual environment, install the required dependencies by running:
pip install --upgrade pip # make sure that pip is at the latest version
pip install -r backend/requirements-dev.txt # install dependencies
Now you can apply database migrations and start the local server.
# In the root activist directory:
cd backend
pyhton manage.py makemigrations
python manage.py migrate
python manage.py runserver
You can then visit http://localhost:8000/ to see the development backend build once the server is up and running.
Style guide ⇧
Please see the activist style guide for details about how to follow the code style for the project. We made these guidelines to assure that we as a community write clean, cohesive code that's easy to write and review. Suggestions for the style guide are welcome.
Linting ⇧
For the backend Ruff is installed via the required packages to assure that errors are reported correctly. We'd also suggest that VS Code users install the Ruff extension.
For the frontend eslint, eslint-vue and vue-a11y are added via the dependencies to provide linting support.
Issues and projects ⇧
The issue tracker for activist is the preferred channel for bug reports, features requests and submitting pull requests. activist also organizes related issues into projects.
Note
Just because an issue is assigned on GitHub doesn't mean that the team isn't interested in your contribution! Feel free to write in the issues and we can potentially reassign it to you.
Be sure to check the -next release-
and -priority-
labels in the issues for those that are most important, as well as those marked good first issue
that are tailored for first time contributors.
Bug reports ⇧
A bug is a demonstrable problem that is caused by the code in the repository. Good bug reports are extremely helpful — thank you!
Guidelines for bug reports:
-
Use the GitHub issue search to check if the issue has already been reported.
-
Check if the issue has been fixed by trying to reproduce it using the latest
main
or development branch in the repository. -
Isolate the problem to make sure that the code in the repository is definitely responsible for the issue.
Great Bug Reports tend to have:
- A quick summary
- Steps to reproduce
- What you expected would happen
- What actually happens
- Notes (why this might be happening, things tried that didn't work, etc)
To make the above steps easier, the activist team asks that contributors report bugs using the bug report template, with these issues further being marked with the bug
label.
Again, thank you for your time in reporting issues!
Feature requests ⇧
Feature requests are more than welcome! Please take a moment to find out whether your idea fits with the scope and aims of the project. When making a suggestion, provide as much detail and context as possible, and further make clear the degree to which you would like to contribute in its development. Feature requests are marked with the feature
label in the issues.
Pull requests ⇧
Good pull requests — patches, improvements and new features — are the foundation of our community making activist. They should remain focused in scope and avoid containing unrelated commits. Note that all contributions to this project will be made under the specified license and should follow the coding indentation and style standards (contact us if unsure).
Please ask first before embarking on any significant pull request (implementing features, refactoring code, etc), otherwise you risk spending a lot of time working on something that the developers might not want to merge into the project. With that being said, major additions are very appreciated!
When making a contribution, adhering to the GitHub flow process is the best way to get your work merged:
-
If you cloned a while ago, get the latest changes from upstream:
git checkout <dev-branch> git pull upstream <dev-branch>
-
Create a new topic branch (off the main project development branch) to contain your feature, change, or fix:
git checkout -b <topic-branch-name>
-
Install pre-commit to ensure that each of your commits is properly checked against our linter and formatters:
# In the project root: pre-commit install
Note
pre-commit is Python package that can be installed via pip or any other Python package manager. You can also find it in our requirements.txt file.
pip install pre-commit
- Commit your changes in logical chunks, and please try to adhere to Conventional Commits.
Note
The following are tools and methods to help you write good commit messages ✨
- commitlint helps write Conventional Commits
- Git's interactive rebase cleans up commits
-
Locally merge (or rebase) the upstream development branch into your topic branch:
git pull --rebase upstream <dev-branch>
Note
When working on the frontend, activist recommends manual typechecking. From within the frontend
directory run yarn run postinstall
followed by yarn nuxi typecheck
to confirm your changes are type-safe. Existing TS errors may be ignored. PRs to fix these are always welcome!
-
Push your topic branch up to your fork:
git push origin <topic-branch-name>
-
Open a Pull Request with a clear title and description.
Thank you in advance for your contributions!
Localization ⇧
Localization for activist happens within our public localization project on Transifex. Join us there if you'd like to help bring activist to other languages!
To find issues related to localization, please see the localization
label in the issues, and to report a localization issue use the localization issue form. Please also see the style guide for more information on how to create new localization keys.
Documentation ⇧
Documentation is an invaluable way to contribute to coding projects as it allows others to more easily understand the project structure and contribute. Issues related to documentation are marked with the documentation
label in the issues.
Accessibility ⇧
Thank you for your interest in improving activist's accessibility. We want our platform to not only be usable for all people, but also to provide a welcoming environment within the development community for all. This section lists a few points to account for when checking accessibility constraints during development:
Users who have motion sickness have the ability to disable transitions and animations on their devices. We use the external dependency reduced-motion to disable transitions and animations in this case.
Tab focusing sadly doesn't work out of the box for many browsers. Chrome works great, but the following changes are needed for browsers to function properly with tabs. We'll test activist against browsers with these settings with the assumption that people who need tab for more control of the interface will be able to activate them.
Firefox
- Go to
about:config
- Search for
accessibility.tabfocus
and check that it's set to typeBoolean
with valuetrue
- Remove it and select
Number
instead - Click on the add button and then enter the value
7
Safari
- Go to
Keyboard
inSystem Preferences
for your computer (assuming it's a Mac) - Select
Use keyboard navigation to move focus between controls
on Mac OS Catalina orAll controls
on earlier Mac OS versions - In Safari go to
Settings
- Go to the
Advanced
tab - Select
Press Tab to highlight each item on a webpage
Once the above steps are finished you should be able to use tab to navigate web pages :)
Design ⇧
Designs for activist are done in the public design file in Figma. Those interested in helping with activist's design are also welcome to share their ideas using the design improvement template that makes an issue marked with the design
label.
Note that the linked Figma file above is the public facing designs. Those interested in improving them or contributing designs for new features are invited to contact the team on GitHub or Matrix. We'd love to see a sample of your work, and if everything looks good we'll schedule a time to get connected!
All branding elements such as logos, icons, colors and fonts should follow those that are set out in activist-org/Organization. As the project is fully open source, these elements are also open for discussion. Your efforts in making activist products professional with a distinct and cohesive identity are much appreciated.