[dev] fix internal links for guides

Author: mafanya23

docs/guides/configuration.md

@@ -26,7 +26,7 @@ You can change the type of the counter which renders the progress of completion
 
 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.
 
-If you want the value of the counter to be displayed as a percentage, specify the *type: "percentage"* attribute inside the **counter** parameter of the [`taskShape`](api/configs/taskshape_config.md) property:
+If you want the value of the counter to be displayed as a percentage, specify the *type: "percentage"* attribute inside the **counter** parameter of the [`taskShape`](../../api/configs/taskshape_config/) property:
 
 ~~~js {5-9}
 const list = new ToDo("#root", {
@@ -45,7 +45,7 @@ const list = new ToDo("#root", {
 
 ### Date format
 
-By default, the To Do List displays dates in the "%d %M %Y" format (it looks like 09 Mar 2033). If you want to specify another format for dates, use the **date** parameter of the [`taskShape`](api/configs/taskshape_config.md) property:
+By default, the To Do List displays dates in the "%d %M %Y" format (it looks like 09 Mar 2033). If you want to specify another format for dates, use the **date** parameter of the [`taskShape`](../../api/configs/taskshape_config/) property:
 
 ~~~js {5-10}
 const list = new ToDo("#root", {
@@ -63,13 +63,13 @@ const list = new ToDo("#root", {
 
 **Related sample:** [To do list. Subtask counter and date format](https://snippet.dhtmlx.com/magidhw8)
 
-Check [the list of available characters](api/configs/taskshape_config.md#list-of-characters).
+Check [the list of available characters](../../api/configs/taskshape_config/#list-of-characters).
 
 ### Drag-n-drop
 
 The default configuration of To Do List includes the drag-n-drop functionality. You can [select one or several tasks](../../#selecting-tasks) and drag the selected tasks vertically at once. If you need to create a copy of the selected tasks, hold the *Alt* key during drag-n-drop.
 
-There is the [`drag`](api/configs/drag_config.md) property which allows you:
+There is the [`drag`](../../api/configs/drag_config/) property which allows you:
 
 - to configure the behavior of the collapsed tasks so that they don't expand when you hover them over during drag-n-drop:
 
@@ -99,7 +99,7 @@ const list = new ToDo("#root", {
 
 ### Due date validation
 
-If you specify a [due date](api/configs/tasks_config.md) 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. 
+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)
 
@@ -109,7 +109,7 @@ The dates of the  tasks which have not been completed on the due date are highli
 
 This validation works by default.
 
-In case you want to disable this functionality, specify the **validate** setting inside the *date* parameter of the [`taskShape`](api/configs/taskshape_config.md) property to *false*:
+In case you want to disable this functionality, specify the **validate** setting inside the *date* parameter of the [`taskShape`](../../api/configs/taskshape_config/) property to *false*:
 
 ~~~js {5-10}
 const list = new ToDo("#root", {
@@ -136,7 +136,7 @@ By default, the process of checking/unchecking tasks is implemented in the "auto
 - If you mark at least one child of a completed task as uncompleted, the task automatically becomes marked as uncompleted
 - If you mark the parent task as uncompleted, all its child automatically become uncompleted
 
-You can disable this behavior and activate the "manual" mode. For that, apply the **behavior: "manual"** setting of the **completed** parameter of the [`taskShape`](api/configs/taskshape_config.md) property:
+You can disable this behavior and activate the "manual" mode. For that, apply the **behavior: "manual"** setting of the **completed** parameter of the [`taskShape`](../../api/configs/taskshape_config/) property:
 
 ~~~js {5-9}
 const list = new ToDo("#root", {
@@ -155,9 +155,9 @@ const list = new ToDo("#root", {
 
 ## Toolbar
 
-The toolbar is a top part of To Do List which is [initialized](guides/initialization.md#initialize-toolbar) and [configured](category/toolbar-properties.md) separately from To Do List.
+The toolbar is a top part of To Do List which is [initialized](../../guides/initialization/#initialize-toolbar) and [configured](category/toolbar-properties.md) separately from To Do List.
 
-To change the default structure of the toolbar, use the [`items`](api/toolbar_api/configs/items_config.md) configuration property of the Toolbar component. 
+To change the default structure of the toolbar, use the [`items`](../../api/toolbar_api/configs/items_config/) configuration property of the Toolbar component. 
 
 ~~~js
 const toolbar = new Toolbar("#toolbar", {
@@ -170,8 +170,8 @@ The property allows you to define which controls should be shown or hidden. Besi
 
 ## Mode of hiding completed tasks
 
-Read the details on how to hide completed tasks from To Do List in the [related section](guides/hide_completed_tasks.md).
+Read the details on how to hide completed tasks from To Do List in the [related section](../../guides/hide_completed_tasks/).
 
 ## Read-only mode
 
-Read the details on how to make the To Do List read-only in the [related section](guides/readonly_mode.md).
+Read the details on how to make the To Do List read-only in the [related section](../../guides/readonly_mode/).

docs/guides/customization.md

@@ -8,15 +8,15 @@ description: You can learn about the To Do List Customization in the documentati
 
 ## Toolbar
 
-It is possible to customize the appearance of the toolbar. You can hide some default controls, add custom ones, and place them in the necessary order. To do that, use the [`items`](api/toolbar_api/configs/items_config.md) property of the Toolbar component. 
+It is possible to customize the appearance of the toolbar. You can hide some default controls, add custom ones, and place them in the necessary order. To do that, use the [`items`](../../api/toolbar_api/configs/items_config/) property of the Toolbar component. 
 
 You can customize your toolbar as in:
 
 <iframe src="https://snippet.dhtmlx.com/jrnestbk?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
 
 ## Styling To Do List
 
-You can change the look and feel of To Do List by changing values of the [**CSS variables provided by the library**](guides/stylization.md).
+You can change the look and feel of To Do List by changing values of the [**CSS variables provided by the library**](../../guides/stylization/).
 
 Check the example:
 

docs/guides/hide_completed_tasks.md

@@ -13,7 +13,7 @@ There are two modes of displaying tasks in To Do List:
 - when all tasks are shown on the page (*default*)
 - when completed tasks are hidden from the page
 
-You may initialize To Do List in the mode when all completed tasks will be hidden from the page. It will let you focus only on those tasks which yet need to be done. For that, you need to enable the **taskHide** setting of the **completed** parameter of the [`taskShape`](api/configs/taskshape_config.md) property, as in:  
+You may initialize To Do List in the mode when all completed tasks will be hidden from the page. It will let you focus only on those tasks which yet need to be done. For that, you need to enable the **taskHide** setting of the **completed** parameter of the [`taskShape`](../../api/configs/taskshape_config/) property, as in:  
 
 ~~~js {6}
 const list = new ToDo("#root", {
@@ -33,7 +33,7 @@ You may easily switch between these two modes after initialization of To Do List
 
 - via the **Completed tasks -> Show/Hide** option of the [Toolbar menu](../../#toolbar)
 
-- via the related [`hideCompletedTasks()`](api/methods/hidecompletedtasks_method.md) and [`showCompletedTasks()`](api/methods/showcompletedtasks_method.md) methods:
+- via the related [`hideCompletedTasks()`](../../api/methods/hidecompletedtasks_method/) and [`showCompletedTasks()`](../../api/methods/showcompletedtasks_method/) methods:
 
 ~~~js
 list.hideCompletedTasks(); 

docs/guides/initialization.md

@@ -50,7 +50,7 @@ Thus, create **two containers** to place a List and Toolbar into and give them I
 After that, initialize List with the **new ToDo()** constructor. It takes two parameters:
 
 - a container to place a List into. The one we have created at the previous step
-- an object with configuration properties. [See the full list here](api/overview/configs_overview.md)
+- an object with configuration properties. [See the full list here](../../api/overview/configs_overview/)
 
 ~~~js title="index.js"
 const { ToDo, Toolbar } = todo; // apply the object destructuring
@@ -94,7 +94,7 @@ You don't need this step if you will use the **new todo.ToDo()** and **new todo.
 
 ## Loading data into To Do List
 
-Detailed information on loading data into DHTMLX To Do is given in the [Data loading](guides/loading_data.md) article.
+Detailed information on loading data into DHTMLX To Do is given in the [Data loading](../../guides/loading_data/) article.
 
 ## Example
 

docs/guides/inline_editing.md

@@ -9,7 +9,7 @@ description: You can learn about inline editing in the documentation of the DHTM
 Inline editing lets you edit the content of a task/project directly by double-clicking on it. The functionality is enabled by default.
 
 :::tip
-When you enable the [**readonly**](api/configs/readonly_config.md) mode of To Do List, inline editing becomes unavailable. 
+When you enable the [**readonly**](../../api/configs/readonly_config/) mode of To Do List, inline editing becomes unavailable. 
 :::
 
 ## Supported formats of data
@@ -30,7 +30,7 @@ Use hashtags to categorize tasks and make them more searchable. Here are some si
 - To activate strict filtering, click a hashtag or enter it in the search bar in the toolbar
 
 :::info
-You can create a default list of tags via the [`tags`](api/configs/tags_config.md) property
+You can create a default list of tags via the [`tags`](../../api/configs/tags_config/) property
 :::
 
 3\. **Dates**
@@ -40,7 +40,7 @@ To enter a date via the inline editor, type the `!` symbol and the built-in date
 You can also wrap some text in the special symbols - `!()` - for instance, **!(Enter Booking date)**, and press Enter to close the editor. In the future, clicking on this text will open the date picker. 
 
 :::info
-The appearance of the added dates depends on the specified [**locale**](api/configs/locale_config.md) and [**date format**](api/configs/taskshape_config.md)
+The appearance of the added dates depends on the specified [**locale**](../../api/configs/locale_config/) and [**date format**](../../api/configs/taskshape_config/)
 :::
 
 ## Working with editor

docs/guides/integration_with_angular.md

@@ -245,7 +245,7 @@ export class ToDoComponent implements OnInit, OnDestroy {
 }
 ~~~
 
-You can also use the [`parse()`](/api/methods/parse_method/) method inside the `ngOnInit()` method of Angular to load data into To Do List.
+You can also use the [`parse()`](../../api/methods/parse_method/) method inside the `ngOnInit()` method of Angular to load data into To Do List.
 
 ~~~jsx {2,23,31-36} title="todo.component.ts"
 import { ToDo, Toolbar } from '@dhx/trial-todolist';
@@ -295,11 +295,11 @@ export class ToDoComponent implements OnInit, OnDestroy {
 
 The `parse(data)` method provides data reloading on each applied change.
 
-Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
+Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](../../api/overview/configs_overview/) to check the full list of available properties.
 
 #### Handling events
 
-When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/).
+When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](../../api/overview/events_overview/).
 
 Open the **todo.component.ts** file and complete the `ngOnInit()` method in the following way:
 

docs/guides/integration_with_react.md

@@ -245,7 +245,7 @@ export default function ToDoComponent(props) {
 }
 ~~~
 
-You can also use the [`parse()`](/api/methods/parse_method/) method inside the `useEffect()` method of React to load data into To Do List:
+You can also use the [`parse()`](../../api/methods/parse_method/) method inside the `useEffect()` method of React to load data into To Do List:
 
 ~~~jsx {9-11,21} title="ToDo.jsx"
 import { useEffect, useRef } from "react";
@@ -285,11 +285,11 @@ export default function ToDoComponent(props) {
 
 The `parse(data)` method provides data reloading on each applied change.
 
-Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
+Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](../../api/overview/configs_overview/) to check the full list of available properties.
 
 #### Handling events
 
-When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/).
+When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](../../api/overview/events_overview/).
 
 Open ***ToDo.jsx*** and complete the `useEffect()` method in the following way:
 

docs/guides/integration_with_svelte.md

@@ -232,7 +232,7 @@ onDestroy(() => {
 </div>
 ~~~
 
-You can also use the [`parse()`](/api/methods/parse_method/) method inside the `onMount()` method of Svelte to load data into To Do List:
+You can also use the [`parse()`](../../api/methods/parse_method/) method inside the `onMount()` method of Svelte to load data into To Do List:
 
 ~~~html {6-8,21} title="ToDo.svelte"
 <script>
@@ -272,11 +272,11 @@ onDestroy(() => {
 
 The `parse(data)` method provides data reloading on each applied change.
 
-Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
+Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](../../api/overview/configs_overview/) to check the full list of available properties.
 
 #### Handling events
 
-When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/).
+When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](../../api/overview/events_overview/).
 
 Open ***ToDo.svelte*** and complete the `onMount()` method in the following way:
 

docs/guides/integration_with_vue.md

@@ -238,7 +238,7 @@ export default {
 </template>
 ~~~
 
-You can also use the [`parse()`](/api/methods/parse_method/) method inside the `mounted()` method of Vue to load data into To Do List:
+You can also use the [`parse()`](../../api/methods/parse_method/) method inside the `mounted()` method of Vue to load data into To Do List:
 
 ~~~html {6,16-20} title="ToDo.vue"
 <script>
@@ -280,11 +280,11 @@ export default {
 
 The `parse(data)` method provides data reloading on each applied change.
 
-Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.
+Now the To Do List component is ready to use. When the element will be added to the page, it will initialize the To Do List with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](../../api/overview/configs_overview/) to check the full list of available properties.
 
 #### Handling events
 
-When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/).
+When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](../../api/overview/events_overview/).
 
 Open ***ToDo.vue*** and complete the `mounted()` method:
 

docs/guides/loading_data.md

@@ -10,12 +10,12 @@ description: You can learn about loading and storing data in the documentation o
 
 There are the following types of information which can be loaded into DHTMLX To Do List:
 
-- [**tasks**](api/configs/tasks_config.md)
-- [**projects**](api/configs/projects_config.md)
-- [**users**](api/configs/users_config.md)
-- [**priorities**](api/configs/priorities_config.md)
-- [**tags**](api/configs/tags_config.md)
-- [**activeProject**](api/configs/activeproject_config.md)
+- [**tasks**](../../api/configs/tasks_config/)
+- [**projects**](../../api/configs/projects_config/)
+- [**users**](../../api/configs/users_config/)
+- [**priorities**](../../api/configs/priorities_config/)
+- [**tags**](../../api/configs/tags_config/)
+- [**activeProject**](../../api/configs/activeproject_config/)
 
 You can prepare data in a separate file. Here is an example of an appropriate data set:
 
@@ -178,7 +178,7 @@ const { tasks, users, projects, priorities } = getData();
 
 ### Loading data on initialization
 
-You can load [a predefined data](guides/loading_data.md#preparing-data-to-load) into To Do List on the initialization stage in the following way:
+You can load [a predefined data](#preparing-data-to-load) into To Do List on the initialization stage in the following way:
 
 ~~~js {2,5-8} title="index.js"
 const { ToDo } = todo;
@@ -194,7 +194,7 @@ const list = new ToDo("#root", {
 
 ### Loading data after initialization
 
-To load data from a local data source after initialization of the To Do List, use the [`parse()`](api/methods/parse_method.md) method:
+To load data from a local data source after initialization of the To Do List, use the [`parse()`](../../api/methods/parse_method/) method:
 
 ~~~js {3,5,12-17} title="index.js"
 const { ToDo, Toolbar } = todo;
@@ -218,7 +218,7 @@ list.parse({
 
 ## Saving and restoring state
 
-To save the current state of a To Do, use the [`serialize()`](api/methods/serialize_method.md) method. It converts the data of the To Do List into a JSON object.
+To save the current state of a To Do, use the [`serialize()`](../../api/methods/serialize_method/) method. It converts the data of the To Do List into a JSON object.
 
 ~~~js
 const state = list.serialize();