docs: cleanup assets folder (#601)

until now all images were in the docs/assets folder.

From now on, an "img" folder should be created in the respective subfolders of the categories, where the images are contained. They are then "closer to the corresponding description".

The assets folder should only contain general graphics like logos.

docs/faq/klipper_errors/command_format_mismatch.md

@@ -15,7 +15,7 @@ description: >-
 
 You have updated Klipper and now you get this cryptic error message?
 
-![Command format mismatch](../../assets/img/faq/errors/mcu_error.png)
+![Command format mismatch](img/mcu_error.png)
 
 This is an error and needs to be fixed to make Mainsail and Klipper work again.
 {: .info}

docs/features/console-shortcuts.md

@@ -22,7 +22,7 @@ Issue a `HELP` command in the console to get a list of all available commands.
 
 You can start typing a command and then complete it with the Tab key. If there are several possibilities, a list of choices will be displayed.
 
-![](/assets/img/quicktips/console-shortcuts/tab_complete.gif)
+![Autocomplete](img/tab_complete.gif)
 
 ## Scroll through commands
 

docs/features/hide-gcode_macros-by-default.md

@@ -30,7 +30,7 @@ gcode:
 
 `MY_AWESOME_GCODE` appears in your interface settings, `_MY_HELPER_CODE` does not.
 
-![](/assets/img/quicktips/hide-gcode_macros/my_awesome_macro.png)
+![Macros](img/my_awesome_macro.png)
 
 This also works for other configuration sections including **fans and outputs.**
 {: .info}

docs/features/history.md

@@ -16,7 +16,7 @@ description: >-
 {{ page.description }}  
 This includes print job status, duration, amount of filament used, and more.  You can also reprint a print job.
 
-![](../assets/img/quicktips/history/history.png){: style="width: 50%;"}
+![](img/history.png){: style="width: 50%;"}
 
 ## Enable print history tracking
 

docs/features/presets.md

@@ -21,7 +21,7 @@ In Mainsails interface settings you will find a section called "Preheat Presets"
 
 Enter a name for your preset, such as filament, color or other text and the temperature you wish to set the preset at. You can disable individual heaters and even specify a custom gcode for the preheat phase. The G-Code will be executed after the selected temperatures are set.
 
-![](/assets/img/quicktips/presets/preheat.png)
+![Preheat](img/preheat.png)
 
 ### Further Examples
 
@@ -30,4 +30,4 @@ You can add custom G-Code to make it easier to switch between different Z-Offset
 
 To configure the G-Code enter `SET_GCODE_OFFSET Z=0.2`, and change `0.2` to the offset you need.
 
-![](/assets/img/quicktips/presets/gcodeoffset.png)
+![G-Code Offset](img/gcodeoffset.png)

docs/features/themes/backgrounds.md → docs/features/theming/backgrounds.md

@@ -17,12 +17,10 @@ description: >-
 There are two background images that can be used in Mainsail.  The first is in the sidebar and the second is in the main section.
 
 
-![screenshot](/assets/img/customizing/sidebar-main.jpg){:width="50%"}
+![screenshot](img/sidebar-main.jpg){:width="50%"}
 
 You can upload a new background image using the file manager located in `Settings > Machine`.
 
-<!-- ![screenshot](/assets/img/customizing/screenshot-sidebar-background.png) -->
-
 ## Sidebar background image
 Load the background image into your .theme folder and name it `sidebar-background.<extension>`.
 

docs/features/themes/custom-css.md → docs/features/theming/custom-css.md

@@ -14,37 +14,37 @@ redirect_from:
 The `custom.css` file allows you to customize the appearance of Mainsail
 without the need of rebuilding it.  Place a file named `custom.css` in the `.theme` folder of your Mainsail installation and define your custom **C**ascading **S**tyle **S**heets (CSS) rules inside the file.
 
-![file-screenshot](/assets/img/customizing/screenshot-custom-css.png "custom.css file")
+![file-screenshot](img/screenshot-custom-css.png "custom.css file")
 
-![example result](/assets/img/customizing/screenshot-custom-css-example-result.png "custom.css result")
+![example result](img/screenshot-custom-css-example-result.png "custom.css result")
 
 
 ## Customizing the CSS
 
 You need to be familiar with the CSS syntax to customize Mainsail.  There are many resources available to learn CSS online, for example:
-- https://www.w3schools.com/css/default.asp
+[W3Schools - CSS tutorial](https://www.w3schools.com/css/default.asp)
 
 ### Finding the Element to Customize
 
 You will need to use your browser's built in developer tools to find the element you want to customize.  You can do this by clicking the "Developer Tools" button in the browser's toolbar or by right clicking on the page and choosing `Inspect Element` or press `F12`.
 
-![open dev-tools](/assets/img/customizing/screenshot-custom-css-inspect.png "open dev-tools")
+![open dev-tools](img/screenshot-custom-css-inspect.png "open dev-tools")
 
 1. Activate the developer tools and inspector
 2. Select the desired element
 3. Find the selector
 4. Use the style editor to customize the element.  Play around to find the style you like!
 
-![find element](/assets/img/customizing/screenshot-custom-css-find-element.png "find the right element")
+![find element](img/screenshot-custom-css-find-element.png "find the right element")
 
-![fiddle](/assets/img/customizing/screenshot-custom-css-fiddle.png "fiddle")
+![fiddle](img/screenshot-custom-css-fiddle.png "fiddle")
 
 When you have achieved your desired appearance, copy the full "section", including the selector and curly braces.
 
-![fiddle 2](/assets/img/customizing/screenshot-custom-css-fiddle-2.png "fiddle 2")
+![fiddle 2](img/screenshot-custom-css-fiddle-2.png "fiddle 2")
 
 Next copy it inside the "custom.css" file (you can keep everything or only what you have added)
 
-![example](/assets/img/customizing/screenshot-custom-css-example.png "custom.css example")
+![example](img/screenshot-custom-css-example.png "custom.css example")
 
 NOTE: After saving, your browser may need a uncached reload to show the change. Visit [Wikipedia to learn how.](https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache#Bypassing_cache)

docs/features/themes/icons.md → docs/features/theming/icons.md

@@ -25,7 +25,7 @@ For more information on creating and uploading to your `.theme` folder, please r
 | Valid file extensions		| .svg, .jpg, .png and .gif	|
 | Recommended image size	| XxY px					|
 
-![screenshot](/assets/img/customizing/screenshot-sidebar-logo.png)
+![screenshot](img/screenshot-sidebar-logo.png)
 
 ## Favicons
 Upload favicons into your .theme folder and name them `favicon-32x32.png` *(required)*	and `favicon-16x16.png` *(optional)*.
@@ -38,4 +38,4 @@ Upload favicons into your .theme folder and name them `favicon-32x32.png` *(requ
 A browser refresh may be necessary (CTRL+SHIFT+F5 on windows or CMD++SHIFT+R on macOS) to reload without the browser cache.
 {: .info}
 
-![screenshot](/assets/img/customizing/screenshot-favicons.png)
+![screenshot](img/screenshot-favicons.png)

docs/features/themes/prepare.md → docs/features/theming/prepare.md

@@ -21,7 +21,7 @@ You can use Mainsail's built-in file manager (`Settings > Machine`) to create th
 The dot in the folder name means that it is a hidden folder. You will need to activate "Show Hidden Files" in Mainsail's file manager.
 {: .info}
 
-![screenshot](/assets/img/customizing/screenshot-display-hidden-files.png)
+![screenshot](img/screenshot-display-hidden-files.png)
 
 ## Directory structure
 The below directory and file structure provides an overview of files you could include.  All listed files in the `.theme` folder are optional and will only be loaded if they are provided.

docs/features/thumbnails.md

@@ -15,7 +15,7 @@ description: >-
 {: .no_toc}
 {{ page.description }}
 
-![preview](/assets/img/additional/large-preview.png)
+![preview](img/large-preview.png)
 
 <details open markdown="block">
   <summary>
@@ -31,7 +31,7 @@ description: >-
 In "Expert" mode PrusaSlicer has an option in the "Printer Settings" tab to activate previews.
 Under `General / Firmware`, enter `32x32,400x300` as "G-code thumbnails".
 
-![PrusaSlicer](/assets/img/additional/PrusaSlicer2.3.0-thumbnails.png)
+![PrusaSlicer](img/PrusaSlicer2.3.0-thumbnails.png)
 
 <div class="youtube-container">
   <iframe type="text/html" src="https://www.youtube.com/embed/4nFqfq8kikU" frameborder="0"></iframe>
@@ -41,7 +41,7 @@ Under `General / Firmware`, enter `32x32,400x300` as "G-code thumbnails".
 
 In "Expert" mode SuperSlicer has some very convenient options in the "Printer Settings" tab to activate and customize the previews.
 
-![SuperSlicer](../assets/img/additional/SuperSlicer-thumbnails.png)
+![SuperSlicer](img/SuperSlicer-thumbnails.png)
 
 <div class="youtube-container">
   <iframe type="text/html" src="https://www.youtube.com/embed/xdOM5Uco9hM" frameborder="0"></iframe>
@@ -52,12 +52,12 @@ In "Expert" mode SuperSlicer has some very convenient options in the "Printer Se
 The Cura plugin "Cura2Moonraker" is required for this. You can find this plugin and a install guide
 here: [https://github.com/emtrax-ltd/Cura2MoonrakerPlugin](https://github.com/emtrax-ltd/Cura2MoonrakerPlugin)
 
-![Cura](../assets/img/additional/Cura-thumbnails.png)
+![Cura](img/Cura-thumbnails.png)
 
 ## ideaMaker (since v4.2.1)
 
 To enable thumbnails, open the `Advanced` tab in the `printer settings`, enable the `GCode Thumbnails for Octoprint and Mainsail` option and
 enter your prefered *square format* image size in the `Resolution` fields (e.g. `400 X 400`).
 It's necessary that the thumbnail width and height resolution is equal.
 
-![ideaMaker](../assets/img/additional/IdeaMaker4.2.1-thumbnails.png)
+![ideaMaker](img/IdeaMaker4.2.1-thumbnails.png)

docs/features/update-manager.md

@@ -29,7 +29,7 @@ path: ~/mainsail
 
 Restart the Moonraker service and the Update Manager will appear in Mainsail's machine settings.
 
-![](/assets/img/quicktips/update-manager/update-manager.png)
+![](img/update-manager.png)
 
 
 You can find further information on this topic by visiting the [Moonraker documentation](https://github.com/Arksine/moonraker/blob/master/docs/configuration.md#update_manager){:target="_blank"}.

docs/features/webcams.md

@@ -75,9 +75,7 @@ camera_usb_options="-r 640x480 -f 10 -d /dev/v4l/by-id/<device long id>"
 The `device long id` should match the camera name from running `lsusb`.
 
 __Note__  
-If you are using a Raspberry Pi branded camera, set camera="raspi" at the top of the file and you do not have to reference the cameras by device ID.
-
-{: .info}
+If you are using a Raspberry Pi branded camera, set camera="raspi" at the top of the file and you do not have to reference the cameras by device ID.{: .info}
 
 ## 3. Editing the second configuration file
 When using a second camera, you must add the port `mjpg_streamer` runs under and the device.

docs/preview.md → docs/preview/preview.md

@@ -17,28 +17,28 @@ We have completely rethought the system of Mainsail and MainsailOS and will furt
 
 Due to the major changes we will probably jump directly to **Mainsail 2000** instead of 2.0.
 
-![logo](/assets/img/preview/logo2k.png){: style="display: block; margin-left: auto; margin-right: auto; width: 50%;"}
+![logo](img/logo2k.png){: style="display: block; margin-left: auto; margin-right: auto; width: 50%;"}
 
 # New UI
 - Works especially well on small displays. For example, with a resolution of 800x600 pixels.
 - Dark theme was tossed overboard. This provides new possibilities in design.
 - The new menu arrangement is especially targeted at mobile devices and short thumbs.
 
-![logo](/assets/img/preview/Mainsail2k.png)
-![logo](/assets/img/preview/menu2k.gif)
+![logo](img/Mainsail2k.png)
+![logo](img/menu2k.gif)
 
 # Easy to customize
 Throw your own wallpaper in the folder and you are ready to go.
 
-![logo](/assets/img/preview/Wallpaper2k.png)
+![logo](img/Wallpaper2k.png)
 
 # Clippy, our Smart Assistant
 Mainsails new smart assistant *Clippy* is always there to help and advise.
 
-![logo](/assets/img/preview/Clippy2k.gif)
+![logo](img/Clippy2k.gif)
 
 He may be receiving support from *Wizard* in the near future, who could help you with your printing problems.
 
-![logo](/assets/img/preview/Merlin2k.png)
+![logo](img/Merlin2k.png)
 
 

docs/quicktips/slicer-upload.md

@@ -25,11 +25,11 @@ Enable advanced or expert mode and change the options under `Printer Settings /
 Enable advanced or expert mode and change the options under `Printer Settings / General` as shown in the screenshot below.
 For "API Key" you can type anything.
 
-![screenshot](../assets/img/additional/FileUpload-PrusaSlicer-2.2.0.png)
+![screenshot](img/FileUpload-PrusaSlicer-2.2.0.png)
 
 
 ### Cura with OctoPrint-Connect
 Install the OctoPrint-Connection plugin in Cura's Marketplace. In Cura go to `Settings > Printer > Manage Printers`
 and find the Button `Connect OctoPrint`. Add your printer and type anything in the `API Key` field.
 
-![screenshot](../assets/img/additional/FileUpload-Cura-4.8.png)
+![screenshot](img/FileUpload-Cura-4.8.png)

docs/setup-guide/kiauh.md

@@ -10,6 +10,6 @@ permalink: /setup/kiauh
 
 [KIAUH](https://github.com/th33xitus/kiauh) is a tool that helps you install or upgrade Klipper, Moonraker, Mainsail, and other extensions.
 
-![](../assets/img/setup/kiauh.png)
+![KIAUH screeenshot](img/kiauh.png)
 
 You can visit [KIAUH on GitHub](https://github.com/th33xitus/kiauh) to learn more and view its documentation.

docs/setup-guide/mainsailos/balenaetcher.md

@@ -37,29 +37,29 @@ balenaEtcher appearance may vary depending on the host OS.
 
 
 * When opening balenaEtcher you will be presented with the following:
-![screenshot-balena-launched](../../assets/img/setup/balena-main-screen.png)
+![screenshot-balena-launched](img/balena-main-screen.png)
 
 * Select the 'Flash from file' button ('Select image' on Windows) and navigate to the downloaded MainsailOS zip.
-![screenshot-balena-select-os](../../assets/img/setup/balena-select-os.png)
+![screenshot-balena-select-os](img/balena-select-os.png)
 
 * Select the 'Select target' button and choose the SD card you want to flash.
-![screenshot-balena-select-sd-card](../../assets/img/setup/balena-select-sd-card.png)
-![screenshot-balena-select-sd-card-choice](../../assets/img/setup/balena-select-sd-card-choice.png)
+![screenshot-balena-select-sd-card](img/balena-select-sd-card.png)
+![screenshot-balena-select-sd-card-choice](img/balena-select-sd-card-choice.png)
 
 * Return the the main screen, and select 'Flash'. Accept any warnings to continue.
 
 **FLASHING WILL DESTROY ALL DATA ON YOUR SD CARD AND CANNOT BE REVERSED**
 {: .alert}
 
-![screenshot-balena-flash](../../assets/img/setup/balena-etcher-flash.png)
+![screenshot-balena-flash](img/balena-etcher-flash.png)
 
 * balenaEtcher will now decompress (unzip) the MainsailOS archive, write the disc image to the card and verify the flash. 
-![screenshot-balena-unzip](../../assets/img/setup/balena-unzipping.png)
-![screenshot-balena-flash](../../assets/img/setup/balena-flashing.png)
-![screenshot-balena-verify](../../assets/img/setup/balena-etcher-validating.png)
+![screenshot-balena-unzip](img/balena-unzipping.png)
+![screenshot-balena-flash](img/balena-flashing.png)
+![screenshot-balena-verify](img/balena-etcher-validating.png)
 
 * balenaEtcher will confirm the flash is complete.
-![screenshot-balena-finished](../../assets/img/setup/balena-etcher-finished.png)
+![screenshot-balena-finished](img/balena-etcher-finished.png)
 
 # Enabling SSH
 You may need to safely remove (eject) the SD card and reinsert it for the /boot partition to show.
@@ -69,7 +69,7 @@ Before you move on, it is important to check SSH is enabled.
 
 This is done by creating an empty file with no extension named 'SSH', or 'SSH.txt' in the /boot partition of the SD card. MainsailOS includes this file. 
 
-![screenshot-balena-boot-partition](../../assets/img/setup/balena-etcher-boot-partition.png)
+![screenshot-balena-boot-partition](img/balena-etcher-boot-partition.png)
 
 If for some reason the file is not present, then on linux it can be created by navigating to the /boot partition and opening a terminal:
 

docs/setup-guide/mainsailos/first-boot.md

@@ -41,11 +41,11 @@ Mainsail will not work correctly until `mainsail.cfg` is included in Klipper's c
 [include mainsail.cfg]
 ```
 
-![screenshot-web-editor](../../../assets/img/setup/screenshot-web-editor-printer.png)        
+![screenshot-web-editor](img/screenshot-web-editor-printer.png)        
 
-![screenshot-web-editor-printercfg](../../../assets/img/setup/screenshot-printercfg-include-mainsail.png)
+![screenshot-web-editor-printercfg](img/screenshot-printercfg-include-mainsail.png)
 
-and click on  the`Save & Restart` button.
+and click on  the `Save & Restart` button.
 
 ## Updates
 
@@ -56,7 +56,7 @@ Klipper, Moonraker and Mainsail have fast development cycles and while we do our
 
 It is recommended that you enable and use the [built in update-manager](../../update/update-manager) to perform any system updates, then update Klipper, Moonraker, Mainsail as needed.
 
-![screenshot-update-manager](../../../assets/img/update/screenshot-update-manager-example-not-up-to-date.png)
+![screenshot-update-manager](../../update-guide/img/screenshot-update-manager-example-not-up-to-date.png)
 
 
 MainsailOS is now configured, and Klipper's configuration file, [printer.cfg], can be setup.