Update all the pages

docs/index.md

@@ -1,3 +1,11 @@
-# Hello World
+<!-- ---
+hide:
+  - navigation
+  - toc
+--- -->
 
-Give me a sec to get this up and running 😄
+# About
+
+This plugin adds new designed stream overlays to RotorHazard, which can be used in OBS (Open Broadcaster Software). A showcase of all overlays can be [found here](./stream_overlays/).
+
+Do you have any wishes for a new overlay? Then leave your ideas, sketches or mood board in the [discussions tab](https://github.com/dutchdronesquad/rh-stream-overlays/discussions) and maybe, we can develop it into something beautiful 😍

docs/installation/development.md

@@ -0,0 +1 @@
+# Development environment

docs/installation/index.md

@@ -0,0 +1,23 @@
+# Installation
+
+Follow the steps below to install the Stream Overlays plugin for RotorHazard.
+
+## RotorHazard
+
+1. Install the **Stream Overlays** RotorHazard plugin, by running the following command in your terminal at the device where RotorHazard is installed:
+
+``` bash
+sh -c "$(curl -fsSL https://short.dutchdronesquad.nl/install-overlays-plugin)"
+```
+
+!!! note
+    This script automates the installation or update of the "Stream Overlays" plugin for RotorHazard. It fetches the latest stable release or development version from GitHub based on user choice, handles downloads, extracts files, and ensures cleanup of temporary data, simplifying the plugin installation process.
+
+2. Choose for **stable** or **development** version and press enter.
+3. When the installation is finished, restart RotorHazard.
+
+## Streams page
+
+After installing the plugin, you can find the overlays on the **Stream Displays** page in RotorHazard. The plugin will automatically create panels for each overlay, so you can easily find the URLs.
+
+![alt text](../assets/img/stream_overlays-page.png)

docs/installation/obs_setup.md

@@ -0,0 +1,7 @@
+# OBS Setup
+
+1. Add a new source to your scene, with the `+` button
+2. Select `Browser` as source type
+3. Enter the URL of the overlay you want to use (see the [showcase](./stream_overlays/) for the URL's)
+4. Set the width and height to the resolution of your stream (e.g. 1280 x 720)
+5. Click `OK` to add the overlay to your scene

docs/overlays/dds.md

@@ -0,0 +1,70 @@
+---
+title: DDS
+description: Dutch Drone Squad overlay for RotorHazard
+---
+
+# Dutch Drone Squad
+
+This overlay is designed by the <a href="https://dutchdronesquad.nl" target="_blank">Dutch Drone Squad</a> and consists of a top bar, node overlay and leaderboards for class and overall.
+
+## Topbar
+
+The title in the top bar consists of a heat name and event name which dynamically adapts to what is set in RotorHazard.
+
+URL to use:
+
+```bash
+RH-IP:5000/stream/overlay/dds/topbar
+```
+
+![alt Screenshot of topbar](../assets/img/overlays/dds/topbar-dds.png)
+
+## Node
+
+The node overlay shows the pilot name, lap time, total time and lap number. The color of the node changes based on what is set in RotorHazard for each pilot. Replace `[NUMBER]` with the node id you want to show.
+
+URL to use:
+
+```bash
+RH-IP:5000/stream/overlay/dds/node/[NUMBER]
+```
+
+[![Watch the video](../assets/img/overlays/dds/node-dds.png)](https://www.youtube.com/watch?v=ZpV0veJErvE)
+_Click on the image to watch a video of the overlay in action_
+
+## Leaderboard 
+
+### Class Ranking
+
+The leaderboard class overlay displays the rankings of pilots within a specific class, including some race data. Pilots are presented in groups of eight, with a new set of pilots shown every 10 seconds.
+
+The table adapts to the type of race format: **standard**, **fastest lap** or (top 3) **consecutive**. Replace `[CLASS ID]` with the class id you want to show or use `0` for the current class.
+
+!!! warning
+    Currently you only see data if you use **Ranking: From Race Format**
+
+URL to use:
+
+```bash
+RH-IP:5000/stream/overlay/dds/leaderboard/[CLASS ID]/class
+```
+
+
+[![Watch the video](../assets/img/overlays/dds/ranking_class-dds.png)](https://youtu.be/xqIuBfLjtJE)
+_Click on the image to watch a video of the overlay in action_
+
+### Overall Ranking
+
+The leaderboard overall overlay displays the overall rankings of up to 32 pilots. Replace `[CLASS ID]` with the class id you want to show or use `0` for the current class.
+
+!!! warning
+    Currently you only see data if you use **Ranking: From Race Format**
+
+URL to use:
+
+```bash
+RH-IP:5000/stream/overlay/dds/leaderboard/[CLASS ID]/overall
+```
+
+[![Watch the video](../assets/img/overlays/dds/ranking_overall-dds.png)](https://youtu.be/kTtoHACqsg0)
+_Click on the image to watch a video of the overlay in action_

docs/overlays/index.md

@@ -0,0 +1,11 @@
+# Overview
+
+Here you will find an overview of all available overlays. The plugin will automatically create panels for each overlay on the stream page in RotorHazard, so you can easily find the urls to use.
+
+Links to the overlays:
+
+- [Dutch Drone Squad](./dds.md)
+- [Liga Colombiana Drone Racing](./lcdr.md)
+
+!!! tip "Did you know?"
+    The stream overlays plugin also generates overlay URLs on the **Stream Displays** page in Rotorhazard, making it even easier to get the right URL for your overlay and use it in OBS 😉

docs/overlays/lcdr.md

@@ -0,0 +1,33 @@
+---
+title: LCDR
+description: Liga Colombiana Drone Racing overlay for RotorHazard
+---
+
+# Liga Colombiana Drone Racing
+
+This overlay is designed by the <a href="https://ligacolombianadroneracing.com" target="_blank">Liga Colombiana Drone Racing</a> and consists of a top bar and a node overlay.
+
+## Topbar
+
+The title in the top bar consists of a heat name that changes dynamically and the organization name of LCDR (static).
+
+URL to use:
+
+```bash
+RH-IP:5000/stream/overlay/lcdr/topbar
+```
+
+![alt Screenshot of topbar](../assets/img/overlays/lcdr/topbar-lcdr.png)
+
+## Node
+
+The node overlay shows the pilot name, lap time, total time and lap number. The color of the node changes based on what is set in RotorHazard for each pilot. Replace `[NUMBER]` with the node id you want to show.
+
+URL to use:
+
+```bash
+RH-IP:5000/stream/overlay/lcdr/node/[NUMBER]
+```
+
+[![Watch the video](../assets/img/overlays/lcdr/node-lcdr.png)](https://www.youtube.com/watch?v=i46IejMjN_Q)
+_Click on the image to watch a video of the overlay in action_

mkdocs.yml

@@ -18,7 +18,7 @@ edit_uri: edit/main/docs/
 theme:
   name: material
   icon:
-    logo: fontawesome/solid/display
+    logo: fontawesome/solid/clapperboard
   palette:
     # Palette toggle for light mode
     - scheme: default
@@ -38,12 +38,18 @@ theme:
   features:
     - content.action.edit
     - content.action.view
+    - content.code.annotate
+    - content.code.copy
     - navigation.footer
     - navigation.indexes
+    - navigation.path
+    - navigation.sections
     - navigation.tabs
     - navigation.top
     - navigation.tracking
+    - toc.follow
     # - toc.integrate
+
 nav:
   - Home: index.md
 plugins:
@@ -53,25 +59,34 @@ plugins:
 
 nav:
   - Home: index.md
-  - Getting Started:
-      - Installation: getting-started.md
-  - Showcase: showcase.md
+  - Getting started:
+      - Installation: installation/index.md
+      - OBS setup: installation/obs_setup.md
+  - Overlays:
+    - overlays/index.md
+    - overlays/dds.md
+    - overlays/lcdr.md
   - Blog:
       - blog/index.md
 
 # Markdown extensions
 markdown_extensions:
-  - pymdownx.highlight:
-      anchor_linenums: true
+  - attr_list
+  - md_in_html
+  - admonition
   - pymdownx.inlinehilite
   - pymdownx.snippets
-  - admonition
+  - pymdownx.highlight:
+      anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
+  - pymdownx.superfences
   - pymdownx.arithmatex:
       generic: true
   - pymdownx.details
-  - pymdownx.superfences
   - pymdownx.mark
-  - attr_list
+  - toc:
+      permalink: true
 
 # Extra
 extra: