From a4e5c2ba8836139af750b65a61c0e3e016bf4295 Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Mon, 16 Dec 2024 11:56:29 -0500
Subject: [PATCH 1/9] Added Search icon/box and indexing updates

---
 .../search/_preview-search-icon.scss          |  3 +
 .../components/search/_preview-search.scss    |  7 +-
 .../assets/sass/components/search/index.scss  |  1 +
 src/sxastarter/src/components/Navigation.tsx  | 97 +++++++++++++++----
 .../components/PageContent/ArticleDetails.tsx |  2 +
 .../components/PageContent/AuthorDetails.tsx  | 82 +++++++++-------
 .../src/components/PageContent/HeadingCta.tsx |  1 +
 .../components/PageContent/PageBackground.tsx |  1 +
 .../components/PageContent/ProjectDetails.tsx |  1 +
 .../src/components/Search/ClickOutside.tsx    | 39 ++++++++
 .../Search/PreviewSearch/PreviewSearch.tsx    |  6 +-
 .../PreviewSearch/PreviewSearchIcon.tsx       | 22 +++++
 12 files changed, 203 insertions(+), 59 deletions(-)
 create mode 100644 src/sxastarter/src/assets/sass/components/search/_preview-search-icon.scss
 create mode 100644 src/sxastarter/src/components/Search/ClickOutside.tsx
 create mode 100644 src/sxastarter/src/components/Search/PreviewSearch/PreviewSearchIcon.tsx

diff --git a/src/sxastarter/src/assets/sass/components/search/_preview-search-icon.scss b/src/sxastarter/src/assets/sass/components/search/_preview-search-icon.scss
new file mode 100644
index 00000000..f02f9d95
--- /dev/null
+++ b/src/sxastarter/src/assets/sass/components/search/_preview-search-icon.scss
@@ -0,0 +1,3 @@
+.preview-search-content-icon {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/sxastarter/src/assets/sass/components/search/_preview-search.scss b/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
index f28e3a55..b6fc0975 100644
--- a/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
+++ b/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
@@ -4,13 +4,18 @@
 .sitecore-preview-search-input {
   width: 800px;
   box-sizing: border-box;
-  padding: var(--sdc-spacing-xs);
+  padding: .6rem 2rem .6rem 3rem;
+  text-align: left !important;
 
   &:focus {
     outline: 1px solid var(--sdc-palette-grey-800);
   }
 }
 
+.search-input-container-hidden {
+  display: none;
+}
+
 /* PreviewSearchContent */
 .sitecore-preview-search-content {
   animation-duration: 500ms;
diff --git a/src/sxastarter/src/assets/sass/components/search/index.scss b/src/sxastarter/src/assets/sass/components/search/index.scss
index e10994e1..f15548e3 100644
--- a/src/sxastarter/src/assets/sass/components/search/index.scss
+++ b/src/sxastarter/src/assets/sass/components/search/index.scss
@@ -1,2 +1,3 @@
 @import 'components';
 @import 'preview-search';
+@import 'preview-search-icon';
diff --git a/src/sxastarter/src/components/Navigation.tsx b/src/sxastarter/src/components/Navigation.tsx
index bfa95c73..404a2d1e 100644
--- a/src/sxastarter/src/components/Navigation.tsx
+++ b/src/sxastarter/src/components/Navigation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import {
   Link,
   LinkField,
@@ -6,6 +6,11 @@ import {
   TextField,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import PreviewSearchWidget, { ArticleModel } from './Search/PreviewSearch/PreviewSearch';
+import { isSearchSDKEnabled } from 'src/services/SearchSDKService';
+import PreviewSearchIcon from './Search/PreviewSearch/PreviewSearchIcon';
+import ClickOutside from './Search/ClickOutside';
+import { useRouter } from 'next/router';
 
 interface Fields {
   Id: string;
@@ -48,8 +53,37 @@ const getLinkField = (props: NavigationProps): LinkField => ({
 });
 
 export const Default = (props: NavigationProps): JSX.Element => {
+  const [isPreviewSearchOpen, setIsPreviewSearchOpen] = useState(false);
   const [isOpenMenu, openMenu] = useState(false);
   const { sitecoreContext } = useSitecoreContext();
+  const containerRef = useRef(null);
+  const router = useRouter();
+
+  const onSearchIconClick = useCallback(() => {
+    setIsPreviewSearchOpen((isPreviewSearchOpen) => {
+      return !isPreviewSearchOpen;
+    });
+
+    // Focus on element with ID search-input
+    setTimeout(() => {
+      const searchInput = document.getElementById('search-input');
+      if (searchInput) {
+        searchInput.focus();
+      }
+    }, 0);
+  }, []);
+
+  const onClose = useCallback(() => setIsPreviewSearchOpen(false), []);
+  ClickOutside([containerRef], onClose);
+
+  const onRedirect = useCallback(
+    (article: ArticleModel) => {
+      onClose();
+      router.push(new URL(article.url, window.location.origin).pathname);
+    },
+    [onClose, router]
+  );
+
   const styles =
     props.params != null
       ? `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd()
@@ -87,28 +121,51 @@ export const Default = (props: NavigationProps): JSX.Element => {
       />
     ));
 
+  if (isSearchSDKEnabled) {
+    list.push(
+      <PreviewSearchIcon
+        className="search-play-icon"
+        key="search-icon"
+        onClick={onSearchIconClick}
+        keyphrase={''}
+      />
+    );
+  }
+
   return (
     <div className={`component navigation ${styles}`} id={id ? id : undefined}>
-      <label className="menu-mobile-navigate-wrapper">
-        <input
-          type="checkbox"
-          className="menu-mobile-navigate"
-          checked={isOpenMenu}
-          onChange={() => handleToggleMenu()}
-        />
-        {/* DEMO TEAM CUSTOMIZATION */}
-        <div className="menu-humburger">
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-        <div className="component-content">
-          <nav>
-            {/* DEMO TEAM CUSTOMIZATION */}
-            <ul>{list}</ul>
-          </nav>
+      {!isPreviewSearchOpen && (
+        <label className="menu-mobile-navigate-wrapper">
+          <input
+            type="checkbox"
+            className="menu-mobile-navigate"
+            checked={isOpenMenu}
+            onChange={() => handleToggleMenu()}
+          />
+          {/* DEMO TEAM CUSTOMIZATION */}
+          <div className="menu-humburger">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+          <div className="component-content">
+            <nav>
+              {/* DEMO TEAM CUSTOMIZATION */}
+              <ul>{list}</ul>
+            </nav>
+          </div>
+        </label>
+      )}
+      {isSearchSDKEnabled && (
+        <div
+          ref={containerRef}
+          className={`search-input-container ${
+            !isPreviewSearchOpen ? 'search-input-container-hidden' : ''
+          }`}
+        >
+          <PreviewSearchWidget rfkId="rfkid_6" itemRedirectionHandler={onRedirect} />
         </div>
-      </label>
+      )}
     </div>
   );
 };
diff --git a/src/sxastarter/src/components/PageContent/ArticleDetails.tsx b/src/sxastarter/src/components/PageContent/ArticleDetails.tsx
index 8c3092aa..0e0a0b1c 100644
--- a/src/sxastarter/src/components/PageContent/ArticleDetails.tsx
+++ b/src/sxastarter/src/components/PageContent/ArticleDetails.tsx
@@ -34,6 +34,7 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Excerpt.value} />
         <meta property="og:name" content={props.fields?.Title?.value} />
+        <meta property="og:title" content={props.fields?.Title?.value} />
         <meta property="og:image" content={props.fields?.Thumbnail?.value?.src} />
         <meta property="og:type" content="article" />
       </Head>
@@ -95,6 +96,7 @@ export const Simple = (props: PageBackgroundProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Excerpt.value} />
         <meta property="og:name" content={props.fields?.Title?.value} />
+        <meta property="og:title" content={props.fields?.Title?.value} />
         <meta property="og:image" content={props.fields?.Thumbnail?.value?.src} />
         <meta property="og:type" content="article" />
       </Head>
diff --git a/src/sxastarter/src/components/PageContent/AuthorDetails.tsx b/src/sxastarter/src/components/PageContent/AuthorDetails.tsx
index 31a92950..55e80dd5 100644
--- a/src/sxastarter/src/components/PageContent/AuthorDetails.tsx
+++ b/src/sxastarter/src/components/PageContent/AuthorDetails.tsx
@@ -10,6 +10,7 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import { ParallaxBackgroundImage } from 'components/NonSitecore/ParallaxBackgroundImage';
+import Head from 'next/head';
 
 interface Fields {
   Name: Field<string>;
@@ -26,51 +27,60 @@ export type PageBackgroundProps = ComponentProps & {
 export const Default = (props: PageBackgroundProps): JSX.Element => {
   const id = props.params?.RenderingIdentifier;
   return (
-    <div
-      className={`component author-details page-background col-12 ${props.params?.styles?.trimEnd()}`}
-      id={id ? id : undefined}
-    >
-      <ParallaxBackgroundImage BackgroundImage={props.fields.BackgroundImage} />
+    <>
+      <Head>
+        <meta property="og:description" content={props.fields?.Bio.value} />
+        <meta property="og:name" content={props.fields?.Name?.value} />
+        <meta property="og:title" content={props.fields?.Name?.value} />
+        <meta property="og:image" content={props.fields?.Photo?.value?.src} />
+        <meta property="og:type" content="author" />
+      </Head>
+      <div
+        className={`component author-details page-background col-12 ${props.params?.styles?.trimEnd()}`}
+        id={id ? id : undefined}
+      >
+        <ParallaxBackgroundImage BackgroundImage={props.fields.BackgroundImage} />
 
-      <div className="container">
-        <Placeholder name="page-navigation" rendering={props.rendering} />
-      </div>
+        <div className="container">
+          <Placeholder name="page-navigation" rendering={props.rendering} />
+        </div>
 
-      <div>
-        <div className="background-content component-spaced container rounded-corners">
-          <div className="p-3 p-sm-5">
-            <div className="">
-              <div className="row row-gap-4 gx-5">
-                <div className="col-12 col-lg-5">
-                  <NextImage
-                    field={props.fields.Photo}
-                    className="author-img"
-                    width={500}
-                    height={500}
-                  />
-                </div>
-                <div className="col-12 col-lg-7">
-                  <h1 className="author-name display-5 fw-bold">
-                    <Text field={props.fields.Name} />
-                  </h1>
-                  <p className="author-position fs-4">
-                    <Text field={props.fields.Position} />
-                  </p>
-                  <hr />
-                  <div className="author-bio">
-                    <RichText field={props.fields.Bio} />
+        <div>
+          <div className="background-content component-spaced container rounded-corners">
+            <div className="p-3 p-sm-5">
+              <div className="">
+                <div className="row row-gap-4 gx-5">
+                  <div className="col-12 col-lg-5">
+                    <NextImage
+                      field={props.fields.Photo}
+                      className="author-img"
+                      width={500}
+                      height={500}
+                    />
+                  </div>
+                  <div className="col-12 col-lg-7">
+                    <h1 className="author-name display-5 fw-bold">
+                      <Text field={props.fields.Name} />
+                    </h1>
+                    <p className="author-position fs-4">
+                      <Text field={props.fields.Position} />
+                    </p>
+                    <hr />
+                    <div className="author-bio">
+                      <RichText field={props.fields.Bio} />
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="row">
-              <Placeholder name="background-page-content" rendering={props.rendering} />
+              <div className="row">
+                <Placeholder name="background-page-content" rendering={props.rendering} />
+              </div>
             </div>
           </div>
+          <Placeholder name="page-content" rendering={props.rendering} />
         </div>
-        <Placeholder name="page-content" rendering={props.rendering} />
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/sxastarter/src/components/PageContent/HeadingCta.tsx b/src/sxastarter/src/components/PageContent/HeadingCta.tsx
index c5398d7a..b4f04bde 100644
--- a/src/sxastarter/src/components/PageContent/HeadingCta.tsx
+++ b/src/sxastarter/src/components/PageContent/HeadingCta.tsx
@@ -100,6 +100,7 @@ export const PageHeading = (props: HeadingCtaProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Text.value} />
         <meta property="og:name" content={props.fields?.Heading?.value} />
+        <meta property="og:title" content={props.fields?.Heading?.value} />
         <meta property="og:type" content="page" />
       </Head>
       <div
diff --git a/src/sxastarter/src/components/PageContent/PageBackground.tsx b/src/sxastarter/src/components/PageContent/PageBackground.tsx
index e8bdbcf7..20ecbf87 100644
--- a/src/sxastarter/src/components/PageContent/PageBackground.tsx
+++ b/src/sxastarter/src/components/PageContent/PageBackground.tsx
@@ -29,6 +29,7 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Content.value} />
         <meta property="og:name" content={props.fields?.Title?.value} />
+        <meta property="og:title" content={props.fields?.Title?.value} />
         <meta property="og:image" content={props.fields?.BackgroundImage?.value?.src} />
         <meta property="og:type" content="page" />
       </Head>
diff --git a/src/sxastarter/src/components/PageContent/ProjectDetails.tsx b/src/sxastarter/src/components/PageContent/ProjectDetails.tsx
index 22300e8f..f568f4d0 100644
--- a/src/sxastarter/src/components/PageContent/ProjectDetails.tsx
+++ b/src/sxastarter/src/components/PageContent/ProjectDetails.tsx
@@ -48,6 +48,7 @@ export const Default = (props: ProjectDetailsProps): JSX.Element => {
       <Head>
         <meta property="og:description" content={props.fields?.Abstract.value} />
         <meta property="og:name" content={props.fields?.Title?.value} />
+        <meta property="og:title" content={props.fields?.Title?.value} />
         <meta property="og:image" content={props.fields?.Thumbnail?.value?.src} />
         <meta property="og:type" content="project" />
       </Head>
diff --git a/src/sxastarter/src/components/Search/ClickOutside.tsx b/src/sxastarter/src/components/Search/ClickOutside.tsx
new file mode 100644
index 00000000..01908535
--- /dev/null
+++ b/src/sxastarter/src/components/Search/ClickOutside.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ClickOutside = (references: any[], handler: () => void): void => {
+  useEffect(() => {
+    const listener = (event: Event) => {
+      let clickWasOnAReference = false;
+
+      // Do nothing if clicking any of the reference element or descendent elements
+      references.forEach((reference) => {
+        if (!reference.current || reference.current.contains(event.target)) {
+          clickWasOnAReference = true;
+        }
+      });
+
+      if (!clickWasOnAReference) {
+        handler();
+      }
+    };
+
+    if (window.PointerEvent) {
+      document.addEventListener('pointerdown', listener);
+    } else {
+      document.addEventListener('mousedown', listener);
+      document.addEventListener('touchstart', listener);
+    }
+
+    return () => {
+      if (window.PointerEvent) {
+        document.removeEventListener('pointerdown', listener);
+      } else {
+        document.removeEventListener('mousedown', listener);
+        document.removeEventListener('touchstart', listener);
+      }
+    };
+  }, [references, handler]);
+};
+
+export default ClickOutside;
diff --git a/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx b/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
index 230c9512..014d5a07 100644
--- a/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
+++ b/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
@@ -10,10 +10,11 @@ import { ArticleCard, Presence, PreviewSearch } from '@sitecore-search/ui';
 import Spinner from '../components/Spinner/Spinner';
 
 const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image';
-type ArticleModel = {
+export type ArticleModel = {
   id: string;
   name?: string;
   title?: string;
+  description?: string;
   image_url: string;
   url: string;
   source_id?: string;
@@ -81,6 +82,7 @@ export const PreviewSearchComponent = ({
         className="sitecore-preview-search-form"
       >
         <PreviewSearch.Input
+          id="search-input"
           onChange={keyphraseHandler}
           autoComplete="off"
           placeholder="Type to search..."
@@ -113,7 +115,7 @@ export const PreviewSearchComponent = ({
                         className="sitecore-preview-search-item"
                       >
                         <PreviewSearch.PreviewSearchItemLink
-                          href={article.url}
+                          href={new URL(article.url, window.location.origin).pathname}
                           onClick={() => {
                             // onItemClick is for tracking purposes
                             onItemClick({
diff --git a/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearchIcon.tsx b/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearchIcon.tsx
new file mode 100644
index 00000000..fb8fb1e8
--- /dev/null
+++ b/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearchIcon.tsx
@@ -0,0 +1,22 @@
+export type PreviewSearchIconProps = {
+  onClick?: (keyphrase: string) => void;
+  className?: string;
+  keyphrase: string;
+};
+
+const PreviewSearchIcon = ({
+  onClick,
+  className,
+  keyphrase,
+}: PreviewSearchIconProps): JSX.Element => {
+  return (
+    <span
+      className={`preview-search-content-icon fa fa-search ${className || ''}`}
+      onClick={() => {
+        onClick && onClick(keyphrase);
+      }}
+    />
+  );
+};
+
+export default PreviewSearchIcon;

From da9f0ca8a8bde7f609e7e36285944ecf7013e85f Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Mon, 16 Dec 2024 12:55:21 -0500
Subject: [PATCH 2/9] Update _preview-search.scss

---
 .../assets/sass/components/search/_preview-search.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/sxastarter/src/assets/sass/components/search/_preview-search.scss b/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
index b6fc0975..1b030122 100644
--- a/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
+++ b/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
@@ -6,6 +6,8 @@
   box-sizing: border-box;
   padding: .6rem 2rem .6rem 3rem;
   text-align: left !important;
+  color: var(--text-body);
+  background: var(--bg-body);
 
   &:focus {
     outline: 1px solid var(--sdc-palette-grey-800);
@@ -112,7 +114,7 @@
 /* PreviewSearchItems */
 .sitecore-preview-search-items {
   flex: 3;
-  background: #fff;
+  background: var(--bg-body);
   overflow-y: auto;
   display: flex;
 
@@ -122,6 +124,7 @@
     list-style: none;
     margin: 0;
     padding: var(--sdc-spacing-s);
+    padding-top: 3rem;
     gap: var(--sdc-spacing-m);
   }
 }
@@ -144,7 +147,10 @@
   cursor: pointer;
   display: block;
   border: solid 1px transparent;
-  text-align: center;
+  
+  h2 {
+    text-align: center !important;
+  }
 
   &:focus-within {
     box-shadow: 2px 2px 4px var(--sdc-palette-grey-800);

From 2f66953c2701c3aa024c1e5a5dcb705c615d5f31 Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:04:13 -0500
Subject: [PATCH 3/9] Update _preview-search.scss

---
 .../src/assets/sass/components/search/_preview-search.scss       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/sxastarter/src/assets/sass/components/search/_preview-search.scss b/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
index 1b030122..1428a5bc 100644
--- a/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
+++ b/src/sxastarter/src/assets/sass/components/search/_preview-search.scss
@@ -8,6 +8,7 @@
   text-align: left !important;
   color: var(--text-body);
   background: var(--bg-body);
+  border-width: 1px;
 
   &:focus {
     outline: 1px solid var(--sdc-palette-grey-800);

From d81dcac894085d3c9c979169f8749aba42da7acc Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:09:09 -0500
Subject: [PATCH 4/9] Update Layout.tsx

---
 src/sxastarter/src/Layout.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/sxastarter/src/Layout.tsx b/src/sxastarter/src/Layout.tsx
index 7b2e6389..616e1778 100644
--- a/src/sxastarter/src/Layout.tsx
+++ b/src/sxastarter/src/Layout.tsx
@@ -39,6 +39,8 @@ const Layout = ({ layoutData, headLinks }: LayoutProps): JSX.Element => {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin={'anonymous'} />
         <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
+        <meta property="og:lang" content={layoutData?.sitecore?.context?.language} />
+        <meta property="og:site" content={layoutData?.sitecore?.context?.site?.name} />
         <meta name="description" content="A Verticals demo site."></meta>
         {headLinks.map((headLink) => (
           <link rel={headLink.rel} key={headLink.href} href={headLink.href} />

From 677973f42f80506e13bc02bb6b301c9dcbaf946b Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:19:46 -0500
Subject: [PATCH 5/9] Update Layout.tsx

---
 src/sxastarter/src/Layout.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/sxastarter/src/Layout.tsx b/src/sxastarter/src/Layout.tsx
index 616e1778..cc6ab585 100644
--- a/src/sxastarter/src/Layout.tsx
+++ b/src/sxastarter/src/Layout.tsx
@@ -39,7 +39,6 @@ const Layout = ({ layoutData, headLinks }: LayoutProps): JSX.Element => {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin={'anonymous'} />
         <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
-        <meta property="og:lang" content={layoutData?.sitecore?.context?.language} />
         <meta property="og:site" content={layoutData?.sitecore?.context?.site?.name} />
         <meta name="description" content="A Verticals demo site."></meta>
         {headLinks.map((headLink) => (

From f4bd4d377ed43d111b2b37ded5ae88eec01dfdd0 Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:05:45 -0500
Subject: [PATCH 6/9] Update PreviewSearch.tsx

---
 .../Search/PreviewSearch/PreviewSearch.tsx    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx b/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
index 014d5a07..858e508a 100644
--- a/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
+++ b/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
@@ -4,10 +4,11 @@ import type { ChangeEvent } from 'react';
 import { useCallback } from 'react';
 
 import type { PreviewSearchInitialState } from '@sitecore-search/react';
-import { WidgetDataType, usePreviewSearch, widget } from '@sitecore-search/react';
+import { FilterEqual, WidgetDataType, usePreviewSearch, widget } from '@sitecore-search/react';
 import { ArticleCard, Presence, PreviewSearch } from '@sitecore-search/ui';
-
+import { PageController } from '@sitecore-search/react';
 import Spinner from '../components/Spinner/Spinner';
+import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
 
 const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image';
 export type ArticleModel = {
@@ -51,12 +52,18 @@ export const PreviewSearchComponent = ({
   itemRedirectionHandler,
   submitRedirectionHandler,
 }: PreviewSearchProps) => {
+  const { sitecoreContext } = useSitecoreContext();
+
   const {
     widgetRef,
     actions: { onItemClick, onKeyphraseChange },
     queryResult,
     queryResult: { isFetching, isLoading },
   } = usePreviewSearch<ArticleModel, InitialState>({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    query: (query): any => {
+      query.getRequest().setSearchFilter(new FilterEqual('tags', sitecoreContext?.site?.name));
+    },
     state: {
       itemsPerPage: defaultItemsPerPage,
     },
@@ -71,6 +78,15 @@ export const PreviewSearchComponent = ({
     },
     [onKeyphraseChange]
   );
+
+  if (sitecoreContext?.language == 'fr-CA') {
+    PageController.getContext().setLocaleLanguage('fr');
+    PageController.getContext().setLocaleCountry('ca');
+  } else {
+    PageController.getContext().setLocaleLanguage('en');
+    PageController.getContext().setLocaleCountry('us');
+  }
+
   return (
     <PreviewSearch.Root>
       <form

From d437c8b894bce269ea07e314295e68898442fd37 Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:16:31 -0500
Subject: [PATCH 7/9] Update PreviewSearch.tsx

---
 .../src/components/Search/PreviewSearch/PreviewSearch.tsx      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx b/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
index 858e508a..452f5c7e 100644
--- a/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
+++ b/src/sxastarter/src/components/Search/PreviewSearch/PreviewSearch.tsx
@@ -82,6 +82,9 @@ export const PreviewSearchComponent = ({
   if (sitecoreContext?.language == 'fr-CA') {
     PageController.getContext().setLocaleLanguage('fr');
     PageController.getContext().setLocaleCountry('ca');
+  } else if (sitecoreContext?.language == 'ja-JP') {
+    PageController.getContext().setLocaleLanguage('ja');
+    PageController.getContext().setLocaleCountry('jp');
   } else {
     PageController.getContext().setLocaleLanguage('en');
     PageController.getContext().setLocaleCountry('us');

From ec6f9c00895439e4bc820646cf45ea5186ddf4ad Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:02:57 -0500
Subject: [PATCH 8/9] Update AuthorDetails.tsx

---
 src/sxastarter/src/components/PageContent/AuthorDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sxastarter/src/components/PageContent/AuthorDetails.tsx b/src/sxastarter/src/components/PageContent/AuthorDetails.tsx
index 55e80dd5..d3c32ab0 100644
--- a/src/sxastarter/src/components/PageContent/AuthorDetails.tsx
+++ b/src/sxastarter/src/components/PageContent/AuthorDetails.tsx
@@ -29,7 +29,7 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
   return (
     <>
       <Head>
-        <meta property="og:description" content={props.fields?.Bio.value} />
+        <meta property="og:description" content={props.fields?.Bio?.value} />
         <meta property="og:name" content={props.fields?.Name?.value} />
         <meta property="og:title" content={props.fields?.Name?.value} />
         <meta property="og:image" content={props.fields?.Photo?.value?.src} />

From a8a9c8f5cdd5863dc0654413cf5245d818273755 Mon Sep 17 00:00:00 2001
From: Alexander Doroshenko <adoprog@users.noreply.github.com>
Date: Tue, 17 Dec 2024 10:11:35 -0500
Subject: [PATCH 9/9] Update Navigation.tsx

---
 src/sxastarter/src/components/Navigation.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/sxastarter/src/components/Navigation.tsx b/src/sxastarter/src/components/Navigation.tsx
index 404a2d1e..0bde93bd 100644
--- a/src/sxastarter/src/components/Navigation.tsx
+++ b/src/sxastarter/src/components/Navigation.tsx
@@ -123,12 +123,13 @@ export const Default = (props: NavigationProps): JSX.Element => {
 
   if (isSearchSDKEnabled) {
     list.push(
-      <PreviewSearchIcon
-        className="search-play-icon"
-        key="search-icon"
-        onClick={onSearchIconClick}
-        keyphrase={''}
-      />
+      <li className="	d-none d-lg-block" key="search-icon">
+        <PreviewSearchIcon
+          className="search-play-icon"
+          onClick={onSearchIconClick}
+          keyphrase={''}
+        />
+      </li>
     );
   }