@dxtmisha/wiki 0.24.2 → 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.
- package/package.json +7 -7
- package/src/classes/WikiStorybookItem.ts +24 -0
- package/src/library.ts +7 -7
- package/src/media/descriptions/wikiDescriptions.ts +28 -0
- package/src/media/descriptions/wikiDescriptionsAccordion.ts +158 -0
- package/src/media/descriptions/wikiDescriptionsActionSheet.ts +211 -0
- package/src/media/descriptions/wikiDescriptionsActions.ts +161 -0
- package/src/media/descriptions/wikiDescriptionsAnchor.ts +42 -0
- package/src/media/descriptions/wikiDescriptionsArrow.ts +181 -0
- package/src/media/descriptions/wikiDescriptionsBars.ts +1 -3
- package/src/media/descriptions/wikiDescriptionsBlock.ts +97 -0
- package/src/media/descriptions/wikiDescriptionsButton.ts +0 -1
- package/src/media/descriptions/wikiDescriptionsCell.ts +3 -3
- package/src/media/descriptions/wikiDescriptionsChip.ts +0 -1
- package/src/media/descriptions/wikiDescriptionsChipGroup.ts +168 -0
- package/src/media/descriptions/wikiDescriptionsDialog.ts +182 -0
- package/src/media/descriptions/wikiDescriptionsField.ts +3 -4
- package/src/media/descriptions/wikiDescriptionsFieldCounter.ts +6 -6
- package/src/media/descriptions/wikiDescriptionsFieldMessage.ts +1 -2
- package/src/media/descriptions/wikiDescriptionsImage.ts +43 -8
- package/src/media/descriptions/wikiDescriptionsInput.ts +257 -0
- package/src/media/descriptions/wikiDescriptionsList.ts +1 -5
- package/src/media/descriptions/wikiDescriptionsListGroup.ts +2 -3
- package/src/media/descriptions/wikiDescriptionsListItem.ts +1 -3
- package/src/media/descriptions/wikiDescriptionsListMenu.ts +2 -9
- package/src/media/descriptions/wikiDescriptionsMask.ts +12 -0
- package/src/media/descriptions/wikiDescriptionsMenu.ts +126 -14
- package/src/media/descriptions/wikiDescriptionsModal.ts +145 -0
- package/src/media/descriptions/wikiDescriptionsMotionTransform.ts +4 -10
- package/src/media/descriptions/wikiDescriptionsScrollbar.ts +1 -7
- package/src/media/descriptions/wikiDescriptionsSelect.ts +209 -0
- package/src/media/descriptions/wikiDescriptionsSelectValue.ts +78 -0
- package/src/media/descriptions/wikiDescriptionsSkeleton.ts +1 -0
- package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts +50 -0
- package/src/media/descriptions/wikiDescriptionsTooltip.ts +89 -0
- package/src/media/descriptions/wikiDescriptionsWindow.ts +5 -22
- package/src/media/functional/en/broadcastMessage.mdx +307 -0
- package/src/media/functional/en/conversions.mdx +67 -0
- package/src/media/functional/en/dataUtils.mdx +25 -0
- package/src/media/functional/en/datetimeRef.mdx +1 -1
- package/src/media/functional/en/eventRef.mdx +1 -1
- package/src/media/functional/en/executionUtils.mdx +58 -0
- package/src/media/functional/en/geoFlagRef.mdx +1 -1
- package/src/media/functional/en/geoIntlRef.mdx +1 -1
- package/src/media/functional/en/geoRef.mdx +2 -2
- package/src/media/functional/en/meta.mdx +1206 -0
- package/src/media/functional/en/metaManager.mdx +376 -0
- package/src/media/functional/en/metaOg.mdx +694 -0
- package/src/media/functional/en/metaTwitter.mdx +853 -0
- package/src/media/functional/en/reactive.mdx +40 -0
- package/src/media/functional/en/refTypes.mdx +1 -1
- package/src/media/functional/en/useApiRef.mdx +5 -5
- package/src/media/functional/en/useMeta.mdx +431 -0
- package/src/media/functional/en/validationUtils.mdx +11 -0
- package/src/media/functional/ru/broadcastMessage.mdx +305 -0
- package/src/media/functional/ru/conversions.mdx +67 -0
- package/src/media/functional/ru/dataUtils.mdx +25 -0
- package/src/media/functional/ru/datetimeRef.mdx +2 -2
- package/src/media/functional/ru/eventRef.mdx +1 -1
- package/src/media/functional/ru/executionUtils.mdx +58 -0
- package/src/media/functional/ru/geoFlagRef.mdx +1 -1
- package/src/media/functional/ru/geoIntl.mdx +2 -2
- package/src/media/functional/ru/geoIntlRef.mdx +1 -1
- package/src/media/functional/ru/geoRef.mdx +2 -2
- package/src/media/functional/ru/listTypes.mdx +1 -1
- package/src/media/functional/ru/meta.mdx +1330 -0
- package/src/media/functional/ru/metaManager.mdx +376 -0
- package/src/media/functional/ru/metaOg.mdx +694 -0
- package/src/media/functional/ru/metaTwitter.mdx +853 -0
- package/src/media/functional/ru/reactive.mdx +40 -0
- package/src/media/functional/ru/refTypes.mdx +2 -2
- package/src/media/functional/ru/useApiRef.mdx +5 -5
- package/src/media/functional/ru/useMeta.mdx +431 -0
- package/src/media/functional/ru/validationUtils.mdx +11 -0
- package/src/media/mdx/Accordion/accordion.en.mdx +59 -0
- package/src/media/mdx/Accordion/accordion.ru.mdx +59 -0
- package/src/media/mdx/Accordion/slots.en.mdx +6 -0
- package/src/media/mdx/Accordion/slots.ru.mdx +6 -0
- package/src/media/mdx/Accordion/wikiMdxAccordion.ts +25 -0
- package/src/media/mdx/ActionSheet/actionSheet.en.mdx +61 -0
- package/src/media/mdx/ActionSheet/actionSheet.ru.mdx +61 -0
- package/src/media/mdx/ActionSheet/touchClose.en.mdx +21 -0
- package/src/media/mdx/ActionSheet/touchClose.ru.mdx +21 -0
- package/src/media/mdx/ActionSheet/wikiMdxActionSheet.ts +25 -0
- package/src/media/mdx/Actions/actions.en.mdx +48 -0
- package/src/media/mdx/Actions/actions.ru.mdx +48 -0
- package/src/media/mdx/Actions/flexible.en.mdx +19 -0
- package/src/media/mdx/Actions/flexible.ru.mdx +19 -0
- package/src/media/mdx/Actions/list.en.mdx +50 -0
- package/src/media/mdx/Actions/list.ru.mdx +50 -0
- package/src/media/mdx/Actions/wikiMdxActions.ts +31 -0
- package/src/media/mdx/Anchor/anchor.en.mdx +34 -0
- package/src/media/mdx/Anchor/anchor.ru.mdx +34 -0
- package/src/media/mdx/Anchor/expose.go.en.mdx +6 -0
- package/src/media/mdx/Anchor/expose.go.ru.mdx +6 -0
- package/src/media/mdx/Anchor/hide.en.mdx +28 -0
- package/src/media/mdx/Anchor/hide.ru.mdx +28 -0
- package/src/media/mdx/Anchor/isCopy.en.mdx +23 -0
- package/src/media/mdx/Anchor/isCopy.ru.mdx +23 -0
- package/src/media/mdx/Anchor/scroll.en.mdx +34 -0
- package/src/media/mdx/Anchor/scroll.ru.mdx +35 -0
- package/src/media/mdx/Anchor/wikiMdxAnchor.ts +43 -0
- package/src/media/mdx/Arrow/arrow.en.mdx +33 -0
- package/src/media/mdx/Arrow/arrow.ru.mdx +33 -0
- package/src/media/mdx/Arrow/wikiMdxArrow.ts +19 -0
- package/src/media/mdx/Badge/badge.en.mdx +85 -7
- package/src/media/mdx/Badge/badge.ru.mdx +85 -7
- package/src/media/mdx/Badge/dot.en.mdx +16 -12
- package/src/media/mdx/Badge/dot.ru.mdx +16 -12
- package/src/media/mdx/Badge/outline.en.mdx +12 -13
- package/src/media/mdx/Badge/outline.ru.mdx +12 -13
- package/src/media/mdx/Badge/primary.en.mdx +12 -12
- package/src/media/mdx/Badge/primary.ru.mdx +12 -12
- package/src/media/mdx/Badge/secondary.en.mdx +12 -13
- package/src/media/mdx/Badge/secondary.ru.mdx +12 -13
- package/src/media/mdx/Bars/action.en.mdx +72 -28
- package/src/media/mdx/Bars/action.ru.mdx +73 -29
- package/src/media/mdx/Bars/bars.en.mdx +90 -15
- package/src/media/mdx/Bars/bars.ru.mdx +91 -15
- package/src/media/mdx/Bars/slots.en.mdx +33 -0
- package/src/media/mdx/Bars/slots.ru.mdx +33 -0
- package/src/media/mdx/Bars/v-model.en.mdx +23 -14
- package/src/media/mdx/Bars/v-model.ru.mdx +23 -14
- package/src/media/mdx/Bars/wikiMdxBars.ts +5 -11
- package/src/media/mdx/Block/block.en.mdx +42 -0
- package/src/media/mdx/Block/block.ru.mdx +42 -0
- package/src/media/mdx/Block/wikiMdxBlock.ts +19 -0
- package/src/media/mdx/Button/button.en.mdx +89 -1
- package/src/media/mdx/Button/button.ru.mdx +89 -1
- package/src/media/mdx/Button/outline.en.mdx +12 -14
- package/src/media/mdx/Button/outline.ru.mdx +12 -14
- package/src/media/mdx/Button/primary.en.mdx +12 -19
- package/src/media/mdx/Button/primary.ru.mdx +12 -19
- package/src/media/mdx/Button/secondary.en.mdx +12 -17
- package/src/media/mdx/Button/secondary.ru.mdx +12 -17
- package/src/media/mdx/Button/text.en.mdx +12 -11
- package/src/media/mdx/Button/text.ru.mdx +12 -11
- package/src/media/mdx/Cell/cell.en.mdx +50 -9
- package/src/media/mdx/Cell/cell.ru.mdx +50 -9
- package/src/media/mdx/Cell/slots.en.mdx +82 -0
- package/src/media/mdx/Cell/slots.ru.mdx +83 -0
- package/src/media/mdx/Cell/wikiMdxCell.ts +6 -12
- package/src/media/mdx/Chip/assistive.en.mdx +12 -14
- package/src/media/mdx/Chip/assistive.ru.mdx +12 -14
- package/src/media/mdx/Chip/chip.en.mdx +69 -9
- package/src/media/mdx/Chip/chip.ru.mdx +69 -9
- package/src/media/mdx/Chip/input.en.mdx +12 -19
- package/src/media/mdx/Chip/input.ru.mdx +12 -19
- package/src/media/mdx/ChipGroup/chipGroup.en.mdx +51 -0
- package/src/media/mdx/ChipGroup/chipGroup.ru.mdx +51 -0
- package/src/media/mdx/ChipGroup/selected.en.mdx +50 -0
- package/src/media/mdx/ChipGroup/selected.ru.mdx +50 -0
- package/src/media/mdx/ChipGroup/wikiMdxChipGroup.ts +25 -0
- package/src/media/mdx/Dialog/buttons.en.mdx +45 -0
- package/src/media/mdx/Dialog/buttons.ru.mdx +45 -0
- package/src/media/mdx/Dialog/dialog.en.mdx +66 -0
- package/src/media/mdx/Dialog/dialog.ru.mdx +65 -0
- package/src/media/mdx/Dialog/events.en.mdx +63 -0
- package/src/media/mdx/Dialog/events.ru.mdx +63 -0
- package/src/media/mdx/Dialog/states.en.mdx +58 -0
- package/src/media/mdx/Dialog/states.ru.mdx +57 -0
- package/src/media/mdx/Dialog/wikiMdxDialog.ts +37 -0
- package/src/media/mdx/Field/arrows.en.mdx +83 -17
- package/src/media/mdx/Field/arrows.ru.mdx +83 -17
- package/src/media/mdx/Field/cancel.en.mdx +47 -10
- package/src/media/mdx/Field/cancel.ru.mdx +47 -10
- package/src/media/mdx/Field/field.en.mdx +45 -15
- package/src/media/mdx/Field/field.ru.mdx +45 -15
- package/src/media/mdx/Field/slots.en.mdx +138 -0
- package/src/media/mdx/Field/slots.ru.mdx +138 -0
- package/src/media/mdx/Field/value.en.mdx +49 -28
- package/src/media/mdx/Field/value.ru.mdx +49 -28
- package/src/media/mdx/Field/width.en.mdx +21 -19
- package/src/media/mdx/Field/width.ru.mdx +21 -19
- package/src/media/mdx/Field/wikiMdxField.ts +14 -26
- package/src/media/mdx/FieldCounter/fieldCounter.en.mdx +52 -14
- package/src/media/mdx/FieldCounter/fieldCounter.ru.mdx +55 -14
- package/src/media/mdx/FieldCounter/templates.en.mdx +26 -6
- package/src/media/mdx/FieldCounter/templates.ru.mdx +25 -5
- package/src/media/mdx/FieldLabel/fieldLabel.en.mdx +56 -14
- package/src/media/mdx/FieldLabel/fieldLabel.ru.mdx +56 -14
- package/src/media/mdx/FieldMessage/fieldMessage.en.mdx +58 -14
- package/src/media/mdx/FieldMessage/fieldMessage.ru.mdx +58 -14
- package/src/media/mdx/FieldMessage/slots.en.mdx +45 -0
- package/src/media/mdx/FieldMessage/slots.ru.mdx +45 -0
- package/src/media/mdx/FieldMessage/wikiMdxFieldMessage.ts +6 -12
- package/src/media/mdx/Icon/expose.isActive.en.mdx +2 -10
- package/src/media/mdx/Icon/expose.isActive.ru.mdx +2 -10
- package/src/media/mdx/Icon/icon.en.mdx +43 -9
- package/src/media/mdx/Icon/icon.ru.mdx +27 -28
- package/src/media/mdx/Image/adaptive.en.mdx +63 -20
- package/src/media/mdx/Image/adaptive.ru.mdx +62 -25
- package/src/media/mdx/Image/event.load.en.mdx +37 -2
- package/src/media/mdx/Image/event.load.ru.mdx +34 -7
- package/src/media/mdx/Image/{expose.type.ru.mdx → expose.en.mdx} +11 -1
- package/src/media/mdx/Image/expose.ru.mdx +31 -0
- package/src/media/mdx/Image/image.en.mdx +46 -0
- package/src/media/mdx/Image/image.ru.mdx +47 -0
- package/src/media/mdx/Image/img-tag.en.mdx +105 -0
- package/src/media/mdx/Image/img-tag.ru.mdx +105 -0
- package/src/media/mdx/Image/size.en.mdx +19 -19
- package/src/media/mdx/Image/size.ru.mdx +19 -23
- package/src/media/mdx/Image/value.en.mdx +10 -27
- package/src/media/mdx/Image/value.ru.mdx +10 -29
- package/src/media/mdx/Image/wikiMdxImage.ts +17 -11
- package/src/media/mdx/Input/currency.en.mdx +38 -0
- package/src/media/mdx/Input/currency.ru.mdx +38 -0
- package/src/media/mdx/Input/date.en.mdx +53 -0
- package/src/media/mdx/Input/date.ru.mdx +53 -0
- package/src/media/mdx/Input/input.en.mdx +143 -0
- package/src/media/mdx/Input/input.ru.mdx +71 -0
- package/src/media/mdx/Input/mask.en.mdx +30 -0
- package/src/media/mdx/Input/mask.ru.mdx +30 -0
- package/src/media/mdx/Input/number.en.mdx +41 -0
- package/src/media/mdx/Input/number.ru.mdx +41 -0
- package/src/media/mdx/Input/type.en.mdx +26 -0
- package/src/media/mdx/Input/type.ru.mdx +26 -0
- package/src/media/mdx/Input/wikiMdxInput.ts +49 -0
- package/src/media/mdx/List/event.close.en.mdx +5 -8
- package/src/media/mdx/List/event.close.ru.mdx +5 -8
- package/src/media/mdx/List/list.en.mdx +56 -14
- package/src/media/mdx/List/list.ru.mdx +56 -14
- package/src/media/mdx/List/lite.en.mdx +17 -12
- package/src/media/mdx/List/lite.ru.mdx +17 -12
- package/src/media/mdx/List/slot.html.en.mdx +72 -21
- package/src/media/mdx/List/slot.html.ru.mdx +72 -21
- package/src/media/mdx/ListGroup/listGroup.en.mdx +55 -1
- package/src/media/mdx/ListGroup/listGroup.ru.mdx +55 -1
- package/src/media/mdx/ListGroup/slots.en.mdx +10 -0
- package/src/media/mdx/ListGroup/slots.ru.mdx +10 -0
- package/src/media/mdx/ListGroup/wikiMdxListGroup.ts +6 -12
- package/src/media/mdx/ListItem/basic.en.mdx +47 -10
- package/src/media/mdx/ListItem/basic.ru.mdx +46 -9
- package/src/media/mdx/ListItem/fill.en.mdx +22 -8
- package/src/media/mdx/ListItem/fill.ru.mdx +22 -8
- package/src/media/mdx/ListItem/slots.en.mdx +7 -0
- package/src/media/mdx/ListItem/slots.ru.mdx +7 -0
- package/src/media/mdx/ListItem/wikiMdxListItem.ts +7 -13
- package/src/media/mdx/ListMenu/listMenu.en.mdx +62 -1
- package/src/media/mdx/ListMenu/listMenu.ru.mdx +62 -1
- package/src/media/mdx/Mask/basic.en.mdx +68 -16
- package/src/media/mdx/Mask/basic.ru.mdx +70 -11
- package/src/media/mdx/Mask/dateTypes.en.mdx +82 -68
- package/src/media/mdx/Mask/dateTypes.ru.mdx +82 -68
- package/src/media/mdx/Mask/expose.en.mdx +20 -0
- package/src/media/mdx/Mask/expose.ru.mdx +20 -0
- package/src/media/mdx/Mask/groupSave.en.mdx +13 -46
- package/src/media/mdx/Mask/groupSave.ru.mdx +13 -46
- package/src/media/mdx/Mask/mask.en.mdx +12 -66
- package/src/media/mdx/Mask/mask.ru.mdx +12 -66
- package/src/media/mdx/Mask/match.en.mdx +16 -24
- package/src/media/mdx/Mask/match.ru.mdx +16 -24
- package/src/media/mdx/Mask/numberTypes.en.mdx +64 -52
- package/src/media/mdx/Mask/numberTypes.ru.mdx +64 -52
- package/src/media/mdx/Mask/pattern.en.mdx +63 -75
- package/src/media/mdx/Mask/pattern.ru.mdx +63 -75
- package/src/media/mdx/Mask/special.en.mdx +174 -97
- package/src/media/mdx/Mask/special.ru.mdx +174 -97
- package/src/media/mdx/Mask/type.en.mdx +12 -36
- package/src/media/mdx/Mask/type.ru.mdx +11 -35
- package/src/media/mdx/Mask/visible.en.mdx +33 -41
- package/src/media/mdx/Mask/visible.ru.mdx +32 -40
- package/src/media/mdx/Mask/wikiMdxMask.ts +6 -0
- package/src/media/mdx/Menu/ajax.en.mdx +44 -51
- package/src/media/mdx/Menu/ajax.ru.mdx +44 -52
- package/src/media/mdx/Menu/event.updateValue.en.mdx +29 -0
- package/src/media/mdx/Menu/event.updateValue.ru.mdx +30 -0
- package/src/media/mdx/Menu/expose.navigation.en.mdx +12 -0
- package/src/media/mdx/Menu/expose.navigation.ru.mdx +12 -0
- package/src/media/mdx/Menu/menu.en.mdx +63 -1
- package/src/media/mdx/Menu/menu.ru.mdx +64 -1
- package/src/media/mdx/Menu/navigation.en.mdx +56 -0
- package/src/media/mdx/Menu/navigation.ru.mdx +56 -0
- package/src/media/mdx/Menu/slots.control.en.mdx +65 -0
- package/src/media/mdx/Menu/slots.control.ru.mdx +65 -0
- package/src/media/mdx/Menu/slots.en.mdx +100 -0
- package/src/media/mdx/Menu/slots.ru.mdx +100 -0
- package/src/media/mdx/Menu/wikiMdxMenu.ts +27 -28
- package/src/media/mdx/Modal/differences.en.mdx +130 -0
- package/src/media/mdx/Modal/differences.ru.mdx +65 -0
- package/src/media/mdx/Modal/modal.en.mdx +63 -0
- package/src/media/mdx/Modal/modal.ru.mdx +63 -0
- package/src/media/mdx/Modal/wikiMdxModal.ts +25 -0
- package/src/media/mdx/MotionTransform/animationHeadPosition.en.mdx +10 -22
- package/src/media/mdx/MotionTransform/animationHeadPosition.ru.mdx +10 -22
- package/src/media/mdx/MotionTransform/classes.en.mdx +18 -25
- package/src/media/mdx/MotionTransform/classes.ru.mdx +18 -25
- package/src/media/mdx/MotionTransform/events.en.mdx +31 -43
- package/src/media/mdx/MotionTransform/events.ru.mdx +31 -43
- package/src/media/mdx/MotionTransform/expose.isShow.en.mdx +2 -4
- package/src/media/mdx/MotionTransform/expose.isShow.ru.mdx +2 -4
- package/src/media/mdx/MotionTransform/expose.motionTransformElement.en.mdx +13 -0
- package/src/media/mdx/MotionTransform/expose.motionTransformElement.ru.mdx +14 -0
- package/src/media/mdx/MotionTransform/ignore.en.mdx +22 -24
- package/src/media/mdx/MotionTransform/ignore.ru.mdx +22 -24
- package/src/media/mdx/MotionTransform/motionTransform.en.mdx +44 -15
- package/src/media/mdx/MotionTransform/motionTransform.ru.mdx +44 -15
- package/src/media/mdx/MotionTransform/slots.en.mdx +92 -0
- package/src/media/mdx/MotionTransform/slots.ru.mdx +92 -0
- package/src/media/mdx/MotionTransform/v-model.en.mdx +23 -14
- package/src/media/mdx/MotionTransform/v-model.ru.mdx +23 -14
- package/src/media/mdx/MotionTransform/wikiMdxMotionTransform.ts +11 -17
- package/src/media/mdx/Progress/circular.en.mdx +7 -20
- package/src/media/mdx/Progress/circular.ru.mdx +7 -20
- package/src/media/mdx/Progress/delays.en.mdx +6 -13
- package/src/media/mdx/Progress/delays.ru.mdx +6 -13
- package/src/media/mdx/Progress/linear.en.mdx +9 -23
- package/src/media/mdx/Progress/linear.ru.mdx +9 -23
- package/src/media/mdx/Progress/progress.en.mdx +67 -5
- package/src/media/mdx/Progress/progress.ru.mdx +67 -5
- package/src/media/mdx/Progress/values.en.mdx +6 -28
- package/src/media/mdx/Progress/values.ru.mdx +6 -29
- package/src/media/mdx/Ripple/ripple.en.mdx +34 -40
- package/src/media/mdx/Ripple/ripple.ru.mdx +34 -40
- package/src/media/mdx/Scrollbar/emits-include.en.mdx +38 -0
- package/src/media/mdx/Scrollbar/emits-include.ru.mdx +38 -0
- package/src/media/mdx/Scrollbar/emits.en.mdx +38 -0
- package/src/media/mdx/Scrollbar/emits.ru.mdx +38 -0
- package/src/media/mdx/Scrollbar/scrollbar.en.mdx +38 -2
- package/src/media/mdx/Scrollbar/scrollbar.ru.mdx +38 -2
- package/src/media/mdx/Scrollbar/wikiMdxScrollbar.ts +12 -43
- package/src/media/mdx/Select/select.en.mdx +69 -0
- package/src/media/mdx/Select/select.ru.mdx +69 -0
- package/src/media/mdx/Select/wikiMdxSelect.ts +19 -0
- package/src/media/mdx/SelectValue/selectValue.en.mdx +64 -0
- package/src/media/mdx/SelectValue/selectValue.ru.mdx +64 -0
- package/src/media/mdx/SelectValue/wikiMdxSelectValue.ts +19 -0
- package/src/media/mdx/Skeleton/classes.en.mdx +13 -0
- package/src/media/mdx/Skeleton/classes.ru.mdx +13 -0
- package/src/media/mdx/Skeleton/expose.isActive.en.mdx +7 -28
- package/src/media/mdx/Skeleton/expose.isActive.ru.mdx +7 -28
- package/src/media/mdx/Skeleton/skeleton.en.mdx +37 -36
- package/src/media/mdx/Skeleton/skeleton.ru.mdx +37 -36
- package/src/media/mdx/Skeleton/wikiMdxSkeleton.ts +7 -0
- package/src/media/mdx/TextareaAutosize/textarea-autosize.en.mdx +65 -0
- package/src/media/mdx/TextareaAutosize/textarea-autosize.ru.mdx +65 -0
- package/src/media/mdx/TextareaAutosize/wikiMdxTextareaAutosize.ts +19 -0
- package/src/media/mdx/Tooltip/event.tooltip.en.mdx +7 -0
- package/src/media/mdx/Tooltip/event.tooltip.ru.mdx +8 -0
- package/src/media/mdx/Tooltip/slot.control.en.mdx +14 -0
- package/src/media/mdx/Tooltip/slot.control.ru.mdx +14 -0
- package/src/media/mdx/Tooltip/tooltip.en.mdx +34 -0
- package/src/media/mdx/Tooltip/tooltip.ru.mdx +34 -0
- package/src/media/mdx/Tooltip/wikiMdxTooltip.ts +31 -0
- package/src/media/mdx/Window/axis.en.mdx +11 -19
- package/src/media/mdx/Window/axis.ru.mdx +11 -19
- package/src/media/mdx/Window/classes.en.mdx +9 -26
- package/src/media/mdx/Window/classes.ru.mdx +9 -26
- package/src/media/mdx/Window/event.window.en.mdx +26 -8
- package/src/media/mdx/Window/event.window.ru.mdx +26 -8
- package/src/media/mdx/Window/expose.en.mdx +44 -0
- package/src/media/mdx/Window/expose.ru.mdx +44 -0
- package/src/media/mdx/Window/hooks.en.mdx +29 -50
- package/src/media/mdx/Window/hooks.ru.mdx +31 -52
- package/src/media/mdx/Window/slots.en.mdx +168 -0
- package/src/media/mdx/Window/slots.ru.mdx +168 -0
- package/src/media/mdx/Window/v-model.en.mdx +20 -11
- package/src/media/mdx/Window/v-model.ru.mdx +19 -11
- package/src/media/mdx/Window/wikiMdxWindow.ts +11 -41
- package/src/media/mdx/Window/window.en.mdx +55 -1
- package/src/media/mdx/Window/window.ru.mdx +55 -1
- package/src/media/mdx/event/events.actions.en.mdx +44 -0
- package/src/media/mdx/event/events.actions.ru.mdx +44 -0
- package/src/media/mdx/event/events.bars.en.mdx +50 -0
- package/src/media/mdx/event/events.bars.ru.mdx +50 -0
- package/src/media/mdx/event/events.beforeinput.en.mdx +13 -0
- package/src/media/mdx/event/events.beforeinput.ru.mdx +13 -0
- package/src/media/mdx/event/events.click.en.mdx +36 -0
- package/src/media/mdx/event/events.click.ru.mdx +36 -0
- package/src/media/mdx/event/events.focus.en.mdx +13 -0
- package/src/media/mdx/event/events.focus.ru.mdx +13 -0
- package/src/media/mdx/event/events.input.en.mdx +89 -0
- package/src/media/mdx/event/events.input.ru.mdx +90 -0
- package/src/media/mdx/event/events.inputStandard.en.mdx +6 -0
- package/src/media/mdx/event/events.inputStandard.ru.mdx +6 -0
- package/src/media/mdx/event/events.keyboard.en.mdx +13 -0
- package/src/media/mdx/event/events.keyboard.ru.mdx +13 -0
- package/src/media/mdx/event/events.paste.en.mdx +6 -0
- package/src/media/mdx/event/events.paste.ru.mdx +6 -0
- package/src/media/mdx/event/events.reset.en.mdx +6 -0
- package/src/media/mdx/event/events.reset.ru.mdx +6 -0
- package/src/media/mdx/event/wikiMdxEvent.ts +50 -73
- package/src/media/mdx/expose/expose.clear.en.mdx +3 -0
- package/src/media/mdx/expose/expose.clear.ru.mdx +3 -0
- package/src/media/mdx/expose/expose.descriptionId.en.mdx +6 -0
- package/src/media/mdx/expose/expose.descriptionId.ru.mdx +6 -0
- package/src/media/mdx/expose/expose.detail.en.mdx +5 -0
- package/src/media/mdx/expose/{detail.ru.mdx → expose.detail.ru.mdx} +1 -3
- package/src/media/mdx/expose/expose.id.en.mdx +6 -0
- package/src/media/mdx/expose/expose.id.ru.mdx +6 -0
- package/src/media/mdx/expose/expose.labelId.en.mdx +6 -0
- package/src/media/mdx/expose/expose.labelId.ru.mdx +6 -0
- package/src/media/mdx/expose/expose.open.en.mdx +5 -0
- package/src/media/mdx/expose/expose.open.ru.mdx +5 -0
- package/src/media/mdx/expose/expose.selected.en.mdx +23 -0
- package/src/media/mdx/expose/expose.selected.ru.mdx +23 -0
- package/src/media/mdx/expose/{value.en.mdx → expose.value.en.mdx} +1 -3
- package/src/media/mdx/expose/{value.ru.mdx → expose.value.ru.mdx} +1 -3
- package/src/media/mdx/expose/wikiMdxExpose.ts +41 -29
- package/src/media/mdx/slot/body.en.mdx +6 -0
- package/src/media/mdx/slot/body.ru.mdx +6 -0
- package/src/media/mdx/slot/caption.en.mdx +2 -7
- package/src/media/mdx/slot/caption.ru.mdx +2 -7
- package/src/media/mdx/slot/control.en.mdx +4 -5
- package/src/media/mdx/slot/control.ru.mdx +4 -5
- package/src/media/mdx/slot/default.en.mdx +2 -7
- package/src/media/mdx/slot/default.ru.mdx +2 -7
- package/src/media/mdx/slot/description.en.mdx +2 -7
- package/src/media/mdx/slot/description.ru.mdx +2 -7
- package/src/media/mdx/slot/footer.en.mdx +4 -5
- package/src/media/mdx/slot/footer.ru.mdx +4 -5
- package/src/media/mdx/slot/headline.en.mdx +7 -0
- package/src/media/mdx/slot/headline.ru.mdx +6 -0
- package/src/media/mdx/slot/label.en.mdx +2 -8
- package/src/media/mdx/slot/label.ru.mdx +2 -8
- package/src/media/mdx/slot/leading.en.mdx +7 -0
- package/src/media/mdx/slot/leading.ru.mdx +7 -0
- package/src/media/mdx/slot/prefix.en.mdx +1 -4
- package/src/media/mdx/slot/prefix.ru.mdx +1 -4
- package/src/media/mdx/slot/secondary.en.mdx +5 -0
- package/src/media/mdx/slot/secondary.ru.mdx +5 -0
- package/src/media/mdx/slot/suffix.en.mdx +1 -4
- package/src/media/mdx/slot/suffix.ru.mdx +1 -4
- package/src/media/mdx/slot/trailing.en.mdx +7 -0
- package/src/media/mdx/slot/trailing.ru.mdx +7 -0
- package/src/media/mdx/slot/wikiMdxSlot.ts +29 -5
- package/src/media/mdx/style/adaptive.en.mdx +6 -16
- package/src/media/mdx/style/adaptive.ru.mdx +6 -16
- package/src/media/mdx/style/asPalette.en.mdx +13 -5
- package/src/media/mdx/style/asPalette.ru.mdx +13 -5
- package/src/media/mdx/style/dir.en.mdx +14 -7
- package/src/media/mdx/style/dir.ru.mdx +14 -7
- package/src/media/mdx/style/isSkeleton.en.mdx +20 -6
- package/src/media/mdx/style/isSkeleton.ru.mdx +19 -5
- package/src/media/mdx/value/highlight.en.mdx +19 -12
- package/src/media/mdx/value/highlight.ru.mdx +19 -12
- package/src/media/mdx/value/labelNumber.en.mdx +39 -20
- package/src/media/mdx/value/labelNumber.ru.mdx +39 -20
- package/src/media/mdx/value/v-model-selected.en.mdx +28 -0
- package/src/media/mdx/value/v-model-selected.ru.mdx +28 -0
- package/src/media/mdx/value/v-model.en.mdx +26 -0
- package/src/media/mdx/value/v-model.ru.mdx +26 -0
- package/src/media/mdx/value/value.en.mdx +6 -12
- package/src/media/mdx/value/value.ru.mdx +6 -12
- package/src/media/mdx/value/wikiMdxValue.ts +24 -3
- package/src/media/mdx/wikiMdx.ts +29 -1
- package/src/media/props/wiki.ts +42 -0
- package/src/media/props/wikiActions.ts +43 -0
- package/src/media/props/wikiActionsInclude.ts +62 -0
- package/src/media/props/wikiAnchor.ts +84 -0
- package/src/media/props/wikiAria.ts +102 -0
- package/src/media/props/wikiArrow.ts +24 -0
- package/src/media/props/wikiArrowInclude.ts +45 -0
- package/src/media/props/wikiBarsInclude.ts +80 -0
- package/src/media/props/wikiChipGroup.ts +39 -0
- package/src/media/props/wikiDialog.ts +34 -0
- package/src/media/props/wikiField.ts +0 -21
- package/src/media/props/wikiFieldCounterInclude.ts +78 -0
- package/src/media/props/wikiForm.ts +248 -0
- package/src/media/props/wikiHook.ts +20 -0
- package/src/media/props/wikiIcon.ts +3 -3
- package/src/media/props/wikiIconInclude.ts +319 -0
- package/src/media/props/wikiImage.ts +71 -19
- package/src/media/props/wikiInformation.ts +160 -0
- package/src/media/props/wikiInput.ts +34 -0
- package/src/media/props/wikiListItem.ts +20 -0
- package/src/media/props/wikiMask.ts +0 -10
- package/src/media/props/wikiMaskInclude.ts +54 -0
- package/src/media/props/wikiMenu.ts +0 -10
- package/src/media/props/wikiMotionTransform.ts +0 -10
- package/src/media/props/wikiOption.ts +113 -0
- package/src/media/props/wikiSelect.ts +68 -0
- package/src/media/props/wikiSelectValue.ts +30 -0
- package/src/media/props/wikiStatus.ts +29 -41
- package/src/media/props/wikiStyle.ts +154 -243
- package/src/media/props/wikiTechnical.ts +65 -0
- package/src/media/props/wikiText.ts +57 -0
- package/src/media/props/wikiTooltip.ts +53 -0
- package/src/media/props/wikiValue.ts +14 -203
- package/src/media/props/wikiWindow.ts +0 -31
- package/src/media/styles/color.md +1 -0
- package/src/media/styles/en/about.mdx +79 -0
- package/src/media/styles/en/color.mdx +711 -0
- package/src/media/styles/en/content.mdx +29 -0
- package/src/media/styles/en/dimension.mdx +233 -0
- package/src/media/styles/en/dir.mdx +193 -0
- package/src/media/styles/en/flex.mdx +249 -0
- package/src/media/styles/en/font.mdx +171 -0
- package/src/media/styles/en/margin.mdx +115 -0
- package/src/media/styles/en/media.mdx +133 -0
- package/src/media/styles/en/padding.mdx +115 -0
- package/src/media/styles/en/position.mdx +183 -0
- package/src/media/styles/en/rules.mdx +117 -0
- package/src/media/styles/en/scrollbar.mdx +27 -0
- package/src/media/styles/en/selector.mdx +153 -0
- package/src/media/styles/en/transform.mdx +114 -0
- package/src/media/styles/ru/about.mdx +78 -0
- package/src/media/styles/ru/color.mdx +711 -0
- package/src/media/styles/ru/content.mdx +30 -0
- package/src/media/styles/ru/dimension.mdx +233 -0
- package/src/media/styles/ru/dir.mdx +193 -0
- package/src/media/styles/ru/flex.mdx +249 -0
- package/src/media/styles/ru/font.mdx +171 -0
- package/src/media/styles/ru/margin.mdx +115 -0
- package/src/media/styles/ru/media.mdx +133 -0
- package/src/media/styles/ru/padding.mdx +115 -0
- package/src/media/styles/ru/position.mdx +183 -0
- package/src/media/styles/ru/rules.mdx +117 -0
- package/src/media/styles/ru/scrollbar.mdx +27 -0
- package/src/media/styles/ru/selector.mdx +153 -0
- package/src/media/styles/ru/transform.mdx +114 -0
- package/src/styles/storybookStyle.scss +4 -1
- package/src/types/storybookTypes.ts +26 -4
- package/src/media/mdx/Bars/slot.actionBars.en.mdx +0 -12
- package/src/media/mdx/Bars/slot.actionBars.ru.mdx +0 -11
- package/src/media/mdx/Bars/slot.bars.en.mdx +0 -12
- package/src/media/mdx/Bars/slot.bars.ru.mdx +0 -11
- package/src/media/mdx/Cell/slot.body.en.mdx +0 -7
- package/src/media/mdx/Cell/slot.body.ru.mdx +0 -7
- package/src/media/mdx/Cell/slot.trailing.en.mdx +0 -7
- package/src/media/mdx/Cell/slot.trailing.ru.mdx +0 -7
- package/src/media/mdx/Field/slot.default.en.mdx +0 -9
- package/src/media/mdx/Field/slot.default.ru.mdx +0 -9
- package/src/media/mdx/Field/slot.leading.en.mdx +0 -10
- package/src/media/mdx/Field/slot.leading.ru.mdx +0 -10
- package/src/media/mdx/Field/slot.trailing.en.mdx +0 -10
- package/src/media/mdx/Field/slot.trailing.ru.mdx +0 -10
- package/src/media/mdx/FieldMessage/slot.helper.en.mdx +0 -12
- package/src/media/mdx/FieldMessage/slot.helper.ru.mdx +0 -12
- package/src/media/mdx/FieldMessage/slot.validation.en.mdx +0 -12
- package/src/media/mdx/FieldMessage/slot.validation.ru.mdx +0 -12
- package/src/media/mdx/Image/expose.data.en.mdx +0 -13
- package/src/media/mdx/Image/expose.data.ru.mdx +0 -13
- package/src/media/mdx/Image/expose.type.en.mdx +0 -21
- package/src/media/mdx/ListGroup/slot.head.en.mdx +0 -8
- package/src/media/mdx/ListGroup/slot.head.ru.mdx +0 -8
- package/src/media/mdx/ListGroup/slot.list.en.mdx +0 -8
- package/src/media/mdx/ListGroup/slot.list.ru.mdx +0 -8
- package/src/media/mdx/ListItem/slot.body.en.mdx +0 -7
- package/src/media/mdx/ListItem/slot.body.ru.mdx +0 -7
- package/src/media/mdx/ListItem/slot.trailing.en.mdx +0 -7
- package/src/media/mdx/ListItem/slot.trailing.ru.mdx +0 -7
- package/src/media/mdx/Menu/slot.contextBottom.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.contextBottom.ru.mdx +0 -9
- package/src/media/mdx/Menu/slot.contextTop.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.contextTop.ru.mdx +0 -9
- package/src/media/mdx/Menu/slot.control.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.control.ru.mdx +0 -9
- package/src/media/mdx/Menu/slot.footer.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.footer.ru.mdx +0 -9
- package/src/media/mdx/Menu/slot.title.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.title.ru.mdx +0 -9
- package/src/media/mdx/MotionTransform/slot.body.en.mdx +0 -11
- package/src/media/mdx/MotionTransform/slot.body.ru.mdx +0 -11
- package/src/media/mdx/MotionTransform/slot.head.en.mdx +0 -11
- package/src/media/mdx/MotionTransform/slot.head.ru.mdx +0 -11
- package/src/media/mdx/MotionTransform/slot.params.en.mdx +0 -61
- package/src/media/mdx/MotionTransform/slot.params.ru.mdx +0 -61
- package/src/media/mdx/Scrollbar/event.bottom.en.mdx +0 -12
- package/src/media/mdx/Scrollbar/event.bottom.ru.mdx +0 -12
- package/src/media/mdx/Scrollbar/event.edge.en.mdx +0 -14
- package/src/media/mdx/Scrollbar/event.edge.ru.mdx +0 -14
- package/src/media/mdx/Scrollbar/event.leaveBottom.en.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.leaveBottom.ru.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.leaveTop.en.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.leaveTop.ru.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.reachBottom.en.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.reachBottom.ru.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.reachTop.en.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.reachTop.ru.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.top.en.mdx +0 -12
- package/src/media/mdx/Scrollbar/event.top.ru.mdx +0 -12
- package/src/media/mdx/Window/expose.control.en.mdx +0 -15
- package/src/media/mdx/Window/expose.control.ru.mdx +0 -15
- package/src/media/mdx/Window/expose.id.en.mdx +0 -7
- package/src/media/mdx/Window/expose.id.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.open.en.mdx +0 -7
- package/src/media/mdx/Window/expose.open.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.setOpen.en.mdx +0 -7
- package/src/media/mdx/Window/expose.setOpen.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.toClose.en.mdx +0 -7
- package/src/media/mdx/Window/expose.toClose.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.toOpen.en.mdx +0 -7
- package/src/media/mdx/Window/expose.toOpen.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.toggle.en.mdx +0 -7
- package/src/media/mdx/Window/expose.toggle.ru.mdx +0 -7
- package/src/media/mdx/event/bars.en.mdx +0 -17
- package/src/media/mdx/event/bars.ru.mdx +0 -14
- package/src/media/mdx/event/barsBack.en.mdx +0 -14
- package/src/media/mdx/event/barsBack.ru.mdx +0 -16
- package/src/media/mdx/event/barsLite.en.mdx +0 -14
- package/src/media/mdx/event/barsLite.ru.mdx +0 -14
- package/src/media/mdx/event/click.en.mdx +0 -18
- package/src/media/mdx/event/click.ru.mdx +0 -18
- package/src/media/mdx/event/clickLite.en.mdx +0 -18
- package/src/media/mdx/event/clickLite.ru.mdx +0 -18
- package/src/media/mdx/event/scrollbarBottom.en.mdx +0 -13
- package/src/media/mdx/event/scrollbarBottom.ru.mdx +0 -13
- package/src/media/mdx/event/scrollbarEdge.en.mdx +0 -15
- package/src/media/mdx/event/scrollbarEdge.ru.mdx +0 -15
- package/src/media/mdx/event/scrollbarLeaveBottom.en.mdx +0 -12
- package/src/media/mdx/event/scrollbarLeaveBottom.ru.mdx +0 -12
- package/src/media/mdx/event/scrollbarLeaveTop.en.mdx +0 -12
- package/src/media/mdx/event/scrollbarLeaveTop.ru.mdx +0 -12
- package/src/media/mdx/event/scrollbarReachBottom.en.mdx +0 -12
- package/src/media/mdx/event/scrollbarReachBottom.ru.mdx +0 -12
- package/src/media/mdx/event/scrollbarReachTop.en.mdx +0 -12
- package/src/media/mdx/event/scrollbarReachTop.ru.mdx +0 -12
- package/src/media/mdx/event/scrollbarTop.en.mdx +0 -13
- package/src/media/mdx/event/scrollbarTop.ru.mdx +0 -13
- package/src/media/mdx/event/window.en.mdx +0 -20
- package/src/media/mdx/event/window.ru.mdx +0 -20
- package/src/media/mdx/expose/detail.en.mdx +0 -7
- package/src/media/mdx/expose/isSelected.en.mdx +0 -8
- package/src/media/mdx/expose/isSelected.ru.mdx +0 -8
- package/src/media/mdx/expose/selectedList.en.mdx +0 -7
- package/src/media/mdx/expose/selectedList.ru.mdx +0 -7
- package/src/media/mdx/expose/selectedNames.en.mdx +0 -7
- package/src/media/mdx/expose/selectedNames.ru.mdx +0 -7
- package/src/media/mdx/expose/selectedValues.en.mdx +0 -8
- package/src/media/mdx/expose/selectedValues.ru.mdx +0 -8
- package/src/media/mdx/slot/title.en.mdx +0 -9
- package/src/media/mdx/slot/title.ru.mdx +0 -9
|
@@ -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
|
+
|