Merge pull request #1304 from prezly/feature/dev-20547-check-meilisearch-token-and-enable-search-in-hub-sites

[DEV-20547] Feature - Add support for search in hub sites

Author: kudlajz

app/[localeCode]/layout.tsx

@@ -7,7 +7,6 @@ import { analytics, app, generateRootMetadata, themeSettings } from '@/adapters/
 import { CategoryImageFallbackProvider } from '@/components/CategoryImage';
 import { PreviewPageMask } from '@/components/PreviewPageMask';
 import { ScrollToTopButton } from '@/components/ScrollToTopButton';
-import { StoryImageFallbackProvider } from '@/components/StoryImage';
 import { WindowScrollListener } from '@/components/WindowScrollListener';
 import { Analytics } from '@/modules/Analytics';
 import { Boilerplate } from '@/modules/Boilerplate';
@@ -135,25 +134,20 @@ async function AppContext(props: { children: ReactNode; localeCode: Locale.Code
                 <BroadcastStoryProvider>
                     <BroadcastGalleryProvider>
                         <CookieConsentProvider trackingPolicy={newsroom.tracking_policy}>
-                            <StoryImageFallbackProvider
+                            <CategoryImageFallbackProvider
                                 image={newsroom.newsroom_logo}
                                 text={brandName}
                             >
-                                <CategoryImageFallbackProvider
-                                    image={newsroom.newsroom_logo}
-                                    text={brandName}
-                                >
-                                    <ThemeSettingsProvider settings={settings}>
-                                        <BroadcastPageTypesProvider>
-                                            <BroadcastNotificationsProvider>
-                                                <BroadcastTranslationsProvider>
-                                                    {children}
-                                                </BroadcastTranslationsProvider>
-                                            </BroadcastNotificationsProvider>
-                                        </BroadcastPageTypesProvider>
-                                    </ThemeSettingsProvider>
-                                </CategoryImageFallbackProvider>
-                            </StoryImageFallbackProvider>
+                                <ThemeSettingsProvider settings={settings}>
+                                    <BroadcastPageTypesProvider>
+                                        <BroadcastNotificationsProvider>
+                                            <BroadcastTranslationsProvider>
+                                                {children}
+                                            </BroadcastTranslationsProvider>
+                                        </BroadcastNotificationsProvider>
+                                    </BroadcastPageTypesProvider>
+                                </ThemeSettingsProvider>
+                            </CategoryImageFallbackProvider>
                         </CookieConsentProvider>
                     </BroadcastGalleryProvider>
                 </BroadcastStoryProvider>

app/[localeCode]/search/page.tsx

@@ -1,3 +1,4 @@
+import type { Newsroom } from '@prezly/sdk';
 import type { Locale } from '@prezly/theme-kit-nextjs';
 import { translations } from '@prezly/theme-kit-nextjs';
 import type { Metadata } from 'next';
@@ -32,6 +33,7 @@ export default async function SearchPage(props: Props) {
     const settings = await app().themeSettings();
     const themeSettings = parsePreviewSearchParams(searchParams, settings);
     const newsroom = await app().newsroom();
+    const memberNewsrooms = await getMemberNewsrooms(newsroom);
 
     if (!searchSettings || newsroom.is_hub) {
         notFound();
@@ -42,12 +44,23 @@ export default async function SearchPage(props: Props) {
             <BroadcastTranslations routeName="search" />
             <BroadcastPageType pageType="search" />
             <Search
-                settings={searchSettings}
                 localeCode={params.localeCode}
+                newsrooms={[newsroom, ...memberNewsrooms]}
+                newsroomUuid={newsroom.uuid}
+                settings={searchSettings}
                 showDate={themeSettings.show_date}
                 showSubtitle={themeSettings.show_subtitle}
                 storyCardVariant={themeSettings.story_card_variant}
             />
         </>
     );
 }
+
+async function getMemberNewsrooms(newsroom: Newsroom) {
+    if (newsroom.is_hub) {
+        const members = await app().client.newsroomHub.list(newsroom.uuid);
+        return members.map((member) => member.newsroom);
+    }
+
+    return [];
+}

package.json

@@ -33,7 +33,7 @@
     "@playwright/test": "^1.50.1",
     "@prezly/analytics-nextjs": "4.2.8",
     "@prezly/content-renderer-react-js": "0.41.1",
-    "@prezly/sdk": "23.14.0",
+    "@prezly/sdk": "23.17.0",
     "@prezly/story-content-format": "0.68.0",
     "@prezly/theme-kit-nextjs": "10.2.3",
     "@prezly/uploadcare": "2.5.0",

pnpm-lock.yaml

@@ -4,13 +4,16 @@ import type { TranslatedCategory } from '@prezly/sdk';
 import classNames from 'classnames';
 import { Fragment, useMemo, useState } from 'react';
 
+import type { ExternalNewsroomUrl } from '@/types';
+
 import { CategoryLink } from '../CategoryLink';
 
 import styles from './CategoriesList.module.scss';
 
 type Props = {
     categories: TranslatedCategory[];
     className?: string;
+    external: ExternalNewsroomUrl;
     isStatic?: boolean;
     showAllCategories?: boolean;
     withBadges?: boolean;
@@ -21,6 +24,7 @@ const MAX_CATEGORIES_CHARACTER_LENGTH = 50;
 export function CategoriesList({
     categories,
     className,
+    external,
     isStatic,
     showAllCategories = false,
     withBadges = false,
@@ -68,6 +72,7 @@ export function CategoriesList({
                     <CategoryLink
                         category={category}
                         className={styles.categoryLink}
+                        external={external}
                         withBadge={withBadges}
                     />
                 </Fragment>

src/components/CategoriesList/CategoriesList.tsx

@@ -2,6 +2,8 @@ import type { TranslatedCategory } from '@prezly/sdk';
 import classNames from 'classnames';
 
 import { Link } from '@/components/Link';
+import type { ExternalNewsroomUrl } from '@/types';
+import { ensureTrailingSlash } from '@/utils';
 
 import { Badge } from '../Badge';
 
@@ -10,10 +12,11 @@ import styles from './CategoryLink.module.scss';
 type Props = {
     category: TranslatedCategory;
     className?: string;
+    external: ExternalNewsroomUrl;
     withBadge?: boolean;
 };
 
-export function CategoryLink({ category, className, withBadge = false }: Props) {
+export function CategoryLink({ category, className, external, withBadge = false }: Props) {
     const content = withBadge ? (
         <Badge variant="outline" size="small">
             {category.name}
@@ -22,14 +25,15 @@ export function CategoryLink({ category, className, withBadge = false }: Props)
         <span>{category.name}</span>
     );
 
+    const href = external
+        ? `${ensureTrailingSlash(external.newsroomUrl)}${category.locale}/category/${category.slug}`
+        : ({
+              routeName: 'category',
+              params: { slug: category.slug, localeCode: category.locale },
+          } satisfies Link.Props['href']);
+
     return (
-        <Link
-            href={{
-                routeName: 'category',
-                params: { slug: category.slug, localeCode: category.locale },
-            }}
-            className={classNames(styles.link, className)}
-        >
+        <Link href={href} className={classNames(styles.link, className)}>
             {content}
         </Link>
     );

src/components/CategoryLink/CategoryLink.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { UploadedImage } from '@prezly/sdk';
 import { Category } from '@prezly/sdk';
 import classNames from 'classnames';
 
@@ -16,18 +17,33 @@ import styles from './HighlightedStoryCard.module.scss';
 
 type Props = {
     fullWidth: boolean;
+    newsroomLogo: UploadedImage | null;
+    newsroomName: string;
     rounded: boolean;
     showDate: boolean;
     showSubtitle: boolean;
     story: ListStory;
 };
 
-export function HighlightedStoryCard({ fullWidth, rounded, showDate, showSubtitle, story }: Props) {
+export function HighlightedStoryCard({
+    fullWidth,
+    newsroomLogo,
+    newsroomName,
+    rounded,
+    showDate,
+    showSubtitle,
+    story,
+}: Props) {
     const locale = useLocale();
     const { categories, published_at, slug, subtitle } = story;
 
     const translatedCategories = Category.translations(categories, locale);
 
+    const fallback = {
+        image: newsroomLogo,
+        text: newsroomName,
+    };
+
     if (fullWidth) {
         return (
             <div
@@ -36,8 +52,10 @@ export function HighlightedStoryCard({ fullWidth, rounded, showDate, showSubtitl
                 })}
             >
                 <StoryImage
+                    fallback={fallback}
                     size="full-width"
                     className={styles.image}
+                    placeholder={{}}
                     placeholderClassName={styles.placeholder}
                     thumbnailImage={story.thumbnail_image}
                     title={story.title}
@@ -89,8 +107,10 @@ export function HighlightedStoryCard({ fullWidth, rounded, showDate, showSubtitl
     return (
         <StoryCard
             key={story.uuid}
-            isExternal={false}
+            external={false}
+            fallback={fallback}
             layout="horizontal"
+            placeholder={{}}
             publishedAt={story.published_at}
             showDate={showDate}
             showSubtitle={showSubtitle}
@@ -101,7 +121,6 @@ export function HighlightedStoryCard({ fullWidth, rounded, showDate, showSubtitl
             title={story.title}
             titleAsString={story.title}
             translatedCategories={translatedCategories}
-            url={story.links.newsroom_view!}
         />
     );
 }