admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added Algolia Search (#5524)

Browse Source 
-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>
This commit is contained in:
Ady Beraud
2024-05-22 13:06:00 +03:00
committed by GitHub
parent 2e79bcc70b
commit 40bd42efc4
19 changed files with 206 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

48
packages/twenty-website/src/app/_components/user-guide/AlgoliaDocSearch.tsx Normal file
View File

@ -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"
/>
);
};

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

@ -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} />

122
packages/twenty-website/src/app/user-guide/algolia.css Normal file
View File

@ -0,0 +1,122 @@
.DocSearch-Hit-source{
color: #1c1e21;
}
.DocSearch-Search-Icon {
color: #1c1e21;
}
.DocSearch-Logo {
display: none;
}
.DocSearch-Footer{
flex-direction: row;
box-shadow: none;
border: 1px solid #14141414;
}
.DocSearch-Form {
box-shadow: none;
border: 1px solid #141414;
border-radius: 8px;
}
.DocSearch-Modal {
background-color: white;
}
.DocSearch-Hits {
width: 100%;
margin-bottom: 2px !important;
}
.DocSearch-Hit[aria-selected=true] mark {
color: #1961ED !important;
text-decoration: none;
}
.DocSearch-Hit a {
box-shadow: none;
}
.DocSearch-Hits mark {
background-color: #E8EFFD;
color: #1961ED;
}
.DocSearch-Hit-action {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 0 8px;
}
.DocSearch-Hit-action h2{
font-size: .9em;
margin: 0 0 4px;
font-weight: 500;
}
.DocSearch-Hit-action p{
font-size: 12px;
margin: 0;
width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--font-inter);
font-weight: 400;
}
.DocSearch-Button {
margin: 0px;
min-height: 36px;
background-color: white;
border-radius: 8px;
border: 1px solid #14141414;
}
.DocSearch-Button:hover {
color: #B3B3B3;
box-shadow: none;
}
.DocSearch-Button-Placeholder{
color: #B3B3B3;
}
.DocSearch-Search-Icon {
height: 12px;
width: 12px;
color: #B3B3B3 !important;
}
.DocSearch-Hit-source {
background: none;
font-weight: 600;
font-size: 12px;
font-family: var(--font-inter);
}
.DocSearch-Button-Placeholder {
font-weight: 500;
font-family: var(--font-gabarito);
}
.DocSearch-Button-Keys {
display: none
}
:root {
--docsearch-primary-color: #1c1e21;
--docsearch-highlight-color: #1414140F;
--docsearch-hit-active-color: var(--docsearch-muted-color);
}
.anchor {
scroll-margin-top: calc(80px);
}