From 855a9755d8b3055c14ad6185ab4efcf4079148ba Mon Sep 17 00:00:00 2001 From: aeksandla Date: Fri, 8 Nov 2024 13:29:32 +0300 Subject: [PATCH 01/11] feat: add microdata for video --- .../PromoFeaturesBlock/PromoFeaturesBlock.tsx | 7 ++++++- src/blocks/Tabs/Tabs.tsx | 6 +++++- src/components/Media/Media.tsx | 21 ++++++++++++++++++- .../PageConstructor/PageConstructor.tsx | 7 ++++++- src/context/innerContext/InnerContext.ts | 4 ++++ src/models/constructor-items/common.ts | 8 +++++++ src/sub-blocks/LayoutItem/LayoutItem.tsx | 9 +++++++- src/utils/microdata.ts | 6 ++++++ 8 files changed, 63 insertions(+), 5 deletions(-) create mode 100644 src/utils/microdata.ts diff --git a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx index 5fb1ec134..437821ae3 100644 --- a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx +++ b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx @@ -10,6 +10,7 @@ import {BREAKPOINTS} from '../../constants'; import {useTheme} from '../../context/theme'; import {PromoFeaturesProps} from '../../models'; import {block, getThemedValue} from '../../utils'; +import {mergeVideoMicrodata} from '../../utils/microdata'; import './PromoFeaturesBlock.scss'; @@ -39,6 +40,10 @@ const PromoFeaturesBlock = (props: PromoFeaturesProps) => { const blockModifier = backgroundTheme === 'default' ? 'default' : 'light'; const themeMod = cardTheme || blockModifier || ''; const themedMedia = getThemedValue(media, globalTheme); + const allProps = mergeVideoMicrodata(themedMedia, { + name: cardTitle, + description: text, + }); return (
{
- {media && } + {media && } ); })} diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx index d40b80c34..d98b17d12 100644 --- a/src/blocks/Tabs/Tabs.tsx +++ b/src/blocks/Tabs/Tabs.tsx @@ -14,6 +14,7 @@ import {useTheme} from '../../context/theme'; import {Col, GridColumnOrderClasses, Row} from '../../grid'; import {TabsBlockProps} from '../../models'; import {block, getThemedValue} from '../../utils'; +import {mergeVideoMicrodata} from '../../utils/microdata'; import TabsTextContent from './TabsTextContent/TabsTextContent'; @@ -109,7 +110,10 @@ export const TabsBlock = ({
{ onImageLoad, iframe, margins, + videoMicrodata, } = props; const [hasVideoFallback, setHasVideoFallback] = useState(false); + const {microdata} = useContext(InnerContext); const qaAttributes = getQaAttrubutes(qa, 'video'); @@ -155,8 +158,24 @@ export const Media = (props: MediaAllProps) => { margins, ]); + const videoMicrodataScript = useMemo(() => { + const json = JSON.stringify({ + '@context': 'http://schema.org/', + '@type': 'VideoObject', + uploadDate: microdata?.contentUpdatedDate, + contentUrl: video?.src?.[0] || videoIframe || youtube, + thumbnailUrl: previewImg, + ...videoMicrodata, + }); + + return video || youtube || videoIframe ? ( + + ) : null; + }, [microdata?.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]); + return (
+ {videoMicrodataScript} {content}
); diff --git a/src/containers/PageConstructor/PageConstructor.tsx b/src/containers/PageConstructor/PageConstructor.tsx index a8515049e..bf382351c 100644 --- a/src/containers/PageConstructor/PageConstructor.tsx +++ b/src/containers/PageConstructor/PageConstructor.tsx @@ -50,6 +50,9 @@ export interface PageConstructorProps { custom?: CustomConfig; renderMenu?: () => React.ReactNode; navigation?: NavigationData; + microdata?: { + contentUpdatedDate: string; + }; } export const Constructor = (props: PageConstructorProps) => { @@ -59,6 +62,7 @@ export const Constructor = (props: PageConstructorProps) => { shouldRenderBlock, navigation, custom, + microdata, } = props; const {context} = useMemo( @@ -85,9 +89,10 @@ export const Constructor = (props: PageConstructorProps) => { customization: { decorators: custom?.decorators, }, + microdata, }, }), - [custom, shouldRenderBlock], + [custom, shouldRenderBlock, microdata], ); const theme = useTheme(); diff --git a/src/context/innerContext/InnerContext.ts b/src/context/innerContext/InnerContext.ts index 9d24b416d..25a06b2d4 100644 --- a/src/context/innerContext/InnerContext.ts +++ b/src/context/innerContext/InnerContext.ts @@ -13,6 +13,9 @@ export interface InnerContextType { loadables?: LoadableConfig; shouldRenderBlock?: ShouldRenderBlock; customization?: Pick; + microdata?: { + contentUpdatedDate?: string; + }; } export const InnerContext = React.createContext({ @@ -22,4 +25,5 @@ export const InnerContext = React.createContext({ navigationBlockTypes: [], itemMap: {} as ItemMap, navItemMap: {} as NavItemMap, + microdata: {}, }); diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index 7c225372f..49c76aaf3 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -289,6 +289,14 @@ export interface MediaProps Partial, Partial { color?: string; + videoMicrodata?: { + name?: string; + description?: string; + duration?: string; + uploadDate?: string; + contentUrl?: string; + thumbnailUrl?: string; + }; } export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps { diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx index 0ffb8291f..517923e66 100644 --- a/src/sub-blocks/LayoutItem/LayoutItem.tsx +++ b/src/sub-blocks/LayoutItem/LayoutItem.tsx @@ -6,6 +6,7 @@ import {FullscreenMedia, IconWrapper, Media, MetaInfo} from '../../components'; import {useTheme} from '../../context/theme'; import {ContentBlockProps, LayoutItemProps} from '../../models'; import {block, getThemedValue} from '../../utils'; +import {mergeVideoMicrodata} from '../../utils/microdata'; import Content from '../Content/Content'; import {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils'; @@ -52,7 +53,13 @@ const LayoutItem = ({ ...fullscreenMediaProps } = {}) => ( ({...values, videoMicrodata: {...newValues, ...(values.videoMicrodata || {})}}); From 68bdab07d7be4896b99878e066299f3eb7bc0646 Mon Sep 17 00:00:00 2001 From: gravity-ui-bot <111915794+gravity-ui-bot@users.noreply.github.com> Date: Fri, 8 Nov 2024 10:38:43 +0000 Subject: [PATCH 02/11] 5.28.7-alpha.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 57bee7c64..d75d40f41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7", + "version": "5.28.7-alpha.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gravity-ui/page-constructor", - "version": "5.28.7", + "version": "5.28.7-alpha.0", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", diff --git a/package.json b/package.json index ddffd896c..547648b09 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7", + "version": "5.28.7-alpha.0", "description": "Gravity UI Page Constructor", "license": "MIT", "repository": { From a765149dfc0491ecfb1fa5d946e8c76bdb34b1ca Mon Sep 17 00:00:00 2001 From: aeksandla Date: Fri, 8 Nov 2024 17:57:44 +0300 Subject: [PATCH 03/11] feat: sanitize html --- src/blocks/Media/Media.tsx | 10 ++++++++-- .../PromoFeaturesBlock/PromoFeaturesBlock.tsx | 5 +++-- src/blocks/Tabs/Tabs.tsx | 5 ++++- src/sub-blocks/LayoutItem/LayoutItem.tsx | 16 +++++++++------- 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx index 18a5a5d03..eef8d033c 100644 --- a/src/blocks/Media/Media.tsx +++ b/src/blocks/Media/Media.tsx @@ -4,15 +4,17 @@ import Media from '../../components/Media/Media'; import MediaBase from '../../components/MediaBase/MediaBase'; import {useTheme} from '../../context/theme'; import {MediaBlockProps} from '../../models'; +import {sanitizeHtml} from '../../text-transform'; import {block, getThemedValue} from '../../utils'; import {getMediaBorder} from '../../utils/borderSelector'; +import {mergeVideoMicrodata} from '../../utils/microdata'; import './Media.scss'; const b = block('media-block'); export const MediaBlock = (props: MediaBlockProps) => { - const {media, border, disableShadow} = props; + const {media, border, disableShadow, title, description} = props; const borderSelected = getMediaBorder({ border, disableShadow, @@ -21,13 +23,17 @@ export const MediaBlock = (props: MediaBlockProps) => { const [play, setPlay] = useState(false); const theme = useTheme(); const mediaThemed = getThemedValue(media, theme); + const mediaWithMicrodata = mergeVideoMicrodata(mediaThemed, { + name: sanitizeHtml(title), + description: description ? sanitizeHtml(description) : undefined, + }); return ( setPlay(true)}> diff --git a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx index 437821ae3..4caa33047 100644 --- a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx +++ b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx @@ -9,6 +9,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper'; import {BREAKPOINTS} from '../../constants'; import {useTheme} from '../../context/theme'; import {PromoFeaturesProps} from '../../models'; +import {sanitizeHtml} from '../../text-transform'; import {block, getThemedValue} from '../../utils'; import {mergeVideoMicrodata} from '../../utils/microdata'; @@ -41,8 +42,8 @@ const PromoFeaturesBlock = (props: PromoFeaturesProps) => { const themeMod = cardTheme || blockModifier || ''; const themedMedia = getThemedValue(media, globalTheme); const allProps = mergeVideoMicrodata(themedMedia, { - name: cardTitle, - description: text, + name: sanitizeHtml(cardTitle), + description: sanitizeHtml(text), }); return ( diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx index d98b17d12..5610705bd 100644 --- a/src/blocks/Tabs/Tabs.tsx +++ b/src/blocks/Tabs/Tabs.tsx @@ -13,6 +13,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper'; import {useTheme} from '../../context/theme'; import {Col, GridColumnOrderClasses, Row} from '../../grid'; import {TabsBlockProps} from '../../models'; +import {sanitizeHtml} from '../../text-transform'; import {block, getThemedValue} from '../../utils'; import {mergeVideoMicrodata} from '../../utils/microdata'; @@ -112,7 +113,9 @@ export const TabsBlock = ({ @@ -53,13 +61,7 @@ const LayoutItem = ({ ...fullscreenMediaProps } = {}) => ( Date: Fri, 8 Nov 2024 15:01:39 +0000 Subject: [PATCH 04/11] 5.28.7-alpha.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index d75d40f41..4123da746 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.0", + "version": "5.28.7-alpha.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.0", + "version": "5.28.7-alpha.1", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", diff --git a/package.json b/package.json index 547648b09..3acd18a9b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.0", + "version": "5.28.7-alpha.1", "description": "Gravity UI Page Constructor", "license": "MIT", "repository": { From 68e6d5372f32f5fdb6b32934ab60cf2f07fb2a68 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Fri, 8 Nov 2024 18:19:05 +0300 Subject: [PATCH 05/11] feat: reduce complexity --- src/blocks/Tabs/Tabs.tsx | 2 +- .../Tabs/TabsTextContent/TabsTextContent.tsx | 54 +++++++++++-------- 2 files changed, 32 insertions(+), 24 deletions(-) diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx index 5610705bd..43414379b 100644 --- a/src/blocks/Tabs/Tabs.tsx +++ b/src/blocks/Tabs/Tabs.tsx @@ -87,7 +87,7 @@ export const TabsBlock = ({ const showText = Boolean(activeTabData?.text); const border = activeTabData?.border || 'shadow'; - const textContent = activeTabData && showText && ( + const textContent = showText && ( { showMedia: boolean; isReverse: boolean; - data: TabsBlockItem; + data?: TabsBlockItem; centered?: boolean; imageProps?: ImageObjectProps | ImageDeviceProps; } @@ -21,29 +21,37 @@ export const TabsTextContent = ({ centered, contentSize = 's', showMedia, - data: {media, title, text, additionalInfo, link, links, buttons, list}, + data, imageProps, isReverse, -}: TextContentProps) => ( - -
- -
- -); +}: TextContentProps) => { + if (!data) { + return null; + } + + const {media, title, text, additionalInfo, link, links, buttons, list} = data; + + return ( + +
+ +
+ + ); +}; export default TabsTextContent; From e5e3ef32381f5a16f68aa065a6bb7d15b4b3cce0 Mon Sep 17 00:00:00 2001 From: gravity-ui-bot <111915794+gravity-ui-bot@users.noreply.github.com> Date: Fri, 8 Nov 2024 15:22:58 +0000 Subject: [PATCH 06/11] 5.28.7-alpha.2 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4123da746..b6267ec3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.1", + "version": "5.28.7-alpha.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.1", + "version": "5.28.7-alpha.2", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", diff --git a/package.json b/package.json index 3acd18a9b..e4e0c4087 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.1", + "version": "5.28.7-alpha.2", "description": "Gravity UI Page Constructor", "license": "MIT", "repository": { From 014f4d0ce757aa5f1b0b693aabe745ce31d2dac4 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Fri, 8 Nov 2024 18:40:35 +0300 Subject: [PATCH 07/11] feat: fix build --- src/blocks/Media/Media.tsx | 7 +++---- src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx | 7 +++---- src/blocks/Tabs/Tabs.tsx | 5 ++--- src/sub-blocks/LayoutItem/LayoutItem.tsx | 9 ++++----- src/utils/microdata.ts | 6 ++++++ 5 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx index eef8d033c..b44144c2a 100644 --- a/src/blocks/Media/Media.tsx +++ b/src/blocks/Media/Media.tsx @@ -4,10 +4,9 @@ import Media from '../../components/Media/Media'; import MediaBase from '../../components/MediaBase/MediaBase'; import {useTheme} from '../../context/theme'; import {MediaBlockProps} from '../../models'; -import {sanitizeHtml} from '../../text-transform'; import {block, getThemedValue} from '../../utils'; import {getMediaBorder} from '../../utils/borderSelector'; -import {mergeVideoMicrodata} from '../../utils/microdata'; +import {mergeVideoMicrodata, sanitizeMicrodata} from '../../utils/microdata'; import './Media.scss'; @@ -24,8 +23,8 @@ export const MediaBlock = (props: MediaBlockProps) => { const theme = useTheme(); const mediaThemed = getThemedValue(media, theme); const mediaWithMicrodata = mergeVideoMicrodata(mediaThemed, { - name: sanitizeHtml(title), - description: description ? sanitizeHtml(description) : undefined, + name: sanitizeMicrodata(title), + description: description ? sanitizeMicrodata(description) : undefined, }); return ( diff --git a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx index 4caa33047..d3fe364a1 100644 --- a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx +++ b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx @@ -9,9 +9,8 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper'; import {BREAKPOINTS} from '../../constants'; import {useTheme} from '../../context/theme'; import {PromoFeaturesProps} from '../../models'; -import {sanitizeHtml} from '../../text-transform'; import {block, getThemedValue} from '../../utils'; -import {mergeVideoMicrodata} from '../../utils/microdata'; +import {mergeVideoMicrodata, sanitizeMicrodata} from '../../utils/microdata'; import './PromoFeaturesBlock.scss'; @@ -42,8 +41,8 @@ const PromoFeaturesBlock = (props: PromoFeaturesProps) => { const themeMod = cardTheme || blockModifier || ''; const themedMedia = getThemedValue(media, globalTheme); const allProps = mergeVideoMicrodata(themedMedia, { - name: sanitizeHtml(cardTitle), - description: sanitizeHtml(text), + name: sanitizeMicrodata(cardTitle), + description: sanitizeMicrodata(text), }); return ( diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx index 43414379b..50dc35dd1 100644 --- a/src/blocks/Tabs/Tabs.tsx +++ b/src/blocks/Tabs/Tabs.tsx @@ -13,9 +13,8 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper'; import {useTheme} from '../../context/theme'; import {Col, GridColumnOrderClasses, Row} from '../../grid'; import {TabsBlockProps} from '../../models'; -import {sanitizeHtml} from '../../text-transform'; import {block, getThemedValue} from '../../utils'; -import {mergeVideoMicrodata} from '../../utils/microdata'; +import {mergeVideoMicrodata, sanitizeMicrodata} from '../../utils/microdata'; import TabsTextContent from './TabsTextContent/TabsTextContent'; @@ -114,7 +113,7 @@ export const TabsBlock = ({ {...mergeVideoMicrodata(getThemedValue(activeTabData.media, theme), { name: activeTabData.tabName, description: activeTabData.caption - ? sanitizeHtml(activeTabData.caption) + ? sanitizeMicrodata(activeTabData.caption) : undefined, })} key={activeTab} diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx index 16c70ae5e..2f301d8a6 100644 --- a/src/sub-blocks/LayoutItem/LayoutItem.tsx +++ b/src/sub-blocks/LayoutItem/LayoutItem.tsx @@ -5,9 +5,8 @@ import {useUniqId} from '@gravity-ui/uikit'; import {FullscreenMedia, IconWrapper, Media, MetaInfo} from '../../components'; import {useTheme} from '../../context/theme'; import {ContentBlockProps, LayoutItemProps} from '../../models'; -import {sanitizeHtml} from '../../text-transform'; import {block, getThemedValue} from '../../utils'; -import {mergeVideoMicrodata} from '../../utils/microdata'; +import {mergeVideoMicrodata, sanitizeMicrodata} from '../../utils/microdata'; import Content from '../Content/Content'; import {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils'; @@ -48,9 +47,9 @@ const LayoutItem = ({ const mediaWithMicrodata = mergeVideoMicrodata(themedMedia, { name: typeof content.title === 'string' - ? sanitizeHtml(content.title) - : sanitizeHtml(content.title?.text || ''), - description: content.text ? sanitizeHtml(content.text) : undefined, + ? sanitizeMicrodata(content.title) + : sanitizeMicrodata(content.title?.text || ''), + description: content.text ? sanitizeMicrodata(content.text) : undefined, }); return fullscreen && hasFullscreen(themedMedia) ? ( diff --git a/src/utils/microdata.ts b/src/utils/microdata.ts index f14acaef5..3857d5cda 100644 --- a/src/utils/microdata.ts +++ b/src/utils/microdata.ts @@ -1,6 +1,12 @@ +import sanitize from 'sanitize-html'; + import {MediaProps} from '../models'; export const mergeVideoMicrodata = ( values: MediaProps = {}, newValues: MediaProps['videoMicrodata'] = {}, ): MediaProps => ({...values, videoMicrodata: {...newValues, ...(values.videoMicrodata || {})}}); + +export function sanitizeMicrodata(html: string) { + return html && sanitize(html, {allowedTags: [], allowedAttributes: {}}); +} From 8961c8fcecb913f592382a59a11e0dbeb6c7a463 Mon Sep 17 00:00:00 2001 From: gravity-ui-bot <111915794+gravity-ui-bot@users.noreply.github.com> Date: Fri, 8 Nov 2024 15:42:47 +0000 Subject: [PATCH 08/11] 5.28.7-alpha.3 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b6267ec3a..95c5fc60a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.2", + "version": "5.28.7-alpha.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.2", + "version": "5.28.7-alpha.3", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", diff --git a/package.json b/package.json index e4e0c4087..dd1b5cae3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.2", + "version": "5.28.7-alpha.3", "description": "Gravity UI Page Constructor", "license": "MIT", "repository": { From 9e1b3f3008988d3c70cb9fb7be5f4c56353d2ba8 Mon Sep 17 00:00:00 2001 From: aeksandla Date: Mon, 11 Nov 2024 12:26:27 +0300 Subject: [PATCH 09/11] feat: fix --- src/containers/PageConstructor/PageConstructor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/PageConstructor/PageConstructor.tsx b/src/containers/PageConstructor/PageConstructor.tsx index bf382351c..36ef0aa51 100644 --- a/src/containers/PageConstructor/PageConstructor.tsx +++ b/src/containers/PageConstructor/PageConstructor.tsx @@ -51,7 +51,7 @@ export interface PageConstructorProps { renderMenu?: () => React.ReactNode; navigation?: NavigationData; microdata?: { - contentUpdatedDate: string; + contentUpdatedDate?: string; }; } From 93d2a6f26e434a1fb1efbb9981abc5a82ac61b4e Mon Sep 17 00:00:00 2001 From: aeksandla Date: Mon, 11 Nov 2024 12:43:29 +0300 Subject: [PATCH 10/11] feat: remove alpha from version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 95c5fc60a..57bee7c64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.3", + "version": "5.28.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.3", + "version": "5.28.7", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", diff --git a/package.json b/package.json index dd1b5cae3..ddffd896c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gravity-ui/page-constructor", - "version": "5.28.7-alpha.3", + "version": "5.28.7", "description": "Gravity UI Page Constructor", "license": "MIT", "repository": { From d0c689a357c16b9d5352fbcf61739edb96f1ceac Mon Sep 17 00:00:00 2001 From: aeksandla Date: Mon, 11 Nov 2024 17:56:08 +0300 Subject: [PATCH 11/11] feat: refactoring --- src/blocks/Media/Media.tsx | 6 +++--- src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx | 6 +++--- src/blocks/Tabs/Tabs.tsx | 4 ++-- src/components/Media/Media.tsx | 6 +++++- src/sub-blocks/LayoutItem/LayoutItem.tsx | 10 ++++------ 5 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx index b44144c2a..6341c0104 100644 --- a/src/blocks/Media/Media.tsx +++ b/src/blocks/Media/Media.tsx @@ -6,7 +6,7 @@ import {useTheme} from '../../context/theme'; import {MediaBlockProps} from '../../models'; import {block, getThemedValue} from '../../utils'; import {getMediaBorder} from '../../utils/borderSelector'; -import {mergeVideoMicrodata, sanitizeMicrodata} from '../../utils/microdata'; +import {mergeVideoMicrodata} from '../../utils/microdata'; import './Media.scss'; @@ -23,8 +23,8 @@ export const MediaBlock = (props: MediaBlockProps) => { const theme = useTheme(); const mediaThemed = getThemedValue(media, theme); const mediaWithMicrodata = mergeVideoMicrodata(mediaThemed, { - name: sanitizeMicrodata(title), - description: description ? sanitizeMicrodata(description) : undefined, + name: title, + description, }); return ( diff --git a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx index d3fe364a1..437821ae3 100644 --- a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx +++ b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx @@ -10,7 +10,7 @@ import {BREAKPOINTS} from '../../constants'; import {useTheme} from '../../context/theme'; import {PromoFeaturesProps} from '../../models'; import {block, getThemedValue} from '../../utils'; -import {mergeVideoMicrodata, sanitizeMicrodata} from '../../utils/microdata'; +import {mergeVideoMicrodata} from '../../utils/microdata'; import './PromoFeaturesBlock.scss'; @@ -41,8 +41,8 @@ const PromoFeaturesBlock = (props: PromoFeaturesProps) => { const themeMod = cardTheme || blockModifier || ''; const themedMedia = getThemedValue(media, globalTheme); const allProps = mergeVideoMicrodata(themedMedia, { - name: sanitizeMicrodata(cardTitle), - description: sanitizeMicrodata(text), + name: cardTitle, + description: text, }); return ( diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx index 50dc35dd1..06ed2a5e1 100644 --- a/src/blocks/Tabs/Tabs.tsx +++ b/src/blocks/Tabs/Tabs.tsx @@ -14,7 +14,7 @@ import {useTheme} from '../../context/theme'; import {Col, GridColumnOrderClasses, Row} from '../../grid'; import {TabsBlockProps} from '../../models'; import {block, getThemedValue} from '../../utils'; -import {mergeVideoMicrodata, sanitizeMicrodata} from '../../utils/microdata'; +import {mergeVideoMicrodata} from '../../utils/microdata'; import TabsTextContent from './TabsTextContent/TabsTextContent'; @@ -113,7 +113,7 @@ export const TabsBlock = ({ {...mergeVideoMicrodata(getThemedValue(activeTabData.media, theme), { name: activeTabData.tabName, description: activeTabData.caption - ? sanitizeMicrodata(activeTabData.caption) + ? activeTabData.caption : undefined, })} key={activeTab} diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx index dc849064c..1a3fa02e4 100644 --- a/src/components/Media/Media.tsx +++ b/src/components/Media/Media.tsx @@ -3,6 +3,7 @@ import React, {ReactElement, useContext, useMemo, useState} from 'react'; import {InnerContext} from '../../context/innerContext'; import {MediaProps, QAProps} from '../../models'; import {block, getQaAttrubutes} from '../../utils'; +import {sanitizeMicrodata} from '../../utils/microdata'; import IframeVideoBlock from '../VideoBlock/VideoBlock'; import DataLens from './DataLens/DataLens'; @@ -159,13 +160,16 @@ export const Media = (props: MediaAllProps) => { ]); const videoMicrodataScript = useMemo(() => { + const {name, description} = videoMicrodata || {}; const json = JSON.stringify({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata?.contentUpdatedDate, contentUrl: video?.src?.[0] || videoIframe || youtube, thumbnailUrl: previewImg, - ...videoMicrodata, + ...(videoMicrodata || {}), + name: name ? sanitizeMicrodata(name) : name, + description: description ? sanitizeMicrodata(description) : description, }); return video || youtube || videoIframe ? ( diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx index 2f301d8a6..81352764d 100644 --- a/src/sub-blocks/LayoutItem/LayoutItem.tsx +++ b/src/sub-blocks/LayoutItem/LayoutItem.tsx @@ -6,7 +6,7 @@ import {FullscreenMedia, IconWrapper, Media, MetaInfo} from '../../components'; import {useTheme} from '../../context/theme'; import {ContentBlockProps, LayoutItemProps} from '../../models'; import {block, getThemedValue} from '../../utils'; -import {mergeVideoMicrodata, sanitizeMicrodata} from '../../utils/microdata'; +import {mergeVideoMicrodata} from '../../utils/microdata'; import Content from '../Content/Content'; import {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils'; @@ -44,12 +44,10 @@ const LayoutItem = ({ return null; } const themedMedia = getThemedValue(media, theme); + const {title} = content; const mediaWithMicrodata = mergeVideoMicrodata(themedMedia, { - name: - typeof content.title === 'string' - ? sanitizeMicrodata(content.title) - : sanitizeMicrodata(content.title?.text || ''), - description: content.text ? sanitizeMicrodata(content.text) : undefined, + name: typeof title === 'string' ? title : title?.text, + description: content.text, }); return fullscreen && hasFullscreen(themedMedia) ? (