diff --git a/packages/gitbook/src/components/Announcement/Announcement.tsx b/packages/gitbook/src/components/Announcement/Announcement.tsx
index 87ae41bec..cecbf511a 100644
--- a/packages/gitbook/src/components/Announcement/Announcement.tsx
+++ b/packages/gitbook/src/components/Announcement/Announcement.tsx
@@ -26,6 +26,7 @@ export async function Announcement(props: {
return (
);
diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
index e1e2996ad..08b4971c0 100644
--- a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
+++ b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
@@ -3,8 +3,13 @@
import { tString, useLanguage } from '@/intl/client';
import { setLocalStorageItem } from '@/lib/browser';
import type { ResolvedContentRef } from '@/lib/references';
+import { getLocalizedMessage, getLocalizedTitle } from '@/lib/sites';
import { tcls } from '@/lib/tailwind';
-import { type CustomizationAnnouncement, SiteInsightsLinkPosition } from '@gitbook/api';
+import {
+ type CustomizationAnnouncement,
+ SiteInsightsLinkPosition,
+ type TranslationLanguage,
+} from '@gitbook/api';
import { Icon, type IconName } from '@gitbook/icons';
import { CONTAINER_STYLE } from '../layout';
import { Button, Link } from '../primitives';
@@ -16,11 +21,14 @@ import { ANNOUNCEMENT_CSS_CLASS, ANNOUNCEMENT_STORAGE_KEY } from './constants';
*/
export function AnnouncementBanner(props: {
announcement: CustomizationAnnouncement;
+ locale: TranslationLanguage | undefined;
contentRef: ResolvedContentRef | null;
}) {
- const { announcement, contentRef } = props;
+ const { announcement, locale, contentRef } = props;
const language = useLanguage();
+ const message = getLocalizedMessage(announcement, locale);
+ const linkTitle = announcement.link ? getLocalizedTitle(announcement.link, locale) : undefined;
const hasLink = announcement.link && contentRef?.href;
const closeable = announcement.style !== 'danger';
@@ -61,7 +69,7 @@ export function AnnouncementBanner(props: {
className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
/>
- {announcement.message}
+ {message}
{hasLink ? (
{contentRef?.icon ? (
@@ -69,9 +77,7 @@ export function AnnouncementBanner(props: {
{contentRef?.icon}
) : null}
- {announcement.link?.title && (
- {announcement.link?.title}
- )}
+ {linkTitle ? {linkTitle} : null}