[dev] add images to the static folder, adjust links to images and docs

Author: mafanya23

docs/api/configs/menu_config.md

@@ -101,7 +101,7 @@ The callback should return one of the following values:
                 ]
             }
             ~~~
-            ![Context menu item](../../assets/menu_item.png)
+            ![Context menu item](/assets/menu_item.png)
         </details>
 
         - `"separator"` - the line for separating menu items
@@ -147,7 +147,7 @@ The callback should return one of the following values:
         }
         ~~~
 
-        ![Context menu item](../../assets/menu_priorities.png)
+        ![Context menu item](/assets/menu_priorities.png)
         </details>
 
         - `"datepicker"` - the menu item intended for setting dates
@@ -166,7 +166,7 @@ The callback should return one of the following values:
         }
         ~~~
 
-        ![Context menu item](../../assets/menu_datepicker.png)
+        ![Context menu item](/assets/menu_datepicker.png)
         </details>
 
         - `"user"` - the menu item intended for assigning users to tasks
@@ -187,7 +187,7 @@ The callback should return one of the following values:
         }
         ~~~
 
-        ![Context menu item](../../assets/menu_users.png)
+        ![Context menu item](/assets/menu_users.png)
         </details>
 
 ### Example

docs/guides/configuration.md

@@ -22,7 +22,7 @@ You can also configure the mode of [hiding completed tasks](#mode-of-hiding-comp
 
 You can change the type of the counter which renders the progress of completion of the child tasks.
 
-![counter](../assets/counter.png)
+![counter](/assets/counter.png)
 
 By default, each parent task is equipped with the counter whose value is shown as a ratio of completed child tasks and the total number of the child tasks.
 
@@ -101,11 +101,11 @@ const list = new ToDo("#root", {
 
 If you specify a [due date](/api/configs/tasks_config/) for a task, the due date validation will track the completion of the task. The due date of the task has green color until the task becomes Overdue. 
 
-![due_date](../assets/due_date.png)
+![due_date](/assets/due_date.png)
 
 The dates of the  tasks which have not been completed on the due date are highlighted in red.  
 
-![due_date](../assets/overdue_task.png)
+![due_date](/assets/overdue_task.png)
 
 This validation works by default.
 

docs/guides/integration_with_angular.md

@@ -363,6 +363,6 @@ platformBrowserDynamic()
 
 After that, you can start the app to see To Do List loaded with data on a page.
 
-![To Do List initialization](../assets/trial_todolist.png)
+![To Do List initialization](/assets/trial_todolist.png)
 
 Now you know how to integrate DHTMLX To Do List with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-todolist-demo).

docs/guides/integration_with_react.md

@@ -327,6 +327,6 @@ export default App;
 
 After that, you can start the app to see To Do List loaded with data on a page.
 
-![To Do List initialization](../assets/trial_todolist.png)
+![To Do List initialization](/assets/trial_todolist.png)
 
 Now you know how to integrate DHTMLX To Do List with React. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/react-todolist-demo).

docs/guides/integration_with_svelte.md

@@ -318,6 +318,6 @@ const { users, tasks, projects } = getData();
 
 After that, you can start the app to see To Do List loaded with data on a page.
 
-![To Do List initialization](../assets/trial_todolist.png)
+![To Do List initialization](/assets/trial_todolist.png)
 
 Now you know how to integrate DHTMLX To Do List with Svelte. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/svelte-todolist-demo).

docs/guides/integration_with_vue.md

@@ -339,6 +339,6 @@ export default {
 
 After that, you can start the app to see To Do List loaded with data on a page.
 
-![To Do List initialization](../assets/trial_todolist.png)
+![To Do List initialization](/assets/trial_todolist.png)
 
 Now you know how to integrate DHTMLX To Do List with Vue. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/vue-todolist-demo).

docs/guides/multiselection.md

@@ -12,7 +12,7 @@ In this article we'll discuss the details on how to initialize To Do List with s
 
 We'll consider how to perform bulk operations over the selected tasks and provide you with a list of available operations. And, finally, we'll show you the ways of resetting selection.
 
-![Multiselection](../assets/multiselection.png)
+![Multiselection](/assets/multiselection.png)
 
 :::info
 Learn how to [select](../../#selecting-tasks) and [manage multiple tasks](../../#managing-multiple-tasks) via UI

docs/guides/task_users.md

@@ -50,7 +50,7 @@ const list = new ToDo("#root", {
 
 As a result, the assigned people will be displayed to the right of the task.
 
-![users](../assets/users.png)
+![users](/assets/users.png)
 
 To view the list of people assigned to a task, click on the people avatars. To close the opened list, click outside it.
 

docs/how_to_start.md

@@ -8,7 +8,7 @@ description: You can learn about how to start working with DHTMLX To Do List in
 
 This tutorial will teach you how to create a fully featured To Do List and add it into your web application.
 
-![how_to_start](assets/todolist.png)
+![how_to_start](/assets/todolist.png)
 
 After completing all the steps below, you will get a ready-to-use To Do List which you can easily configure to suite your needs and efficiently use in real life.
 
@@ -101,7 +101,7 @@ You don't need this step if you use the **new todo.ToDo()** and **new todo.Toolb
 Toolbar is an optional part of the To Do List interface. To create a To Do List without the Toolbar, you can specify only one DIV container and initialize List via the **new ToDo()** constructor
 :::
 
-For more information about initialization of To Do List read the [Initialization](../guides/initialization/) article.
+For more information about initialization of To Do List read the [Initialization](/guides/initialization/) article.
 
 ## Step 3. Load data into To Do List
 
@@ -111,7 +111,7 @@ As you can see, we've initialized the To Do List but it is still empty. At this
 You can skip this step if you want to display an empty component on the page
 :::
 
-At first, you should prepare data to load into the component. The data can include the following sets of information: [**tasks**](../api/configs/tasks_config/), [**projects**](../api/configs/projects_config/), [**users**](../api/configs/users_config/), [**tags**](../api/configs/tags_config/), and [**activeProject**](../api/configs/activeproject_config/)
+At first, you should prepare data to load into the component. The data can include the following sets of information: [**tasks**](/api/configs/tasks_config/), [**projects**](/api/configs/projects_config/), [**users**](/api/configs/users_config/), [**tags**](/api/configs/tags_config/), and [**activeProject**](/api/configs/activeproject_config/)
 
 The most convenient way is to prepare data in a separate file, for example:
 
@@ -214,15 +214,15 @@ Now, you can populate the To Do List with data. For that, specify the related pr
 </html>
 ~~~
 
-You can find more information on loading data into To Do List in the [Data loading](../guides/loading_data/) article.
+You can find more information on loading data into To Do List in the [Data loading](/guides/loading_data/) article.
 
 ## Step 4. Configure To Do List
 
 Now, you can define the desired configuration of the To Do list. 
 
 As you already know, To Do List consists of two separate interfaces: List and Toolbar. And each of them possesses a separate list of configuration options:
 
-- check the list of [To Do List properties](../api/overview/configs_overview/)
+- check the list of [To Do List properties](/api/overview/configs_overview/)
 - check the list of [Toolbar properties](/category/toolbar-properties/)
 
 As an example, let's enable the *readonly* mode for your To Do List, specify an active project, and show only the search bar in the toolbar:

docs/overview.md

@@ -19,11 +19,11 @@ The interface of the To Do List component consists of two parts: [Toolbar](#tool
 
 - a **combo** control for switching between projects, and searching for the necessary project
 
-![toolbar](assets/toolbar.png)
+![toolbar](/assets/toolbar.png)
 
 - a **search bar** for searching for the needed tasks
 
-![toolbar](assets/search_field.png)
+![toolbar](/assets/search_field.png)
 
 - a **menu** with a set of controls which allow you to:
     - sort tasks in the ascending/descending order by the following criteria:
@@ -36,17 +36,17 @@ The interface of the To Do List component consists of two parts: [Toolbar](#tool
     - hide/show completed tasks
     - add a new project, rename or delete a currently active project
 
-![toolbar](assets/project_menu.png)
+![toolbar](/assets/project_menu.png)
 
 :::info
-You can change the toolbar structure by adding custom elements or changing the order of the built-in controls. Read more in the [**Configuration**](guides/configuration.md#toolbar) and [**Customization**](guides/customization.md#toolbar) sections.
+You can change the toolbar structure by adding custom elements or changing the order of the built-in controls. Read more in the [**Configuration**](/guides/configuration/#toolbar) and [**Customization**](/guides/customization/#toolbar) sections.
 :::
 
 ### List
 
-The **list of tasks** is the main part of the To Do List interface intended for adding new tasks, editing, or deleting the existing ones. You can easily configure the appearance of tasks. Read more in the [Configuration](guides/configuration.md) section. 
+The **list of tasks** is the main part of the To Do List interface intended for adding new tasks, editing, or deleting the existing ones. You can easily configure the appearance of tasks. Read more in the [Configuration](/guides/configuration/) section. 
 
-![list](assets/list.png)
+![list](/assets/list.png)
 
 ## Selecting tasks
 
@@ -79,7 +79,7 @@ You can manage the selected task both via the context menu or keyboard navigatio
 
 The **context menu** of a task contains a set of items and sub-items and looks like this:
 
-![context_menu_of_task](assets/task_context_menu.png)
+![context_menu_of_task](/assets/task_context_menu.png)
 
 ### Adding a new task
 
@@ -93,7 +93,7 @@ The **context menu** of a task contains a set of items and sub-items and looks l
 ### Editing a task
 
 - To edit a task, double-click on the task record in the list or press `Ctrl (Cmd) + Enter`. Then, make the changes and press `Enter`
-> It is possible to enter text, numbers, hashtags, dates. For more details, read [Supported formats of data](guides/inline_editing.md#supported-formats-of-data).
+> It is possible to enter text, numbers, hashtags, dates. For more details, read [Supported formats of data](/guides/inline_editing/#supported-formats-of-data).
 
 - To mark a task as complete/incomplete, click on the checkbox to the left of the task or press `Space`
 - To collapse/expand a task with subtasks, click on the arrow icon to the left of the task or press `Arrow Left`/ `Arrow Right`
@@ -124,7 +124,7 @@ After you have selected [multiple tasks](#selecting-multiple-tasks), you can per
 
 - to open a **context menu** for the selected tasks
 
-![context_menu_of_tasks](assets/tasks_context_menu.png)
+![context_menu_of_tasks](/assets/tasks_context_menu.png)
 
 - to delete tasks by pressing `Backspace`/`Delete`
 - to copy tasks via `Ctrl (Cmd) + C` and paste them via `Ctrl (Cmd) + V`. The tasks which are selected in the chaotic order will be structured depending on the structure of the data
@@ -136,9 +136,9 @@ After you have selected [multiple tasks](#selecting-multiple-tasks), you can per
 - to mark tasks as complete/incomplete by pressing `Space`
 
 :::info
-Read the [**keyboard shortcuts**](api/events/keypressontodo_event.md#keyboard-shortcuts) section for more detail
+Read the [**keyboard shortcuts**](/api/events/keypressontodo_event/#keyboard-shortcuts) section for more detail
 :::
 
 ## What's next
 
-Once you have a short overview of To Do List you are ready to learn how to display the component on the page. Follow the directions given in the [How to start](how_to_start/) article. 
+Once you have a short overview of To Do List you are ready to learn how to display the component on the page. Follow the directions given in the [How to start](/how_to_start/) article.