Restructure documentation (#1524)

* Restructure documentation

Also begin documentation of interview scheduling

* Begin macos native install guide

* Begin macos docker install guide

* Add post-install instructions

* Update data fetching docs

* Add more info on main README

* Undo definition list

* Begin git setup guide

* Update forms doc

* Update numbers form section

* Add editor setup guides

* Update macos native docs

* Add incomplete warnings

* Add Dependency issues section to mac docker

* Move WSL note

* Resize files. Hooray for saving space :-)

* Add FormDescription to form docs

* typescript jsx -> tsx

* tsx -> jsx (Github doesn't highlight tsx properly)

* Add Dropdown docs

* Separate dropdown example markdowns

* Improve example consistency :-)

* Add section for query key factory and data invalidation

README.md

@@ -2,55 +2,10 @@
 
 <img src="./docs/splash.png"/>
 
-## Documentation
-
-- **[Technical Documentation](./docs/technical/README.md)**
-- [Work Methodology](./docs/work-methodology.md)
-- [Useful Commands](./docs/useful-commands.md)
-- [Technologies used on Samf4 🤖](./docs/technical/Samf4Tech.md)
-- [Project Specific Commands](./docs/docker-project-specific-commands.md)
-- [Useful Docker aliases](./docs/docker-project-specific-commands.md)
-- [🌐 API documentation](./docs/api-docs.md)
-
-## Installation
-
-We have a script that handles all installation for you. To run the script, a Github Personal Access Token (PAT) is required.
-You can make one here https://github.com/settings/tokens/new. Tick scopes `repo`, `read:org` and `admin:public_key`),
-then store the token somewhere safe (Github will never show it again).
-
-Copy these commands (press button on the right-hand side of the block)
-and run from the directory you would clone the project.
-
-```sh
-# Interactive
-read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=y /bin/bash -c "$(curl -fsSL https://$TOKEN@raw.githubusercontent.com/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE;
-```
+## Introduction
 
-<details>
-<summary>Non-interactive (show/hide)</summary>
+Samfundet4 is the latest and greatest iteration of samfundet.no. It's built using Django and React.
 
-```sh
-# Non-interactive
-read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=n /bin/bash -c "$(curl -fsSL https://$TOKEN@raw.githubusercontent.com/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE;
-```
-
-<!--
-cd ~/my-projects/test; rm -rf Samfundet4; read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=y /bin/bash -c "$(curl -fsSL https://[email protected]/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE;
- -->
-</details>
-
-<details>
-<summary>Flags explained (show/hide)</summary>
-
-> - X_INTERACTIVE (y/n): determines how many prompts you receive before performing an action.  
->   curl:
-> - -f: fail fast
-> - -s: silent, no progress-meter
-> - -S: show error on fail
-> - -L: follow redirect
-
-</details>
+## Documentation
 
-<br>
-<br>
-<br>
+Looking for install guides and technical documentation? Go to the [Documentation Overview](./docs/README.md)!

docs/README.md

@@ -0,0 +1,52 @@
+[**← Back: Samfundet4**](../)
+
+# Documentation Overview
+
+> [!TIP]
+> If you're new, start by going through the [Introduction to Samfundet4](./introduction.md) guide.
+
+## Frontend
+
+- [Creating react components (conventions)](./technical/frontend/components.md)
+- [Forms and schemas](./technical/frontend/forms.md)
+  - [*Deprecated: SamfForm*](./technical/frontend/samfform.md)
+- [Cypress Setup Documentation](./technical/frontend/cypress.md)
+- [Data fetching and State management](./technical/frontend/data-fetching.md)
+
+## Backend
+
+- [🌐 API documentation](./api-docs.md)
+- [Billig (payment system)](./technical/backend/billig.md)
+- [Seed scripts](./technical/backend/seed.md)
+- [Role system](./technical/backend/rolesystem.md)
+
+## Other
+
+- [Automatic Interview Scheduling](./intervew-scheduling.md)
+
+## Workflow
+
+- [Work Methodology](./work-methodology.md)
+    - How to contribute to the project
+- [Useful Commands](./useful-commands.md)
+- [Useful Docker aliases](./docker-project-specific-commands.md)
+- [Common error messages](./common-errors.md)
+
+## Pipelines & Deployment
+
+- [Pipeline (mypy, Biome, tsc, ...)](./technical/pipeline.md)
+
+## Install
+
+- Linux: [Docker](./install/linux-docker.md) – [Native](./install/linux-native.md)
+- MacOS: [Docker](./install/mac-docker.md) – [Native](./install/mac-native.md)
+- Windows: [Docker](./install/windows-docker.md) – [WSL](./install/windows-wsl.md)
+- [Install script](./install/install-script.md)
+- [Post-install instructions](./install/post-install.md)
+
+## Editor configuration
+
+* [JetBrains (WebStorm, PyCharm, etc...)](./editors/jetbrains.md)
+* [VS Code](./editors/vscode.md)
+* [Vim/Neovim](./editors/vim.md)
+* [Emacs](./editors/emacs.md)

docs/api-docs.md

@@ -1,3 +1,5 @@
+[**← Back: Documentation Overview**](./README.md)
+
 # API docs
 
 API docs are generated by [drf-spectacular](https://drf-spectacular.readthedocs.io/en/latest/readme.html).
@@ -6,14 +8,16 @@ API documentation is available as two different interfaces:
 
 [Swagger-UI](http://localhost:8000/schema/swagger-ui/#/) or [Redoc](http://localhost:8000/schema/redoc/)
 
-
-
 🐋 _When backend server is running_
 
 ## API schema file
 
 If you want a schema file for the API you can go to [http://localhost:8000/schema/](http://localhost:8000/schema/).
 
-A schema file will be downloaded which can be used for multiple purposes, like sharing API documentation, or to generate code for recreating or testing the API.
+A schema file will be downloaded which can be used for multiple purposes, like sharing API documentation, or to generate
+code for recreating or testing the API.
 
-> 💡 Note: You might encounter some error messages during this process. These errors are typically related to drf-spectacular not being able to parse certain views in views.py. However, the tool will still attempt to generate the documentation, though the results might not be fully comprehensive.
+> [!NOTE]
+> You might encounter some error messages during this process. These errors are typically related to drf-spectacular not
+> being able to parse certain views in views.py. However, the tool will still attempt to generate the documentation,
+> though the results might not be fully comprehensive.

docs/common-errors.md

@@ -1,3 +1,5 @@
+[**← Back: Documentation Overview**](./README.md)
+
 # Common error messages
 
 ## Rule of thumb
@@ -20,4 +22,4 @@ exec /app/entrypoint.sh: no such file or directory
 Cannot connect to the Docker daemon at ../../.../default/docker.sock. Is the docker daemon running?
 ```
 ### Fix:
-Make sure docker desktop is running (Windows) or run `colima start`on Mac.
+Make sure docker desktop is running (Windows) or run `colima start` (or start Docker Desktop) on Mac.

docs/docker-project-specific-commands.md

@@ -1,6 +1,9 @@
-# Useful project spesific Docker actions
-### For frontend actions
-All commands has to be run inside a shell in a container.
+[**← Back: Documentation Overview**](./README.md)
+
+# Useful project specific Docker actions
+
+## Frontend
+All commands have to be run inside a shell in a container.
 ```bash
 docker compose exec frontend bash
 #Command to open the frontend container in a shell
@@ -25,9 +28,11 @@ yarn run tsc:check
 #runs TypeScript Compiler check, like in GitHub Actions pipeline, but in Docker
 ```
 
-## For backend actions:
+---
+
+## Backend
 
-All commands has to be run inside a shell in a container.
+All commands have to be run inside a shell in a container.
 ```bash
 docker compose exec backend bash
 #Command to open container in a shell

docs/editors/emacs.md

@@ -0,0 +1,5 @@
+[**← Back: Getting started**](../introduction.md)
+
+# Emacs setup
+
+This guide hasn't been written yet. Maybe you want to? :-)

docs/editors/jetbrains.md

@@ -0,0 +1,90 @@
+[**← Back: Getting started**](../introduction.md)
+
+# JetBrains setup
+
+This will give some pointers on how to set up your JetBrains IDE (WebStorm/PyCharm). Luckily for you, there's not much
+to be done, since JetBrains IDEs require very little configuration to be productive.
+
+Keep in mind that all the mentioned plugins are just recommended, they're not required to develop on the project. The
+linters and formatters can be run through the terminal, but having them integrated in your IDE does make life a bit
+easier.
+
+Contents:
+
+* [PyCharm](#pycharm)
+    * [Plugins](#plugins)
+    * [Python Interpreter](#python-interpreter)
+* [WebStorm](#webstorm)
+    * [Plugins](#plugins-1)
+    * [Dependencies](#dependencies)
+
+---
+
+## PyCharm
+
+### Plugins
+
+* [IdeaVim](https://plugins.jetbrains.com/plugin/164-ideavim)
+    * The most important one
+    * Add `set relativenumber` to `~/.ideavimrc` to get relative line numbering in your editor!
+        * You can open this file by clicking the "V" logo in the bottom right of your editor then `Open ~/.ideavimrc`
+* [ruff](https://plugins.jetbrains.com/plugin/20574-ruff)
+    * Formatter/linter for Python
+
+### Python Interpreter
+
+Not having the correct interpreter selected in PyCharm can cause the IDE to not understand what Python version the
+project is using, and it'll fail to resolve dependencies, causing a lot of red lines! If you are running the project in
+Docker, you will also need to install dependencies locally, since the IDE doesn't check files inside the Docker
+container.
+
+You can see what interpreter is currently selected in the bottom toolbar:
+
+![Currently selected interpreter](./assets/pycharm_interpreter_bar.png)
+
+To create an interpreter, click the button on the toolbar shown above,
+then `Add new interpreter -> Add Local Interpreter...`.
+
+Select `Samfundet4/backend/.venv` as the location, and select the correct Python version as the Base interpreter. If
+your system's Python version differs from what Samfundet4 expects (3.11 at the time of writing this), then you can
+use [pyenv](https://github.com/pyenv/pyenv) to easily download another version. Then click OK to add it.
+
+![Add interpreter](./assets/pycharm_add_interpreter.png)
+
+After the interpreter has been created and selected, you can then install the dependencies inside the virtual
+environment:
+
+```bash
+~/Samfundet4 » source .venv/bin/activate
+(.venv) ~/Samfundet4 » poetry install
+```
+
+---
+
+## WebStorm
+
+### Plugins
+
+* [IdeaVim](https://plugins.jetbrains.com/plugin/164-ideavim)
+    * The most important one
+    * Add `set relativenumber` to `~/.ideavimrc` to get relative line numbering in your editor!
+        * You can open this file by clicking the "V" logo in the bottom right of your editor then `Open ~/.ideavimrc`
+* [Biome](https://plugins.jetbrains.com/plugin/22761-biome)
+    * Formatter/linter for frontend code.
+    * Below is the recommended configuration (`Settings -> Language & Frameworks -> Biome`). It'll automatically format
+      and apply safe fixes on save (which in the
+      JetBrains world means when you tab/switch windows)
+      ![Biome configuration](./assets/biome_config.png)
+
+### Dependencies
+
+If you are running the project in Docker, you will also need to install dependencies locally, since the IDE doesn't
+check files inside the Docker container.
+
+To do so, ensure you have [node](https://nodejs.org/en) and [yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
+installed. Then simply run yarn to install the dependencies.
+
+```bash
+~/Samfundet4 » cd frontend
+~/Samfundet4/frontend » yarn
+```

docs/editors/vim.md

@@ -0,0 +1,5 @@
+[**← Back: Getting started**](../introduction.md)
+
+# Vim setup
+
+This guide hasn't been written yet. Maybe you want to? :-)

docs/editors/vscode.md

@@ -0,0 +1,5 @@
+[**← Back: Getting started**](../introduction.md)
+
+# VS Code setup
+
+This guide hasn't been written yet. Maybe you want to? :-)

docs/install/git-setup.md

@@ -0,0 +1,41 @@
+[**← Back: Getting started**](../introduction.md)
+
+> [!WARNING]
+> This guide is not complete! Feel free to submit a PR to improve it :-)
+
+# Git setup
+
+Git is a Version Control System (VCS). You're required to set up Git in order to be able to pull and push to the
+Samfundet4 project.
+
+## Creating an SSH key
+
+<details>
+<summary><strong>Windows</strong></summary>
+</details>
+
+<details>
+<summary><strong>Linux/MacOS/WSL</strong></summary>
+
+In your terminal, run `ssh-keygen`
+
+This will generate two files: `~/.ssh/id_rsa` and `~/.ssh/id_rsa.pub`.
+</details>
+
+## Adding it to GitHub
+
+Copy the contents of the `id_rsa.pub` file and go to the [SSH and GPG keys](https://github.com/settings/keys) GitHub
+settings page. Click the green "New SSH key" button, paste the file contents in the big text box, and click "Add SSH
+key".
+
+> [!WARNING]
+> Ensure you copy the right file. `id_rsa` is a private key, never meant to be shared with anyone, unlike `id_rsa.pub`.
+
+## Configuring Git
+
+You can configure Git both locally and globally. Locally meaning your configuration only applies to a specific
+directory (i.e. project), or globally for all directories. Local configuration overrides global configuration.
+
+## Further reading
+
+Want to git gud to become a git god?

docs/install/install-script.md

@@ -0,0 +1,44 @@
+[**← Back: Getting started**](../introduction.md)
+
+> [!WARNING]
+> This script has not been maintained in a while and may not work.
+
+# Install script
+
+We have a script that handles all installation for you. To run the script, a Github Personal Access Token (PAT) is
+required.
+You can make one here https://github.com/settings/tokens/new. Tick scopes `repo`, `read:org` and `admin:public_key`),
+then store the token somewhere safe (Github will never show it again).
+
+Copy these commands (press button on the right-hand side of the block)
+and run from the directory you would clone the project.
+
+```sh
+# Interactive
+read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=y /bin/bash -c "$(curl -fsSL https://$TOKEN@raw.githubusercontent.com/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE;
+```
+
+<details>
+<summary>Non-interactive (show/hide)</summary>
+
+```sh
+# Non-interactive
+read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=n /bin/bash -c "$(curl -fsSL https://$TOKEN@raw.githubusercontent.com/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE;
+```
+
+<!--
+cd ~/my-projects/test; rm -rf Samfundet4; read -s -p "Github PAT token: " TOKEN ; X_INTERACTIVE=y /bin/bash -c "$(curl -fsSL https://[email protected]/Samfundet/Samfundet4/master/{bash_utils.sh,install.sh})" && . ~/.bash_profile && cd Samfundet4; unset TOKEN; unset X_INTERACTIVE;
+ -->
+</details>
+
+<details>
+<summary>Flags explained (show/hide)</summary>
+
+> - X_INTERACTIVE (y/n): determines how many prompts you receive before performing an action.  
+    > curl:
+> - -f: fail fast
+> - -s: silent, no progress-meter
+> - -S: show error on fail
+> - -L: follow redirect
+
+</details>

docs/install/linux-docker.md

@@ -0,0 +1,14 @@
+[**← Back: Getting started**](../introduction.md)
+
+> [!WARNING]
+> This guide is not complete! Feel free to submit a PR to improve it :-)
+
+# Installing on Linux (Docker)
+
+## Post-install
+
+Now that you've got the project up and running, check out the post-install instructions:
+
+<h3 align="right">
+<a href="/docs/install/post-install.md">&rarr; Next: Post-install</a>
+</h3>