analytics/CONTRIBUTING.md
Ru Singh c95d375839
Fix for details button misbehaving on mobile (#1114)
* chore(make): convenience commands for installation & dev server

* docs: easier development env instructions

* docs: add note about docker volumes

* docs: detail pre-commit configuration

* style: eslint and prettier changes

* Allow for passing custom classes to fade-in

* style: eslint & prettier for the details button component

* style: react lifecycle methods to come first

* docs: add instructions to disable pre-commit

* style: devices components

* Move render methods to the last (together) in the order list
* Remove unused component import
* React lifecycle to come first before our own methods
* General styling and eslint changes
* Cleaner renderContent method using switch/case (fixes an eslint error as well!)
* Cleaner renderPill method with proper spacing + removing uncessary else

* style: more eslint/prettier for pages components

* Use newer Fragment syntax
* Remove unnecessary else statement
* Use backtick strings for concatenating strings
* Remove unnecessary space
* Remove unused imports and variable declarations
* Bunch render methods together as last in the order list

* fix: details button to drop to the bottom naturally on smaller screens

This _mostly_ fixes one of the issues being tracked on #972, titled "Details button issue on Firefox specifically"

* refactor: reduce usage of our CSS class in favor of tailwind's util classes

* refactor: remove our css classes in favor of Tailwind's util classes
2021-06-15 10:34:43 +03:00

2.1 KiB

Contributing

Development setup

The easiest way to get up and running is to install and use Docker for running both Postgres and Clickhouse.

Make sure Docker, Elixir, Erlang and Node.js are all installed on your development machine.

Start the environment:

  1. Run both make postgres and make clickhouse.
  2. You can then get set up with the following bits in one go with make install.
  3. Run mix deps.get. This will download the required Elixir dependencies.
  4. Run mix ecto.create. This will create the required databases in both Postgres and Clickhouse.
  5. Run mix ecto.migrate to build the database schema.
  6. Run npm ci --prefix assets to install the required node dependencies.
  7. Run make server or mix phx.server to start the Phoenix server.
  8. The system is now available on localhost:8000.

Creating an account

  1. Navigate to http://localhost:8000/register and fill in the form.
  2. An e-mail won't actually be sent, but you can find the activation in the Phoenix logs in your terminal. Search for %Bamboo.Email{assigns: %{link: " and open the link listed.
  3. Fill in the rest of the forms and for the domain use dummy.site
  4. Run make dummy_event from the terminal to generate a fake pageview event for the dummy site.
  5. You should now be all set!

Stopping Docker containers

  1. Stop and remove the Postgres container with make postgres-stop.
  2. Stop and remove the Clickhouse container with make clickhouse-stop.

Volumes are preserved. You'll find that the Postgres and Clickhouse state are retained when you bring them up again the next time: no need to re-register and so on.

Note: Since we are deleting the containers, be careful when deleting volumes with docker volume prune. You might accidentally delete the database and would have to go through re-registration process.

Pre-commit hooks

pre-commit requires Python to be available locally and covers JavaScript and CSS. Set up with pip install --user pre-commit followed by pre-commit install. Conversely, if the prompts are far too bothersome, remove with pre-commit uninstall.