From f5b7202275c49c0a13e1562810b54efec0068b85 Mon Sep 17 00:00:00 2001
From: Jacob Logan <lognjc@amazon.com>
Date: Thu, 16 May 2024 12:06:16 -0700
Subject: [PATCH] enable search and remove pageMain anchor from search results

---
 src/components/Layout/LayoutHeader.tsx | 27 ++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Layout/LayoutHeader.tsx b/src/components/Layout/LayoutHeader.tsx
index 648b8dad38b..5bea190e18b 100644
--- a/src/components/Layout/LayoutHeader.tsx
+++ b/src/components/Layout/LayoutHeader.tsx
@@ -3,17 +3,17 @@ import { useRouter } from 'next/router';
 import { Button, Flex, View, VisuallyHidden } from '@aws-amplify/ui-react';
 import classNames from 'classnames';
 import { Platform } from '@/data/platforms';
-// import {
-//   ALGOLIA_API_KEY,
-//   ALGOLIA_INDEX_NAME,
-//   ALGOLIA_APP_ID
-// } from '../../constants/algolia';
+import {
+  ALGOLIA_API_KEY,
+  ALGOLIA_INDEX_NAME,
+  ALGOLIA_APP_ID
+} from '../../constants/algolia';
 import { IconMenu, IconDoubleChevron } from '@/components/Icons';
 import { Menu } from '@/components/Menu';
 import { LayoutContext } from '@/components/Layout';
 import { PlatformNavigator } from '@/components/PlatformNavigator';
 import flatDirectory from 'src/directory/flatDirectory.json';
-// import { DocSearch } from '@docsearch/react';
+import { DocSearch } from '@docsearch/react';
 import '@docsearch/css';
 import { PageLastUpdated } from '../PageLastUpdated';
 import Feedback from '../Feedback';
@@ -51,6 +51,16 @@ export const LayoutHeader = ({
     }
   };
 
+  // if our search result includes a hash to the main content anchor, remove it.
+  const transformItems = (items) => {
+    items.map((item) => {
+      if (item.url.includes('#pageMain')) {
+        item.url = item.url.replace('#pageMain', '');
+      }
+    });
+    return items;
+  };
+
   return (
     <View as="header" className="layout-header">
       <Flex className={`layout-search layout-search--${pageType}`}>
@@ -72,7 +82,7 @@ export const LayoutHeader = ({
           )}
         >
           <View className="layout-search__search__container">
-            {/* <DocSearch
+            <DocSearch
               appId={process.env.ALGOLIA_APP_ID || ALGOLIA_APP_ID}
               indexName={process.env.ALGOLIA_INDEX_NAME || ALGOLIA_INDEX_NAME}
               apiKey={process.env.ALGOLIA_API_KEY || ALGOLIA_API_KEY}
@@ -82,7 +92,8 @@ export const LayoutHeader = ({
                   `gen:${isGen1 ? 'gen1' : 'gen2'}`
                 ]
               }}
-            /> */}
+              transformItems={transformItems}
+            />
           </View>
         </View>
       </Flex>