Skip to content

Commit 3504aa2

Browse files
ady-beraudFelixMalfait
authored and
Weiko
committed
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 <[email protected]>
1 parent 84d2353 commit 3504aa2

19 files changed

+206
-28
lines changed

‎packages/twenty-docs/docusaurus.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ const config = {
116116
algolia: {
117117
appId: 'J2OX2P2QAO',
118118
apiKey: 'e0a7a59c7862598a0cf87307c8ea97f2',
119-
indexName: 'twenty',
119+
indexName: 'twenty-developer-docs',
120120

121121
// Optional: see doc section below
122122
contextualSearch: true,

‎packages/twenty-website/.env.example

+2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
GITHUB_TOKEN=your_github_token
22
DATABASE_PG_URL=postgres://website:website@localhost:5432/website # only if using postgres
3+
NEXT_PUBLIC_ALGOLIA_APP_ID=twenty_appId
4+
NEXT_PUBLIC_ALGOLIA_API_KEY=twenty_apiKey

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const StyledContainer = styled.div`
1212
display: flex;
1313
flex-direction: row;
1414
15-
h1 {
15+
h2 {
1616
margin: 0px;
1717
font-size: ${Theme.font.size.lg};
1818
}
@@ -75,10 +75,10 @@ export default function ArticleEditContent({
7575
return (
7676
<StyledContainer>
7777
<div>
78-
<h1>Noticed something to modify?</h1>
78+
<h2>Noticed something to change?</h2>
7979
<p>
80-
As an open-source company, we welcome contributions to our GitHub user
81-
guide. Help us keep it up-to-date, accurate, and easy to understand by
80+
As an open-source company, we welcome contributions through Github.
81+
Help us keep it up-to-date, accurate, and easy to understand by
8282
getting involved and sharing your ideas!
8383
</p>
8484
<StyledButtonContainer>

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

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { DocSearch } from '@docsearch/react';
2+
import { StoredDocSearchHit } from '@docsearch/react/dist/esm/types';
3+
4+
interface AlgoliaHit extends StoredDocSearchHit {
5+
_snippetResult?: {
6+
content: { value: string };
7+
};
8+
}
9+
10+
export const AlgoliaDocSearch = () => {
11+
return (
12+
<DocSearch
13+
hitComponent={({ hit }: { hit: AlgoliaHit }) => (
14+
<section className="DocSearch-Hits">
15+
<a href={hit.url}>
16+
<div className="DocSearch-Hit-Container">
17+
<div className="DocSearch-Hit-icon">
18+
<svg width="20" height="20" viewBox="0 0 20 20">
19+
<path
20+
d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z"
21+
stroke="currentColor"
22+
fill="none"
23+
fillRule="evenodd"
24+
strokeLinecap="round"
25+
strokeLinejoin="round"
26+
></path>
27+
</svg>
28+
</div>
29+
<div className="DocSearch-Hit-action">
30+
<h2>
31+
{hit.hierarchy.lvl1 ? hit.hierarchy.lvl1 : hit.hierarchy.lvl0}
32+
</h2>
33+
<p
34+
dangerouslySetInnerHTML={{
35+
__html: hit?._snippetResult?.content?.value || '',
36+
}}
37+
></p>
38+
</div>
39+
</div>
40+
</a>
41+
</section>
42+
)}
43+
appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID as string}
44+
apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string}
45+
indexName="twenty-user-guide"
46+
/>
47+
);
48+
};

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

+5
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@ import { useRouter } from 'next/navigation';
66
import { IconBook } from '@/app/_components/ui/icons';
77
import mq from '@/app/_components/ui/theme/mq';
88
import { Theme } from '@/app/_components/ui/theme/theme';
9+
import { AlgoliaDocSearch } from '@/app/_components/user-guide/AlgoliaDocSearch';
910
import UserGuideSidebarSection from '@/app/_components/user-guide/UserGuideSidebarSection';
1011
import { UserGuideArticlesProps } from '@/content/user-guide/constants/getUserGuideArticles';
1112

13+
import '@docsearch/css';
14+
import '../../user-guide/algolia.css';
15+
1216
const StyledContainer = styled.div`
1317
${mq({
1418
display: ['none', 'flex', 'flex'],
@@ -66,6 +70,7 @@ const UserGuideSidebar = ({
6670

6771
return (
6872
<StyledContainer>
73+
<AlgoliaDocSearch />
6974
<StyledHeading>
7075
<StyledIconContainer>
7176
<IconBook size={Theme.icon.size.md} />

‎packages/twenty-website/src/app/user-guide/algolia.css

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
.DocSearch-Hit-source{
2+
color: #1c1e21;
3+
}
4+
5+
.DocSearch-Search-Icon {
6+
color: #1c1e21;
7+
}
8+
9+
.DocSearch-Logo {
10+
display: none;
11+
}
12+
13+
.DocSearch-Footer{
14+
flex-direction: row;
15+
box-shadow: none;
16+
border: 1px solid #14141414;
17+
}
18+
19+
.DocSearch-Form {
20+
box-shadow: none;
21+
border: 1px solid #141414;
22+
border-radius: 8px;
23+
}
24+
25+
.DocSearch-Modal {
26+
background-color: white;
27+
}
28+
29+
.DocSearch-Hits {
30+
width: 100%;
31+
margin-bottom: 2px !important;
32+
}
33+
34+
.DocSearch-Hit[aria-selected=true] mark {
35+
color: #1961ED !important;
36+
text-decoration: none;
37+
}
38+
39+
.DocSearch-Hit a {
40+
box-shadow: none;
41+
}
42+
43+
.DocSearch-Hits mark {
44+
background-color: #E8EFFD;
45+
color: #1961ED;
46+
}
47+
48+
.DocSearch-Hit-action {
49+
width: 100%;
50+
height: 100%;
51+
display: flex;
52+
flex-direction: column;
53+
align-items: flex-start;
54+
justify-content: center;
55+
margin: 0 8px;
56+
}
57+
58+
.DocSearch-Hit-action h2{
59+
font-size: .9em;
60+
margin: 0 0 4px;
61+
font-weight: 500;
62+
}
63+
64+
.DocSearch-Hit-action p{
65+
font-size: 12px;
66+
margin: 0;
67+
width: 90%;
68+
overflow: hidden;
69+
white-space: nowrap;
70+
text-overflow: ellipsis;
71+
font-family: var(--font-inter);
72+
font-weight: 400;
73+
}
74+
75+
.DocSearch-Button {
76+
margin: 0px;
77+
min-height: 36px;
78+
background-color: white;
79+
border-radius: 8px;
80+
border: 1px solid #14141414;
81+
}
82+
83+
.DocSearch-Button:hover {
84+
color: #B3B3B3;
85+
box-shadow: none;
86+
}
87+
88+
.DocSearch-Button-Placeholder{
89+
color: #B3B3B3;
90+
}
91+
92+
.DocSearch-Search-Icon {
93+
height: 12px;
94+
width: 12px;
95+
color: #B3B3B3 !important;
96+
}
97+
98+
.DocSearch-Hit-source {
99+
background: none;
100+
font-weight: 600;
101+
font-size: 12px;
102+
font-family: var(--font-inter);
103+
}
104+
105+
.DocSearch-Button-Placeholder {
106+
font-weight: 500;
107+
font-family: var(--font-gabarito);
108+
}
109+
110+
.DocSearch-Button-Keys {
111+
display: none
112+
}
113+
114+
:root {
115+
--docsearch-primary-color: #1c1e21;
116+
--docsearch-highlight-color: #1414140F;
117+
--docsearch-hit-active-color: var(--docsearch-muted-color);
118+
}
119+
120+
.anchor {
121+
scroll-margin-top: calc(80px);
122+
}

‎packages/twenty-website/src/content/user-guide/api-webhooks.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Since your API key gives access to sensitive information, you shouldn't share it
2626
<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px' }}>
2727
<iframe
2828
src="https://player.vimeo.com/video/928786722?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
29-
frameborder="0"
29+
frameBorder="0"
3030
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
3131
style={{
3232
position:'absolute',
@@ -62,7 +62,7 @@ For instance, a webhook can alert your system in real-time when someone creates
6262
<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
6363
<iframe
6464
src="https://player.vimeo.com/video/928786708?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
65-
frameborder="0"
65+
frameBorder="0"
6666
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
6767
style={{
6868
position:'absolute',

‎packages/twenty-website/src/content/user-guide/create-workspace.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ image: /images/user-guide/create-workspace/workspace-cover.png
1414
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
1515
<iframe
1616
src="https://player.vimeo.com/video/927066829?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
17-
frameborder="0"
17+
frameBorder="0"
1818
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
1919
style={{
2020
position:'absolute',

‎packages/twenty-website/src/content/user-guide/fields.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Your newly created field is now available within the application's fields. To di
4141
<div style={{padding:'71.15% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
4242
<iframe
4343
src="https://player.vimeo.com/video/927628219?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
44-
frameborder="0"
44+
frameBorder="0"
4545
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
4646
style={{
4747
position:'absolute',

‎packages/twenty-website/src/content/user-guide/import-export-data.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ To export data from an object:
2626
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
2727
<iframe
2828
src="https://player.vimeo.com/video/926226303?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
29-
frameborder="0"
29+
frameBorder="0"
3030
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
3131
style={{
3232
position:'absolute',

‎packages/twenty-website/src/content/user-guide/integrations.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Sync Twenty with 3000+ apps using <ArticleLink href="https://zapier.com/apps/twe
2424
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
2525
<iframe
2626
src="https://player.vimeo.com/video/927913866?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
27-
frameborder="0"
27+
frameBorder="0"
2828
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
2929
style={{
3030
position:'absolute',

‎packages/twenty-website/src/content/user-guide/kanban-views.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Kanban views visually map out process flows, where each column stands for a dist
1616
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
1717
<iframe
1818
src="https://player.vimeo.com/video/927888627?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
19-
frameborder="0"
19+
frameBorder="0"
2020
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
2121
style={{
2222
position:'absolute',
@@ -43,7 +43,7 @@ To add a stage, access the Select Field Settings by navigating to Settings > Dat
4343
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
4444
<iframe
4545
src="https://player.vimeo.com/video/927890428?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
46-
frameborder="0"
46+
frameBorder="0"
4747
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
4848
style={{
4949
position:'absolute',

‎packages/twenty-website/src/content/user-guide/notes.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ You can also change the background color and text color of each block to highlig
3232
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
3333
<iframe
3434
src="https://player.vimeo.com/video/927896302?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
35-
frameborder="0"
35+
frameBorder="0"
3636
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
3737
style={{
3838
position:'absolute',

‎packages/twenty-website/src/content/user-guide/objects.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ To create a new custom object:
4040
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
4141
<iframe
4242
src="https://player.vimeo.com/video/926288174?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
43-
frameborder="0"
43+
frameBorder="0"
4444
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
4545
style={{
4646
position:'absolute',
@@ -61,7 +61,7 @@ To create a new custom object:
6161
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
6262
<iframe
6363
src="https://player.vimeo.com/video/926293493?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
64-
frameborder="0"
64+
frameBorder="0"
6565
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
6666
style={{
6767
position:'absolute',

‎packages/twenty-website/src/content/user-guide/table-views.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Enter the record name then press `Enter` to save. To edit a record name, click o
1818
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
1919
<iframe
2020
src="https://player.vimeo.com/video/927071691?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
21-
frameborder="0"
21+
frameBorder="0"
2222
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
2323
style={{
2424
position:'absolute',
@@ -45,7 +45,7 @@ Enter the record name then press `Enter` to save. To edit a record name, click o
4545
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
4646
<iframe
4747
src="https://player.vimeo.com/video/927073570?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
48-
frameborder="0"
48+
frameBorder="0"
4949
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
5050
style={{
5151
position:'absolute',

‎packages/twenty-website/src/content/user-guide/tasks.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Creating tasks in Twenty is seamless. You can either:
1717
<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
1818
<iframe
1919
src="https://player.vimeo.com/video/928786754?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
20-
frameborder="0"
20+
frameBorder="0"
2121
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
2222
style={{
2323
position:'absolute',
@@ -49,7 +49,7 @@ You can also see tasks for a given Record on its `Record page`.
4949
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
5050
<iframe
5151
src="https://player.vimeo.com/video/927908280?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
52-
frameborder="0"
52+
frameBorder="0"
5353
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
5454
style={{
5555
position:'absolute',
@@ -86,7 +86,7 @@ This procedure will help keep an updated record of your accomplishments.
8686
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
8787
<iframe
8888
src="https://player.vimeo.com/video/927910083?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
89-
frameborder="0"
89+
frameBorder="0"
9090
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
9191
style={{
9292
position:'absolute',

‎packages/twenty-website/src/content/user-guide/tips.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Workspace admins can edit its name and logo in settings.
1616
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
1717
<iframe
1818
src="https://player.vimeo.com/video/927915481?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
19-
frameborder="0"
19+
frameBorder="0"
2020
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
2121
style={{
2222
position:'absolute',
@@ -43,7 +43,7 @@ Select **Dark**. The system will automatically save your changes.
4343
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
4444
<iframe
4545
src="https://player.vimeo.com/video/927916570?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
46-
frameborder="0"
46+
frameBorder="0"
4747
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
4848
style={{
4949
position:'absolute',

0 commit comments

Comments
 (0)