Merge pull request #1105 from prezly/feature/dev-12530-fix-media-gall…

…ery-seo-description [DEV-12530] Feature - Enrich media gallery page title and description
prezly · Feb 27, 2024 · 95a374b · 95a374b
2 parents 4d5047f + 44006e1
commit 95a374b
Show file tree

Hide file tree

Showing 19 changed files with 142 additions and 79 deletions.
diff --git a/components/ContentRenderer/components/Attachment/DownloadLink.tsx b/components/ContentRenderer/components/Attachment/DownloadLink.tsx
@@ -1,7 +1,7 @@
 import { translations } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 
-import { FormattedMessage } from '@/adapters/client';
+import { FormattedMessage, useLocale } from '@/adapters/client';
 import { IconDownload } from '@/icons';
 
 import styles from './DownloadLink.module.scss';
@@ -11,9 +11,11 @@ interface Props {
 }
 
 export function DownloadLink({ className }: Props) {
+    const locale = useLocale();
+
     return (
         <div className={classNames(styles.link, className)}>
-            <FormattedMessage for={translations.actions.download} />
+            <FormattedMessage locale={locale} for={translations.actions.download} />
             <IconDownload width={16} height={16} className={styles.icon} />
         </div>
     );

diff --git a/components/StoryLinks/StoryShareUrl.tsx b/components/StoryLinks/StoryShareUrl.tsx
@@ -5,7 +5,7 @@ import { translations } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 import { Fragment, useState } from 'react';
 
-import { FormattedMessage, useIntl } from '@/adapters/client';
+import { FormattedMessage, useIntl, useLocale } from '@/adapters/client';
 import { Button } from '@/components/Button';
 import { IconLink } from '@/icons';
 
@@ -19,6 +19,7 @@ interface Props {
 const TOOLTIP_HIDE_DELAY = 3000; // 3 seconds
 
 export function StoryShareUrl({ url, buttonClassName }: Props) {
+    const locale = useLocale();
     const [isTooltipShown, setIsTooltipShown] = useState(false);
     const { formatMessage } = useIntl();
 
@@ -51,7 +52,7 @@ export function StoryShareUrl({ url, buttonClassName }: Props) {
             >
                 <div className={styles.message}>
                     <IconLink width={16} height={16} className={styles.messageIcon} />
-                    <FormattedMessage for={translations.misc.shareUrlCopied} />
+                    <FormattedMessage locale={locale} for={translations.misc.shareUrlCopied} />
                 </div>
             </Transition>
         </div>

diff --git a/modules/Contacts/ui/Contacts.tsx b/modules/Contacts/ui/Contacts.tsx
@@ -5,7 +5,7 @@ import { translations } from '@prezly/theme-kit-nextjs';
 import { UploadcareImage } from '@prezly/uploadcare-image';
 import classNames from 'classnames';
 
-import { FormattedMessage } from '@/adapters/client';
+import { FormattedMessage, useLocale } from '@/adapters/client';
 import { ContactCard } from '@/components/ContactCard';
 import { useDevice } from '@/hooks';
 
@@ -19,14 +19,15 @@ interface Props {
 
 export function Contacts({ contacts }: Props) {
     const device = useDevice();
+    const locale = useLocale();
 
     const numberOfColumns = getNumberOfColumns(contacts.length);
     const isCompactCard = numberOfColumns === 3 && !device.isTablet;
 
     return (
         <div className={styles.contacts}>
             <h2 className={styles.title}>
-                <FormattedMessage for={translations.contacts.title} />
+                <FormattedMessage locale={locale} for={translations.contacts.title} />
             </h2>
             <div
                 className={classNames(styles.grid, {

diff --git a/modules/CookieConsent/components/CookieConsentBar.tsx b/modules/CookieConsent/components/CookieConsentBar.tsx
@@ -5,7 +5,7 @@ import type { NewsroomCompanyInformation } from '@prezly/sdk';
 import { translations } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 
-import { FormattedMessage } from '@/adapters/client';
+import { FormattedMessage, useLocale } from '@/adapters/client';
 import { Button } from '@/components/Button';
 
 import styles from './CookieConsentBar.module.scss';
@@ -15,6 +15,8 @@ interface Props {
 }
 
 export function CookieConsentBar({ children }: Props) {
+    const locale = useLocale();
+
     return (
         <DefaultCookieConsentBar>
             {({ onAccept, onReject }) => (
@@ -23,7 +25,10 @@ export function CookieConsentBar({ children }: Props) {
                         <div className={styles.wrapper}>
                             <div className={styles.content}>
                                 <p className={styles.title}>
-                                    <FormattedMessage for={translations.cookieConsent.title} />
+                                    <FormattedMessage
+                                        locale={locale}
+                                        for={translations.cookieConsent.title}
+                                    />
                                 </p>
                                 {children ? (
                                     <div
@@ -33,6 +38,7 @@ export function CookieConsentBar({ children }: Props) {
                                 ) : (
                                     <p className={styles.text}>
                                         <FormattedMessage
+                                            locale={locale}
                                             for={translations.cookieConsent.description}
                                         />
                                     </p>
@@ -44,17 +50,26 @@ export function CookieConsentBar({ children }: Props) {
                                     onClick={onReject}
                                     variation="secondary"
                                 >
-                                    <FormattedMessage for={translations.cookieConsent.reject} />
+                                    <FormattedMessage
+                                        locale={locale}
+                                        for={translations.cookieConsent.reject}
+                                    />
                                 </Button>
                                 <Button
                                     className={styles.button}
                                     onClick={onAccept}
                                     variation="primary"
                                 >
-                                    <FormattedMessage for={translations.cookieConsent.accept} />
+                                    <FormattedMessage
+                                        locale={locale}
+                                        for={translations.cookieConsent.accept}
+                                    />
                                 </Button>
                                 <p className={styles.notice}>
-                                    <FormattedMessage for={translations.cookieConsent.notice} />
+                                    <FormattedMessage
+                                        locale={locale}
+                                        for={translations.cookieConsent.notice}
+                                    />
                                 </p>
                             </div>
                         </div>

diff --git a/modules/Header/Categories.tsx b/modules/Header/Categories.tsx
@@ -1,20 +1,23 @@
 import type { TranslatedCategory } from '@prezly/sdk';
+import type { Locale } from '@prezly/theme-kit-nextjs';
 
 import { CategoriesNav } from './ui';
 
 import styles from './ui/Header.module.scss';
 
 interface Props {
     categories: TranslatedCategory[];
+    localeCode: Locale.Code;
 }
 
-export async function Categories({ categories }: Props) {
+export async function Categories({ categories, localeCode }: Props) {
     if (categories.length === 0) {
         return null;
     }
 
     return (
         <CategoriesNav
+            localeCode={localeCode}
             categories={categories}
             buttonClassName={styles.navigationButton}
             navigationItemClassName={styles.navigationItem}

diff --git a/modules/Header/Header.tsx b/modules/Header/Header.tsx
@@ -41,7 +41,7 @@ export async function Header({ localeCode }: Props) {
             displayedLanguages={displayedLanguages.length}
             displayedGalleries={newsroom.public_galleries_number}
         >
-            <Categories categories={displayedCategories} />
+            <Categories categories={displayedCategories} localeCode={localeCode} />
             <Languages localeCode={localeCode} />
         </ui.Header>
     );

diff --git a/modules/Header/ui/CategoriesNav/CategoriesNav.tsx b/modules/Header/ui/CategoriesNav/CategoriesNav.tsx
@@ -1,4 +1,5 @@
 import type { TranslatedCategory } from '@prezly/sdk';
+import type { Locale } from '@prezly/theme-kit-nextjs';
 import { translations } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 
@@ -12,6 +13,7 @@ import styles from './CategoriesNav.module.scss';
 
 export function CategoriesNav({
     categories,
+    localeCode,
     buttonClassName,
     navigationItemClassName,
     navigationButtonClassName,
@@ -41,7 +43,9 @@ export function CategoriesNav({
                 })}
             >
                 <Dropdown
-                    label={<FormattedMessage for={translations.categories.title} />}
+                    label={
+                        <FormattedMessage locale={localeCode} for={translations.categories.title} />
+                    }
                     buttonClassName={buttonClassName}
                     withMobileDisplay
                 >
@@ -57,6 +61,7 @@ export function CategoriesNav({
 export namespace CategoriesNav {
     export interface Props {
         categories: TranslatedCategory[];
+        localeCode: Locale.Code;
         buttonClassName?: string;
         navigationItemClassName?: string;
         navigationButtonClassName?: string;

diff --git a/modules/Header/ui/Header.tsx b/modules/Header/ui/Header.tsx
@@ -48,7 +48,7 @@ export function Header({
     displayedLanguages,
     children /* hasError */,
 }: Props) {
-    const { formatMessage } = useIntl();
+    const { locale, formatMessage } = useIntl();
     const { isMobile } = useDevice();
 
     const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -183,6 +183,7 @@ export function Header({
                                             className={styles.navigationButton}
                                         >
                                             <FormattedMessage
+                                                locale={locale}
                                                 for={translations.mediaGallery.title}
                                             />
                                         </ButtonLink>

diff --git a/modules/Header/ui/SearchWidget/components/CategoriesList.tsx b/modules/Header/ui/SearchWidget/components/CategoriesList.tsx
@@ -2,7 +2,7 @@ import type { TranslatedCategory } from '@prezly/sdk';
 import { translations } from '@prezly/theme-kit-nextjs';
 import { useState } from 'react';
 
-import { FormattedMessage } from '@/adapters/client';
+import { FormattedMessage, useLocale } from '@/adapters/client';
 import { Button } from '@/components/Button';
 import { Link } from '@/components/Link';
 import { onPlainLeftClick } from '@/utils';
@@ -18,6 +18,7 @@ interface Props {
 }
 
 export function CategoriesList({ categories, onClose }: Props) {
+    const locale = useLocale();
     const [showAllCategories, setShowAllCategories] = useState(false);
 
     const displayedCategories = showAllCategories
@@ -31,7 +32,7 @@ export function CategoriesList({ categories, onClose }: Props) {
     return (
         <>
             <p className={mainStyles.title}>
-                <FormattedMessage for={translations.categories.title} />
+                <FormattedMessage locale={locale} for={translations.categories.title} />
             </p>
 
             <ul className={mainStyles.list}>
@@ -58,9 +59,9 @@ export function CategoriesList({ categories, onClose }: Props) {
                     className={mainStyles.link}
                 >
                     {showAllCategories ? (
-                        <FormattedMessage for={translations.search.viewLess} />
+                        <FormattedMessage locale={locale} for={translations.search.viewLess} />
                     ) : (
-                        <FormattedMessage for={translations.search.viewMore} />
+                        <FormattedMessage locale={locale} for={translations.search.viewMore} />
                     )}
                 </Button>
             )}

diff --git a/modules/Header/ui/SearchWidget/components/SearchBar.tsx b/modules/Header/ui/SearchWidget/components/SearchBar.tsx
@@ -24,7 +24,12 @@ export const SearchBar = connectSearchBox(({ currentRefinement, refine }: Props)
         >
             <div className={styles.inputWrapper}>
                 <FormInput
-                    label={<FormattedMessage for={translations.search.inputLabel} />}
+                    label={
+                        <FormattedMessage
+                            locale={localeCode}
+                            for={translations.search.inputLabel}
+                        />
+                    }
                     type="search"
                     name="query"
                     value={currentRefinement}
@@ -34,12 +39,12 @@ export const SearchBar = connectSearchBox(({ currentRefinement, refine }: Props)
                 />
                 {!currentRefinement.length && (
                     <span className={styles.inputHint}>
-                        <FormattedMessage for={translations.search.inputHint} />
+                        <FormattedMessage locale={localeCode} for={translations.search.inputHint} />
                     </span>
                 )}
             </div>
             <Button type="submit" variation="secondary" className={styles.button}>
-                <FormattedMessage for={translations.search.action} />
+                <FormattedMessage locale={localeCode} for={translations.search.action} />
             </Button>
         </form>
     );

diff --git a/modules/Header/ui/SearchWidget/components/SearchResults.tsx b/modules/Header/ui/SearchWidget/components/SearchResults.tsx
@@ -35,9 +35,9 @@ export function SearchResults({ searchResults, query, isSearchPage, onClose }: P
         <>
             <p className={classNames(styles.title, { [styles.empty]: !totalResults })}>
                 {totalResults ? (
-                    <FormattedMessage for={translations.search.resultsTitle} />
+                    <FormattedMessage locale={localeCode} for={translations.search.resultsTitle} />
                 ) : (
-                    <FormattedMessage for={translations.search.noResults} />
+                    <FormattedMessage locale={localeCode} for={translations.search.noResults} />
                 )}
             </p>
             <Hits hitComponent={Hit} />
@@ -50,7 +50,10 @@ export function SearchResults({ searchResults, query, isSearchPage, onClose }: P
                     className={styles.link}
                     forceRefresh={isSearchPage}
                 >
-                    <FormattedMessage for={translations.search.showAllResults} />
+                    <FormattedMessage
+                        locale={localeCode}
+                        for={translations.search.showAllResults}
+                    />
                 </ButtonLink>
             )}
         </>

diff --git a/modules/InfiniteStories/InfiniteStories.tsx b/modules/InfiniteStories/InfiniteStories.tsx
@@ -67,9 +67,9 @@ export function InfiniteStories({
                     className={styles.loadMore}
                 >
                     {loading ? (
-                        <FormattedMessage for={translations.misc.stateLoading} />
+                        <FormattedMessage locale={locale} for={translations.misc.stateLoading} />
                     ) : (
-                        <FormattedMessage for={translations.actions.loadMore} />
+                        <FormattedMessage locale={locale} for={translations.actions.loadMore} />
                     )}
                 </Button>
             )}

diff --git a/modules/InfiniteStories/StoriesList.tsx b/modules/InfiniteStories/StoriesList.tsx
@@ -3,7 +3,7 @@
 import { translations } from '@prezly/theme-kit-nextjs';
 import { useMemo } from 'react';
 
-import { FormattedMessage } from '@/adapters/client';
+import { FormattedMessage, useLocale } from '@/adapters/client';
 import { HighlightedStoryCard, StoryCard } from '@/components/StoryCards';
 import type { ListStory } from 'types';
 
@@ -20,6 +20,8 @@ type Props = {
 };
 
 export function StoriesList({ newsoomName, stories, isCategoryList = false }: Props) {
+    const locale = useLocale();
+
     const [highlightedStories, restStories] = useMemo(() => {
         if (isCategoryList) {
             return [[], stories];
@@ -40,12 +42,13 @@ export function StoriesList({ newsoomName, stories, isCategoryList = false }: Pr
                 <Illustration />
                 <h1 className={styles.noStoriesTitle}>
                     <FormattedMessage
+                        locale={locale}
                         for={translations.noStories.title}
                         values={{ newsroom: newsoomName }}
                     />
                 </h1>
                 <p className={styles.noStoriesSubtitle}>
-                    <FormattedMessage for={translations.noStories.subtitle} />
+                    <FormattedMessage locale={locale} for={translations.noStories.subtitle} />
                 </p>
             </div>
         );