Add documentation site (#26)

* Basic mkdocs website with github action deploy

* Change workflow name

* Add new files and update mkdocs.yml configuration

* Move assets to docs folder

* Update all the pages

* Update Stream Overlays plugin documentation and assets

* Update mkdocs.yml configuration and assets

* Remove overlays readme and remove parts of repo readme

* Rearange and add CTA for new ideas

* Add first blog post for v1.1.0 release

* Deploy only on release or dispatch

* Apply suggestions from code review

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Small changes based on PR review

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

.github/workflows/deploy.yaml

@@ -0,0 +1,67 @@
+---
+# This workflow will build and deploy the documentation to GitHub Pages
+name: Deployment
+
+# yamllint disable-line rule:truthy
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Release version
+        required: true
+        type: string
+  release:
+    types: [published]
+
+env:
+  DEFAULT_PYTHON: "3.11"
+
+jobs:
+  build-docs:
+    name: Build documentation
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⤵️ Check out code from GitHub
+        uses: actions/[email protected]
+      - name: 🏗 Set up Poetry
+        run: pipx install poetry
+      - name: 🏗 Set up Python ${{ env.DEFAULT_PYTHON }}
+        id: python
+        uses: actions/[email protected]
+        with:
+          python-version: ${{ env.DEFAULT_PYTHON }}
+          cache: "poetry"
+      - name: 🏗 Install workflow dependencies
+        run: |
+          poetry config virtualenvs.create true
+          poetry config virtualenvs.in-project true
+      - name: 🏗 Install dependencies
+        run: poetry install --no-interaction
+      - name: 🏗 Deploy new version with Mike
+        run: |
+          VERSION=${{ github.event.release.tag_name || github.event.inputs.version }}
+          VERSION=${VERSION#v}  # Verwijder de 'v' prefix
+          MINOR_VERSION=$(echo $VERSION | awk -F. '{print $1 ".x"}')
+          poetry run mike deploy --push --update-aliases latest $VERSION
+          poetry run mike alias --push latest $MINOR_VERSION
+      - name: ⬆️ Upload pages artifacts
+        uses: actions/[email protected]
+        with:
+          path: site
+
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    needs: build-docs
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: 🏗️ Setup Github Pages
+        uses: actions/[email protected]
+      - name: 🚀 Deploy to Github Pages
+        uses: actions/[email protected]
+        id: deployment

.gitignore

@@ -1,2 +1,7 @@
 # Folders to ignore
-__pycache__
+__pycache__
+.cache
+site
+
+# Files to ignore
+.python-version

README.md

@@ -8,58 +8,19 @@
 
 ## 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/).
+This plugin adds new designed stream overlays to RotorHazard, which can be used in [OBS](https://obsproject.com) (Open Broadcaster Software). A showcase of all overlays can be [found here](https://overlays.dutchdronesquad.nl/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 😍
 
-### Installation
+## Documentation
 
-#### RotorHazard
-
-1. Install the Stream Overlays RotorHazard plugin, by running the following command in your terminal:
-
-```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. Restart RotorHazard
-
-#### OBS (Open Broadcaster Software)
-
-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
-
-### Development environment
-
-If you would like to contribute to the project, you need a working [development environment][rh-dev] from RotorHazard. After setting up the development environment, you can follow the steps below to start developing the stream overlays.
-
-1. **Fork** and **Clone** the repository to your local machine
-2. Create a [symlink] from the `stream_overlays` folder to the RotorHazard `plugin` folder
-
-```bash
-ln -s ~/rh-stream-overlays/stream_overlays/ ~/RotorHazard/src/server/plugins/stream_overlays
-```
-
-3. Start or restart RotorHazard
-4. You can now start developing 😄
-
-_Are you not a coder? But would you like to share ideas for new features? Then join the [discussions] and we will work out some sketches together._
+The full documentation can be found at [overlays.dutchdronesquad.nl](https://overlays.dutchdronesquad.nl). Where you can find all the information about the overlays, how to install them and how to use them in OBS.
 
 ## License
 
 Distributed under the **MIT** License. See [`LICENSE`](LICENSE) for more information.
 
 <!-- LINKS -->
-[rh-dev]: https://github.com/RotorHazard/RotorHazard/blob/main/doc/Development.md
-[symlink]: https://linuxize.com/post/how-to-create-symbolic-links-in-linux-using-the-ln-command
-[discussions]: https://github.com/dutchdronesquad/rh-stream-overlays/discussions
-
 [license-shield]: https://img.shields.io/github/license/dutchdronesquad/rh-stream-overlays.svg
 [maintenance-shield]: https://img.shields.io/maintenance/yes/2024.svg
 [project-stage-shield]: https://img.shields.io/badge/project%20stage-experimental-yellow.svg

docs/blog/.authors.yml

@@ -0,0 +1,6 @@
+authors:
+  klaas:
+    name: Klaas Schoute
+    description: Creator
+    avatar: https://github.com/klaasnicolaas.png
+    url: https://github.com/klaasnicolaas

docs/blog/index.md

@@ -0,0 +1,2 @@
+# Blog
+

docs/blog/posts/release-v1.1.0.md

@@ -0,0 +1,51 @@
+---
+title: Release v1.1.0
+description: >
+  Release notes for v1.1.0
+authors: [klaas]
+date: 2024-07-21
+categories:
+  - Release
+---
+
+I'm happy to announce the release of v1.1.0 of the Stream Overlays! This release includes a lot of new features and a new documentation site. In this blog post, I will highlight the most important changes.
+
+<!-- more -->
+
+## Documentation site
+
+The Stream Overlays plugin now has a dedicated documentation site. This site contains all the information you need to get started with the RotorHazard plugin, including installation instructions, configuration options, and an overview of all available overlays.
+
+## Overlay for leaderboard rankings
+
+!!! note "Experimental feature"
+    The leaderboard overlays are still experimental and may not work as expected. If you encounter any issues, please report them in the [issue tracker][issues].
+
+The [Dutch Drone Squad](../../overlays/dds.md) theme now includes overlays for the leaderboard. This allows you to show the current ranking of the pilots for the current class in your stream. The leaderboard is updated in real-time and shows different data depending on the race format.
+
+![alt leaderboard](../../assets/img/overlays/dds/ranking_class-dds.png){ style="border-radius: 5px;" }
+
+## Panels on Stream Displays page
+
+The plugin now generates panels on the Stream Displays page in RotorHazard. These panels contain the overlay URLs for each overlay, making it easier to get the right link for your stream.
+
+![alt stream displays](../../assets/img/stream_overlays-page.png){ style="border-radius: 5px;" }
+
+## Install script
+
+The installation script has been updated to support **development** and **release** versions of the plugin. You can run the script with the following command:
+
+```bash
+sh -c "$(curl -fsSL https://short.dutchdronesquad.nl/install-overlays-plugin)"
+```
+
+---
+
+I hope you enjoy this release! If you have any questions or feedback, feel free to reach out to me on Discord (misternicolaz) or [GitHub](https://github.com/klaasnicolaas).
+
+Happy flying! 🚀
+
+./Klaas
+
+<!-- Links -->
+[issues]: https://github.com/dutchdronesquad/rh-stream-overlays/issues

docs/index.md

@@ -0,0 +1,28 @@
+---
+title: Stream Overlays
+description: About the Stream Overlays plugin for RotorHazard
+---
+
+# Stream Overlays plugin for RotorHazard
+
+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](overlays/index.md).
+
+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 😍
+
+![Stream Overlays](./assets/img/obs_overlay-demo.png){ style="width: 100%; border-radius: 5px;" }
+
+## Overview
+
+- [Installation](installation/index.md): How to install the plugin
+- [Overlays](overlays/index.md): Showcase of all available overlays
+- [Blog](blog/index.md): Blog posts about the plugin
+
+## Key features
+
+- **Responsive**: The overlays are designed to be responsive on all screen sizes
+- **Easy to use**: Just add the URL to your OBS and you're ready to go
+- **Open source**: The plugin is open source and can be modified to your needs
+
+## Get Started
+
+Ready to dive in? Check out our [Installation](./installation/index.md) guide or jump right into the [Overlays](./overlays/index.md) showcase.

docs/installation/development.md

@@ -0,0 +1,46 @@
+---
+title: Development
+description: Development instructions for the Stream Overlays plugin for RotorHazard.
+---
+
+# Development environment
+
+If you would like to contribute to the project, you need a working [development environment][rh-dev] from RotorHazard. After setting up the development environment, you can follow the steps below to start developing the stream overlays.
+
+Are you not a coder? But would you like to share ideas for new features? Then join the [discussions] and we will work out some sketches together.
+
+## Plugin code
+
+1. **Fork** and **Clone** the repository to your local machine
+2. Create a [symlink] from the `stream_overlays` folder to the RotorHazard `plugin` folder
+```bash
+ln -s ~/rh-stream-overlays/stream_overlays/ ~/RotorHazard/src/server/plugins/stream_overlays
+```
+
+3. Start or restart RotorHazard
+4. You can now start developing 😄
+
+## Documentation
+
+Make sure you have installed [Poetry](https://python-poetry.org/docs/#installation) to manage the dependencies of the project.
+
+1. **Fork** and **Clone** the repository to your local machine
+2. Run the following commands to install the dependencies
+```bash
+poetry install
+```
+
+3. Start the documentation server
+```bash
+poetry run mkdocs serve
+```
+
+4. Open the application in your browser
+```bash
+http://localhost:8000
+```
+
+<!-- LINKS -->
+[rh-dev]: https://github.com/RotorHazard/RotorHazard/blob/main/doc/Development.md
+[symlink]: https://linuxize.com/post/how-to-create-symbolic-links-in-linux-using-the-ln-command
+[discussions]: https://github.com/dutchdronesquad/rh-stream-overlays/discussions

docs/installation/index.md

@@ -0,0 +1,27 @@
+---
+title: Installation
+description: Installation instructions for the Stream Overlays plugin for RotorHazard.
+---
+
+# 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)"
+```
+
+2. Choose for **stable** or **development** version and press enter.
+3. When the installation is finished, restart RotorHazard.
+
+!!! 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.
+
+## Stream displays
+
+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 stream displays](../assets/img/stream_overlays-page.png){ style="border-radius: 5px;" }

docs/installation/obs_setup.md

@@ -0,0 +1,18 @@
+---
+title: OBS Setup
+description: How to use the overlays in OBS
+---
+
+# OBS Setup
+
+To use the overlays in OBS, you need to add a new source to your scene. This source will be a **Browser** source, which will display the overlay in your stream.
+
+1. Add a new source to your scene, with the **+** button
+    ![IMAGE](../assets/img/obs_add-source.png){ style="border-radius: 5px;" }
+2. Select **Browser** as source type
+3. Give the source a name (e.g. `Node 1 - Overlay`)
+4. Enter the URL of the overlay you want to use (see the [showcase](../overlays/index.md) for the URL's)
+5. Set the width and height to the resolution of your stream (e.g. 1280 x 720). 
+6. Keep the Custom CSS as it is, this will remove the grey background of the overlay
+    ![IMAGE](../assets/img/obs_settings-source.png){ style="border-radius: 5px;" }
+7. Select **OK** to add the overlay to your scene