Skip to content

Latest commit

 

History

History
565 lines (381 loc) · 25.8 KB

CONTRIBUTING.md

File metadata and controls

565 lines (381 loc) · 25.8 KB
Raw

Contributing to activist.org

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!

Contents

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:

Frontend

Backend

Deployment

Localization

Analytics

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

Frontend tech docs

Backend tech docs

Deployment tech docs

Development environment ⇧

  1. 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:

WebStorm

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

  1. 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]:....

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)

  1. Create a virtual environment for the backend, activate it and install dependencies:

    # Unix or MacOS:
python3 -m venv venv
source venv/bin/activate

# Windows:
python -m venv venv
venv\Scripts\activate.bat

# After activating venv:
pip install --upgrade pip
pip install -r backend/requirements-dev.txt

  2. Start your docker images with the following:

    # --build only necessary with new dependencies or backend model changes.
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

  3. You can visit http://localhost:3000/ to see the development frontend once the container is up and running. From there click View organizations or View events to explore the platform.

  4. To view the backend admin UI and Swagger UI, visit http://localhost:8000/ and http://localhost:8000/v1/schema/swagger-ui/ respectively.

  5. If you'd like to sign in to the frontend via http://localhost:3000/auth/sign-in or the Django admin panel via http://localhost:8000/admin, then you can use the fixtures admin user with the password admin.

Note

Feel free to contact the team in the Development room on Matrix if you're having problems getting your environment setup!

Using Yarn or Python

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

The frontend currently uses Yarn 1.

# 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

To run locally, set the environment variable DJANGO_ENV to LOCAL_DEV:

export DJANGO_ENV=LOCAL_DEV

When this is set, django will load environment variables from env.dev first, and then from .env.dev.local which will overwrite some variables for local development.

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
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

You can then visit http://localhost:8000/admin to see the development backend admin UI as well as http://localhost:8000/v1/schema/swagger-ui/ for the Swagger UI 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.

Testing ⇧

Backend

Please run the following commands from the project root to test the backend:

# Start the Docker container:
docker compose --env-file .env.dev up backend --build -d  # -d to hide logs

# Enter the backend container:
docker exec -it django_backend sh

# Run backend tests:
pytest

# Once tests are finished:
exit

Frontend

Static Testing

Please check the formatting of your code using Prettier and run the static type check with eslint before pull requests with the following command:

# Within ./frontend:
yarn format
yarn lint

You can further run the following commands for TypeScript type checks on the frontend:

# Within ./frontend:
yarn run postinstall
yarn typecheck

Note

Pre-existing TS errors may be ignored. If you need assistance then feel free to open a PR and we'll support!

Automated Testing

We use vitest for component and unit testing. You can run them with the following command:

# Within ./frontend:
yarn test

Please see the frontend testing guide for information on how to write component tests.

Note

The vitest test suite is still in a very early stage. There is a lot of work left to do to increase test coverage, and some features still need troubleshooting. If you need assistance then feel free to open a PR and we'll support!

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:

  1. Use the GitHub issue search to check if the issue has already been reported.

  2. Check if the issue has been fixed by trying to reproduce it using the latest main or development branch in the repository.

  3. 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:

  1. If you cloned a while ago, get the latest changes from upstream:

    git checkout <dev-branch>
git pull upstream <dev-branch>

  2. Create a new topic branch (off the main project development branch) to contain your feature, change, or fix:

    git checkout -b <topic-branch-name>

  3. 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
  1. 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 ✨

  1. Locally merge (or rebase) the upstream development branch into your topic branch:

    git pull --rebase upstream <dev-branch>

  2. Push your topic branch up to your fork:

    git push origin <topic-branch-name>

  3. Open a Pull Request with a clear title and description.

Thank you in advance for your contributions!

Localization ⇧

Visit Weblate project

Localization for activist happens on our public localization project on Weblate. 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.

Important

If you're having issues with the vue/nuxt i18n $t local property not being picked up by TypeScript and being reported as invalid/not existing across the codebase, then please add the following file at frontend/types/vue-i18n.d.ts:

// frontend/types/vue-i18n.d.ts
// Attn: Fixes Property '$t' does not exist on type ... errors.
// Note: This file is git ignored, but can be used as a local fix for excessive TypeScript errors.
declare module "vue" {
  interface ComponentCustomProperties {
    $t: (key: string) => string;
  }
}

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:

Transitions

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

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 type Boolean with value true
  • Remove it and select Number instead
  • Click on the add button and then enter the value 7

Safari

  • Go to Keyboard in System Preferences for your computer (assuming it's a Mac)
  • Select Use keyboard navigation to move focus between controls on Mac OS Catalina or All 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 ⇧

Public Figma Designs

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.