diff --git a/packages/twenty-docs/docusaurus.config.js b/packages/twenty-docs/docusaurus.config.js index c0ef92df8..0236d84dd 100644 --- a/packages/twenty-docs/docusaurus.config.js +++ b/packages/twenty-docs/docusaurus.config.js @@ -116,7 +116,7 @@ const config = { algolia: { appId: 'J2OX2P2QAO', apiKey: 'e0a7a59c7862598a0cf87307c8ea97f2', - indexName: 'twenty', + indexName: 'twenty-developer-docs', // Optional: see doc section below contextualSearch: true, diff --git a/packages/twenty-website/.env.example b/packages/twenty-website/.env.example index 071fa0f60..15b1c0091 100644 --- a/packages/twenty-website/.env.example +++ b/packages/twenty-website/.env.example @@ -1,2 +1,4 @@ GITHUB_TOKEN=your_github_token DATABASE_PG_URL=postgres://website:website@localhost:5432/website # only if using postgres +NEXT_PUBLIC_ALGOLIA_APP_ID=twenty_appId +NEXT_PUBLIC_ALGOLIA_API_KEY=twenty_apiKey diff --git a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx index 1952ad875..2c330a553 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx +++ b/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 (
-

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 ( + ( +
+ +
+
+ + + +
+
+

+ {hit.hierarchy.lvl1 ? hit.hierarchy.lvl1 : hit.hierarchy.lvl0} +

+

+
+
+ +
+ )} + 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