@dxtmisha/wiki 0.24.3 → 0.39.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 (278) hide show
  1. package/package.json +8 -8
  2. package/src/classes/WikiStorybook.ts +92 -1
  3. package/src/classes/WikiStorybookItem.ts +79 -5
  4. package/src/classes/WikiStorybookProp.ts +109 -0
  5. package/src/library.ts +1 -0
  6. package/src/media/descriptions/wikiDescriptions.ts +32 -0
  7. package/src/media/descriptions/wikiDescriptionsAccordion.ts +204 -0
  8. package/src/media/descriptions/wikiDescriptionsActionSheet.ts +264 -0
  9. package/src/media/descriptions/wikiDescriptionsActions.ts +189 -0
  10. package/src/media/descriptions/wikiDescriptionsAnchor.ts +78 -0
  11. package/src/media/descriptions/wikiDescriptionsArrow.ts +214 -0
  12. package/src/media/descriptions/wikiDescriptionsBadge.ts +43 -0
  13. package/src/media/descriptions/wikiDescriptionsBars.ts +33 -0
  14. package/src/media/descriptions/wikiDescriptionsBlock.ts +159 -0
  15. package/src/media/descriptions/wikiDescriptionsButton.ts +32 -1
  16. package/src/media/descriptions/wikiDescriptionsCell.ts +26 -1
  17. package/src/media/descriptions/wikiDescriptionsChip.ts +42 -0
  18. package/src/media/descriptions/wikiDescriptionsChipGroup.ts +199 -0
  19. package/src/media/descriptions/wikiDescriptionsDialog.ts +226 -0
  20. package/src/media/descriptions/wikiDescriptionsField.ts +57 -2
  21. package/src/media/descriptions/wikiDescriptionsFieldCounter.ts +32 -0
  22. package/src/media/descriptions/wikiDescriptionsFieldLabel.ts +22 -0
  23. package/src/media/descriptions/wikiDescriptionsFieldMessage.ts +25 -0
  24. package/src/media/descriptions/wikiDescriptionsIcon.ts +46 -8
  25. package/src/media/descriptions/wikiDescriptionsImage.ts +91 -7
  26. package/src/media/descriptions/wikiDescriptionsInput.ts +313 -0
  27. package/src/media/descriptions/wikiDescriptionsList.ts +31 -0
  28. package/src/media/descriptions/wikiDescriptionsListGroup.ts +57 -0
  29. package/src/media/descriptions/wikiDescriptionsListItem.ts +42 -0
  30. package/src/media/descriptions/wikiDescriptionsListMenu.ts +41 -0
  31. package/src/media/descriptions/wikiDescriptionsMask.ts +42 -0
  32. package/src/media/descriptions/wikiDescriptionsMenu.ts +179 -0
  33. package/src/media/descriptions/wikiDescriptionsModal.ts +200 -0
  34. package/src/media/descriptions/wikiDescriptionsMotionTransform.ts +59 -6
  35. package/src/media/descriptions/wikiDescriptionsPage.ts +155 -0
  36. package/src/media/descriptions/wikiDescriptionsProgress.ts +39 -0
  37. package/src/media/descriptions/wikiDescriptionsRipple.ts +42 -3
  38. package/src/media/descriptions/wikiDescriptionsScrollbar.ts +48 -0
  39. package/src/media/descriptions/wikiDescriptionsSection.ts +152 -0
  40. package/src/media/descriptions/wikiDescriptionsSelect.ts +253 -0
  41. package/src/media/descriptions/wikiDescriptionsSelectValue.ts +107 -0
  42. package/src/media/descriptions/wikiDescriptionsSkeleton.ts +42 -1
  43. package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts +80 -0
  44. package/src/media/descriptions/wikiDescriptionsTooltip.ts +136 -0
  45. package/src/media/descriptions/wikiDescriptionsWindow.ts +60 -0
  46. package/src/media/functional/en/conversions.mdx +67 -0
  47. package/src/media/functional/en/dataUtils.mdx +25 -0
  48. package/src/media/functional/en/datetimeRef.mdx +1 -1
  49. package/src/media/functional/en/eventRef.mdx +1 -1
  50. package/src/media/functional/en/executionUtils.mdx +58 -0
  51. package/src/media/functional/en/geoFlagRef.mdx +1 -1
  52. package/src/media/functional/en/geoIntlRef.mdx +1 -1
  53. package/src/media/functional/en/geoRef.mdx +2 -2
  54. package/src/media/functional/en/meta.mdx +1206 -0
  55. package/src/media/functional/en/metaManager.mdx +376 -0
  56. package/src/media/functional/en/metaOg.mdx +694 -0
  57. package/src/media/functional/en/metaTwitter.mdx +853 -0
  58. package/src/media/functional/en/reactive.mdx +40 -0
  59. package/src/media/functional/en/refTypes.mdx +1 -1
  60. package/src/media/functional/en/useApiRef.mdx +5 -5
  61. package/src/media/functional/en/useMeta.mdx +431 -0
  62. package/src/media/functional/en/validationUtils.mdx +11 -0
  63. package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.en.mdx +25 -0
  64. package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.ru.mdx +25 -0
  65. package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.vi.mdx +25 -0
  66. package/src/media/functional/functional-basic/functions/isEnter/isEnter.en.mdx +30 -0
  67. package/src/media/functional/functional-basic/functions/isEnter/isEnter.ru.mdx +30 -0
  68. package/src/media/functional/functional-basic/functions/isEnter/isEnter.vi.mdx +30 -0
  69. package/src/media/functional/ru/conversions.mdx +67 -0
  70. package/src/media/functional/ru/dataUtils.mdx +25 -0
  71. package/src/media/functional/ru/datetimeRef.mdx +2 -2
  72. package/src/media/functional/ru/eventRef.mdx +1 -1
  73. package/src/media/functional/ru/executionUtils.mdx +58 -0
  74. package/src/media/functional/ru/geoFlagRef.mdx +1 -1
  75. package/src/media/functional/ru/geoIntl.mdx +2 -2
  76. package/src/media/functional/ru/geoIntlRef.mdx +1 -1
  77. package/src/media/functional/ru/geoRef.mdx +2 -2
  78. package/src/media/functional/ru/listTypes.mdx +1 -1
  79. package/src/media/functional/ru/meta.mdx +1330 -0
  80. package/src/media/functional/ru/metaManager.mdx +376 -0
  81. package/src/media/functional/ru/metaOg.mdx +694 -0
  82. package/src/media/functional/ru/metaTwitter.mdx +853 -0
  83. package/src/media/functional/ru/reactive.mdx +40 -0
  84. package/src/media/functional/ru/refTypes.mdx +2 -2
  85. package/src/media/functional/ru/useApiRef.mdx +5 -5
  86. package/src/media/functional/ru/useMeta.mdx +431 -0
  87. package/src/media/functional/ru/validationUtils.mdx +11 -0
  88. package/src/media/mdx/Accordion/accordion.en.mdx +59 -0
  89. package/src/media/mdx/Accordion/accordion.ru.mdx +59 -0
  90. package/src/media/mdx/Accordion/slots.en.mdx +6 -0
  91. package/src/media/mdx/Accordion/slots.ru.mdx +6 -0
  92. package/src/media/mdx/Accordion/wikiMdxAccordion.ts +25 -0
  93. package/src/media/mdx/ActionSheet/actionSheet.en.mdx +61 -0
  94. package/src/media/mdx/ActionSheet/actionSheet.ru.mdx +61 -0
  95. package/src/media/mdx/ActionSheet/touchClose.en.mdx +21 -0
  96. package/src/media/mdx/ActionSheet/touchClose.ru.mdx +21 -0
  97. package/src/media/mdx/ActionSheet/wikiMdxActionSheet.ts +25 -0
  98. package/src/media/mdx/Actions/actions.en.mdx +48 -0
  99. package/src/media/mdx/Actions/actions.ru.mdx +48 -0
  100. package/src/media/mdx/Actions/flexible.en.mdx +19 -0
  101. package/src/media/mdx/Actions/flexible.ru.mdx +19 -0
  102. package/src/media/mdx/Actions/list.en.mdx +50 -0
  103. package/src/media/mdx/Actions/list.ru.mdx +50 -0
  104. package/src/media/mdx/Actions/wikiMdxActions.ts +31 -0
  105. package/src/media/mdx/Anchor/anchor.en.mdx +34 -0
  106. package/src/media/mdx/Anchor/anchor.ru.mdx +34 -0
  107. package/src/media/mdx/Anchor/expose.go.en.mdx +6 -0
  108. package/src/media/mdx/Anchor/expose.go.ru.mdx +6 -0
  109. package/src/media/mdx/Anchor/hide.en.mdx +28 -0
  110. package/src/media/mdx/Anchor/hide.ru.mdx +28 -0
  111. package/src/media/mdx/Anchor/isCopy.en.mdx +23 -0
  112. package/src/media/mdx/Anchor/isCopy.ru.mdx +23 -0
  113. package/src/media/mdx/Anchor/scroll.en.mdx +34 -0
  114. package/src/media/mdx/Anchor/scroll.ru.mdx +35 -0
  115. package/src/media/mdx/Anchor/wikiMdxAnchor.ts +43 -0
  116. package/src/media/mdx/Arrow/arrow.en.mdx +33 -0
  117. package/src/media/mdx/Arrow/arrow.ru.mdx +33 -0
  118. package/src/media/mdx/Arrow/wikiMdxArrow.ts +19 -0
  119. package/src/media/mdx/Block/block.en.mdx +42 -0
  120. package/src/media/mdx/Block/block.ru.mdx +42 -0
  121. package/src/media/mdx/Block/wikiMdxBlock.ts +19 -0
  122. package/src/media/mdx/ChipGroup/chipGroup.en.mdx +51 -0
  123. package/src/media/mdx/ChipGroup/chipGroup.ru.mdx +51 -0
  124. package/src/media/mdx/ChipGroup/selected.en.mdx +50 -0
  125. package/src/media/mdx/ChipGroup/selected.ru.mdx +50 -0
  126. package/src/media/mdx/ChipGroup/wikiMdxChipGroup.ts +25 -0
  127. package/src/media/mdx/Dialog/buttons.en.mdx +45 -0
  128. package/src/media/mdx/Dialog/buttons.ru.mdx +45 -0
  129. package/src/media/mdx/Dialog/dialog.en.mdx +66 -0
  130. package/src/media/mdx/Dialog/dialog.ru.mdx +65 -0
  131. package/src/media/mdx/Dialog/events.en.mdx +63 -0
  132. package/src/media/mdx/Dialog/events.ru.mdx +63 -0
  133. package/src/media/mdx/Dialog/states.en.mdx +58 -0
  134. package/src/media/mdx/Dialog/states.ru.mdx +57 -0
  135. package/src/media/mdx/Dialog/wikiMdxDialog.ts +37 -0
  136. package/src/media/mdx/Field/arrows.en.mdx +22 -6
  137. package/src/media/mdx/Field/arrows.ru.mdx +22 -6
  138. package/src/media/mdx/Field/slots.en.mdx +0 -13
  139. package/src/media/mdx/Field/slots.ru.mdx +0 -13
  140. package/src/media/mdx/Image/flag.en.mdx +23 -0
  141. package/src/media/mdx/Image/flag.ru.mdx +23 -0
  142. package/src/media/mdx/Image/image.en.mdx +26 -21
  143. package/src/media/mdx/Image/image.ru.mdx +26 -22
  144. package/src/media/mdx/Image/img-tag.en.mdx +105 -0
  145. package/src/media/mdx/Image/img-tag.ru.mdx +105 -0
  146. package/src/media/mdx/Image/wikiMdxImage.ts +12 -0
  147. package/src/media/mdx/Input/currency.en.mdx +38 -0
  148. package/src/media/mdx/Input/currency.ru.mdx +38 -0
  149. package/src/media/mdx/Input/date.en.mdx +53 -0
  150. package/src/media/mdx/Input/date.ru.mdx +53 -0
  151. package/src/media/mdx/Input/input.en.mdx +143 -0
  152. package/src/media/mdx/Input/input.ru.mdx +71 -0
  153. package/src/media/mdx/Input/mask.en.mdx +30 -0
  154. package/src/media/mdx/Input/mask.ru.mdx +30 -0
  155. package/src/media/mdx/Input/number.en.mdx +41 -0
  156. package/src/media/mdx/Input/number.ru.mdx +41 -0
  157. package/src/media/mdx/Input/type.en.mdx +26 -0
  158. package/src/media/mdx/Input/type.ru.mdx +26 -0
  159. package/src/media/mdx/Input/wikiMdxInput.ts +49 -0
  160. package/src/media/mdx/Menu/event.updateValue.en.mdx +29 -0
  161. package/src/media/mdx/Menu/event.updateValue.ru.mdx +30 -0
  162. package/src/media/mdx/Menu/expose.navigation.en.mdx +12 -0
  163. package/src/media/mdx/Menu/expose.navigation.ru.mdx +12 -0
  164. package/src/media/mdx/Menu/navigation.en.mdx +56 -0
  165. package/src/media/mdx/Menu/navigation.ru.mdx +56 -0
  166. package/src/media/mdx/Menu/slots.control.en.mdx +65 -0
  167. package/src/media/mdx/Menu/slots.control.ru.mdx +65 -0
  168. package/src/media/mdx/Menu/slots.en.mdx +2 -24
  169. package/src/media/mdx/Menu/slots.ru.mdx +2 -24
  170. package/src/media/mdx/Menu/wikiMdxMenu.ts +27 -3
  171. package/src/media/mdx/Modal/differences.en.mdx +130 -0
  172. package/src/media/mdx/Modal/differences.ru.mdx +65 -0
  173. package/src/media/mdx/Modal/modal.en.mdx +63 -0
  174. package/src/media/mdx/Modal/modal.ru.mdx +63 -0
  175. package/src/media/mdx/Modal/wikiMdxModal.ts +25 -0
  176. package/src/media/mdx/MotionTransform/expose.motionTransformElement.en.mdx +13 -0
  177. package/src/media/mdx/MotionTransform/expose.motionTransformElement.ru.mdx +14 -0
  178. package/src/media/mdx/MotionTransform/wikiMdxMotionTransform.ts +6 -0
  179. package/src/media/mdx/Page/page.en.mdx +38 -0
  180. package/src/media/mdx/Page/page.ru.mdx +38 -0
  181. package/src/media/mdx/Page/wikiMdxPage.ts +19 -0
  182. package/src/media/mdx/Section/section.en.mdx +38 -0
  183. package/src/media/mdx/Section/section.ru.mdx +38 -0
  184. package/src/media/mdx/Section/wikiMdxSection.ts +19 -0
  185. package/src/media/mdx/Select/select.en.mdx +69 -0
  186. package/src/media/mdx/Select/select.ru.mdx +69 -0
  187. package/src/media/mdx/Select/wikiMdxSelect.ts +19 -0
  188. package/src/media/mdx/SelectValue/selectValue.en.mdx +64 -0
  189. package/src/media/mdx/SelectValue/selectValue.ru.mdx +64 -0
  190. package/src/media/mdx/SelectValue/wikiMdxSelectValue.ts +19 -0
  191. package/src/media/mdx/TextareaAutosize/textarea-autosize.en.mdx +65 -0
  192. package/src/media/mdx/TextareaAutosize/textarea-autosize.ru.mdx +65 -0
  193. package/src/media/mdx/TextareaAutosize/wikiMdxTextareaAutosize.ts +19 -0
  194. package/src/media/mdx/Tooltip/event.tooltip.en.mdx +7 -0
  195. package/src/media/mdx/Tooltip/event.tooltip.ru.mdx +8 -0
  196. package/src/media/mdx/Tooltip/slot.control.en.mdx +14 -0
  197. package/src/media/mdx/Tooltip/slot.control.ru.mdx +14 -0
  198. package/src/media/mdx/Tooltip/tooltip.en.mdx +34 -0
  199. package/src/media/mdx/Tooltip/tooltip.ru.mdx +34 -0
  200. package/src/media/mdx/Tooltip/wikiMdxTooltip.ts +31 -0
  201. package/src/media/mdx/Window/classes.ru.mdx +1 -1
  202. package/src/media/mdx/event/events.actions.en.mdx +44 -0
  203. package/src/media/mdx/event/events.actions.ru.mdx +44 -0
  204. package/src/media/mdx/event/events.inputStandard.en.mdx +6 -0
  205. package/src/media/mdx/event/events.inputStandard.ru.mdx +6 -0
  206. package/src/media/mdx/event/wikiMdxEvent.ts +20 -8
  207. package/src/media/mdx/expose/expose.clear.en.mdx +1 -1
  208. package/src/media/mdx/expose/expose.descriptionId.en.mdx +6 -0
  209. package/src/media/mdx/expose/expose.descriptionId.ru.mdx +6 -0
  210. package/src/media/mdx/expose/expose.id.en.mdx +6 -0
  211. package/src/media/mdx/expose/expose.id.ru.mdx +6 -0
  212. package/src/media/mdx/expose/expose.labelId.en.mdx +6 -0
  213. package/src/media/mdx/expose/expose.labelId.ru.mdx +6 -0
  214. package/src/media/mdx/expose/wikiMdxExpose.ts +18 -0
  215. package/src/media/mdx/slot/body.en.mdx +6 -0
  216. package/src/media/mdx/slot/body.ru.mdx +6 -0
  217. package/src/media/mdx/slot/headline.en.mdx +7 -0
  218. package/src/media/mdx/slot/headline.ru.mdx +6 -0
  219. package/src/media/mdx/slot/leading.en.mdx +7 -0
  220. package/src/media/mdx/slot/leading.ru.mdx +7 -0
  221. package/src/media/mdx/slot/secondary.en.mdx +5 -0
  222. package/src/media/mdx/slot/secondary.ru.mdx +5 -0
  223. package/src/media/mdx/slot/trailing.en.mdx +7 -0
  224. package/src/media/mdx/slot/trailing.ru.mdx +7 -0
  225. package/src/media/mdx/slot/wikiMdxSlot.ts +30 -0
  226. package/src/media/mdx/style/isSkeleton.en.mdx +2 -2
  227. package/src/media/mdx/style/isSkeleton.ru.mdx +2 -2
  228. package/src/media/mdx/value/v-model-selected.en.mdx +28 -0
  229. package/src/media/mdx/value/v-model-selected.ru.mdx +28 -0
  230. package/src/media/mdx/value/v-model.en.mdx +26 -0
  231. package/src/media/mdx/value/v-model.ru.mdx +26 -0
  232. package/src/media/mdx/value/wikiMdxValue.ts +24 -3
  233. package/src/media/mdx/wikiMdx.ts +33 -1
  234. package/src/media/props/wiki.ts +44 -0
  235. package/src/media/props/wikiActions.ts +43 -0
  236. package/src/media/props/wikiActionsInclude.ts +62 -0
  237. package/src/media/props/wikiAnchor.ts +85 -0
  238. package/src/media/props/wikiAria.ts +123 -0
  239. package/src/media/props/wikiArrow.ts +24 -0
  240. package/src/media/props/wikiArrowInclude.ts +45 -0
  241. package/src/media/props/wikiAttributes.ts +143 -0
  242. package/src/media/props/wikiBadge.ts +7 -4
  243. package/src/media/props/wikiBars.ts +7 -6
  244. package/src/media/props/wikiBarsInclude.ts +82 -0
  245. package/src/media/props/wikiButton.ts +8 -4
  246. package/src/media/props/wikiChip.ts +4 -2
  247. package/src/media/props/wikiChipGroup.ts +39 -0
  248. package/src/media/props/wikiDialog.ts +33 -0
  249. package/src/media/props/wikiField.ts +18 -31
  250. package/src/media/props/wikiFieldCounterInclude.ts +87 -0
  251. package/src/media/props/wikiForm.ts +267 -0
  252. package/src/media/props/wikiHook.ts +20 -0
  253. package/src/media/props/wikiIcon.ts +19 -6
  254. package/src/media/props/wikiIconInclude.ts +322 -0
  255. package/src/media/props/wikiImage.ts +97 -20
  256. package/src/media/props/wikiInformation.ts +164 -0
  257. package/src/media/props/wikiInput.ts +34 -0
  258. package/src/media/props/wikiList.ts +10 -4
  259. package/src/media/props/wikiListItem.ts +23 -2
  260. package/src/media/props/wikiMask.ts +2 -12
  261. package/src/media/props/wikiMaskInclude.ts +54 -0
  262. package/src/media/props/wikiMenu.ts +1 -11
  263. package/src/media/props/wikiMotionTransform.ts +7 -13
  264. package/src/media/props/wikiOption.ts +356 -0
  265. package/src/media/props/wikiProgress.ts +8 -5
  266. package/src/media/props/wikiScrollbar.ts +6 -6
  267. package/src/media/props/wikiSelect.ts +68 -0
  268. package/src/media/props/wikiSelectValue.ts +30 -0
  269. package/src/media/props/wikiStatus.ts +34 -57
  270. package/src/media/props/wikiStyle.ts +85 -406
  271. package/src/media/props/wikiTechnical.ts +141 -1
  272. package/src/media/props/wikiText.ts +167 -0
  273. package/src/media/props/wikiTooltip.ts +53 -0
  274. package/src/media/props/wikiValue.ts +22 -276
  275. package/src/media/props/wikiWindow.ts +24 -45
  276. package/src/shims-mdx.d.ts +5 -0
  277. package/src/styles/storybookStyle.scss +3 -1
  278. package/src/types/storybookTypes.ts +48 -4
package/src/media/functional/en/metaOg.mdx ADDED
@@ -0,0 +1,694 @@
1
+ import {Meta} from '@storybook/addon-docs/blocks'
2
+
3
+ <Meta title='@dxtmisha/functional/en/Classes/MetaOg'/>
4
+
5
+ # MetaOg Class
6
+
7
+ A class for working with Open Graph meta tags, ensuring optimal content display when shared on social networks (Facebook, LinkedIn, VK, and others). Inherits `MetaManager` functionality and provides type-safe methods for managing standard Open Graph tags.
8
+
9
+ ## Key Features
10
+
11
+ - **Type Safety** — strict typing for all Open Graph tags and content types
12
+ - **Automatic Synchronization** — updates meta tags in the document `<head>`
13
+ - **Property Support** — uses the `property` attribute instead of `name` (Open Graph standard)
14
+ - **Convenient API** — specialized methods for each tag
15
+ - **SSR Compatibility** — HTML generation for server-side rendering
16
+ - **Type Validation** — support for all official Open Graph types
17
+ - **Chainable Methods** — ability to set values sequentially
18
+
19
+ ## Constructor
20
+
21
+ ### `constructor`
22
+
23
+ Creates a MetaOg instance with a preset list of all supported Open Graph tags. Automatically reads existing tags from the DOM.
24
+
25
+ ```javascript
26
+ import { MetaOg } from '@dxtmisha/functional'
27
+
28
+ // Create an instance
29
+ const og = new MetaOg()
30
+
31
+ // The class automatically manages all standard OG tags:
32
+ // og:title, og:type, og:url, og:image, og:description,
33
+ // og:locale, og:site_name and others
34
+ ```
35
+
36
+ ## Data Retrieval Methods
37
+
38
+ ### `getTitle`
39
+
40
+ Gets the Open Graph page title.
41
+
42
+ **Returns:** `string` — page title
43
+
44
+ ```javascript
45
+ const og = new MetaOg()
46
+
47
+ const title = og.getTitle()
48
+ // 'Article Title'
49
+
50
+ // Use for debugging
51
+ console.log('OG Title:', og.getTitle())
52
+
53
+ // Check if set
54
+ if (og.getTitle()) {
55
+ console.log('Title is set')
56
+ }
57
+ ```
58
+
59
+ ### `getType`
60
+
61
+ Gets the Open Graph content type.
62
+
63
+ **Returns:** `MetaOpenGraphType` — content type (website, article, video, etc.)
64
+
65
+ ```javascript
66
+ const og = new MetaOg()
67
+
68
+ const type = og.getType()
69
+ // 'article'
70
+
71
+ // Check content type
72
+ if (og.getType() === 'article') {
73
+ console.log('This is an article')
74
+ }
75
+
76
+ // Conditional logic by type
77
+ switch (og.getType()) {
78
+ case 'article':
79
+ // Logic for articles
80
+ break
81
+ case 'product':
82
+ // Logic for products
83
+ break
84
+ }
85
+ ```
86
+
87
+ ### `getUrl`
88
+
89
+ Gets the canonical page URL.
90
+
91
+ **Returns:** `string` — page URL
92
+
93
+ ```javascript
94
+ const og = new MetaOg()
95
+
96
+ const url = og.getUrl()
97
+ // 'https://example.com/article/my-post'
98
+
99
+ // Get domain
100
+ const domain = new URL(og.getUrl()).hostname
101
+
102
+ // Check match with current URL
103
+ if (og.getUrl() !== window.location.href) {
104
+ console.warn('OG URL does not match current URL')
105
+ }
106
+ ```
107
+
108
+ ### `getImage`
109
+
110
+ Gets the preview image URL.
111
+
112
+ **Returns:** `string` — image URL
113
+
114
+ ```javascript
115
+ const og = new MetaOg()
116
+
117
+ const imageUrl = og.getImage()
118
+ // 'https://example.com/images/preview.jpg'
119
+
120
+ // Preload image
121
+ const img = new Image()
122
+ img.src = og.getImage()
123
+
124
+ // Check if image is set
125
+ if (!og.getImage()) {
126
+ console.warn('OG image is not set')
127
+ }
128
+ ```
129
+
130
+ ### `getDescription`
131
+
132
+ Gets the Open Graph page description.
133
+
134
+ **Returns:** `string` — page description
135
+
136
+ ```javascript
137
+ const og = new MetaOg()
138
+
139
+ const description = og.getDescription()
140
+ // 'Detailed article description...'
141
+
142
+ // Check length
143
+ if (og.getDescription().length > 200) {
144
+ console.warn('Description is too long')
145
+ }
146
+
147
+ // Use in preview
148
+ const previewText = og.getDescription().substring(0, 100) + '...'
149
+ ```
150
+
151
+ ### `getLocale`
152
+
153
+ Gets the content locale (language).
154
+
155
+ **Returns:** `string` — locale in language_TERRITORY format
156
+
157
+ ```javascript
158
+ const og = new MetaOg()
159
+
160
+ const locale = og.getLocale()
161
+ // 'en_US'
162
+
163
+ // Determine language
164
+ const language = og.getLocale().split('_')[0] // 'en'
165
+
166
+ // Use for localization
167
+ if (og.getLocale().startsWith('en')) {
168
+ console.log('English content')
169
+ }
170
+ ```
171
+
172
+ ### `getSiteName`
173
+
174
+ Gets the site name.
175
+
176
+ **Returns:** `string` — site name
177
+
178
+ ```javascript
179
+ const og = new MetaOg()
180
+
181
+ const siteName = og.getSiteName()
182
+ // 'My Blog'
183
+
184
+ // Use in title
185
+ document.title = `${og.getTitle()} - ${og.getSiteName()}`
186
+
187
+ // Check brand
188
+ const isBrandSet = og.getSiteName() !== ''
189
+ ```
190
+
191
+ ## Data Setting Methods
192
+
193
+ ### `setTitle`
194
+
195
+ Sets the Open Graph page title.
196
+
197
+ **Parameters:**
198
+ - `title: string` — page title
199
+
200
+ **Returns:** `this` — for chaining calls
201
+
202
+ ```javascript
203
+ const og = new MetaOg()
204
+
205
+ // Set title
206
+ og.setTitle('Amazing Article About Web Development')
207
+
208
+ // Chain methods
209
+ og
210
+ .setTitle('New Title')
211
+ .setDescription('New Description')
212
+
213
+ // Dynamic update
214
+ const updateTitle = (newTitle) => {
215
+ og.setTitle(newTitle)
216
+ }
217
+
218
+ // Automatic generation
219
+ og.setTitle(`${article.title} - ${siteName}`)
220
+ ```
221
+
222
+ ### `setType`
223
+
224
+ Sets the Open Graph content type.
225
+
226
+ **Parameters:**
227
+ - `type: MetaOpenGraphType` — content type
228
+
229
+ **Returns:** `this` — for chaining calls
230
+
231
+ **Available types:**
232
+ - `website` — regular website/homepage
233
+ - `article` — article/blog post
234
+ - `video` — video content
235
+ - `video.movie` — movie
236
+ - `video.episode` — TV series episode
237
+ - `video.tv_show` — TV series
238
+ - `music.song` — song
239
+ - `music.album` — music album
240
+ - `music.playlist` — playlist
241
+ - `music.radio_station` — radio station
242
+ - `product` — product in store
243
+ - `book` — book
244
+ - `profile` — user profile
245
+ - `business.business` — company/organization
246
+ - `place` — place/location
247
+ - `event` — event/meeting
248
+ - `app` — application
249
+
250
+ ```javascript
251
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
252
+
253
+ const og = new MetaOg()
254
+
255
+ // Set article type
256
+ og.setType(MetaOpenGraphType.article)
257
+
258
+ // For homepage
259
+ og.setType(MetaOpenGraphType.website)
260
+
261
+ // For store products
262
+ og.setType(MetaOpenGraphType.product)
263
+
264
+ // For video
265
+ og.setType(MetaOpenGraphType.videoMovie)
266
+
267
+ // Conditional setting
268
+ const contentType = isArticle
269
+ ? MetaOpenGraphType.article
270
+ : MetaOpenGraphType.website
271
+
272
+ og.setType(contentType)
273
+ ```
274
+
275
+ ### `setUrl`
276
+
277
+ Sets the canonical page URL.
278
+
279
+ **Parameters:**
280
+ - `url: string` — page URL
281
+
282
+ **Returns:** `this` — for chaining calls
283
+
284
+ ```javascript
285
+ const og = new MetaOg()
286
+
287
+ // Set URL
288
+ og.setUrl('https://example.com/article/my-post')
289
+
290
+ // Use current URL
291
+ og.setUrl(window.location.href)
292
+
293
+ // Clean query parameters
294
+ const cleanUrl = window.location.origin + window.location.pathname
295
+ og.setUrl(cleanUrl)
296
+
297
+ // For SPA
298
+ router.afterEach((to) => {
299
+ og.setUrl(`https://example.com${to.fullPath}`)
300
+ })
301
+
302
+ // Absolute URL from relative
303
+ const absoluteUrl = new URL('/article', window.location.origin).href
304
+ og.setUrl(absoluteUrl)
305
+ ```
306
+
307
+ ### `setImage`
308
+
309
+ Sets the preview image URL.
310
+
311
+ **Parameters:**
312
+ - `url: string` — image URL
313
+
314
+ **Returns:** `this` — for chaining calls
315
+
316
+ ```javascript
317
+ const og = new MetaOg()
318
+
319
+ // Set image
320
+ og.setImage('https://example.com/images/preview.jpg')
321
+
322
+ // Absolute URL
323
+ const imageUrl = new URL('/images/og-image.jpg', window.location.origin).href
324
+ og.setImage(imageUrl)
325
+
326
+ // From content data
327
+ og.setImage(article.coverImage)
328
+
329
+ // Fallback image
330
+ og.setImage(article.image || '/images/default-og.jpg')
331
+
332
+ // Recommended size: 1200x630 pixels
333
+ // Minimum: 600x315 pixels
334
+ // Format: JPG, PNG, WebP
335
+ ```
336
+
337
+ ### `setDescription`
338
+
339
+ Sets the Open Graph page description.
340
+
341
+ **Parameters:**
342
+ - `description: string` — page description
343
+
344
+ **Returns:** `this` — for chaining calls
345
+
346
+ ```javascript
347
+ const og = new MetaOg()
348
+
349
+ // Set description
350
+ og.setDescription('Complete guide to building web applications using modern technologies')
351
+
352
+ // Truncate long text
353
+ const shortDesc = article.content.substring(0, 200)
354
+ og.setDescription(shortDesc)
355
+
356
+ // Remove HTML tags
357
+ const plainText = article.html.replace(/<[^>]*>/g, '')
358
+ og.setDescription(plainText.substring(0, 300))
359
+
360
+ // Recommendations:
361
+ // - Optimal length: 150-300 characters
362
+ // - Facebook displays ~300 characters
363
+ // - Avoid special HTML characters
364
+ ```
365
+
366
+ ### `setLocale`
367
+
368
+ Sets the content locale (language).
369
+
370
+ **Parameters:**
371
+ - `locale: string` — locale in language_TERRITORY format
372
+
373
+ **Returns:** `this` — for chaining calls
374
+
375
+ ```javascript
376
+ const og = new MetaOg()
377
+
378
+ // Set English locale
379
+ og.setLocale('en_US')
380
+
381
+ // Other popular locales
382
+ og.setLocale('en_GB') // English (United Kingdom)
383
+ og.setLocale('ru_RU') // Russian
384
+ og.setLocale('uk_UA') // Ukrainian
385
+ og.setLocale('de_DE') // German
386
+ og.setLocale('fr_FR') // French
387
+ og.setLocale('es_ES') // Spanish
388
+ og.setLocale('pt_BR') // Portuguese (Brazil)
389
+ og.setLocale('ja_JP') // Japanese
390
+ og.setLocale('zh_CN') // Chinese (Simplified)
391
+
392
+ // Automatic detection
393
+ const userLocale = navigator.language.replace('-', '_')
394
+ og.setLocale(userLocale)
395
+
396
+ // From application settings
397
+ og.setLocale(i18n.locale.replace('-', '_'))
398
+ ```
399
+
400
+ ### `setSiteName`
401
+
402
+ Sets the site name.
403
+
404
+ **Parameters:**
405
+ - `siteName: string` — site name
406
+
407
+ **Returns:** `this` — for chaining calls
408
+
409
+ ```javascript
410
+ const og = new MetaOg()
411
+
412
+ // Set site name
413
+ og.setSiteName('My Awesome Blog')
414
+
415
+ // Use constant
416
+ const SITE_NAME = 'WebDev Journal'
417
+ og.setSiteName(SITE_NAME)
418
+
419
+ // From configuration
420
+ og.setSiteName(config.siteName)
421
+
422
+ // Examples of good names:
423
+ // - Short and recognizable
424
+ // - Match the brand
425
+ // - No extra symbols
426
+ ```
427
+
428
+ ## Practical Examples
429
+
430
+ ### Complete Article Page Setup
431
+
432
+ ```javascript
433
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
434
+
435
+ const og = new MetaOg()
436
+
437
+ // Set all main tags
438
+ og
439
+ .setType(MetaOpenGraphType.article)
440
+ .setTitle('Complete Guide to Open Graph Protocol')
441
+ .setDescription('Learn how to properly configure Open Graph tags for your site and improve social media sharing')
442
+ .setUrl('https://example.com/articles/open-graph-guide')
443
+ .setImage('https://example.com/images/og-guide-preview.jpg')
444
+ .setLocale('en_US')
445
+ .setSiteName('WebDev Blog')
446
+
447
+ // Now when shared on social networks:
448
+ // - Facebook will show a beautiful card
449
+ // - LinkedIn will pick up the correct preview
450
+ // - VK will display the image and description
451
+ // - Telegram will create a rich preview
452
+ ```
453
+
454
+ ### Dynamic Updates for 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 if needed
480
+ }
481
+ }, [page])
482
+ ```
483
+
484
+ ### Setup for Different Content Types
485
+
486
+ ```javascript
487
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
488
+
489
+ const og = new MetaOg()
490
+
491
+ // For homepage
492
+ const setupHomePage = () => {
493
+ og
494
+ .setType(MetaOpenGraphType.website)
495
+ .setTitle('Home - My Website')
496
+ .setDescription('Welcome to our website')
497
+ .setUrl('https://example.com')
498
+ .setImage('https://example.com/images/home-og.jpg')
499
+ }
500
+
501
+ // For product page
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
+ // For video
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
+ // For user profile
522
+ const setupProfilePage = (user) => {
523
+ og
524
+ .setType(MetaOpenGraphType.profile)
525
+ .setTitle(`${user.name} - Profile`)
526
+ .setDescription(user.bio)
527
+ .setUrl(`https://example.com/users/${user.username}`)
528
+ .setImage(user.avatar)
529
+ }
530
+ ```
531
+
532
+ ### HTML Generation for SSR
533
+
534
+ ```javascript
535
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
536
+
537
+ // Express.js server
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('en_US')
549
+ .setSiteName('My Blog')
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
+ // Result in HTML:
568
+ // <meta property="og:type" content="article">
569
+ // <meta property="og:title" content="Article Title">
570
+ // <meta property="og:description" content="Description...">
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="en_US">
574
+ // <meta property="og:site_name" content="My Blog">
575
+ ```
576
+
577
+ ### CMS Integration
578
+
579
+ ```javascript
580
+ import { MetaOg, MetaOpenGraphType } from '@dxtmisha/functional'
581
+
582
+ // Function to update OG tags from CMS data
583
+ const updateOGFromCMS = (pageData) => {
584
+ const og = new MetaOg()
585
+
586
+ // Determine content type
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
+ // Usage
607
+ const page = await cms.getPage(pageId)
608
+ updateOGFromCMS(page)
609
+ ```
610
+
611
+ ### Validation and Debugging
612
+
613
+ ```javascript
614
+ import { MetaOg } from '@dxtmisha/functional'
615
+
616
+ const og = new MetaOg()
617
+
618
+ // Check required fields
619
+ const validateOG = () => {
620
+ const errors = []
621
+
622
+ if (!og.getTitle()) errors.push('Missing og:title')
623
+ if (!og.getType()) errors.push('Missing og:type')
624
+ if (!og.getUrl()) errors.push('Missing og:url')
625
+ if (!og.getImage()) errors.push('Missing og:image')
626
+
627
+ if (errors.length > 0) {
628
+ console.error('Open Graph errors:', errors)
629
+ }
630
+
631
+ return errors.length === 0
632
+ }
633
+
634
+ // Output all OG tags for debugging
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
+ // Export for testing
648
+ const exportOGData = () => {
649
+ return og.getItems()
650
+ }
651
+ ```
652
+
653
+ ## Usage Recommendations
654
+
655
+ ### Required Tags
656
+ For correct display on social networks, set at minimum:
657
+ - `og:title` — page title
658
+ - `og:type` — content type
659
+ - `og:url` — canonical URL
660
+ - `og:image` — preview image
661
+
662
+ ### Image Sizes
663
+ - **Recommended size:** 1200×630 px (1.91:1 ratio)
664
+ - **Minimum size:** 600×315 px
665
+ - **Maximum file size:** 8 MB
666
+ - **Formats:** JPG, PNG, WebP, GIF
667
+
668
+ ### Text Length
669
+ - **og:title:** up to 60 characters (optimal: 40)
670
+ - **og:description:** up to 200 characters (Facebook), up to 300 (LinkedIn)
671
+ - **og:site_name:** short brand name
672
+
673
+ ### Locales
674
+ Use `language_TERRITORY` format:
675
+ - English US: `en_US`
676
+ - English GB: `en_GB`
677
+ - Russian: `ru_RU`
678
+
679
+ ### Testing
680
+ Check Open Graph tags using:
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
+ ## Notes
686
+
687
+ - The class inherits all methods from `MetaManager`, including `html()`, `getItems()`, `setByList()`
688
+ - Automatically uses the `property` attribute instead of `name` (Open Graph standard)
689
+ - All changes are immediately reflected in the DOM tree
690
+ - When creating an instance, existing OG tags from the page are automatically read
691
+ - For SSR, use the `html()` method to generate meta tags in the server template
692
+ - Content is automatically escaped to prevent XSS
693
+ - Supports all official Open Graph protocol types
694
+