@dxtmisha/wiki 0.24.3 → 0.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (230) hide show
  1. package/package.json +7 -7
  2. package/src/classes/WikiStorybookItem.ts +24 -0
  3. package/src/media/descriptions/wikiDescriptions.ts +28 -0
  4. package/src/media/descriptions/wikiDescriptionsAccordion.ts +158 -0
  5. package/src/media/descriptions/wikiDescriptionsActionSheet.ts +211 -0
  6. package/src/media/descriptions/wikiDescriptionsActions.ts +161 -0
  7. package/src/media/descriptions/wikiDescriptionsAnchor.ts +42 -0
  8. package/src/media/descriptions/wikiDescriptionsArrow.ts +181 -0
  9. package/src/media/descriptions/wikiDescriptionsBlock.ts +97 -0
  10. package/src/media/descriptions/wikiDescriptionsButton.ts +0 -1
  11. package/src/media/descriptions/wikiDescriptionsCell.ts +2 -1
  12. package/src/media/descriptions/wikiDescriptionsChipGroup.ts +168 -0
  13. package/src/media/descriptions/wikiDescriptionsDialog.ts +182 -0
  14. package/src/media/descriptions/wikiDescriptionsField.ts +2 -0
  15. package/src/media/descriptions/wikiDescriptionsImage.ts +41 -6
  16. package/src/media/descriptions/wikiDescriptionsInput.ts +257 -0
  17. package/src/media/descriptions/wikiDescriptionsMenu.ts +123 -0
  18. package/src/media/descriptions/wikiDescriptionsModal.ts +145 -0
  19. package/src/media/descriptions/wikiDescriptionsMotionTransform.ts +2 -6
  20. package/src/media/descriptions/wikiDescriptionsSelect.ts +209 -0
  21. package/src/media/descriptions/wikiDescriptionsSelectValue.ts +78 -0
  22. package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts +50 -0
  23. package/src/media/descriptions/wikiDescriptionsTooltip.ts +89 -0
  24. package/src/media/functional/en/conversions.mdx +67 -0
  25. package/src/media/functional/en/dataUtils.mdx +25 -0
  26. package/src/media/functional/en/datetimeRef.mdx +1 -1
  27. package/src/media/functional/en/eventRef.mdx +1 -1
  28. package/src/media/functional/en/executionUtils.mdx +58 -0
  29. package/src/media/functional/en/geoFlagRef.mdx +1 -1
  30. package/src/media/functional/en/geoIntlRef.mdx +1 -1
  31. package/src/media/functional/en/geoRef.mdx +2 -2
  32. package/src/media/functional/en/meta.mdx +1206 -0
  33. package/src/media/functional/en/metaManager.mdx +376 -0
  34. package/src/media/functional/en/metaOg.mdx +694 -0
  35. package/src/media/functional/en/metaTwitter.mdx +853 -0
  36. package/src/media/functional/en/reactive.mdx +40 -0
  37. package/src/media/functional/en/refTypes.mdx +1 -1
  38. package/src/media/functional/en/useApiRef.mdx +5 -5
  39. package/src/media/functional/en/useMeta.mdx +431 -0
  40. package/src/media/functional/en/validationUtils.mdx +11 -0
  41. package/src/media/functional/ru/conversions.mdx +67 -0
  42. package/src/media/functional/ru/dataUtils.mdx +25 -0
  43. package/src/media/functional/ru/datetimeRef.mdx +2 -2
  44. package/src/media/functional/ru/eventRef.mdx +1 -1
  45. package/src/media/functional/ru/executionUtils.mdx +58 -0
  46. package/src/media/functional/ru/geoFlagRef.mdx +1 -1
  47. package/src/media/functional/ru/geoIntl.mdx +2 -2
  48. package/src/media/functional/ru/geoIntlRef.mdx +1 -1
  49. package/src/media/functional/ru/geoRef.mdx +2 -2
  50. package/src/media/functional/ru/listTypes.mdx +1 -1
  51. package/src/media/functional/ru/meta.mdx +1330 -0
  52. package/src/media/functional/ru/metaManager.mdx +376 -0
  53. package/src/media/functional/ru/metaOg.mdx +694 -0
  54. package/src/media/functional/ru/metaTwitter.mdx +853 -0
  55. package/src/media/functional/ru/reactive.mdx +40 -0
  56. package/src/media/functional/ru/refTypes.mdx +2 -2
  57. package/src/media/functional/ru/useApiRef.mdx +5 -5
  58. package/src/media/functional/ru/useMeta.mdx +431 -0
  59. package/src/media/functional/ru/validationUtils.mdx +11 -0
  60. package/src/media/mdx/Accordion/accordion.en.mdx +59 -0
  61. package/src/media/mdx/Accordion/accordion.ru.mdx +59 -0
  62. package/src/media/mdx/Accordion/slots.en.mdx +6 -0
  63. package/src/media/mdx/Accordion/slots.ru.mdx +6 -0
  64. package/src/media/mdx/Accordion/wikiMdxAccordion.ts +25 -0
  65. package/src/media/mdx/ActionSheet/actionSheet.en.mdx +61 -0
  66. package/src/media/mdx/ActionSheet/actionSheet.ru.mdx +61 -0
  67. package/src/media/mdx/ActionSheet/touchClose.en.mdx +21 -0
  68. package/src/media/mdx/ActionSheet/touchClose.ru.mdx +21 -0
  69. package/src/media/mdx/ActionSheet/wikiMdxActionSheet.ts +25 -0
  70. package/src/media/mdx/Actions/actions.en.mdx +48 -0
  71. package/src/media/mdx/Actions/actions.ru.mdx +48 -0
  72. package/src/media/mdx/Actions/flexible.en.mdx +19 -0
  73. package/src/media/mdx/Actions/flexible.ru.mdx +19 -0
  74. package/src/media/mdx/Actions/list.en.mdx +50 -0
  75. package/src/media/mdx/Actions/list.ru.mdx +50 -0
  76. package/src/media/mdx/Actions/wikiMdxActions.ts +31 -0
  77. package/src/media/mdx/Anchor/anchor.en.mdx +34 -0
  78. package/src/media/mdx/Anchor/anchor.ru.mdx +34 -0
  79. package/src/media/mdx/Anchor/expose.go.en.mdx +6 -0
  80. package/src/media/mdx/Anchor/expose.go.ru.mdx +6 -0
  81. package/src/media/mdx/Anchor/hide.en.mdx +28 -0
  82. package/src/media/mdx/Anchor/hide.ru.mdx +28 -0
  83. package/src/media/mdx/Anchor/isCopy.en.mdx +23 -0
  84. package/src/media/mdx/Anchor/isCopy.ru.mdx +23 -0
  85. package/src/media/mdx/Anchor/scroll.en.mdx +34 -0
  86. package/src/media/mdx/Anchor/scroll.ru.mdx +35 -0
  87. package/src/media/mdx/Anchor/wikiMdxAnchor.ts +43 -0
  88. package/src/media/mdx/Arrow/arrow.en.mdx +33 -0
  89. package/src/media/mdx/Arrow/arrow.ru.mdx +33 -0
  90. package/src/media/mdx/Arrow/wikiMdxArrow.ts +19 -0
  91. package/src/media/mdx/Block/block.en.mdx +42 -0
  92. package/src/media/mdx/Block/block.ru.mdx +42 -0
  93. package/src/media/mdx/Block/wikiMdxBlock.ts +19 -0
  94. package/src/media/mdx/ChipGroup/chipGroup.en.mdx +51 -0
  95. package/src/media/mdx/ChipGroup/chipGroup.ru.mdx +51 -0
  96. package/src/media/mdx/ChipGroup/selected.en.mdx +50 -0
  97. package/src/media/mdx/ChipGroup/selected.ru.mdx +50 -0
  98. package/src/media/mdx/ChipGroup/wikiMdxChipGroup.ts +25 -0
  99. package/src/media/mdx/Dialog/buttons.en.mdx +45 -0
  100. package/src/media/mdx/Dialog/buttons.ru.mdx +45 -0
  101. package/src/media/mdx/Dialog/dialog.en.mdx +66 -0
  102. package/src/media/mdx/Dialog/dialog.ru.mdx +65 -0
  103. package/src/media/mdx/Dialog/events.en.mdx +63 -0
  104. package/src/media/mdx/Dialog/events.ru.mdx +63 -0
  105. package/src/media/mdx/Dialog/states.en.mdx +58 -0
  106. package/src/media/mdx/Dialog/states.ru.mdx +57 -0
  107. package/src/media/mdx/Dialog/wikiMdxDialog.ts +37 -0
  108. package/src/media/mdx/Field/arrows.en.mdx +22 -6
  109. package/src/media/mdx/Field/arrows.ru.mdx +22 -6
  110. package/src/media/mdx/Field/slots.en.mdx +0 -13
  111. package/src/media/mdx/Field/slots.ru.mdx +0 -13
  112. package/src/media/mdx/Image/img-tag.en.mdx +105 -0
  113. package/src/media/mdx/Image/img-tag.ru.mdx +105 -0
  114. package/src/media/mdx/Image/wikiMdxImage.ts +6 -0
  115. package/src/media/mdx/Input/currency.en.mdx +38 -0
  116. package/src/media/mdx/Input/currency.ru.mdx +38 -0
  117. package/src/media/mdx/Input/date.en.mdx +53 -0
  118. package/src/media/mdx/Input/date.ru.mdx +53 -0
  119. package/src/media/mdx/Input/input.en.mdx +143 -0
  120. package/src/media/mdx/Input/input.ru.mdx +71 -0
  121. package/src/media/mdx/Input/mask.en.mdx +30 -0
  122. package/src/media/mdx/Input/mask.ru.mdx +30 -0
  123. package/src/media/mdx/Input/number.en.mdx +41 -0
  124. package/src/media/mdx/Input/number.ru.mdx +41 -0
  125. package/src/media/mdx/Input/type.en.mdx +26 -0
  126. package/src/media/mdx/Input/type.ru.mdx +26 -0
  127. package/src/media/mdx/Input/wikiMdxInput.ts +49 -0
  128. package/src/media/mdx/Menu/event.updateValue.en.mdx +29 -0
  129. package/src/media/mdx/Menu/event.updateValue.ru.mdx +30 -0
  130. package/src/media/mdx/Menu/expose.navigation.en.mdx +12 -0
  131. package/src/media/mdx/Menu/expose.navigation.ru.mdx +12 -0
  132. package/src/media/mdx/Menu/navigation.en.mdx +56 -0
  133. package/src/media/mdx/Menu/navigation.ru.mdx +56 -0
  134. package/src/media/mdx/Menu/slots.control.en.mdx +65 -0
  135. package/src/media/mdx/Menu/slots.control.ru.mdx +65 -0
  136. package/src/media/mdx/Menu/slots.en.mdx +2 -24
  137. package/src/media/mdx/Menu/slots.ru.mdx +2 -24
  138. package/src/media/mdx/Menu/wikiMdxMenu.ts +27 -3
  139. package/src/media/mdx/Modal/differences.en.mdx +130 -0
  140. package/src/media/mdx/Modal/differences.ru.mdx +65 -0
  141. package/src/media/mdx/Modal/modal.en.mdx +63 -0
  142. package/src/media/mdx/Modal/modal.ru.mdx +63 -0
  143. package/src/media/mdx/Modal/wikiMdxModal.ts +25 -0
  144. package/src/media/mdx/MotionTransform/expose.motionTransformElement.en.mdx +13 -0
  145. package/src/media/mdx/MotionTransform/expose.motionTransformElement.ru.mdx +14 -0
  146. package/src/media/mdx/MotionTransform/wikiMdxMotionTransform.ts +6 -0
  147. package/src/media/mdx/Select/select.en.mdx +69 -0
  148. package/src/media/mdx/Select/select.ru.mdx +69 -0
  149. package/src/media/mdx/Select/wikiMdxSelect.ts +19 -0
  150. package/src/media/mdx/SelectValue/selectValue.en.mdx +64 -0
  151. package/src/media/mdx/SelectValue/selectValue.ru.mdx +64 -0
  152. package/src/media/mdx/SelectValue/wikiMdxSelectValue.ts +19 -0
  153. package/src/media/mdx/TextareaAutosize/textarea-autosize.en.mdx +65 -0
  154. package/src/media/mdx/TextareaAutosize/textarea-autosize.ru.mdx +65 -0
  155. package/src/media/mdx/TextareaAutosize/wikiMdxTextareaAutosize.ts +19 -0
  156. package/src/media/mdx/Tooltip/event.tooltip.en.mdx +7 -0
  157. package/src/media/mdx/Tooltip/event.tooltip.ru.mdx +8 -0
  158. package/src/media/mdx/Tooltip/slot.control.en.mdx +14 -0
  159. package/src/media/mdx/Tooltip/slot.control.ru.mdx +14 -0
  160. package/src/media/mdx/Tooltip/tooltip.en.mdx +34 -0
  161. package/src/media/mdx/Tooltip/tooltip.ru.mdx +34 -0
  162. package/src/media/mdx/Tooltip/wikiMdxTooltip.ts +31 -0
  163. package/src/media/mdx/Window/classes.ru.mdx +1 -1
  164. package/src/media/mdx/event/events.actions.en.mdx +44 -0
  165. package/src/media/mdx/event/events.actions.ru.mdx +44 -0
  166. package/src/media/mdx/event/events.inputStandard.en.mdx +6 -0
  167. package/src/media/mdx/event/events.inputStandard.ru.mdx +6 -0
  168. package/src/media/mdx/event/wikiMdxEvent.ts +20 -8
  169. package/src/media/mdx/expose/expose.descriptionId.en.mdx +6 -0
  170. package/src/media/mdx/expose/expose.descriptionId.ru.mdx +6 -0
  171. package/src/media/mdx/expose/expose.id.en.mdx +6 -0
  172. package/src/media/mdx/expose/expose.id.ru.mdx +6 -0
  173. package/src/media/mdx/expose/expose.labelId.en.mdx +6 -0
  174. package/src/media/mdx/expose/expose.labelId.ru.mdx +6 -0
  175. package/src/media/mdx/expose/wikiMdxExpose.ts +18 -0
  176. package/src/media/mdx/slot/body.en.mdx +6 -0
  177. package/src/media/mdx/slot/body.ru.mdx +6 -0
  178. package/src/media/mdx/slot/headline.en.mdx +7 -0
  179. package/src/media/mdx/slot/headline.ru.mdx +6 -0
  180. package/src/media/mdx/slot/leading.en.mdx +7 -0
  181. package/src/media/mdx/slot/leading.ru.mdx +7 -0
  182. package/src/media/mdx/slot/secondary.en.mdx +5 -0
  183. package/src/media/mdx/slot/secondary.ru.mdx +5 -0
  184. package/src/media/mdx/slot/trailing.en.mdx +7 -0
  185. package/src/media/mdx/slot/trailing.ru.mdx +7 -0
  186. package/src/media/mdx/slot/wikiMdxSlot.ts +30 -0
  187. package/src/media/mdx/style/isSkeleton.en.mdx +2 -2
  188. package/src/media/mdx/style/isSkeleton.ru.mdx +2 -2
  189. package/src/media/mdx/value/v-model-selected.en.mdx +28 -0
  190. package/src/media/mdx/value/v-model-selected.ru.mdx +28 -0
  191. package/src/media/mdx/value/v-model.en.mdx +26 -0
  192. package/src/media/mdx/value/v-model.ru.mdx +26 -0
  193. package/src/media/mdx/value/wikiMdxValue.ts +24 -3
  194. package/src/media/mdx/wikiMdx.ts +29 -1
  195. package/src/media/props/wiki.ts +42 -0
  196. package/src/media/props/wikiActions.ts +43 -0
  197. package/src/media/props/wikiActionsInclude.ts +62 -0
  198. package/src/media/props/wikiAnchor.ts +84 -0
  199. package/src/media/props/wikiAria.ts +102 -0
  200. package/src/media/props/wikiArrow.ts +24 -0
  201. package/src/media/props/wikiArrowInclude.ts +45 -0
  202. package/src/media/props/wikiBarsInclude.ts +80 -0
  203. package/src/media/props/wikiChipGroup.ts +39 -0
  204. package/src/media/props/wikiDialog.ts +34 -0
  205. package/src/media/props/wikiField.ts +0 -21
  206. package/src/media/props/wikiFieldCounterInclude.ts +78 -0
  207. package/src/media/props/wikiForm.ts +248 -0
  208. package/src/media/props/wikiHook.ts +20 -0
  209. package/src/media/props/wikiIcon.ts +3 -3
  210. package/src/media/props/wikiIconInclude.ts +319 -0
  211. package/src/media/props/wikiImage.ts +71 -19
  212. package/src/media/props/wikiInformation.ts +160 -0
  213. package/src/media/props/wikiInput.ts +34 -0
  214. package/src/media/props/wikiListItem.ts +20 -0
  215. package/src/media/props/wikiMask.ts +0 -10
  216. package/src/media/props/wikiMaskInclude.ts +54 -0
  217. package/src/media/props/wikiMenu.ts +0 -10
  218. package/src/media/props/wikiMotionTransform.ts +0 -10
  219. package/src/media/props/wikiOption.ts +113 -0
  220. package/src/media/props/wikiSelect.ts +68 -0
  221. package/src/media/props/wikiSelectValue.ts +30 -0
  222. package/src/media/props/wikiStatus.ts +29 -41
  223. package/src/media/props/wikiStyle.ts +154 -243
  224. package/src/media/props/wikiTechnical.ts +65 -0
  225. package/src/media/props/wikiText.ts +57 -0
  226. package/src/media/props/wikiTooltip.ts +53 -0
  227. package/src/media/props/wikiValue.ts +14 -203
  228. package/src/media/props/wikiWindow.ts +0 -31
  229. package/src/styles/storybookStyle.scss +3 -1
  230. package/src/types/storybookTypes.ts +26 -4
package/src/media/functional/ru/metaOg.mdx ADDED
@@ -0,0 +1,694 @@
1
+ import {Meta} from '@storybook/addon-docs/blocks'
2
+
3
+ <Meta title='@dxtmisha/functional/ru/Classes/MetaOg'/>
4
+
5
+ # Класс MetaOg
6
+
7
+ Класс для работы с Open Graph мета-тегами, обеспечивающий оптимальное отображение контента при публикации в социальных сетях (Facebook, LinkedIn, VK и других). Наследует функциональность `MetaManager` и предоставляет типобезопасные методы для управления стандартными Open Graph тегами.
8
+
9
+ ## Основные возможности
10
+
11
+ - **Типобезопасность** — строгая типизация для всех Open Graph тегов и типов контента
12
+ - **Автоматическая синхронизация** — обновление мета-тегов в `<head>` документа
13
+ - **Поддержка property** — использует атрибут `property` вместо `name` (стандарт Open Graph)
14
+ - **Удобный API** — специализированные методы для каждого тега
15
+ - **SSR совместимость** — генерация HTML для серверного рендеринга
16
+ - **Валидация типов** — поддержка всех официальных типов Open Graph
17
+ - **Цепочечные методы** — возможность последовательной установки значений
18
+
19
+ ## Конструктор
20
+
21
+ ### `constructor`
22
+
23
+ Создает экземпляр MetaOg с предустановленным списком всех поддерживаемых Open Graph тегов. Автоматически считывает существующие теги из DOM.
24
+
25
+ ```javascript
26
+ import { MetaOg } from '@dxtmisha/functional'
27
+
28
+ // Создание экземпляра
29
+ const og = new MetaOg()
30
+
31
+ // Класс автоматически управляет всеми стандартными OG тегами:
32
+ // og:title, og:type, og:url, og:image, og:description,
33
+ // og:locale, og:site_name и другими
34
+ ```
35
+
36
+ ## Методы получения данных
37
+
38
+ ### `getTitle`
39
+
40
+ Получает заголовок страницы для Open Graph.
41
+
42
+ **Возвращает:** `string` — заголовок страницы
43
+
44
+ ```javascript
45
+ const og = new MetaOg()
46
+
47
+ const title = og.getTitle()
48
+ // 'Заголовок статьи'
49
+
50
+ // Использование для отладки
51
+ console.log('OG Title:', og.getTitle())
52
+
53
+ // Проверка наличия
54
+ if (og.getTitle()) {
55
+ console.log('Заголовок установлен')
56
+ }
57
+ ```
58
+
59
+ ### `getType`
60
+
61
+ Получает тип контента Open Graph.
62
+
63
+ **Возвращает:** `MetaOpenGraphType` — тип контента (website, article, video и т.д.)
64
+
65
+ ```javascript
66
+ const og = new MetaOg()
67
+
68
+ const type = og.getType()
69
+ // 'article'
70
+
71
+ // Проверка типа контента
72
+ if (og.getType() === 'article') {
73
+ console.log('Это статья')
74
+ }
75
+
76
+ // Условная логика по типу
77
+ switch (og.getType()) {
78
+ case 'article':
79
+ // Логика для статей
80
+ break
81
+ case 'product':
82
+ // Логика для товаров
83
+ break
84
+ }
85
+ ```
86
+
87
+ ### `getUrl`
88
+
89
+ Получает канонический URL страницы.
90
+
91
+ **Возвращает:** `string` — URL страницы
92
+
93
+ ```javascript
94
+ const og = new MetaOg()
95
+
96
+ const url = og.getUrl()
97
+ // 'https://example.com/article/my-post'
98
+
99
+ // Получение домена
100
+ const domain = new URL(og.getUrl()).hostname
101
+
102
+ // Проверка совпадения с текущим URL
103
+ if (og.getUrl() !== window.location.href) {
104
+ console.warn('OG URL не совпадает с текущим')
105
+ }
106
+ ```
107
+
108
+ ### `getImage`
109
+
110
+ Получает URL изображения для превью.
111
+
112
+ **Возвращает:** `string` — URL изображения
113
+
114
+ ```javascript
115
+ const og = new MetaOg()
116
+
117
+ const imageUrl = og.getImage()
118
+ // 'https://example.com/images/preview.jpg'
119
+
120
+ // Предзагрузка изображения
121
+ const img = new Image()
122
+ img.src = og.getImage()
123
+
124
+ // Проверка наличия изображения
125
+ if (!og.getImage()) {
126
+ console.warn('OG изображение не установлено')
127
+ }
128
+ ```
129
+
130
+ ### `getDescription`
131
+
132
+ Получает описание страницы для Open Graph.
133
+
134
+ **Возвращает:** `string` — описание страницы
135
+
136
+ ```javascript
137
+ const og = new MetaOg()
138
+
139
+ const description = og.getDescription()
140
+ // 'Подробное описание статьи...'
141
+
142
+ // Проверка длины
143
+ if (og.getDescription().length > 200) {
144
+ console.warn('Описание слишком длинное')
145
+ }
146
+
147
+ // Использование в превью
148
+ const previewText = og.getDescription().substring(0, 100) + '...'
149
+ ```
150
+
151
+ ### `getLocale`
152
+
153
+ Получает локаль (язык) контента.
154
+
155
+ **Возвращает:** `string` — локаль в формате language_TERRITORY
156
+
157
+ ```javascript
158
+ const og = new MetaOg()
159
+
160
+ const locale = og.getLocale()
161
+ // 'ru_RU'
162
+
163
+ // Определение языка
164
+ const language = og.getLocale().split('_')[0] // 'ru'
165
+
166
+ // Использование для локализации
167
+ if (og.getLocale().startsWith('ru')) {
168
+ console.log('Русский контент')
169
+ }
170
+ ```
171
+
172
+ ### `getSiteName`
173
+
174
+ Получает название сайта.
175
+
176
+ **Возвращает:** `string` — название сайта
177
+
178
+ ```javascript
179
+ const og = new MetaOg()
180
+
181
+ const siteName = og.getSiteName()
182
+ // 'Мой Блог'
183
+
184
+ // Использование в заголовке
185
+ document.title = `${og.getTitle()} - ${og.getSiteName()}`
186
+
187
+ // Проверка бренда
188
+ const isBrandSet = og.getSiteName() !== ''
189
+ ```
190
+
191
+ ## Методы установки данных
192
+
193
+ ### `setTitle`
194
+
195
+ Устанавливает заголовок страницы для Open Graph.
196
+
197
+ **Параметры:**
198
+ - `title: string` — заголовок страницы
199
+
200
+ **Возвращает:** `this` — для цепочечных вызовов
201
+
202
+ ```javascript
203
+ const og = new MetaOg()
204
+
205
+ // Установка заголовка
206
+ og.setTitle('Потрясающая статья о веб-разработке')
207
+
208
+ // Цепочка методов
209
+ og
210
+ .setTitle('Новый заголовок')
211
+ .setDescription('Новое описание')
212
+
213
+ // Динамическое обновление
214
+ const updateTitle = (newTitle) => {
215
+ og.setTitle(newTitle)
216
+ }
217
+
218
+ // Автоматическая генерация
219
+ og.setTitle(`${article.title} - ${siteName}`)
220
+ ```
221
+
222
+ ### `setType`
223
+
224
+ Устанавливает тип контента Open Graph.
225
+
226
+ **Параметры:**
227
+ - `type: MetaOpenGraphType` — тип контента
228
+
229
+ **Возвращает:** `this` — для цепочечных вызовов
230
+
231
+ **Доступные типы:**
232
+ - `website` — обычный сайт/главная страница
233
+ - `article` — статья/блог пост
234
+ - `video` — видео контент
235
+ - `video.movie` — фильм
236
+ - `video.episode` — эпизод сериала
237
+ - `video.tv_show` — сериал
238
+ - `music.song` — песня
239
+ - `music.album` — музыкальный альбом
240
+ - `music.playlist` — плейлист
241
+ - `music.radio_station` — радиостанция
242
+ - `product` — товар в магазине
243
+ - `book` — книга
244
+ - `profile` — профиль пользователя
245
+ - `business.business` — компания/организация
246
+ - `place` — место/локация
247
+ - `event` — событие/мероприятие
248
+ - `app` — приложение
249
+
250
+ ```javascript
251
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
252
+
253
+ const og = new MetaOg()
254
+
255
+ // Установка типа статьи
256
+ og.setType(MetaOpenGraphType.article)
257
+
258
+ // Для главной страницы
259
+ og.setType(MetaOpenGraphType.website)
260
+
261
+ // Для товаров в магазине
262
+ og.setType(MetaOpenGraphType.product)
263
+
264
+ // Для видео
265
+ og.setType(MetaOpenGraphType.videoMovie)
266
+
267
+ // Условная установка
268
+ const contentType = isArticle
269
+ ? MetaOpenGraphType.article
270
+ : MetaOpenGraphType.website
271
+
272
+ og.setType(contentType)
273
+ ```
274
+
275
+ ### `setUrl`
276
+
277
+ Устанавливает канонический URL страницы.
278
+
279
+ **Параметры:**
280
+ - `url: string` — URL страницы
281
+
282
+ **Возвращает:** `this` — для цепочечных вызовов
283
+
284
+ ```javascript
285
+ const og = new MetaOg()
286
+
287
+ // Установка URL
288
+ og.setUrl('https://example.com/article/my-post')
289
+
290
+ // Использование текущего URL
291
+ og.setUrl(window.location.href)
292
+
293
+ // Очистка query параметров
294
+ const cleanUrl = window.location.origin + window.location.pathname
295
+ og.setUrl(cleanUrl)
296
+
297
+ // Для SPA
298
+ router.afterEach((to) => {
299
+ og.setUrl(`https://example.com${to.fullPath}`)
300
+ })
301
+
302
+ // Абсолютный URL из относительного
303
+ const absoluteUrl = new URL('/article', window.location.origin).href
304
+ og.setUrl(absoluteUrl)
305
+ ```
306
+
307
+ ### `setImage`
308
+
309
+ Устанавливает URL изображения для превью.
310
+
311
+ **Параметры:**
312
+ - `url: string` — URL изображения
313
+
314
+ **Возвращает:** `this` — для цепочечных вызовов
315
+
316
+ ```javascript
317
+ const og = new MetaOg()
318
+
319
+ // Установка изображения
320
+ og.setImage('https://example.com/images/preview.jpg')
321
+
322
+ // Абсолютный URL
323
+ const imageUrl = new URL('/images/og-image.jpg', window.location.origin).href
324
+ og.setImage(imageUrl)
325
+
326
+ // Из данных контента
327
+ og.setImage(article.coverImage)
328
+
329
+ // Fallback изображение
330
+ og.setImage(article.image || '/images/default-og.jpg')
331
+
332
+ // Рекомендуемые размеры: 1200x630 пикселей
333
+ // Минимум: 600x315 пикселей
334
+ // Формат: JPG, PNG, WebP
335
+ ```
336
+
337
+ ### `setDescription`
338
+
339
+ Устанавливает описание страницы для Open Graph.
340
+
341
+ **Параметры:**
342
+ - `description: string` — описание страницы
343
+
344
+ **Возвращает:** `this` — для цепочечных вызовов
345
+
346
+ ```javascript
347
+ const og = new MetaOg()
348
+
349
+ // Установка описания
350
+ og.setDescription('Подробное руководство по созданию веб-приложений с использованием современных технологий')
351
+
352
+ // Обрезка длинного текста
353
+ const shortDesc = article.content.substring(0, 200)
354
+ og.setDescription(shortDesc)
355
+
356
+ // Удаление HTML тегов
357
+ const plainText = article.html.replace(/<[^>]*>/g, '')
358
+ og.setDescription(plainText.substring(0, 300))
359
+
360
+ // Рекомендации:
361
+ // - Оптимальная длина: 150-300 символов
362
+ // - Facebook отображает ~300 символов
363
+ // - Избегайте специальных HTML символов
364
+ ```
365
+
366
+ ### `setLocale`
367
+
368
+ Устанавливает локаль (язык) контента.
369
+
370
+ **Параметры:**
371
+ - `locale: string` — локаль в формате language_TERRITORY
372
+
373
+ **Возвращает:** `this` — для цепочечных вызовов
374
+
375
+ ```javascript
376
+ const og = new MetaOg()
377
+
378
+ // Установка русской локали
379
+ og.setLocale('ru_RU')
380
+
381
+ // Другие популярные локали
382
+ og.setLocale('en_US') // Английский (США)
383
+ og.setLocale('en_GB') // Английский (Великобритания)
384
+ og.setLocale('uk_UA') // Украинский
385
+ og.setLocale('de_DE') // Немецкий
386
+ og.setLocale('fr_FR') // Французский
387
+ og.setLocale('es_ES') // Испанский
388
+ og.setLocale('pt_BR') // Португальский (Бразилия)
389
+ og.setLocale('ja_JP') // Японский
390
+ og.setLocale('zh_CN') // Китайский (упрощенный)
391
+
392
+ // Автоматическое определение
393
+ const userLocale = navigator.language.replace('-', '_')
394
+ og.setLocale(userLocale)
395
+
396
+ // Из настроек приложения
397
+ og.setLocale(i18n.locale.replace('-', '_'))
398
+ ```
399
+
400
+ ### `setSiteName`
401
+
402
+ Устанавливает название сайта.
403
+
404
+ **Параметры:**
405
+ - `siteName: string` — название сайта
406
+
407
+ **Возвращает:** `this` — для цепочечных вызовов
408
+
409
+ ```javascript
410
+ const og = new MetaOg()
411
+
412
+ // Установка имени сайта
413
+ og.setSiteName('Мой Замечательный Блог')
414
+
415
+ // Использование константы
416
+ const SITE_NAME = 'WebDev Journal'
417
+ og.setSiteName(SITE_NAME)
418
+
419
+ // Из конфигурации
420
+ og.setSiteName(config.siteName)
421
+
422
+ // Примеры хороших названий:
423
+ // - Краткие и узнаваемые
424
+ // - Соответствуют бренду
425
+ // - Без дополнительных символов
426
+ ```
427
+
428
+ ## Практические примеры
429
+
430
+ ### Полная настройка страницы статьи
431
+
432
+ ```javascript
433
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
434
+
435
+ const og = new MetaOg()
436
+
437
+ // Установка всех основных тегов
438
+ og
439
+ .setType(MetaOpenGraphType.article)
440
+ .setTitle('Полное руководство по Open Graph протоколу')
441
+ .setDescription('Узнайте, как правильно настроить Open Graph теги для вашего сайта и улучшить отображение в социальных сетях')
442
+ .setUrl('https://example.com/articles/open-graph-guide')
443
+ .setImage('https://example.com/images/og-guide-preview.jpg')
444
+ .setLocale('ru_RU')
445
+ .setSiteName('WebDev Blog')
446
+
447
+ // Теперь при публикации в соцсетях:
448
+ // - Facebook покажет красивую карточку
449
+ // - LinkedIn подхватит правильное превью
450
+ // - VK отобразит изображение и описание
451
+ // - Telegram создаст rich preview
452
+ ```
453
+
454
+ ### Динамическое обновление для SPA
455
+
456
+ ```javascript
457
+ // Vue Router
458
+ router.afterEach((to) => {
459
+ const og = new MetaOg()
460
+
461
+ og
462
+ .setTitle(to.meta.ogTitle || to.meta.title)
463
+ .setDescription(to.meta.ogDescription || to.meta.description)
464
+ .setUrl(`https://example.com${to.path}`)
465
+ .setImage(to.meta.ogImage || '/images/default-og.jpg')
466
+ })
467
+
468
+ // React Router
469
+ useEffect(() => {
470
+ const og = new MetaOg()
471
+
472
+ og
473
+ .setTitle(page.title)
474
+ .setDescription(page.description)
475
+ .setUrl(window.location.href)
476
+ .setImage(page.image)
477
+
478
+ return () => {
479
+ // Cleanup если необходимо
480
+ }
481
+ }, [page])
482
+ ```
483
+
484
+ ### Настройка для разных типов контента
485
+
486
+ ```javascript
487
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
488
+
489
+ const og = new MetaOg()
490
+
491
+ // Для главной страницы
492
+ const setupHomePage = () => {
493
+ og
494
+ .setType(MetaOpenGraphType.website)
495
+ .setTitle('Главная - Мой Сайт')
496
+ .setDescription('Добро пожаловать на наш сайт')
497
+ .setUrl('https://example.com')
498
+ .setImage('https://example.com/images/home-og.jpg')
499
+ }
500
+
501
+ // Для страницы товара
502
+ const setupProductPage = (product) => {
503
+ og
504
+ .setType(MetaOpenGraphType.product)
505
+ .setTitle(product.name)
506
+ .setDescription(product.description)
507
+ .setUrl(`https://example.com/products/${product.id}`)
508
+ .setImage(product.images[0])
509
+ }
510
+
511
+ // Для видео
512
+ const setupVideoPage = (video) => {
513
+ og
514
+ .setType(MetaOpenGraphType.videoMovie)
515
+ .setTitle(video.title)
516
+ .setDescription(video.synopsis)
517
+ .setUrl(`https://example.com/videos/${video.id}`)
518
+ .setImage(video.thumbnail)
519
+ }
520
+
521
+ // Для профиля пользователя
522
+ const setupProfilePage = (user) => {
523
+ og
524
+ .setType(MetaOpenGraphType.profile)
525
+ .setTitle(`${user.name} - Профиль`)
526
+ .setDescription(user.bio)
527
+ .setUrl(`https://example.com/users/${user.username}`)
528
+ .setImage(user.avatar)
529
+ }
530
+ ```
531
+
532
+ ### Генерация HTML для SSR
533
+
534
+ ```javascript
535
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
536
+
537
+ // Express.js сервер
538
+ app.get('/article/:id', async (req, res) => {
539
+ const article = await getArticle(req.params.id)
540
+
541
+ const og = new MetaOg()
542
+ og
543
+ .setType(MetaOpenGraphType.article)
544
+ .setTitle(article.title)
545
+ .setDescription(article.excerpt)
546
+ .setUrl(`https://example.com/article/${article.id}`)
547
+ .setImage(article.coverImage)
548
+ .setLocale('ru_RU')
549
+ .setSiteName('Мой Блог')
550
+
551
+ const html = `
552
+ <!DOCTYPE html>
553
+ <html>
554
+ <head>
555
+ <title>${article.title}</title>
556
+ ${og.html()}
557
+ </head>
558
+ <body>
559
+ ${article.content}
560
+ </body>
561
+ </html>
562
+ `
563
+
564
+ res.send(html)
565
+ })
566
+
567
+ // Результат в HTML:
568
+ // <meta property="og:type" content="article">
569
+ // <meta property="og:title" content="Заголовок статьи">
570
+ // <meta property="og:description" content="Описание...">
571
+ // <meta property="og:url" content="https://example.com/article/123">
572
+ // <meta property="og:image" content="https://example.com/images/cover.jpg">
573
+ // <meta property="og:locale" content="ru_RU">
574
+ // <meta property="og:site_name" content="Мой Блог">
575
+ ```
576
+
577
+ ### Интеграция с CMS
578
+
579
+ ```javascript
580
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
581
+
582
+ // Функция обновления OG тегов из CMS данных
583
+ const updateOGFromCMS = (pageData) => {
584
+ const og = new MetaOg()
585
+
586
+ // Определение типа контента
587
+ const typeMap = {
588
+ 'post': MetaOpenGraphType.article,
589
+ 'page': MetaOpenGraphType.website,
590
+ 'product': MetaOpenGraphType.product,
591
+ 'video': MetaOpenGraphType.video
592
+ }
593
+
594
+ og
595
+ .setType(typeMap[pageData.contentType] || MetaOpenGraphType.website)
596
+ .setTitle(pageData.seo?.ogTitle || pageData.title)
597
+ .setDescription(pageData.seo?.ogDescription || pageData.excerpt)
598
+ .setUrl(pageData.canonicalUrl)
599
+ .setImage(pageData.seo?.ogImage || pageData.featuredImage)
600
+ .setLocale(pageData.locale)
601
+ .setSiteName(pageData.site.name)
602
+
603
+ return og
604
+ }
605
+
606
+ // Использование
607
+ const page = await cms.getPage(pageId)
608
+ updateOGFromCMS(page)
609
+ ```
610
+
611
+ ### Валидация и отладка
612
+
613
+ ```javascript
614
+ import { MetaOg } from '@dxtmisha/functional'
615
+
616
+ const og = new MetaOg()
617
+
618
+ // Проверка обязательных полей
619
+ const validateOG = () => {
620
+ const errors = []
621
+
622
+ if (!og.getTitle()) errors.push('Отсутствует og:title')
623
+ if (!og.getType()) errors.push('Отсутствует og:type')
624
+ if (!og.getUrl()) errors.push('Отсутствует og:url')
625
+ if (!og.getImage()) errors.push('Отсутствует og:image')
626
+
627
+ if (errors.length > 0) {
628
+ console.error('Open Graph ошибки:', errors)
629
+ }
630
+
631
+ return errors.length === 0
632
+ }
633
+
634
+ // Вывод всех OG тегов для отладки
635
+ const debugOG = () => {
636
+ console.group('Open Graph Tags')
637
+ console.log('Title:', og.getTitle())
638
+ console.log('Type:', og.getType())
639
+ console.log('URL:', og.getUrl())
640
+ console.log('Image:', og.getImage())
641
+ console.log('Description:', og.getDescription())
642
+ console.log('Locale:', og.getLocale())
643
+ console.log('Site Name:', og.getSiteName())
644
+ console.groupEnd()
645
+ }
646
+
647
+ // Экспорт для тестирования
648
+ const exportOGData = () => {
649
+ return og.getItems()
650
+ }
651
+ ```
652
+
653
+ ## Рекомендации по использованию
654
+
655
+ ### Обязательные теги
656
+ Для корректного отображения в социальных сетях необходимо установить минимум:
657
+ - `og:title` — заголовок страницы
658
+ - `og:type` — тип контента
659
+ - `og:url` — канонический URL
660
+ - `og:image` — изображение для превью
661
+
662
+ ### Размеры изображений
663
+ - **Рекомендуемый размер:** 1200×630 px (соотношение 1.91:1)
664
+ - **Минимальный размер:** 600×315 px
665
+ - **Максимальный размер файла:** 8 MB
666
+ - **Форматы:** JPG, PNG, WebP, GIF
667
+
668
+ ### Длина текста
669
+ - **og:title:** до 60 символов (оптимально: 40)
670
+ - **og:description:** до 200 символов (Facebook), до 300 (LinkedIn)
671
+ - **og:site_name:** краткое название бренда
672
+
673
+ ### Локали
674
+ Используйте формат `language_TERRITORY`:
675
+ - Русский: `ru_RU`
676
+ - Английский США: `en_US`
677
+ - Английский GB: `en_GB`
678
+
679
+ ### Тестирование
680
+ Проверяйте Open Graph теги с помощью:
681
+ - [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
682
+ - [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
683
+ - [Twitter Card Validator](https://cards-dev.twitter.com/validator)
684
+
685
+ ## Примечания
686
+
687
+ - Класс наследует все методы от `MetaManager`, включая `html()`, `getItems()`, `setByList()`
688
+ - Автоматически использует атрибут `property` вместо `name` (стандарт Open Graph)
689
+ - Все изменения немедленно отражаются в DOM дереве
690
+ - При создании экземпляра автоматически считываются существующие OG теги из страницы
691
+ - Для SSR используйте метод `html()` для генерации мета-тегов в серверном шаблоне
692
+ - Содержимое автоматически экранируется для предотвращения XSS
693
+ - Поддерживает все официальные типы Open Graph протокола
694
+