-
Noticed something to modify?
+
Noticed something to change?
- 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!
diff --git a/packages/twenty-website/src/app/_components/user-guide/AlgoliaDocSearch.tsx b/packages/twenty-website/src/app/_components/user-guide/AlgoliaDocSearch.tsx
new file mode 100644
index 000000000..bf252f861
--- /dev/null
+++ b/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 (
+ (
+
+ )}
+ appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID as string}
+ apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string}
+ indexName="twenty-user-guide"
+ />
+ );
+};
diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx
index 9d20baa01..1f2b9927e 100644
--- a/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx
+++ b/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 (
+
diff --git a/packages/twenty-website/src/app/user-guide/algolia.css b/packages/twenty-website/src/app/user-guide/algolia.css
new file mode 100644
index 000000000..31c56ea0f
--- /dev/null
+++ b/packages/twenty-website/src/app/user-guide/algolia.css
@@ -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);
+}
diff --git a/packages/twenty-website/src/content/user-guide/api-webhooks.mdx b/packages/twenty-website/src/content/user-guide/api-webhooks.mdx
index 6b7188186..f2e41f8b8 100644
--- a/packages/twenty-website/src/content/user-guide/api-webhooks.mdx
+++ b/packages/twenty-website/src/content/user-guide/api-webhooks.mdx
@@ -26,7 +26,7 @@ Since your API key gives access to sensitive information, you shouldn't share it