📖 new organization | minor fixes | syntax errors | update mermaid graphs

docs/articles/index.md

@@ -4,10 +4,10 @@ On this section, you will find articles related to the ConsoleAppVisuals project
 
 On the menu, find:
 
-- [Create your project documentation](/ConsoleAppVisuals/articles/create_docs.html)
-- [Publish a library](/ConsoleAppVisuals/articles/publish_library.html)
 - [Create your visual element](/ConsoleAppVisuals/articles/create_element.html)
 - [Create your font](/ConsoleAppVisuals/articles/create_font.html)
+- [Create your project documentation](/ConsoleAppVisuals/articles/create_docs.html)
+- [Publish a library](/ConsoleAppVisuals/articles/publish_library.html)
 
 ## Questions & Improvement requests
 

docs/index.md

@@ -1,19 +1,19 @@
-# ConsoleAppVisuals
+# Welcome to the docs
 
 [![version](https://img.shields.io/nuget/v/ConsoleAppVisuals.svg?label=version)](https://www.nuget.org/packages/ConsoleAppVisuals/) [![NuGet](https://img.shields.io/nuget/dt/ConsoleAppVisuals.svg)](https://www.nuget.org/packages/ConsoleAppVisuals/) [![GitHub](https://img.shields.io/github/stars/MorganKryze/consoleappvisuals.svg?style=flat&logo=github&colorB=yellow&label=stars)](https://github.com/MorganKryze/ConsoleAppVisuals) [![Coverage Status](https://coveralls.io/repos/github/MorganKryze/ConsoleAppVisuals/badge.svg?branch=main)](https://coveralls.io/github/MorganKryze/ConsoleAppVisuals?branch=main)[![License: GNU GPL](https://img.shields.io/badge/License-GNU_GPL-orange.svg)](https://github.com/MorganKryze/ConsoleAppVisuals/blob/main/LICENSE) [![Lines Of Code](https://tokei.rs/b1/github/MorganKryze/ConsoleAppVisuals)](https://github.com/MorganKryze/ConsoleAppVisuals/blob/main/src/ConsoleAppVisuals)
 
 ![presentation](assets/vid/gif/presentation.gif)
 
-## Welcome to the docs
+## Table of contents
 
-This is the documentation for the `ConsoleAppVisuals` library. This is a simple and easy-to-use library that allows you to create visual elements in the console. Here are all the resources available:
+Welcome to the documentation of the `ConsoleAppVisuals` library. This is a simple and easy-to-use library that allows you to create visual elements in the console. Here are all the resources available:
 
-1. [Introduction](/ConsoleAppVisuals/introduction/index.html): find the installation process, the first steps into the library and the description of the `Core` and `Window` classes.
+1. [Introduction](/ConsoleAppVisuals/introduction/basic_concepts.html): find the installation process, the first steps into the library and the description of the `Core` and `Window` classes.
 2. [References](/ConsoleAppVisuals/references/index.html): find all methods, properties and classes with their description and all arguments available.
 3. [Articles](/ConsoleAppVisuals/articles/index.html): find some additional articles about how to create and publish a library or create your documentation.
 4. [Legacy](/ConsoleAppVisuals/legacy/index.html): find the old documentation of the library for the versions 2.x.x and below.
 
-Finally, an commented [example project](https://github.com/MorganKryze/ConsoleAppVisuals/blob/main/example/) to see how to use the library in a real project. If you have any questions, feel free to ask them in the [discussions](https://github.com/MorganKryze/ConsoleAppVisuals/discussions) section.
+Finally, a commented [example project](https://github.com/MorganKryze/ConsoleAppVisuals/blob/main/example/) to see how to use the library in a real project. If you have any questions, feel free to ask them in the [discussions](https://github.com/MorganKryze/ConsoleAppVisuals/discussions) section.
 
 ## Supported .NET versions
 

docs/introduction/basic_concepts.md

@@ -0,0 +1,67 @@
+# Basic concepts
+
+This section is made for you to understand what is ConsoleAppVisuals, its purposes, use case, how to install it use it. We will guide you into the creation of your first project and how to use the library to add visual elements to your console application.
+
+## What is ConsoleAppVisuals?
+
+The ambition of ConsoleAppVisuals is to provide the best compromise between an easy-to-use library and a complex tool to create console applications with visual elements. The library is designed to be simple to use and to provide a wide range of visual elements to make your console application more user-friendly and interactive.
+
+```mermaid
+flowchart LR
+    A[Visual elements] -->|Stored in| B[Element List]
+    B -->|From| D[Window Class]
+    D -->|Rendered using| E[Core Class]
+    E -->|Displayed on| F[Console]
+```
+
+It is relies on the concept of "visuals" which are elements that can be displayed in the console. There are two types of visuals:
+
+- **Static visuals**: elements that do not change by themselves, you may display several from the same type at the same time
+- **Interactive visuals**: elements that can be updated and create a response that can be collected, you may display only one at a time
+
+These visuals are stored in `Window` as a list. From this class, you can display the visuals, add, remove, or update them. Each one of the visual element has its rendering method that will be called from the `Window` class.
+
+The basics of the interaction between the library and the console are defined in the `Core` class.
+
+## Use flow
+
+Here is the basic visualization of the use flow of the library:
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Element
+    participant Window
+    User->>Element: Creates an Element
+    User->>Window: Adds the Element to the Window
+    User->>Window: Tells the Window to Render the Element
+    Window->>Element: Calls the Element's Render Function
+```
+
+In C# terms, the use flow is as follows:
+
+1. Creating an element:
+
+```csharp
+Title exampleTitle = new Title("Hello world!");
+```
+
+2. Adding it to the `Window`:
+
+```csharp
+Window.AddElement(exampleTitle);
+```
+
+3. Rendering the element:
+
+```csharp
+Window.Render(exampleTitle);
+```
+
+## First steps
+
+Now that you have the basic concepts, let's dive into this guided path to know how to use the library:
+
+- [Create a simple console application](/ConsoleAppVisuals/introduction/first_app.html)
+- [Discover new elements for your project](/ConsoleAppVisuals/introduction/advanced_app.html)
+- [Manage multiple menus](/ConsoleAppVisuals/introduction/menus_managment.html)

docs/introduction/first_app.md

@@ -8,7 +8,7 @@ This tutorial will show you how to create a simple console application using the
 - How to exit the application
 
 > [!TIP]
-> Do not forget to give a look at the [example project](https://github.com/MorganKryze/ConsoleAppVisuals/blob/main/example/Program.cs). It is a good way to understand how to use the library.
+> Do not forget to give a look at the [example project](https://github.com/MorganKryze/ConsoleAppVisuals/blob/main/example/Program.cs) if you go into any trouble.
 
 ## Setup
 
@@ -19,20 +19,26 @@ First, let's create a dummy project to work with. Please choose your method acco
 Open your terminal and navigate to the folder where you want to create your project. Run the following command:
 
 ```bash
-dotnet new console -n MyApp
+dotnet new console --output MyApp --use-program-main
 ```
 
 If your file structure is like this:
 
 ```bash
 Example_project  <-- root
 └───MyApp
-    ├───bin
+    ├───obj
     ├───MyApp.csproj
     └───Program.cs
 ```
 
-Jump into the `MyApp` folder and run the following command:
+Jump into the `MyApp` folder:
+
+```bash
+cd MyApp
+```
+
+Finally, run the following command to install the library:
 
 ```bash
 dotnet add package ConsoleAppVisuals
@@ -148,7 +154,7 @@ Window.Render();
 
 ![Minimal app](../assets/vid/gif/first_app/loading_bar.gif)
 
-As you may have noticed, we have the same output as earlier. No prompt was printed. That's because we need to activate manually the `Prompt` element. Interactive elements are not activated by default. To do so, we can use the following line of code:
+As you may have noticed, we have the same output as earlier. No prompt was printed. That's because we need to activate manually the `Prompt` element. Interactive elements are not activated by default. To do so, we can add the following line of code:
 
 ```csharp
 Window.ActivateElement(prompt);
@@ -177,7 +183,7 @@ response.Value;
 Finally, let's add a `EmbedText` element to display the user's response:
 
 ```csharp
-EmbeddedText text = new EmbeddedText(
+EmbedText text = new EmbedText(
             new List<string>()
             {
                 "You just wrote " + response?.Value + "!",
@@ -233,12 +239,14 @@ EmbedText text = new EmbedText(
     {
         "You just wrote " + response?.Value + "!",
         "And you " + response?.Status + "!"
-    },
-    $"Next {Core.GetSelector.Item1}"
+    }
 );
 Window.AddElement(text);
 
 Window.ActivateElement(text);
 
 Window.Close();
 ```
+
+> [!TIP]
+> To customize the elements, find all the available properties and methods in the [references](/ConsoleAppVisuals/references/index.html) section.

docs/introduction/menus_management.md

@@ -3,7 +3,7 @@
 In this section, we will see how to manage menus in a console application. We will see how to create a menu, how to navigate in a complex application.
 
 > [!TIP]
-> Do not forget to give a look at the [example project](https://github.com/MorganKryze/ConsoleAppVisuals/blob/main/example/Program.cs). It is a good way to understand how to use the library.
+> Do not forget to give a look at the [example project](https://github.com/MorganKryze/ConsoleAppVisuals/blob/main/example/Program.cs) if you go into any trouble.
 
 ## Setup
 
@@ -14,7 +14,7 @@ Your file structure is like this:
 ```bash
 Example_project  <-- root
 └───MyApp
-    ├───bin
+    ├───obj
     ├───MyApp.csproj
     └───Program.cs
 ```
@@ -70,9 +70,7 @@ switch (response?.Status)
                 $"The user: {response?.Status}",
                 $"Index: {response?.Value}",
                 $"Which corresponds to: {options[response?.Value ?? 0]}"
-            },
-            $"Next {Core.GetSelector.Item1}",
-            TextAlignment.Left
+            }
         );
         Window.AddElement(embedSelected);
         Window.ActivateElement(embedSelected);
@@ -86,9 +84,7 @@ switch (response?.Status)
                 $"The user: {response?.Status}",
                 $"Index: {response?.Value}",
                 $"Which corresponds to: {options[response?.Value ?? 0]}"
-            },
-            $"Next {Core.GetSelector.Item1}",
-            TextAlignment.Left
+            }
         );
         Window.AddElement(embedEscaped);
         Window.ActivateElement(embedEscaped);
@@ -209,25 +205,19 @@ var menu = new ScrollingMenu(
 Window.AddElement(menu);
 
 EmbedText play = new(
-    new List<string>() { "Playing..." },
-    "Next",
-    TextAlignment.Left
+    new List<string>() { "Playing..." }
 );
 Window.AddElement(play);
 Window.DeactivateElement(play, false);
 
 EmbedText language = new(
-    new List<string>() { "Changing language..." },
-    "Next",
-    TextAlignment.Left
+    new List<string>() { "Changing language..." }
 );
 Window.AddElement(language);
 Window.DeactivateElement(language, false);
 
 EmbedText sound = new(
-    new List<string>() { "Changing volume..." },
-    "Next",
-    TextAlignment.Left
+    new List<string>() { "Changing volume..." }
 );
 Window.AddElement(sound);
 Window.DeactivateElement(sound, false);