docs: fix build, re-skin and improve

docs/Configuration.md

@@ -6,14 +6,14 @@ create a blank file in `~/klipper_config/KlipperScreen.conf`, if the file alread
 Write in the file only the options that need to be changed, and restart KlipperScreen.
 
 ## Include files
-```
+```py
 [include conf.d/*.conf]
 # Include another configuration file. Wildcards (*) will expand to match anything.
 ```
 
 
 ## Main Options
-```
+```py
 [main]
 # Invert axis in move panel. Default is False. Change to true to invert
 invert_x: False
@@ -48,7 +48,7 @@ use_default_menu: True
 
 ## Printer Options
 Multiple printers can be defined
-```
+```py
 # Define printer and name. Name is anything after the first printer word
 [printer Ender 3 Pro]
 # Define the moonraker host/port if different from 127.0.0.1 and 7125
@@ -92,7 +92,7 @@ use_dpms: True
 ```
 
 ## Preheat Options
-```
+```py
 [preheat my_temp_setting]
 # Temperature for the heated bed
 bed: 40
@@ -109,13 +109,13 @@ gcode: MY_HEATSOAK_MACRO
 There is a special preheat setting named cooldown to do additional things when the _cooldown_ button is pressed
 for example:
 
-```
+```py
 [preheat cooldown]
 gcode: M107
 ```
 
 ## Bed Screws
-```
+```py
 [bed_screws]
 # Rotation is useful if the screen is not directly in front of the machine.
 # Valid values are 0 90 180 270
@@ -129,7 +129,7 @@ button press. There are two menus available in KlipperScreen, __main and __print
 printer is idle. The __print menu is accessible from the printing status page.
 
 A menu item is configured as follows:
-```
+```py
 [menu __main my_menu_item]
 # To build a sub-menu of this menu item, you would next use [menu __main my_menu_item sub_menu_item]
 name: Item Name
@@ -148,7 +148,7 @@ enable: {{ printer.power_devices.count > 0 }}
 Available panels are listed here: [docs/panels.md](Panels.md)
 
 Certain variables are available for conditional testing of the enable statement:
-```
+```py
 printer.bltouch # Available if bltouch section defined in config
 printer.gcode_macros.count # Number of gcode macros
 printer.idle_timeout # Idle timeout section
@@ -159,7 +159,7 @@ printer.power_devices.count # Number of power devices configured in Moonraker
 
 
 A sample configuration of a main menu would be as follows:
-```
+```py
 [menu __main homing]
 name: Homing
 icon: home

docs/Contact.md

@@ -8,6 +8,4 @@ You may submit a GitHub issue request for any problems you are having.
 
 ## Klipper Community Discord
 
-The invite link: https://discord.klipper3d.org/
+[Look for the channel `#klipper-screen`](https://discord.klipper3d.org/)
-
-Look for the channel `#klipper-screen`

docs/Hardware.md

@@ -17,21 +17,23 @@ There are no recommended screens, but the minimum supported resolution is 480x32
 
 * [More known hardware in the klipper discourse](https://klipper.discourse.group/t/hardware-known-to-work-with-klipperscreen/35)
 
-#### Configuration
+### Configuration
 
 Follow the manufacturer instructions on how to install your screen. In general if you see a white screen, then it's not properly installed, ensure that you at least see a console, Then ![install](Installation.md) KlipperScreen, if you are having troubles refer to the ![troubleshooting page](Troubleshooting.md) for further information.
 
 
-#### Touchscreen touch rotation
+## Touchscreen touch rotation
 If your touchscreen isn't registering touches properly after the screen has been rotated, you will need to apply a
 transformation matrix.
 
-First you will need your device name.
+First you will need your device name, on a terminal run:
 
-Run: `DISPLAY=:0 xinput`
+```sh
-
+DISPLAY=:0 xinput
-Output
 ```
+
+Output:
+```sh
 ⎡ Virtual core pointer                          id=2    [master pointer  (3)]
 ⎜   ↳ Virtual core XTEST pointer                id=4    [slave  pointer  (2)]
 ⎜   ↳ ADS7846 Touchscreen                       id=6    [slave  pointer  (2)]
@@ -42,7 +44,9 @@ In this case the device is the ADS7846 Touchscreen, yours may be different
 
 You can test a change by running:
 
-`DISPLAY=:0 xinput set-prop "<device name>" 'Coordinate Transformation Matrix' <matrix>`
+```sh
+DISPLAY=:0 xinput set-prop "<device name>" 'Coordinate Transformation Matrix' <matrix>
+```
 
 Where the matrix can be one of the following options:
 
@@ -55,11 +59,13 @@ Where the matrix can be one of the following options:
 
 For example:
 
-`DISPLAY=:0 xinput set-prop "ADS7846 Touchscreen" 'Coordinate Transformation Matrix' -1 0 1 0 -1 1 0 0 1`
+```sh
+DISPLAY=:0 xinput set-prop "ADS7846 Touchscreen" 'Coordinate Transformation Matrix' -1 0 1 0 -1 1 0 0 1
+```
 
 To make this permanent, modify the file `/etc/udev/rules.d/51-touchscreen.rules` and add following line:
 
-```
+```sh
 ACTION=="add", ATTRS{name}=="<device name>", ENV{LIBINPUT_CALIBRATION_MATRIX}="<matrix>"
 ```
 More info about input transformation can be found in:

docs/Installation.md

@@ -1,27 +1,26 @@
 # Installation
 
-#### First steps
+## First steps
 
 Install the screen, following the instructions provided by the manufacturer, Some screens don't neeed extra software but some need to be installed with a script.
 It's strongly recommended to test it and ensure your hardware is working with Raspbian, Ubuntu or any distro you like.
 Once you stablished that the screen is working, then proceed installing KlipperScreen.
 
-#### Setup Raspberry Pi
+## Setup Raspberry Pi
 This install process is meant for Raspbian non-desktop version aka Raspbian Lite, but it works on other versions.
 
 If you want to use it on Raspbian desktop (GUI version), then use `sudo raspi-config` to set boot to console by choosing the following options in order:
 
-```
+```sh
 1System Options
 └──S5 Boot / Auto Login
    └──B1 Console
 ```
 
-Note: Other distros will be different on how to boot to console.
+!!! note
+    Other distros will be different on how to boot to console.
 
-### Auto install
+## Auto install
-
-#### Installing KlipperScreen with KIAUH
 
 [KIAUH](https://github.com/th33xitus/kiauh) is a tool that helps you install or upgrade Klipper, Moonraker, Mainsail, and other extensions.
 
@@ -30,29 +29,43 @@ Note: Other distros will be different on how to boot to console.
 You can visit [KIAUH on GitHub](https://github.com/th33xitus/kiauh) to learn more and view its documentation.
 
 
-### Manual Install
+## Manual Install
 
-#### Klipper and Moonraker Installation
+First install [Klipper](https://www.klipper3d.org/Installation.html) and [Moonraker](https://moonraker.readthedocs.io/en/latest/installation/).
 
-Follow the instructions to install Klipper and Moonraker.
+### KlipperScreen Installation
+Execute the following commands:
 
-* klipper: https://www.klipper3d.org/Installation.html
+```sh
-* moonraker: https://moonraker.readthedocs.io/en/latest/installation/
+cd ~/
+git clone https://github.com/jordanruthe/KlipperScreen.git
+cd ~/KlipperScreen
+./scripts/KlipperScreen-install.sh
+```
 
-#### Moonraker configuration
+This script will install packages that are listed under manual install, create a python virtual environment at
+`~/.KlipperScreen-env` and install a systemd service file.
+
+If you need a custom location for the configuration file, you can add -c or --configfile to the systemd file and specify
+the location of your configuration file.
+
+At this point KlipperScreen should be working, if it doesn't start then go to the [troubleshooting page](Troubleshooting.md)
+
+## Moonraker configuration
 
 In moonraker.conf ensure that 127.0.0.1 is a trusted client:
 
-```
+```py
 [authorization]
 trusted_clients:
   127.0.0.1
 ```
-Note: `force_logins: true` requires the moonraker api key in [KlipperScreen.conf](Configuration.md)
+!!! warning
+    `force_logins: true` requires the moonraker api key in [KlipperScreen.conf](Configuration.md)
 
 If you wish to use the update manager feature of moonraker for KlipperScreen, add the following block to the moonraker.conf:
 
-```
+```py
 [update_manager KlipperScreen]
 type: git_repo
 path: ~/KlipperScreen
@@ -61,22 +74,5 @@ env: ~/.KlipperScreen-env/bin/python
 requirements: scripts/KlipperScreen-requirements.txt
 install_script: scripts/KlipperScreen-install.sh
 ```
-Note: you may receive warnings in other UIs since KlipperScreen is not installed yet, you can safely ignore them at this point.
+!!! note
-
+    If you see warnings in other UIs ignore them until KlipperScreen finishes installing.
-#### KlipperScreen Installation
-Execute the following commands:
-
-```
-cd ~/
-git clone https://github.com/jordanruthe/KlipperScreen.git
-cd ~/KlipperScreen
-./scripts/KlipperScreen-install.sh
-```
-
-This script will install packages that are listed under manual install, create a python virtual environment at
-~/.KlipperScreen-env and install a systemd service file.
-
-If you need a custom location for the configuration file, you can add -c or --configfile to the systemd file and specify
-the location of your configuration file.
-
-At this point KlipperScreen should be working, if it doesn't start then go to the [troubleshooting page](Troubleshooting.md)

docs/Panels.md

@@ -4,11 +4,15 @@
 ![Main Menu](img/panels/main_panel.png)
 
 ### Job Status
+```py
+panel: job_status
+```
 ![Job Status](img/panels/job_status.png)
 
 ### Bed Level
-type: bed_level
+```py
-
+panel: bed_level
+```
 ![Bed Level](img/panels/bed_level.png)
 
 The bed level panel has the ability to have preset locations from Klipper. Please see documentation on the following
@@ -24,76 +28,88 @@ for _Screws Calibrate_ will appear. This button runs the SCREWS_TILT_CALCULATE c
 panel.
 
 ### Bed Mesh
-type: bed_mesh theme:material-dark
+```py
-
+panel: bed_mesh
+```
 ![Bed Mesh](img/panels/bed_mesh.png)
 
 ### Extrude
-type: extrude theme:material-dark
+```py
-
+panel: extrude theme:material-dark
+```
 ![Extrude](img/panels/extrude.png)
 
 ### Fan
-type: fan
+```py
-
+panel: fan
+```
 ![Fan](img/panels/fan.png)
 
 ### Fine Tune
-type: fine_tune theme:custom
+```py
-
+panel: fine_tune
+```
 ![Fine Tune Panel](img/panels/fine_tune.png)
 
 ### Gcode Macros
-type: gcode_macros theme: material-darker
+```py
-
+panel: gcode_macros
+```
 ![Gcode Macros Panel](img/panels/gcode_macros.png)
 
 ### Menu
-type: menu
-
 ![Menu Panel](img/panels/menu.png)
 
 ### Move
-type: move
+```py
-
+panel: move
+```
 ![Move Panel](img/panels/move.png)
 
 ### Network
-type: network
+```py
-
+panel: network
+```
 ![Network Panel](img/panels/network.png)
 
 ### Power
-type: power
+```py
-
+panel: power
+```
 ![Power](img/panels/power.png)
 
 ### Print
-type: print
+```py
-
+panel: print
+```
 ![Print Panel](img/panels/print.png)
 
 ### Settings
-type: settings theme:colorized
+```py
-
+panel: settings
+```
 ![Settings](img/panels/settings.png)
 
 ### System
-type: system
+```py
-
+panel: system
+```
 ![System Panel](img/panels/system.png)
 
 ### Temperature
-type: temperature theme:custom
+```py
-
+panel: temperature
+```
 ![Temperature](img/panels/temperature.png)
 
 ### Z Calibrate
-type: zcalibrate
+```py
-
+panel: zcalibrate
+```
 ![Z Calibrate](img/panels/zcalibrate.png)
 
 ### Limits
-type: limits theme: material-dark
+```py
-
+panel: limits
+```
 ![Limits](img/panels/limits.png)

docs/Quicktips.md

@@ -6,7 +6,7 @@ quick tips, without much explanation
 As you probably already noticed, you can show and hide the gcode macros in the interface settings,
 but you can also hide gcode macros by prefixing the name with an underscore.
 
-```
+```py
 [gcode_macro MY_AWESOME_GCODE]
 gcode:
     _MY_HELPER_CODE
@@ -21,7 +21,7 @@ Another example:
 
 Lets hide a temperature_fan:
 
-```
+```py
 [temperature_fan fan1]
 [temperature_fan _fan2]
 ```

docs/Theming.md

@@ -8,7 +8,7 @@ To edit colors and styles, create a css file named `style.css` you can use the c
 
 ### Example 1
 
-```
+```sh
 cd ~/KlipperScreen/styles
 mkdir -p mytheme/images
 cd mytheme
@@ -24,7 +24,7 @@ At this point `mytheme` should be on the list of themes, and when you select it
 
 Creating a custom background from Mainsail sidebar and this css using Z-bolt icons
 
-```
+```css
 window { background-image: url("/home/pi/mainsail/img/background.svg");}
 button {background-color: rgba(0,0,0,0); border-radius:2em;}
 ```

docs/Troubleshooting.md

@@ -15,7 +15,8 @@ If that file is non-existent, run `journalctl -xe -u KlipperScreen`
 Check the file `/var/log/Xorg.0.log` where you can find issues with the X server.
 
 ## Cannot open virtual Console
-```
+If you see this line in the logs:
+```sh
 xf86OpenConsole: Cannot open virtual console 2 (Permission denied)
 ```
 
@@ -27,27 +28,48 @@ This should have the line `allowed_users=anybody` in it
 
 If your username is not listed under that line, you need to add it with the following command:
 
-`usermod -a -G tty pi` (if your username is not 'pi' change 'pi' to your username)
+```sh
+usermod -a -G tty pi
+```
+(if your username is not 'pi' change 'pi' to your username)
 
-If it's still failing, try: `sudo apt install xserver-xorg-legacy`
+You may also need:
+```sh
+sudo apt install xserver-xorg-legacy
+```
 
-As a last resort add `needs_root_rights=yes` to `/etc/X11/Xwrapper.config`
+Restart KlipperScreen:
+```sh
+sudo service KlipperScreen restart
+```
+
+If it's still failing as a last resort add `needs_root_rights=yes` to `/etc/X11/Xwrapper.config`:
+```sh
+sudo echo needs_root_rights=yes>>/etc/X11/Xwrapper.config
+```
+
+restart KS.
 
 ## Screen shows console instead of KlipperScreen
 
-If you have multiple framebuffers, you may need to fix the X11 configuration.
+If you have multiple framebuffers, you may need to fix the X11 configuration,
+list the available framebuffers and check the current one:
+```sh
+ls /dev/fb*
+cat /usr/share/X11/xorg.conf.d/99-fbturbo.conf | grep /dev/fb
+```
 
-`ls /dev/fb*` will list the available framebuffers
+If you more than one, try changing it:
-
+```sh
-`cat /usr/share/X11/xorg.conf.d/99-fbturbo.conf | grep /dev/fb` will show you the current one
+sudo nano /usr/share/X11/xorg.conf.d/99-fbturbo.conf
-
+```
-If you have another fb, try changing it:
-
-`sudo nano /usr/share/X11/xorg.conf.d/99-fbturbo.conf`
 
 for example: change `/dev/fb0` to `/dev/fb1`
 
 Once you have saved that file, restart KlipperScreen.
+```sh
+sudo service KlipperScreen restart
+```
 
 ## Screen is all white or blank or no signal
 
@@ -63,14 +85,18 @@ Run `raspi-config` > go to Advanced > GL Driver > select G2 and reboot.
 
 ![config](img/troubleshooting/gldriver.png)
 
-Or manually edit `/boot/config.txt` and change:
+*Or*:
 
-`dtoverlay=vc4-kms-v3d`
+manually edit `/boot/config.txt` and change:
+
+```sh
+dtoverlay=vc4-kms-v3d
+```
 
 to:
-
+```sh
-`dtoverlay=vc4-fkms-v3d`
+dtoverlay=vc4-fkms-v3d
-
+```
 and reboot, that should make the touch work, if your screen is rotated 180 degrees, then you may need to adjust
 [the touch rotation](Hardware.md) as described in the Hardware page.
 

docs/macros.md

@@ -7,7 +7,7 @@ Load and Unload Filament macros are used in the Extrude-Panel if it is available
 The selected speed is transferred to this macro.
 The following example macros show how this can be used in the macro.
 
-```
+```py
 [gcode_macro LOAD_FILAMENT]
 gcode:
     {% set speed = params.SPEED|default(500) %}
@@ -16,7 +16,7 @@ gcode:
     G1 E50 F{speed}
     G92
 ```
-```
+```py
 [gcode_macro UNLOAD_FILAMENT]
 gcode:
     {% set speed = params.SPEED|default(500) %}
@@ -28,7 +28,7 @@ gcode:
 
 this could be interesting to tweak the purge speed, this would be one Example Macro from alfrix:
 
-```
+```py
 [gcode_macro LOAD_FILAMENT]
 gcode:
     {% set speed = params.SPEED|default(300) %}
@@ -42,7 +42,7 @@ gcode:
     M300
 ```
 
-```
+```py
 [gcode_macro UNLOAD_FILAMENT]
 gcode:
     {% set speed = params.SPEED|default(300) %}

docs/requirements.txt

@@ -1,2 +1,2 @@
-jinja2<3.2
+mkdocs>=1.3.0
-mkdocs
+mkdocs-material==8.2.16

mkdocs.yml

@@ -1,16 +1,57 @@
 site_name: KlipperScreen
-nav:
+site_url: https://klipperscreen.readthedocs.io
-    - Hardware.md
+site_description: >-
-    - Installation.md
+  KlipperScreen documentation.
-    - Configuration.md
+
-    - Quicktips.md
+repo_name: jordanruthe/KlipperScreen/
-    - Theming.md
-    - Troubleshooting.md
-    - Translations.md
-    - Changelog.md
-    - Panels.md
-    - Contact.md
-theme: readthedocs
 repo_url: https://github.com/jordanruthe/KlipperScreen/
+nav:
+    - Home: index.md
+    - Setup:
+      - Hardware.md
+      - Installation.md
+      - Configuration.md
+      - Quicktips.md
+      - Macros: macros.md
+    - Troubleshooting.md
+    - Theming.md
+    - Translations.md
+    - Breaking Changes: Changelog.md
+    - Screenshots: Panels.md
+    - Contact.md
+theme:
+  name: material
+  language: en
+  features:
+    - content.code.annotate
+    - content.tooltips
+    - navigation.indexes
+    - navigation.sections
+    - navigation.top
+    - navigation.tracking
+    - search.highlight
+    - search.share
+    - search.suggest
+    - toc.follow
+  palette:
+    - scheme: slate
+      primary: deep purple
+
 plugins:
     - search
+
+markdown_extensions:
+  - admonition
+  - pymdownx.highlight:
+      anchor_linenums: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences
+
+extra:
+    social:
+      - icon: fontawesome/brands/github
+        link: https://github.com/jordanruthe/klipperScreen/
+      - icon: fontawesome/brands/discord
+        link: https://discord.klipper3d.org/
+      - icon: fontawesome/brands/python