diff --git a/modules/Gallery/Gallery.tsx b/modules/Gallery/Gallery.tsx index 97948327..d058a905 100644 --- a/modules/Gallery/Gallery.tsx +++ b/modules/Gallery/Gallery.tsx @@ -1,6 +1,9 @@ -import type { NewsroomGallery } from '@prezly/sdk'; +/* eslint-disable @typescript-eslint/no-use-before-define */ +import { NewsroomGallery } from '@prezly/sdk'; import { getAssetsUrl, getGalleryThumbnail, getUploadcareGroupUrl } from '@prezly/theme-kit-core'; +import { translations } from '@prezly/theme-kit-intl'; import { useEffect, useState } from 'react'; +import { useIntl } from 'react-intl'; import { ContentRenderer, StoryLinks } from '@/components'; @@ -14,7 +17,7 @@ interface Props { gallery: NewsroomGallery; } -function Gallery({ gallery }: Props) { +export default function Gallery({ gallery }: Props) { const { content, name, uploadcare_group_uuid, description } = gallery; const galleryThumbnail = getGalleryThumbnail(gallery); @@ -26,10 +29,13 @@ function Gallery({ gallery }: Props) { } }, []); + const metaDescription = useGalleryPageMetaDescription(gallery); + return (

{name}

@@ -48,4 +54,24 @@ function Gallery({ gallery }: Props) { ); } -export default Gallery; +function useGalleryPageMetaDescription(gallery: NewsroomGallery) { + const { formatMessage } = useIntl(); + const description = gallery.description?.trim() ?? ''; + + if (gallery.type === NewsroomGallery.Type.IMAGE) { + const imagesCount = formatMessage(translations.mediaGallery.imagesCount, { + imagesCount: gallery.images_number, + }); + + return [imagesCount, description].filter(Boolean).join(' - '); + } + + if (gallery.type === NewsroomGallery.Type.VIDEO) { + const videosCount = formatMessage(translations.mediaGallery.videosCount, { + videosCount: gallery.videos_number, + }); + return [videosCount, description].filter(Boolean).join(' - '); + } + + return description; +} diff --git a/package-lock.json b/package-lock.json index 38777d5b..e0392dc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,9 +16,9 @@ "@prezly/content-renderer-react-js": "0.38.4", "@prezly/sdk": "21.6.0", "@prezly/story-content-format": "0.65.1", - "@prezly/theme-kit-core": "7.5.0", - "@prezly/theme-kit-intl": "7.5.0", - "@prezly/theme-kit-nextjs": "7.5.0", + "@prezly/theme-kit-core": "7.5.1", + "@prezly/theme-kit-intl": "7.5.1", + "@prezly/theme-kit-nextjs": "7.5.1", "@prezly/uploadcare": "2.4.4", "@prezly/uploadcare-image": "0.3.2", "@react-hookz/web": "14.7.1", @@ -2778,11 +2778,11 @@ } }, "node_modules/@prezly/theme-kit-core": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-core/-/theme-kit-core-7.5.0.tgz", - "integrity": "sha512-UOY6CCcroVZmPOu3hFXYFfFgsdyhCEeCA17t00OtZNBRl/EkonhehEPITrYc4ENwVyYmXHG/OMt8/7NQU8nWIg==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-core/-/theme-kit-core-7.5.1.tgz", + "integrity": "sha512-T1V4yQU85nS5Jvvb0pWug98zAgewGV0NdnuUJsZOcIpv1tUZcwaNEvXvMlO6xhx//5BXoCaLIwQqCTpi+dJ63A==", "dependencies": { - "@prezly/theme-kit-intl": "^7.5.0", + "@prezly/theme-kit-intl": "^7.5.1", "@prezly/uploadcare": "^2.3.4", "isomorphic-fetch": "^3.0.0", "parse-data-url": "^4.0.1" @@ -2796,9 +2796,9 @@ } }, "node_modules/@prezly/theme-kit-intl": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-intl/-/theme-kit-intl-7.5.0.tgz", - "integrity": "sha512-KPC7ZI+kDmCkx2RqUXiaiYXRgF18dulINVKYkyFy2NN1JN7TK2az6MAm8Igo6QwsahkjHP7M6rq2pnqzcD4tRg==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-intl/-/theme-kit-intl-7.5.1.tgz", + "integrity": "sha512-yBtvQWNs6eib8b/NKPBD+6BRETs5t5FdiTbwBBH5uLZsvyaKp5r0FsYYhyChz/V5j8CFBCBfFx66AO++dL/M5Q==", "dependencies": { "@formatjs/intl": "^2.0.0" }, @@ -2808,11 +2808,11 @@ } }, "node_modules/@prezly/theme-kit-nextjs": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-nextjs/-/theme-kit-nextjs-7.5.0.tgz", - "integrity": "sha512-K40x9JrrUFydmTdtECXvto7vK6LErSmnjVLOZOwfyYXHpfJWCwFoGyWNwrfn60BloTdNL4ptEZfZYjEb7ctHXg==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-nextjs/-/theme-kit-nextjs-7.5.1.tgz", + "integrity": "sha512-m0JT6HdUvg5S6LzeZa5ExIXzYfZssYYQYfC0ykheA6sUHaU/KRy9aufU6JuPPwxoxe/Sq1jUkD6kd96AhbacRw==", "dependencies": { - "@prezly/theme-kit-core": "^7.5.0", + "@prezly/theme-kit-core": "^7.5.1", "@technically/omit-undefined": "^1.0.2", "next-seo": "^5.4.0" }, @@ -19340,30 +19340,30 @@ } }, "@prezly/theme-kit-core": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-core/-/theme-kit-core-7.5.0.tgz", - "integrity": "sha512-UOY6CCcroVZmPOu3hFXYFfFgsdyhCEeCA17t00OtZNBRl/EkonhehEPITrYc4ENwVyYmXHG/OMt8/7NQU8nWIg==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-core/-/theme-kit-core-7.5.1.tgz", + "integrity": "sha512-T1V4yQU85nS5Jvvb0pWug98zAgewGV0NdnuUJsZOcIpv1tUZcwaNEvXvMlO6xhx//5BXoCaLIwQqCTpi+dJ63A==", "requires": { - "@prezly/theme-kit-intl": "^7.5.0", + "@prezly/theme-kit-intl": "^7.5.1", "@prezly/uploadcare": "^2.3.4", "isomorphic-fetch": "^3.0.0", "parse-data-url": "^4.0.1" } }, "@prezly/theme-kit-intl": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-intl/-/theme-kit-intl-7.5.0.tgz", - "integrity": "sha512-KPC7ZI+kDmCkx2RqUXiaiYXRgF18dulINVKYkyFy2NN1JN7TK2az6MAm8Igo6QwsahkjHP7M6rq2pnqzcD4tRg==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-intl/-/theme-kit-intl-7.5.1.tgz", + "integrity": "sha512-yBtvQWNs6eib8b/NKPBD+6BRETs5t5FdiTbwBBH5uLZsvyaKp5r0FsYYhyChz/V5j8CFBCBfFx66AO++dL/M5Q==", "requires": { "@formatjs/intl": "^2.0.0" } }, "@prezly/theme-kit-nextjs": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@prezly/theme-kit-nextjs/-/theme-kit-nextjs-7.5.0.tgz", - "integrity": "sha512-K40x9JrrUFydmTdtECXvto7vK6LErSmnjVLOZOwfyYXHpfJWCwFoGyWNwrfn60BloTdNL4ptEZfZYjEb7ctHXg==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@prezly/theme-kit-nextjs/-/theme-kit-nextjs-7.5.1.tgz", + "integrity": "sha512-m0JT6HdUvg5S6LzeZa5ExIXzYfZssYYQYfC0ykheA6sUHaU/KRy9aufU6JuPPwxoxe/Sq1jUkD6kd96AhbacRw==", "requires": { - "@prezly/theme-kit-core": "^7.5.0", + "@prezly/theme-kit-core": "^7.5.1", "@technically/omit-undefined": "^1.0.2", "next-seo": "^5.4.0" } diff --git a/package.json b/package.json index d0f99287..1f204b05 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,9 @@ "@prezly/content-renderer-react-js": "0.38.4", "@prezly/sdk": "21.6.0", "@prezly/story-content-format": "0.65.1", - "@prezly/theme-kit-core": "7.5.0", - "@prezly/theme-kit-intl": "7.5.0", - "@prezly/theme-kit-nextjs": "7.5.0", + "@prezly/theme-kit-core": "7.5.1", + "@prezly/theme-kit-intl": "7.5.1", + "@prezly/theme-kit-nextjs": "7.5.1", "@prezly/uploadcare": "2.4.4", "@prezly/uploadcare-image": "0.3.2", "@react-hookz/web": "14.7.1",