From 43c391aa1c523028bfedfbc0888fa801b14d1d6e Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 30 Nov 2020 13:12:56 +0100
Subject: [PATCH] docs: move dev setup to docs site, fix docs header

---
 README.md                                     | 25 +----------
 .../docs/development/local-dev-environment.md | 42 +++++++++++++++++++
 website/sidebars.js                           |  5 +++
 website/src/css/custom.css                    |  1 +
 4 files changed, 49 insertions(+), 24 deletions(-)
 create mode 100644 website/docs/development/local-dev-environment.md

diff --git a/README.md b/README.md
index c7f1710e6..483d0e370 100644
--- a/README.md
+++ b/README.md
@@ -24,30 +24,7 @@ For bigger setups, there is a Helm Chart in the `helm/` directory. This is docum
 
 ## Development
 
-To develop on passbook, you need a system with Python 3.8+ (3.9 is recommended). passbook uses [pipenv](https://pipenv.pypa.io/en/latest/) for managing dependencies.
-
-To get started, run
-
-```
-python3 -m pip install pipenv
-git clone https://github.com/BeryJu/passbook.git
-cd passbook
-pipenv shell
-pipenv sync -d
-```
-
-Since passbook uses PostgreSQL-specific fields, you also need a local PostgreSQL instance to develop. passbook also uses redis for caching and message queueing.
-For these databases you can use [Postgres.app](https://postgresapp.com/) and [Redis.app](https://jpadilla.github.io/redisapp/) on macOS or use it the docker-compose file in `scripts/docker-compose.yml`.
-
-To tell passbook about these databases, create a file in the project root called `local.env.yml` with the following contents:
-
-```yaml
-debug: true
-postgresql:
-  user: postgres
-
-log_level: debug
-```
+See [Development Documentation](https://passbook.beryju.org/docs/development/local-dev-environment)
 
 ## Security
 
diff --git a/website/docs/development/local-dev-environment.md b/website/docs/development/local-dev-environment.md
new file mode 100644
index 000000000..1bdd0e6a2
--- /dev/null
+++ b/website/docs/development/local-dev-environment.md
@@ -0,0 +1,42 @@
+---
+title: Setting up a local dev environment
+---
+
+## Backend
+
+To create a local development setup for passbook, you need the following:
+
+- Python 3.9
+- pipenv, which is used to manage dependencies, and can be installed with `pip install pipenv`
+- PostgreSQL (any recent version will do)
+- Redis (any recent version will do)
+
+For PostgreSQL and Redis, you can use the docker-compose file in `scripts/`. You can also use a native install, if you prefer.
+
+To configure passbook to use the local databases, create a file in the passbook directory called `local.env.yml`, with the following contents
+
+```yaml
+debug: true
+postgresql:
+  user: postgres
+
+log_level: debug
+```
+
+Afterwards, you can start passbook by running `./manage.py runserver`. Generally speaking, passbook is a Django application.
+
+Most functions and classes have type-hints and docstrings, so it is recommended to install a Python Type-checking Extension in your IDE to navigate around the code.
+
+## Frontend
+
+By default, no transpiled bundle of the frontend is included. To build the UI, you need Node 12 or newer.
+
+To build the UI, run these commands:
+
+```
+cd web/
+npm i
+npm run build
+```
+
+If you want to make changes to the UI, run `npm run watch` instead.
diff --git a/website/sidebars.js b/website/sidebars.js
index 43df7f32b..e2ef40345 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -133,5 +133,10 @@ module.exports = {
             label: "Troubleshooting",
             items: ["troubleshooting/access"],
         },
+        {
+            type: "category",
+            label: "Development",
+            items: ["development/local-dev-environment"],
+        },
     ],
 };
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index f9782cdb7..40d03497a 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -15,6 +15,7 @@
     --ifm-color-primary-light: #4e89e8;
     --ifm-color-primary-lighter: #5a91ea;
     --ifm-color-primary-lightest: #80aaef;
+    --ifm-navbar-link-hover-color: var(--ifm-navbar-link-color);
 }
 
 .button.button--outline {