Merge pull request #928 from prezly/feature/meilisearch-integration

[DEV-13018] Feature - MeiliSearch integration
prezly · Jul 23, 2024 · 60600c8 · 60600c8
2 parents e7c7034 + d3df1f2
commit 60600c8
Show file tree

Hide file tree

Showing 18 changed files with 662 additions and 84 deletions.
diff --git a/.env.example b/.env.example
@@ -10,10 +10,13 @@ PREZLY_THEME_UUID=9648bb4f-19df-44a3-a1b4-18bce22c76fd
 
 # This key is unique for every newsroom
 ALGOLIA_API_KEY=
+MEILISEARCH_API_KEY=
 
 # These variables have default values in the code, but you can override them if you need to
 # ALGOLIA_APP_ID=
 # ALGOLIA_INDEX=
+# MEILISEARCH_HOST=
+# MEILISEARCH_INDEX=
 
 # API_BASE_URL_OVERRIDE=
 

diff --git a/components/CategoriesList/CategoriesList.tsx b/components/CategoriesList/CategoriesList.tsx
@@ -1,5 +1,5 @@
 import type { Category } from '@prezly/sdk';
-import type { AlgoliaCategoryRef } from '@prezly/theme-kit-core';
+import type { IndexedCategoryRef } from '@prezly/theme-kit-core';
 import { getLocalizedCategoryData } from '@prezly/theme-kit-core';
 import { useCurrentLocale } from '@prezly/theme-kit-nextjs';
 import { useEffect, useMemo, useState } from 'react';
@@ -9,7 +9,7 @@ import CategoryLink from '../CategoryLink';
 import styles from './CategoriesList.module.scss';
 
 type Props = {
-    categories: Category[] | AlgoliaCategoryRef[];
+    categories: Category[] | IndexedCategoryRef[];
     showAllCategories?: boolean;
     isStatic?: boolean;
     linkClassName?: string;

diff --git a/components/CategoryLink/CategoryLink.tsx b/components/CategoryLink/CategoryLink.tsx
@@ -1,5 +1,5 @@
 import type { Category } from '@prezly/sdk';
-import type { AlgoliaCategoryRef } from '@prezly/theme-kit-core';
+import type { IndexedCategoryRef } from '@prezly/theme-kit-core';
 import { getCategoryUrl, getLocalizedCategoryData } from '@prezly/theme-kit-core';
 import { useCurrentLocale, useGetLinkLocaleSlug } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
@@ -8,7 +8,7 @@ import Link from 'next/link';
 import styles from './CategoryLink.module.scss';
 
 type Props = {
-    category: Category | AlgoliaCategoryRef;
+    category: Category | IndexedCategoryRef;
     className?: string;
     onClick?: () => void;
 };

diff --git a/components/StoryImage/StoryImage.tsx b/components/StoryImage/StoryImage.tsx
@@ -1,4 +1,4 @@
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import { useNewsroom } from '@prezly/theme-kit-nextjs';
 import UploadcareImage from '@uploadcare/nextjs-loader';
 import classNames from 'classnames';
@@ -11,7 +11,7 @@ import { getStoryThumbnail } from './lib';
 import styles from './StoryImage.module.scss';
 
 type Props = {
-    story: StoryWithImage | AlgoliaStory;
+    story: StoryWithImage | IndexedStory;
     size: CardSize;
     className?: string;
     placeholderClassName?: string;

diff --git a/components/StoryImage/lib/getStoryThumbnail.ts b/components/StoryImage/lib/getStoryThumbnail.ts
@@ -1,10 +1,10 @@
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import type { UploadcareImageDetails } from '@prezly/uploadcare-image/build/types';
 
 import type { StoryWithImage } from 'types';
 
 export function getStoryThumbnail(
-    story: StoryWithImage | AlgoliaStory,
+    story: StoryWithImage | IndexedStory,
 ): UploadcareImageDetails | null {
     const { thumbnail_image } = story;
 

diff --git a/components/StoryPublicationDate/StoryPublicationDate.tsx b/components/StoryPublicationDate/StoryPublicationDate.tsx
@@ -1,10 +1,10 @@
 import type { Story } from '@prezly/sdk';
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import { getStoryPublicationDate } from '@prezly/theme-kit-core';
 import { FormattedDate } from 'react-intl';
 
 interface Props {
-    story: Story | AlgoliaStory;
+    story: Story | IndexedStory;
 }
 
 export function StoryPublicationDate({ story }: Props) {

diff --git a/modules/Layout/Header/Header.tsx b/modules/Layout/Header/Header.tsx
@@ -1,10 +1,10 @@
 import { translations } from '@prezly/theme-kit-intl';
 import {
-    useAlgoliaSettings,
     useCategories,
     useCompanyInformation,
     useGetLinkLocaleSlug,
     useNewsroom,
+    useSearchSettings,
 } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 import dynamic from 'next/dynamic';
@@ -36,15 +36,13 @@ function Header({ hasError }: Props) {
     const { name } = useCompanyInformation();
     const getLinkLocaleSlug = useGetLinkLocaleSlug();
     const { formatMessage } = useIntl();
-    const { ALGOLIA_API_KEY } = useAlgoliaSettings();
+    const searchSettings = useSearchSettings();
     const { isMobile } = useDevice();
 
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isSearchWidgetShown, setIsSearchWidgetShown] = useState(false);
     const headerRef = useRef<HTMLElement>(null);
 
-    const IS_SEARCH_ENABLED = Boolean(ALGOLIA_API_KEY);
-
     function alignMobileHeader() {
         if (!isMobile) {
             return;
@@ -132,7 +130,7 @@ function Header({ hasError }: Props) {
                             aria-label={formatMessage(translations.misc.toggleMobileNavigation)}
                         />
 
-                        {IS_SEARCH_ENABLED && (
+                        {searchSettings && (
                             <ButtonLink
                                 href="/search"
                                 localeCode={getLinkLocaleSlug()}
@@ -187,10 +185,11 @@ function Header({ hasError }: Props) {
                             </ul>
                         </div>
 
-                        {IS_SEARCH_ENABLED && (
+                        {searchSettings && (
                             <SearchWidget
                                 dialogClassName={styles.mobileSearchWrapper}
                                 isOpen={isSearchWidgetShown}
+                                settings={searchSettings}
                                 onClose={closeSearchWidget}
                             />
                         )}

diff --git a/modules/Layout/Header/SearchWidget/SearchWidget.tsx b/modules/Layout/Header/SearchWidget/SearchWidget.tsx
@@ -1,7 +1,6 @@
-import { useAlgoliaSettings, useCurrentLocale } from '@prezly/theme-kit-nextjs';
-import algoliasearch from 'algoliasearch/lite';
+import type { SearchSettings } from '@prezly/theme-kit-core/server';
+import { useCurrentLocale, useSearchClient } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
-import { useMemo } from 'react';
 import { Configure, InstantSearch } from 'react-instantsearch-dom';
 
 import { Modal } from '@/ui';
@@ -14,17 +13,18 @@ interface Props {
     isOpen: boolean;
     className?: string;
     dialogClassName?: string;
+    settings: SearchSettings;
     onClose: () => void;
 }
 
-function SearchWidget({ isOpen, className, dialogClassName, onClose }: Props) {
+function SearchWidget({ isOpen, className, dialogClassName, settings, onClose }: Props) {
     const currentLocale = useCurrentLocale();
-    const { ALGOLIA_APP_ID, ALGOLIA_API_KEY, ALGOLIA_INDEX } = useAlgoliaSettings();
+    const searchClient = useSearchClient(settings);
 
-    const searchClient = useMemo(
-        () => algoliasearch(ALGOLIA_APP_ID, ALGOLIA_API_KEY),
-        [ALGOLIA_API_KEY, ALGOLIA_APP_ID],
-    );
+    const filters =
+        settings.searchBackend === 'algolia'
+            ? `attributes.culture.code:${currentLocale.toUnderscoreCode()}`
+            : `attributes.culture.code=${currentLocale.toUnderscoreCode()}`;
 
     return (
         <Modal
@@ -35,11 +35,8 @@ function SearchWidget({ isOpen, className, dialogClassName, onClose }: Props) {
             dialogClassName={dialogClassName}
             wrapperClassName={styles.wrapper}
         >
-            <InstantSearch searchClient={searchClient} indexName={ALGOLIA_INDEX}>
-                <Configure
-                    hitsPerPage={3}
-                    filters={`attributes.culture.code:${currentLocale.toUnderscoreCode()}`}
-                />
+            <InstantSearch searchClient={searchClient} indexName={settings.index}>
+                <Configure hitsPerPage={3} filters={filters} />
                 <SearchBar />
                 <MainPanel onClose={onClose} />
             </InstantSearch>

diff --git a/modules/Layout/Header/SearchWidget/components/Hit.tsx b/modules/Layout/Header/SearchWidget/components/Hit.tsx
@@ -1,4 +1,4 @@
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import Link from 'next/link';
 import type { Hit } from 'react-instantsearch-core';
 import { Highlight } from 'react-instantsearch-dom';
@@ -8,7 +8,7 @@ import { StoryImage } from '@/components';
 import styles from './Hit.module.scss';
 
 interface Props {
-    hit: Hit<{ attributes: AlgoliaStory }>;
+    hit: Hit<{ attributes: IndexedStory }>;
 }
 
 function HitComponent({ hit }: Props) {

diff --git a/modules/Layout/Header/SearchWidget/components/MainPanel.tsx b/modules/Layout/Header/SearchWidget/components/MainPanel.tsx
@@ -1,4 +1,4 @@
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import { getCategoryHasTranslation } from '@prezly/theme-kit-core';
 import { useCategories, useCurrentLocale } from '@prezly/theme-kit-nextjs';
 import type { StateResultsProvided } from 'react-instantsearch-core';
@@ -17,7 +17,7 @@ function MainPanel({
     searchState,
     searchResults,
     onClose,
-}: StateResultsProvided<AlgoliaStory> & Props) {
+}: StateResultsProvided<IndexedStory> & Props) {
     const isQuerySet = Boolean(searchState.query?.length);
     const categories = useCategories();
     const currentLocale = useCurrentLocale();

diff --git a/modules/Layout/Header/SearchWidget/components/SearchResults.tsx b/modules/Layout/Header/SearchWidget/components/SearchResults.tsx
@@ -1,4 +1,4 @@
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import { translations } from '@prezly/theme-kit-intl';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
@@ -12,7 +12,7 @@ import Hit from './Hit';
 
 import styles from './MainPanel.module.scss';
 
-type Props = Pick<StateResultsProvided<AlgoliaStory>, 'searchResults'> & {
+type Props = Pick<StateResultsProvided<IndexedStory>, 'searchResults'> & {
     query?: string;
 };
 

diff --git a/modules/Search/SearchPage.tsx b/modules/Search/SearchPage.tsx
@@ -1,7 +1,7 @@
-import { useAlgoliaSettings, useCurrentLocale } from '@prezly/theme-kit-nextjs';
-import algoliasearch from 'algoliasearch';
+import type { SearchSettings } from '@prezly/theme-kit-core/server';
+import { useCurrentLocale, useSearchClient } from '@prezly/theme-kit-nextjs';
 import { useRouter } from 'next/router';
-import { useMemo, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Configure, InstantSearch } from 'react-instantsearch-dom';
 
 import Layout from '../Layout';
@@ -14,21 +14,24 @@ import { createUrl, queryToSearchState, searchStateToQuery } from './utils';
 
 import styles from './SearchPage.module.scss';
 
+interface Props {
+    settings: SearchSettings;
+}
+
 const DEBOUNCE_TIME_MS = 300;
 
-function SearchPage() {
+function SearchPage({ settings }: Props) {
     const currentLocale = useCurrentLocale();
+    const searchClient = useSearchClient(settings);
 
     const { query, push } = useRouter();
     const [searchState, setSearchState] = useState<SearchState>(queryToSearchState(query));
     const debouncedSetStateRef = useRef<number>();
 
-    const { ALGOLIA_APP_ID, ALGOLIA_API_KEY, ALGOLIA_INDEX } = useAlgoliaSettings();
-
-    const searchClient = useMemo(
-        () => algoliasearch(ALGOLIA_APP_ID, ALGOLIA_API_KEY),
-        [ALGOLIA_API_KEY, ALGOLIA_APP_ID],
-    );
+    const filters =
+        settings.searchBackend === 'algolia'
+            ? `attributes.culture.code:${currentLocale.toUnderscoreCode()}`
+            : `attributes.culture.code=${currentLocale.toUnderscoreCode()}`;
 
     function onSearchStateChange(updatedSearchState: SearchState) {
         if (typeof window === 'undefined') {
@@ -50,15 +53,12 @@ function SearchPage() {
         <Layout>
             <InstantSearch
                 searchClient={searchClient}
-                indexName={ALGOLIA_INDEX}
+                indexName={settings.index}
                 searchState={searchState}
                 onSearchStateChange={onSearchStateChange}
                 createURL={createUrl}
             >
-                <Configure
-                    hitsPerPage={6}
-                    filters={`attributes.culture.code:${currentLocale.toUnderscoreCode()}`}
-                />
+                <Configure hitsPerPage={6} filters={filters} />
                 <AlgoliaStateContextProvider>
                     <Title />
                     <div className={styles.container}>

diff --git a/modules/Search/components/AlgoliaStateContext.tsx b/modules/Search/components/AlgoliaStateContext.tsx
@@ -1,18 +1,18 @@
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import type { PropsWithChildren } from 'react';
 import { createContext, useContext } from 'react';
 import type { StateResultsProvided } from 'react-instantsearch-core';
 import { connectStateResults } from 'react-instantsearch-dom';
 
-const AlgoliaStateContext = createContext<StateResultsProvided<AlgoliaStory> | undefined>(
+const AlgoliaStateContext = createContext<StateResultsProvided<IndexedStory> | undefined>(
     undefined,
 );
 
 // Algolia connect API is pretty broken, so this is a workaround to provide some search state to components lower in the tree
 function AlgoliaStateContextProvider({
     children,
     ...contextValue
-}: PropsWithChildren<StateResultsProvided<AlgoliaStory>>) {
+}: PropsWithChildren<StateResultsProvided<IndexedStory>>) {
     return (
         <AlgoliaStateContext.Provider value={contextValue}>{children}</AlgoliaStateContext.Provider>
     );

diff --git a/modules/Search/components/Hit.tsx b/modules/Search/components/Hit.tsx
@@ -1,4 +1,4 @@
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import classNames from 'classnames';
 import Link from 'next/link';
 import type { Hit } from 'react-instantsearch-core';
@@ -11,7 +11,7 @@ import styles from './Hit.module.scss';
 import cardStyles from '@/components/StoryCards/StoryCard.module.scss';
 
 interface Props {
-    hit: Hit<{ attributes: AlgoliaStory }>;
+    hit: Hit<{ attributes: IndexedStory }>;
 }
 
 // This is mostly a copy of `StoryCard` component, but since the data structure is a bit different,

diff --git a/modules/Search/components/Results.tsx b/modules/Search/components/Results.tsx
@@ -1,4 +1,4 @@
-import type { AlgoliaStory } from '@prezly/theme-kit-core';
+import type { IndexedStory } from '@prezly/theme-kit-core';
 import { translations } from '@prezly/theme-kit-intl';
 import classNames from 'classnames';
 import type { Hit as HitType, InfiniteHitsProvided } from 'react-instantsearch-core';
@@ -14,7 +14,7 @@ import styles from './Results.module.scss';
 import containerStyles from '@/modules/InfiniteStories/InfiniteStories.module.scss';
 import listStyles from '@/modules/InfiniteStories/StoriesList.module.scss';
 
-type SearchHit = HitType<{ attributes: AlgoliaStory }>;
+type SearchHit = HitType<{ attributes: IndexedStory }>;
 
 function Results({ hits, hasMore, refineNext }: InfiniteHitsProvided<SearchHit>) {
     const { formatMessage } = useIntl();