Merge pull request #1 from DHTMLX/next

[update] add separate section about integrations
DHTMLX · Oct 10, 2023 · 97a15e4 · 97a15e4
2 parents cc42a12 + 264465c
commit 97a15e4
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 6 deletions.
diff --git a/docs/guides/integration.md b/docs/guides/integration.md
@@ -1,10 +1,10 @@
 ---
-sidebar_label: Integrations
-title: Integrations
+sidebar_label: Integration with DHTMLX widgets
+title: Integration with DHTMLX widgets
 description: You can learn about integration with other widgets in the documentation of the DHTMLX JavaScript To Do List library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX To Do List.
 ---
 
-# To Do List integrations
+# Integration with DHTMLX widgets
 
 You can integrate DHTMLX To Do List with other DHTMLX widgets (for instance, [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [Kanban](https://docs.dhtmlx.com/kanban/), [Grid](https://docs.dhtmlx.com/suite/grid/)). Check the examples below.
 

diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Integration with Angular
+title: Integration with Angular
+description: You can learn about the integration with Angular in the documentation of the DHTMLX JavaScript To Do List library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX To Do List.
+---
+
+# Integration with Angular
+
+DHTMLX To Do List is compatible with **Angular**. We have prepared code examples of how to use DHTMLX To Do List with **Angular**. To check online samples, please refer to the corresponding [**Examples on CodeSandbox**](https://codesandbox.io/u/DHTMLX).
+
+<iframe src="https://codesandbox.io/s/dhtmlx-to-do-list-with-angular-z25kgy" frameborder="0" class="snippet_iframe" width="100%" height="700"></iframe>
diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Integration with React
+title: Integration with React
+description: You can learn about the integration with React in the documentation of the DHTMLX JavaScript To Do List library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX To Do List.
+---
+
+# Integration with React
+
+DHTMLX To Do List is compatible with **React**. We have prepared code examples of how to use DHTMLX To Do List with **React**. To check online samples, please refer to the corresponding [**Examples on CodeSandbox**](https://codesandbox.io/u/DHTMLX).
+
+<iframe src="https://codesandbox.io/s/dhtmlx-to-do-list-with-react-kj4d6s" frameborder="0" class="snippet_iframe" width="100%" height="700"></iframe>
diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Integration with Svelte
+title: Integration with Svelte
+description: You can learn about the integration with Svelte in the documentation of the DHTMLX JavaScript To Do List library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX To Do List.
+---
+
+# Integration with Svelte
+
+DHTMLX To Do List is compatible with **Svelte**. We have prepared code examples of how to use DHTMLX To Do List with **Svelte**. To check online samples, please refer to the corresponding [**Examples on CodeSandbox**](https://codesandbox.io/u/DHTMLX).
+
+<iframe src="https://codesandbox.io/p/sandbox/dhtmlx-to-do-list-with-svelte-2zf7mm" frameborder="0" class="snippet_iframe" width="100%" height="700"></iframe>
diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Integration with Vue
+title: Integration with Vue
+description: You can learn about the integration with Vue in the documentation of the DHTMLX JavaScript To Do List library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX To Do List.
+---
+
+# Integration with Vue
+
+DHTMLX To Do List is compatible with **Vue**. We have prepared code examples of how to use DHTMLX To Do List with **Vue**. To check online samples, please refer to the corresponding [**Examples on CodeSandbox**](https://codesandbox.io/u/DHTMLX).
+
+<iframe src="https://codesandbox.io/p/sandbox/dhtmlx-to-do-list-with-vue3-zdlw2m" frameborder="0" class="snippet_iframe" width="100%" height="700"></iframe>
diff --git a/sidebars.js b/sidebars.js
@@ -410,6 +410,28 @@ module.exports = {
 		]
 		}]
 	},
+
+		//start Backend and frameworks integration
+		{
+			type: "category",
+			label: "Backend and frameworks integration",
+			link: {
+				type: 'generated-index',
+				title: "Backend and frameworks integration",
+				keywords: ['backend and frameworks integration'],
+				image: '/img/docusaurus.png'
+			},
+			items: [
+				"guides/working_with_server",
+				"guides/integration_with_angular",
+				"guides/integration_with_react",
+				"guides/integration_with_vue",
+				"guides/integration_with_svelte",
+				"guides/integration",
+			],
+		},
+		// end Backend and frameworks integration
+
 		{
 			type: "category",
 			label: "Guides",
@@ -427,7 +449,7 @@ module.exports = {
 				"guides/initialization",
 				"guides/configuration",
 				"guides/loading_data",
-				"guides/working_with_server",
+				//"guides/working_with_server",
 				{
 					type: "category",
 					label: "Managing tasks",
@@ -465,8 +487,8 @@ module.exports = {
 				"guides/localization",
 				"guides/customization",
 				"guides/stylization",
-				"guides/integration",
+				//"guides/integration",
 			]
 		},
 	]
-};
+};