Improve getting started section

docs/getting_started/install.md

@@ -9,8 +9,8 @@ In order to download necessary tools and to install nodecg-io using the CLI you
 You'll need the following tools:
 
 -   [Git](https://git-scm.com)
--   [Node.JS](https://nodejs.org/en/) v12.0.0 or newer
--   [Npm](https://www.npmjs.com/get-npm) 7.0.0 or newer
+-   [Node.js](https://nodejs.org/en/) v12.0.0 or newer
+-   [npm](https://www.npmjs.com/get-npm) 7.0.0 or newer
 -   [NodeCG](https://nodecg.dev/) 1.4.0 or newer (1.7.0 or higher recommended)
 
 ### Native Build Tools
@@ -60,7 +60,7 @@ _Note:_ If you are running on Linux, you may need to use `sudo` if your npm inst
 
 ## Install nodecg-io using the nodecg-io CLI
 
-With the nodecg-io CLI installed you can run this command inside a nodecg installation to install nodecg-io:
+With the nodecg-io CLI installed you can run this command inside a NodeCG installation to install nodecg-io:
 
 ```shell
 nodecg-io install
@@ -74,15 +74,20 @@ You will get a prompt which asks you which version you want to install.
 
 For starters, we recommend using the latest non-development version.
 
-nodecg-io will always be installed into a `nodecg-io/` directory inside your nodecg installation so that your bundles and all bundles from nodecg-io are separated. The CLI will add this path to the loaded bundles in your nodecg configuration automatically, you don't need to worry about it.
+nodecg-io will always be installed into a `nodecg-io/` directory inside your NodeCG installation so that your bundles and all bundles from nodecg-io are separated. The CLI will add this path to the loaded bundles in your NodeCG configuration automatically, you don't need to worry about it.
 
 If you want to every change your nodecg-io installation to add/remove a service or change the version, you can always re-run `nodecg-io install`. If a nodecg-io installation is found, its options will be preselected in the prompt. Re-running `nodecg-io install` will also update all packages to the latest patch version, if you have a production installation, and pull the repository and rebuild, if you have a development installation.
 
-## Start nodecg
+## Start NodeCG
 
-When starting nodecg you should see that all nodecg-io related bundles should be loaded and that you can now access nodecg-io in your nodecg dashboard.
+When starting NodeCG you should see that all nodecg-io related bundles should be loaded and that you can now access nodecg-io in your NodeCG dashboard.
 
-Now you can either install an already existing bundle that uses nodecg-io, [create a new bundle](./create_new_bundle.md) or [integrate an existing bundle](./existing_bundle.md).
+There are many example bundles premade for most services, so you may take a
+look at the [“Try an included sample”](../getting_started/try_example_bundle.md)-Guide (It
+will also tell you how to log in and how to use the GUI).
+Or you could directly take a deep dive into our framework and either [create a new bundle](./create_new_bundle.md)
+or [integrate an existing bundle](./existing_bundle.md). There are other bundles
+using nodecg-io, witch you could try, so may take a look around GitHub or GitLab.
 
 ## Uninstall nodecg-io
 
@@ -92,4 +97,4 @@ If you want to uninstall nodecg-io you can run the following command:
 nodecg-io uninstall
 ```
 
-This will remove the `nodecg-io` directory inside your nodecg installation and also will remove it from the loaded bundle paths in your nodecg configuration.
+This will remove the `nodecg-io` directory inside your NodeCG installation and also will remove it from the loaded bundle paths in your NodeCG configuration.

docs/getting_started/try_example_bundle.md

@@ -0,0 +1,156 @@
+# Try an included sample
+
+Trying one of the premade example bundles is a good way to get to know the
+framework and especially the selected service.
+
+## Step 1: Installing the Sample
+
+If you installed **dev** branch or cloned nodecg-io directly from GitHub all the
+samples should be already installed (you can move to step 2). In case you
+installed the **production** branch of nodecg-io, you may have to download the
+sample before you can use it. Installing and uninstalling of sample bundles can be done with the nodecg-io
+CLI. This can be done as follows.
+
+Run this command inside your NodeCG folder:
+
+```shell
+$ nodecg-io install
+Installing nodecg-io...
+```
+
+You will be presented with a pair of options:
+
+<!-- prettier-ignore-start -->
+
+1. You can select the version of nodecg-io to install. **Select the version that is already installed here.** (Since this is not the migration guide)
+    <pre><b><span style="color:#1cdc9a">user@computer</span>:<span    style="color:#3daee9">~/nodecg</span></b>$ nodecg-io install
+   Installing nodecg-io...
+   Detected nodecg installation at /home/user/nodecg.
+   <span style="color:#11d116">?</span> <b>Which version do you want to install?</b>  (Use arrow keys) 
+     development 
+   <span style="color:#1abc9c">❯ 0.1</span></pre>
+2. You can select the sample bundles to be included. **Select the sample(s) you want to try here.**
+   <pre><b><span style="color:#1cdc9a">user@computer</span>:<span style="color:#3daee9">~/nodecg</span></b>$ nodecg-io install
+   Installing nodecg-io...
+   Detected nodecg installation at /home/user/nodecg.
+   <span style="color:#11d116">?</span> <b>Which version do you want to install?</b> <span style="color:#1abc9c">0.1</span>
+   <span style="color:#11d116">?</span> <b>Which services do you want to use?</b> (Press <span style="color:#16a085">&lt;space&gt;</span> to select, <span    style="color:#16a085">&lt;a&gt;</span> to toggle all, <span style="color:#16a085">&lt;i&gt;</span> to invert selection, and <span style="color:#16a085">&lt;enter&gt;</span> to proceed)
+   <span style="color:#1abc9c">❯◯ ahk</span>
+    ◯ android
+    ◯ curseforge
+    ◯ discord
+    ◯ intellij
+    ◯ irc
+    ◯ midi-input
+   (Move up and down to reveal more choices)</pre>
+
+<!-- prettier-ignore-end -->
+
+## Step 2: Run NodeCG
+
+Now you need to start NodeCG. There are a couple of different ways to do this:
+
+### Using VS Code
+
+If you have nodecg-io open in your VS Code instance, you can launch NodeCG using
+the `Run and Debug` Explorer View:
+
+![Run and Debug Explorer View](../assets/run_from_vscode.png)
+
+### Using the terminal
+
+You may also launch NodeCG using your terminal with:
+
+<pre><b><span style="color:#1cdc9a">user@computer</span>:<spanstyle="color:#3daee9">~/nodecg</span></b>$ npm run start
+
+> [email protected] start
+> node index.js
+
+info: [nodecg/lib/server] Starting NodeCG 1.8.1 (Running on Node.js v16.11.1)
+info: [nodecg-io-core] Minzig!
+
+// A whole host of logging output
+
+info: [nodecg/lib/server] NodeCG running on http://localhost:9090</pre>
+
+Now you can open the NodeCG dashboard (by default) under <http://localhost:9090>.
+
+## Step 3: Log in to nodecg-io
+
+Now navigate to the `nodecg-io` tab in the NodeCG dashboard.
+
+If you are logging in for the first time you will have to set your password.
+
+![Log in screen](../assets/log_in_screen.png)
+
+Else you simply have to log in with your previously chosen password.
+
+Now you are looking at the `nodecg-io` config menu. It should look like this:
+
+![`nodcg-io` config menu](../assets/nodcg-io-dashboard.png)
+
+## Step 4: Learning how to use the GUI
+
+The current GUI is just intended to make the project usable, but it is not very
+user-friendly. As a more long term solution, a new GUI will be developed that
+also focuses on user experience. Until the new GUI is developed, you will have
+to arrange yourself with this one. So, to get started:
+
+![`nodcg-io` colour coded](../assets/nodcg-io-colored.png)
+
+### In <span style="color:#b06770">pink</span>: NodeCG Tabs
+
+Here you will find every NodeCG-bundle that has a dashboard. Here you may
+select the [`nodecg-io-debug`](../samples/debug.md)-dashboard, if it is
+installed.
+
+### In <span style="color:#b6b61c">yellow</span>: Monaco editor
+
+It is basically only a text editor which is used to save configurations for
+service instances.
+
+### In <span style="color:#21885c">green</span>: Services section
+
+Here you may create, update and delete instances of a service. Each instance has
+its own name and configuration. The menu will expand depending on the option
+selected in the first dropdown.
+
+_Creating a new service instance_:
+
+This can be accomplished by selecting the item `'New'`. Then a new dropdown will
+be revealed, in witch you may select the service type. Additionally, you must
+select an instance name. Then click `'Create'`. The newly created instance should
+be selected.
+
+_Configure a service instance_:
+
+While a supported service instance is selected, you may change the config in
+monaco, then click `'Save'`.
+
+_Deleting a service instance_:
+
+This can be accomplished by selecting an existing instance. Then click
+`'Delete Instance'`.
+
+### In <span style="color:#69318e">violet</span>: Bundles section
+
+This section has three dropdowns:
+
+1. Bundle: Here you can select a bundle to configure.
+2. Service: If this bundle uses more than one service, you may select the
+   service to set or unset here.
+3. Service Instance: Here you can select one instance of the service type set at
+   2 or `none`.
+
+### In <span style="color:#b71424">red</span>: Unset all Button
+
+This button will set the service instance for every bundle/service combination
+to none, effectively removing the access to every service from all bundles.  
+**Caution**: This can not be undone, and you will have to set up all the bundles
+again. _The service instances will be unaffected._
+
+## Step 5: Configure the sample
+
+The configurations for every sample bundle differ too greatly from each other to be included here,
+so you have to take a look at the documentation for your sample bundle. You will
+find it on the left-hand side of this page in the category `Services`.

docs/samples/ahk.md

@@ -1,25 +1,27 @@
-## Using the AHK sample bundle
+## Using the AutoHotkey sample bundle
 
-The AHK sample bundle in `samples/ahk-sendcommand` shows how to send a command to a HotkeylessAHK server.
+The AutoHotkey sample bundle in `samples/ahk-sendcommand` shows how to send a
+command to a HotkeylessAHK server.
 
 ### Prerequisites
 
--   Working NodeCG & nodecg-io installation
--   A running [HotkeylessAHK](https://github.com/sebinside/HotkeylessAHK) setup.
-
-### Configure the ahk sample bundle
-
-1. Start nodecg with nodecg-io installed. The ahk bundle is currently part of it, so it should also be loaded.
+You will need a working `nodecg-io` installation. If you have non yet take a
+look at [installation guide](../getting_started/install.md). You may need to
+install this bundle, so take a look at the
+[“Try an included sample”](../getting_started/try_example_bundle.md)-Guide. It
+will also tell you how to log in and how to use the GUI.
 
-2. Go to the `nodecg-io` tab in the nodecg dashboard.
+**You also need:**
 
-3. Login using your password. If this is your first run, then enter the password with which you want to encrypt your configurations and credentials.
-
-4. Create a new ahk service instance using the left upper menu.
+-   A running [HotkeylessAHK](https://github.com/sebinside/HotkeylessAHK) setup.
 
-5. Enter the host and port of the HotkeylessAHK Server.
+### Configure the AutoHotkey sample bundle
 
-    The created instance should be automatically selected, if not select it in the upper left menu. Enter your host and port in monaco (the text-editor on the right) in this format:
+1. In NodeCG, create a new ahk service instance using the left upper menu.
+2. Enter the host and port of the HotkeylessAHK Server.  
+   The created instance should be automatically selected, if not select it in
+   the upper left menu. Enter your host and port in monaco (the text-editor on
+   the right) in this format:
 
     ```json
     {
@@ -30,6 +32,6 @@ The AHK sample bundle in `samples/ahk-sendcommand` shows how to send a command t
 
     After entering it, click save.
 
-6. Set the created ahk service instance to the service dependency of the ahk bundle.
-
-7. A small window with the text “Hello World” should have popped up.
+3. Set the created ahk service instance to the service dependency of the ahk
+   bundle.
+4. A small window with the text “Hello World” should have popped up.

docs/samples/android.md

@@ -1,51 +1,59 @@
 ## Using the Android sample bundle
 
-The Android example bundle in `samples/android` shows how to connect to an android device and turn on WLAN.
-
-1. Clone [this](https://github.com/noeppi-noeppi/nodecg-io-android) Git Repository
-
-2. Run `gradlew build` (on Windows) or `./gradlew build` (on Linux) inside the cloned repository.
-
-3. There will be an apk file generated in `app/build/outputs/apk/debug/app-debug.apk`. Install it on the device.
-
-4. Launch the app. You'll be asked to grant the system alert window permission. This is required because the app will do its work in the background. However, occasionally when user interaction is required, it needs to launch an activity without the user pressing the app icon in the launcher.
-
-5. Install the android developer tools and make sure you have the `adb` command in your `PATH`
-
-6. Enable developer options on you device and enable USB debugging there. See [here](https://developer.android.com/studio/debug/dev-options).
-
+The Android example bundle in `samples/android` shows how to connect to an
+Android device and turn on WLAN.
+
+### Prerequisites
+
+You will need a working `nodecg-io` installation. If you have non yet take a
+look at [installation guide](../getting_started/install.md). You may need to
+install this bundle, so take a look at the
+[“Try an included sample”](../getting_started/try_example_bundle.md)-Guide. It
+will also tell you how to log in and how to use the GUI.
+
+**You also need:**
+
+1. Clone [this](https://github.com/noeppi-noeppi/nodecg-io-android) Git
+   Repository
+2. Run `gradlew build` (on Windows) or `./gradlew build` (on Linux) inside the
+   cloned repository.
+3. There will be an apk file generated in
+   `app/build/outputs/apk/debug/app-debug.apk`. Install it on the Android
+   device.
+4. Launch the app. You'll be asked to grant the system alert window permission.
+   This is required because the app will do its work in the background. However,
+   occasionally when user interaction is required, it needs to launch an
+   activity without the user pressing the app icon in the launcher.
+5. Install the android developer tools and make sure you have the `adb` command
+   in your `PATH`
+6. Enable developer options on you device and enable USB debugging there. See
+   [here](https://developer.android.com/studio/debug/dev-options).
 7. Run `adb start-server`
-
-8. Connect your device via USB. You'll be prompted whether you want to allow USB debugging. Press `Allow`.
-
+8. Connect your device via USB. You'll be prompted whether you want to allow USB
+   debugging. Press `Allow`.
 9. Run `adb device -l`. The output might look like this:
 
-    ```
+    ```log
     ########               device usb:2-1.7 product:######## model:######## device:######## transport_id:2
     ```
 
-    The hexadecimal number in the first column is your device ID. You'll need this later.
-
-10. Start nodecg with nodecg-io installed. The bundle is currently part of it, so it should also be loaded.
-
-11. Go to the `nodecg-io` tab in the nodecg dashboard.
-
-12. Login using your password. If this is your first run, then enter the password with which you want to encrypt your configurations and credentials.
+    The hexadecimal number in the first column is your device ID. You'll need
+    this later.
 
-13. Create a new android service instance using the left upper menu.
+10. In NodeCG, create a new android service instance using the left upper menu.
+11. Enter the following:
 
-14. Enter the following
-
-    ```
+    ```json
     {
         "device": "device_id"
     }
     ```
 
     Replace `device_id` with your device ID.
 
-15. Set the created android service instance to the service dependency of the android sample bundle.
-
-    Select the android bundle and the android service in the left bottom menu and then select the service instance that should be used by the android sample bundle (in this case the name of the previously created android instance).
-
-16. You should see that WLAN is now activated on your device.
+12. Set the created android service instance to the service dependency of the
+    android sample bundle.  
+    Select the android bundle and the android service in the left bottom menu.
+    Then select the service instance that should be used by the android sample
+    bundle (in this case the name of the previously created android instance).
+13. You should see that WLAN is now activated on your device.