Added Algolia Search (#5524)

-Added Algolia Search Box :

<img width="707" alt="Screenshot 2024-05-22 at 10 05 13"
src="https://github.com/twentyhq/twenty/assets/102751374/d26f9748-2a80-4690-88ca-16b078c52915">

-Added Algolia Search Bar:

<img width="294" alt="Screenshot 2024-05-22 at 10 05 56"
src="https://github.com/twentyhq/twenty/assets/102751374/ad503894-4ae1-41e4-bd4b-6241f7679142">

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx

@@ -12,7 +12,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;
 
-  h1 {
+  h2 {
     margin: 0px;
     font-size: ${Theme.font.size.lg};
   }
@@ -75,10 +75,10 @@ export default function ArticleEditContent({
   return (
     <StyledContainer>
       <div>
-        <h1>Noticed something to modify?</h1>
+        <h2>Noticed something to change?</h2>
         <p>
-          As an open-source company, we welcome contributions to our GitHub user
-          guide. Help us keep it up-to-date, accurate, and easy to understand by
+          As an open-source company, we welcome contributions through Github.
+          Help us keep it up-to-date, accurate, and easy to understand by
           getting involved and sharing your ideas!
         </p>
         <StyledButtonContainer>

packages/twenty-website/src/app/_components/user-guide/AlgoliaDocSearch.tsx

@@ -0,0 +1,48 @@
+import { DocSearch } from '@docsearch/react';
+import { StoredDocSearchHit } from '@docsearch/react/dist/esm/types';
+
+interface AlgoliaHit extends StoredDocSearchHit {
+  _snippetResult?: {
+    content: { value: string };
+  };
+}
+
+export const AlgoliaDocSearch = () => {
+  return (
+    <DocSearch
+      hitComponent={({ hit }: { hit: AlgoliaHit }) => (
+        <section className="DocSearch-Hits">
+          <a href={hit.url}>
+            <div className="DocSearch-Hit-Container">
+              <div className="DocSearch-Hit-icon">
+                <svg width="20" height="20" viewBox="0 0 20 20">
+                  <path
+                    d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z"
+                    stroke="currentColor"
+                    fill="none"
+                    fillRule="evenodd"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  ></path>
+                </svg>
+              </div>
+              <div className="DocSearch-Hit-action">
+                <h2>
+                  {hit.hierarchy.lvl1 ? hit.hierarchy.lvl1 : hit.hierarchy.lvl0}
+                </h2>
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: hit?._snippetResult?.content?.value || '',
+                  }}
+                ></p>
+              </div>
+            </div>
+          </a>
+        </section>
+      )}
+      appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID as string}
+      apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string}
+      indexName="twenty-user-guide"
+    />
+  );
+};

packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx

@@ -6,9 +6,13 @@ import { useRouter } from 'next/navigation';
 import { IconBook } from '@/app/_components/ui/icons';
 import mq from '@/app/_components/ui/theme/mq';
 import { Theme } from '@/app/_components/ui/theme/theme';
+import { AlgoliaDocSearch } from '@/app/_components/user-guide/AlgoliaDocSearch';
 import UserGuideSidebarSection from '@/app/_components/user-guide/UserGuideSidebarSection';
 import { UserGuideArticlesProps } from '@/content/user-guide/constants/getUserGuideArticles';
 
+import '@docsearch/css';
+import '../../user-guide/algolia.css';
+
 const StyledContainer = styled.div`
   ${mq({
     display: ['none', 'flex', 'flex'],
@@ -66,6 +70,7 @@ const UserGuideSidebar = ({
 
   return (
     <StyledContainer>
+      <AlgoliaDocSearch />
       <StyledHeading>
         <StyledIconContainer>
           <IconBook size={Theme.icon.size.md} />