Merge pull request #130 from retejs/dev

feat(examples): add Labeled connections example

content/en/examples/11.labeled-connections.md

@@ -0,0 +1,24 @@
+---
+image:
+  src: labeled-connections.png
+navigation:
+  pro: true
+  preview: labeled-connections.png
+---
+
+# Labeled connections
+
+::references
+:ref-guide{title="Guide" link="/docs/guides/renderers/react#full-connection-customization"}
+::
+
+You can add labels to connections by implementing a custom connection component. This approach provides you with full flexibility to customize and optimize this feature. All you need is:
+
+- create a custom connection component
+- calculate the position of the point relative to the path (start, middle, end)
+- display a text block at this position
+- create user-added connections with predefined labels
+
+:proExample{src="https://retejs-labeled-connections.netlify.app"}
+
+Although the example is built on React.js, you can easily adapt it for a different stack. To do so, simply copy certain modules from this example and substitute the custom connection component with one that matches your stack. If you encounter any issues with it, don't hesitate to reach out via GitHub Issues in the relevant repository.

content/uk/examples/11.labeled-connections.md

@@ -0,0 +1,24 @@
+---
+image:
+  src: labeled-connections.png
+navigation:
+  pro: true
+  preview: labeled-connections.png
+---
+
+# Марковані з'єднання
+
+::references
+:ref-guide{title="Гайд" link="/uk/docs/guides/renderers/react#full-connection-customization"}
+::
+
+Ви можете додавати мітки до з’єднань, реалізувавши кастомний компонент з’єднання. Цей підхід надає вам повну гнучкість для налаштування та оптимізації цієї функції. Все, що тобі потрібно, це:
+
+- створити кастомний компонент з’єднання
+- розрахувати положення точки відносно шляху (початок, середина, кінець)
+- відобразити текстовий блок на цій позиції
+- створювати додані користувачем підключення з попередньо визначеними мітками
+
+:proExample{src="https://retejs-labeled-connections.netlify.app"}
+
+Хоча приклад побудовано на React.js, ви можете легко адаптувати його для іншого стеку. Для цього просто скопіюйте певні модулі з цього прикладу та замініть кастомний компонент з’єднання на той, який відповідає вашому стеку. Якщо ви зіткнетеся з будь-якими проблемами, не соромтеся зв’язатися через GitHub Issues у відповідному репозиторії.