Merge pull request #85 from SkwalExe/docs

Add new documentation pages

docs/.vitepress/config.mts

@@ -38,6 +38,9 @@ export default defineConfig({
                 text: 'Guides',
                 items: [
                     { text: '💎 General Presentation', link: '/presentation' },
+                    { text: '📜 The Logs Panel', link: '/the-logs-panel' },
+                    { text: '🛠️ The Command System', link: '/the-command-system' },
+                    { text: '🧭 Navigation', link: '/navigation' },
                 ]
             },
             {

docs/src/navigation.md

@@ -0,0 +1,24 @@
+# Navigation 🧭
+
+Navigating within the canvas is a fundamental part of this application. 
+Understanding how to move around efficiently will enhance your experience and allow you to explore fractals deeper, and easier.
+
+I tried to make navigation functions as intuitive and efficient as possible.
+This section will cover basic controls, and navigation parameters.
+
+
+### Basic controls 🎮 {#basic-controls}
+
+To move your position inside the canvas, you can use to **arrow keys** to go left, right, up or down.
+If you are a vim supremacist, you can use the **vim keys (`hjkl`).**
+To zoom in or out, you can respectivly use `d` and `s`.
+
+You can also zoom in or out on a specific position by **left-clicking or right-clicking on the canvas with your mouse.**
+
+![Navigation preview](./assets/navigation.gif)
+
+### Navigation parameters
+
+Finally, you can change the zoom and movement intensity using the `zoom_lvl` and `move_dist` commands.
+
+![Navigation parameters](./assets/nav-parameters.png)

docs/src/the-command-system.md

@@ -0,0 +1,30 @@
+# The Command System 🛠️ {#the-command-system}
+
+The command system is a central feature of Fractalistic.
+It allows you to interact with the **underlying fractal rendering engine** to modify its behavior and execute complex tasks.
+Experimenting with the rendering parameters is an excellent way to satisfy your curiosity, and deepen your understanding of fractals.
+Adjusting the rendering engine can also allow you to **explore fractals in much grater depth** than possible with the default settings, as we will see in a later section. 
+
+### How it works ❓ {#how-it-works}
+
+The logs panel and the command input are used to interact with the command system. You enter your commands in the input field then press enter to execute them. Any output will appear in the logs panel.
+
+![Logs panel and command input](./assets/command-system.png)
+
+### Available commands
+
+You can list the available commands using `help`. If you want a brief description of each command, use `help +`.
+
+::: info Command arguments
+In this context, the `+` following `help` is an argument. Arguments are text segments added after the command name, separated by spaces.
+They provide more information to a command, altering its behavior.
+:::
+
+You can use `help [command_name]` to obtain more information about a command, such as the arguments it accepts.
+
+> ![Preview of help capture](./assets/help-capture.png)
+>
+> In the above screenshot, we can see the output of the `help capture` command.
+> We learn that we can use the `capture` command in two ways. 
+> - Without any arguments, the height and width of the screenshot will be retrieved from the command line arguments passed to the `fractalistic` command when starting the app.
+> - Or we can explicitly give two arguments, the first one being the desired width, and the second one the height.

docs/src/the-logs-panel.md

@@ -0,0 +1,36 @@
+# The Logs Panel 📜
+
+To go beyond the exploration of basic fractals, you'll need to use the command system. While the next section will delve into this topic in detail, let's first take a look at the logs panel.
+
+The logs panel is a crucial part of the command system, as it is used to display all the generated information. Understanding its features and how to interact with it is essential.
+
+### Scrolling through the logs
+
+There are several ways of scrolling through the output in the logs panel. 
+- Using your **mouse wheel** on the component
+- using the **`up` and `down` arrow keys**
+- using advanced control keys like **`Home`, `End`, `PageUp` and `PageDown` .**
+
+This is pretty straightforward, but now comes the tricky part.
+
+### Copying output
+
+At various occasions, you may want to copy output from the logs panel, for example, if you want to share coordinates, printed using the `pos` command.
+However, because of how the application's interface works, **you will not be able to simply select some text and copy it** like you would in typical terminal programs.
+
+The terminal content is continuously being refreshed to update parts of the screen, making text selection a little complicated. But nothing that we can't fix! You still have 2 possibilities for copying text.
+
+- The first way is to freeze the terminal content by using **the text selection feature.** Most terminal emulators provide this function, where holding `Shift` or `Alt` while selecting text will **freeze the content or ignore updates.** This allows you to copy the desired portion. You may also want to use this in combination with the **block selection** feature, where also pressing `Ctrl` at the same time will allow you to select **a block instead of lines of text.**
+
+    ![Block selection preview](./assets/block-selection.png)
+
+- Another way to copy text is to do it when quitting the app. If Fractalistic is terminated correctly, either by pressing `Ctrl+C` or by using the `quit` command, the logs history will be printed to the terminal upon exit, allowing you to copy text like you normally would.
+
+    ![Logs history preview](./assets/logs-history.png)
+
+
+### Related commands
+
+Commands related to the logs panel are:
+
+- `clear`: This command can be used to clear the logs panel. Erased output will not be displayed when quitting the application.