diff --git a/packages/twenty-website/public/images/user-guide/github/github-edit-content.png b/packages/twenty-website/public/images/user-guide/github/github-edit-content.png new file mode 100644 index 0000000000..e61b8b0e69 Binary files /dev/null and b/packages/twenty-website/public/images/user-guide/github/github-edit-content.png differ diff --git a/packages/twenty-website/public/images/user-guide/home/create-a-workspace.png b/packages/twenty-website/public/images/user-guide/home/create-a-workspace.png index 2599de89f4..8ac88afd6b 100644 Binary files a/packages/twenty-website/public/images/user-guide/home/create-a-workspace.png and b/packages/twenty-website/public/images/user-guide/home/create-a-workspace.png differ diff --git a/packages/twenty-website/public/images/user-guide/home/custom-objects.png b/packages/twenty-website/public/images/user-guide/home/custom-objects.png index 1b850bc1c6..1898c044fb 100644 Binary files a/packages/twenty-website/public/images/user-guide/home/custom-objects.png and b/packages/twenty-website/public/images/user-guide/home/custom-objects.png differ diff --git a/packages/twenty-website/public/images/user-guide/home/import-your-data.png b/packages/twenty-website/public/images/user-guide/home/import-your-data.png index 3381fd6447..27593d7d12 100644 Binary files a/packages/twenty-website/public/images/user-guide/home/import-your-data.png and b/packages/twenty-website/public/images/user-guide/home/import-your-data.png differ diff --git a/packages/twenty-website/public/images/user-guide/home/what-is-twenty.png b/packages/twenty-website/public/images/user-guide/home/what-is-twenty.png index 573139899a..229ce150ca 100644 Binary files a/packages/twenty-website/public/images/user-guide/home/what-is-twenty.png and b/packages/twenty-website/public/images/user-guide/home/what-is-twenty.png differ diff --git a/packages/twenty-website/public/images/user-guide/what-is-twenty/20.png b/packages/twenty-website/public/images/user-guide/what-is-twenty/20.png index 9906d82b69..9fd8b274ff 100644 Binary files a/packages/twenty-website/public/images/user-guide/what-is-twenty/20.png and b/packages/twenty-website/public/images/user-guide/what-is-twenty/20.png differ diff --git a/packages/twenty-website/src/app/_components/oss-friends/Background.tsx b/packages/twenty-website/src/app/_components/oss-friends/Background.tsx index 6066f514cb..06f472f487 100644 --- a/packages/twenty-website/src/app/_components/oss-friends/Background.tsx +++ b/packages/twenty-website/src/app/_components/oss-friends/Background.tsx @@ -39,10 +39,6 @@ const Container = styled.div` max-width: 100vw; z-index: 0; - @media (max-width: 810px) { - margin-top: 64px; - } - &::before { content: ''; position: absolute; diff --git a/packages/twenty-website/src/app/_components/releases/Line.tsx b/packages/twenty-website/src/app/_components/releases/Line.tsx index a0d618c7e3..3b9267c0b6 100644 --- a/packages/twenty-website/src/app/_components/releases/Line.tsx +++ b/packages/twenty-website/src/app/_components/releases/Line.tsx @@ -17,7 +17,6 @@ const StyledLineContainer = styled.div` const StyledLine = styled.div` height: 1px; background-color: #d9d9d9; - margin-bottom: 80px; margin-left: 148px; margin-top: 40px; width: 100%; diff --git a/packages/twenty-website/src/app/_components/releases/Release.tsx b/packages/twenty-website/src/app/_components/releases/Release.tsx index d0a10a7468..0b5a28cec4 100644 --- a/packages/twenty-website/src/app/_components/releases/Release.tsx +++ b/packages/twenty-website/src/app/_components/releases/Release.tsx @@ -4,6 +4,7 @@ import { JSXElementConstructor, ReactElement } from 'react'; import styled from '@emotion/styled'; import { Gabarito } from 'next/font/google'; +import { ArticleContent } from '@/app/_components/ui/layout/articles/ArticleContent'; import MotionContainer from '@/app/_components/ui/layout/LoaderAnimation'; import { Theme } from '@/app/_components/ui/theme/theme'; import { ReleaseNote } from '@/app/releases/api/route'; @@ -28,13 +29,15 @@ const StyledVersion = styled.div` flex-flow: column; align-items: start; font-weight: 500; + margin-top: 64px; @media (max-width: 810px) { width: 100%; font-size: 20px; flex-flow: row; justify-content: space-between; - margin-bottom: 24px; + margin-bottom: -48px; + margin-top: 0px; } `; @@ -49,39 +52,6 @@ const StyledDate = styled.span` font-size: ${Theme.font.size.sm}; `; -const StlyedContent = styled.div` - flex: 1; - - gap: 64px; - - h3 { - color: ${Theme.text.color.primary}; - font-weight: 700; - font-size: 40px; - margin: 0; - } - - p { - color: ${Theme.text.color.secondary}; - font-family: ${Theme.font.family}; - font-size: 16px; - line-height: 28.8px; - font-weight: 400; - margin: 40px 0px; - text-align: justify; - } - - img { - max-width: 100%; - } - - @media (max-width: 810px) { - h3 { - font-size: 24px; - } - } -`; - const gabarito = Gabarito({ weight: ['400', '500', '600', '700'], subsets: ['latin'], @@ -108,7 +78,7 @@ export const Release = ({ : release.date} - {mdxReleaseContent} + {mdxReleaseContent} ); diff --git a/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx b/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx index 9b85c91b35..04c045aa3c 100644 --- a/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx +++ b/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx @@ -3,12 +3,13 @@ import styled from '@emotion/styled'; const StyledTitle = styled.div` - margin: 64px auto; + margin: 64px auto 0px; text-align: center; font-size: 1.8em; @media (max-width: 810px) { font-size: 1em; + margin: 64px auto; } `; const StyledHeader = styled.h1` diff --git a/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx b/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx index c3df927a50..394039f744 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx +++ b/packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx @@ -23,6 +23,7 @@ const InternalLinkItem = styled(Link)` color: ${Theme.text.color.quarternary}; text-decoration: underline; } + font-family: var(--font-gabarito); `; const ExternalLinkItem = styled.a` @@ -33,6 +34,7 @@ const ExternalLinkItem = styled.a` const ActivePage = styled.span` color: ${Theme.text.color.primary}; font-weight: ${Theme.font.weight.medium}; + font-family: var(--font-gabarito); `; const StyledSection = styled.div` diff --git a/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx b/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx index 7c0f0099e2..556401a285 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx +++ b/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx @@ -10,7 +10,6 @@ const Container = styled.div` @media (max-width: 809px) { width: 100%; padding: 0px 24px 0px 24px; - margin-top: 64px; } `; diff --git a/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx b/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx index 7b92e25a59..2f1bbe863d 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx +++ b/packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx @@ -102,6 +102,9 @@ export const FooterDesktop = () => { Changelog + + User Guide + Other diff --git a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx new file mode 100644 index 0000000000..b9492a8cde --- /dev/null +++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx @@ -0,0 +1,93 @@ +'use client'; + +import { ReactNode } from 'react'; +import styled from '@emotion/styled'; + +import { Theme } from '@/app/_components/ui/theme/theme'; + +const StyledContent = styled.div` + flex: 1; + max-width: 950px; + + p { + color: ${Theme.text.color.secondary}; + font-family: ${Theme.font.family}; + font-size: ${Theme.font.size.sm}; + line-height: 28.8px; + font-weight: ${Theme.font.weight.regular}; + margin: 32px 0px 0px; + text-align: justify; + } + + h1, + h2, + h3, + h4 { + margin-bottom: 8px; + font-family: var(--font-gabarito); + color: ${Theme.text.color.primary}; + font-weight: 700; + } + + h1 { + margin-top: 64px; + font-size: 40px; + } + + h2, + h3, + h4 { + margin-top: 40px; + } + + h2 { + font-size: 32px; + } + + h3 { + font-size: 28px; + } + + h4 { + font-size: 24px; + } + + h5 { + font-size: 20px; + } + + @media (max-width: 810px) { + h1 { + font-size: 28px; + } + h2 { + font-size: 24px; + } + h3 { + font-size: 20px; + } + h4 { + font-size: 16px; + } + } + + ol { + margin: 32px 0px 0px; + } + + li { + margin: 16px 0px 0px; + line-height: 28.8px; + font-family: ${Theme.font.family}; + color: ${Theme.text.color.secondary}; + } + + img { + margin: 32px 0px 0px; + max-width: 100%; + } +`; + +export const ArticleContent = ({ children }: { children: ReactNode }) => { + return {children}; +}; 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 new file mode 100644 index 0000000000..b2dd02650e --- /dev/null +++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx @@ -0,0 +1,118 @@ +'use client'; +import styled from '@emotion/styled'; + +import { StyledButton } from '@/app/_components/ui/layout/header/styled'; +import { Theme } from '@/app/_components/ui/theme/theme'; + +const StyledContainer = styled.div` + margin-top: 64px; + padding: 32px; + border: 2px solid #141414; + border-radius: 16px; + display: flex; + flex-direction: row; + + h1 { + margin: 0px; + font-size: ${Theme.font.size.lg}; + } + + p { + font-size: ${Theme.font.size.xs}; + margin: 24px 0px 32px; + color: ${Theme.text.color.tertiary}; + line-height: 1.5; + text-align: left; + } + + @media (min-width: 950px) { + padding: 32px 0px 0px 32px; + } +`; + +const StyledButtonText = styled.div` + margin-left: 8px; + text-decoration: none; +`; + +const StyledRightColumn = styled.div` + display: flex; + border-bottom-right-radius: 16px; + overflow: hidden; + min-width: 40%; + @media (max-width: 950px) { + display: none; + } + + @media (min-width: 1530px) { + justify-content: end; + } + + img { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + max-width: fit-content; + margin: 0; + } +`; + +const StyledButtonContainer = styled.div` + text-decoration: none; + + @media (min-width: 950px) { + padding-bottom: 32px; + } +`; + +interface ArticleEditContentProps { + articleTitle: string; +} + +export default function ArticleEditContent({ + articleTitle, +}: ArticleEditContentProps) { + return ( + +
+

Noticed something to modify?

+

+ 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 + getting involved and sharing your ideas! +

+ + + + + + + Edit Content + + + +
+ + twenty github image + + + ); +} diff --git a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleLink.tsx b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleLink.tsx new file mode 100644 index 0000000000..6e0a0de1a2 --- /dev/null +++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleLink.tsx @@ -0,0 +1,14 @@ +import React, { ReactNode } from 'react'; + +interface ArticleLinkProps { + href: string; + children: ReactNode; +} + +const ArticleLink: React.FC = ({ href, children }) => ( + + {children} + +); + +export default ArticleLink; diff --git a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleWarning.tsx b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleWarning.tsx new file mode 100644 index 0000000000..a90b5275f2 --- /dev/null +++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleWarning.tsx @@ -0,0 +1,41 @@ +'use client'; +import { ReactNode } from 'react'; +import styled from '@emotion/styled'; +import { IconAlertCircle } from '@tabler/icons-react'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: row; + background: var(--Palette-Red-10, #feecec); + gap: 12px; + border-radius: 8px; + padding: 16px 24px; + margin: 32px 0px; +`; + +const StyledIconContainer = styled.div` + color: var(--Palette-Red-50, #b43232); + padding-top: 1px; +`; + +const StyledText = styled.div` + h1 { + margin: 0px !important; + } + p { + color: var(--Palette-Red-50, #b43232) !important; + margin: 0px !important; + text-align: left; + } +`; + +export default function ArticleWarning({ children }: { children: ReactNode }) { + return ( + + + + + {children} + + ); +} diff --git a/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts b/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts index 6a7f5e1071..27e90a1847 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts +++ b/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts @@ -12,7 +12,10 @@ export const DesktopNav = styled.nav` align-items: center; overflow: visible; padding: 12px 16px 12px 16px; - position: relative; + position: fixed; + width: 100%; + background-color: white; + z-index: 4; transform-origin: 50% 50% 0px; border-bottom: 1px solid rgba(20, 20, 20, 0.08); @@ -29,8 +32,9 @@ export const MobileNav = styled.nav` overflow: visible; padding: 0 12px; position: fixed; - z-index: 2; + width: 100%; background-color: white; + z-index: 4; transform-origin: 50% 50% 0px; border-bottom: 1px solid rgba(20, 20, 20, 0.08); height: 64px; @@ -97,6 +101,8 @@ export const StyledButton = styled.div` border: none; outline: inherit; cursor: pointer; + max-width: fit-content; + font-family: var(--font-gabarito); `; export const CallToActionContainer = styled.div` diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx index 000e241185..1984a174b4 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx @@ -9,27 +9,42 @@ const StyledContainer = styled.div` color: ${Theme.border.color.plain}; border: 2px solid ${Theme.border.color.plain}; border-radius: ${Theme.border.radius.md}; - padding: ${Theme.spacing(6)}; gap: ${Theme.spacing(4)}; display: flex; flex-direction: column; cursor: pointer; - width: 348px; + width: 340px; + + &:hover { + box-shadow: -8px 8px 0px -4px ${Theme.color.gray60}; + } + + @media (max-width: 385px) { + width: 280px; + } `; const StyledHeading = styled.div` font-size: ${Theme.font.size.lg}; color: ${Theme.text.color.primary}; + padding: 0 16px; + font-weight: ${Theme.font.weight.medium}; + @media (max-width: 800px) { + font-size: ${Theme.font.size.base}; + } `; const StyledSubHeading = styled.div` - font-size: ${Theme.font.size.sm}; + font-size: ${Theme.font.size.xs}; color: ${Theme.text.color.secondary}; font-family: ${Theme.font.family}; + padding: 0 16px 24px; + font-weight: ${Theme.font.weight.regular}; + line-height: 21px; `; const StyledImage = styled.img` - width: 300px; + border-bottom: 1.5px solid #14141429; `; export default function UserGuideCard({ diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx index dfdf41d03b..18515168ae 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx @@ -2,6 +2,7 @@ import React from 'react'; import styled from '@emotion/styled'; +import { ArticleContent } from '@/app/_components/ui/layout/articles/ArticleContent'; import { Breadcrumbs } from '@/app/_components/ui/layout/Breadcrumbs'; import mq from '@/app/_components/ui/theme/mq'; import { Theme } from '@/app/_components/ui/theme/theme'; @@ -16,9 +17,6 @@ const StyledContainer = styled('div')` borderBottom: `1px solid ${Theme.background.transparent.medium}`, fontFamily: `${Theme.font.family}`, })}; - @media (max-width: 810px) { - margin-top: 64px; - } `; const StyledWrapper = styled.div` @@ -35,12 +33,16 @@ const StyledHeader = styled.div` const StyledHeading = styled.div` font-size: 40px; font-weight: 700; + font-family: var(--font-gabarito); + @media (max-width: 800px) { + font-size: 28px; + } `; const StyledHeaderInfoSection = styled.div` display: flex; flex-direction: column; - gap: ${Theme.spacing(4)}; + gap: ${Theme.spacing(1)}; `; const StyledHeaderInfoSectionTitle = styled.div` @@ -48,6 +50,7 @@ const StyledHeaderInfoSectionTitle = styled.div` padding: ${Theme.spacing(2)} 0px; color: ${Theme.text.color.secondary}; font-weight: ${Theme.font.weight.medium}; + font-family: var(--font-gabarito); `; const StyledHeaderInfoSectionSub = styled.div` @@ -55,7 +58,7 @@ const StyledHeaderInfoSectionSub = styled.div` flex-direction: column; gap: ${Theme.spacing(4)}; color: ${Theme.text.color.tertiary}; - font-family: ${Theme.font.family}; + line-height: 1.8; `; const StyledRectangle = styled.div` @@ -64,6 +67,44 @@ const StyledRectangle = styled.div` background: ${Theme.background.transparent.medium}; `; +const StyledImageContainer = styled.div` + border: 2px solid ${Theme.text.color.primary}; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + border-radius: 16px; + height: 340px; + max-width: fit-content; + + @media (max-width: 414px) { + height: 160px; + } + + @media (min-width: 415px) and (max-width: 800px) { + height: 240px; + } + @media (min-width: 1500px) { + height: 450px; + } + + img { + height: 340px; + + @media (max-width: 414px) { + height: 160px; + } + + @media (min-width: 415px) and (max-width: 800px) { + height: 240px; + } + + @media (min-width: 1500px) { + height: 450px; + } + } +`; + export default function UserGuideContent({ item }: { item: FileContent }) { const BREADCRUMB_ITEMS = [ { @@ -71,6 +112,7 @@ export default function UserGuideContent({ item }: { item: FileContent }) { label: 'User Guide', }, ]; + return ( @@ -81,13 +123,15 @@ export default function UserGuideContent({ item }: { item: FileContent }) { separator="/" /> {item.itemInfo.title} - {item.itemInfo.image && ( - {item.itemInfo.title} - )} + + {item.itemInfo.image && ( + {item.itemInfo.title} + )} + In this article @@ -98,7 +142,7 @@ export default function UserGuideContent({ item }: { item: FileContent }) { -
{item.content}
+ {item.content} ); diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx index 54007cbfc1..1c30d93535 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx @@ -13,39 +13,68 @@ const StyledContainer = styled.div` flexDirection: 'row', justifyContent: 'center', })}; - @media (max-width: 810px) { - margin-top: 64px; - } `; const StyledWrapper = styled.div` - width: 79.3%; - padding: ${Theme.spacing(10)} 0px ${Theme.spacing(20)} 0px; + padding: ${Theme.spacing(10)} 92px ${Theme.spacing(20)}; display: flex; flex-direction: column; - gap: ${Theme.spacing(8)}; + width: 100%; + + @media (max-width: 800px) { + padding: ${Theme.spacing(10)} 24px ${Theme.spacing(20)}; + } + + @media (max-width: 800px) { + align-items: center; + } +`; + +const StyledTitle = styled.div` + font-size: ${Theme.font.size.sm}; + color: ${Theme.text.color.quarternary}; + font-weight: ${Theme.font.weight.medium}; + margin-bottom: 32px; + @media (min-width: 380px) and (max-width: 800px) { + width: 340px; + margin-bottom: 24px; + } + @media (max-width: 380px) { + width: 280px; + } `; const StyledHeader = styled.div` display: flex; flex-direction: column; gap: 0px; + @media (min-width: 380px) and (max-width: 800px) { + width: 340px; + } + @media (max-width: 380px) { + width: 280px; + } `; const StyledHeading = styled.h1` line-height: 38px; font-weight: 700; - font-size: 38px; + font-size: 40px; color: ${Theme.text.color.primary}; margin: 0px; + @media (max-width: 800px) { + font-size: 28px; + } `; const StyledSubHeading = styled.h1` - line-height: 12px; - font-family: ${Theme.font.family}; - font-size: ${Theme.font.size.sm}; + line-height: 28.8px; + font-size: ${Theme.font.size.lg}; font-weight: ${Theme.font.weight.regular}; color: ${Theme.text.color.tertiary}; + @media (max-width: 800px) { + font-size: ${Theme.font.size.sm}; + } `; const StyledContent = styled.div` @@ -58,12 +87,19 @@ const StyledContent = styled.div` gridTemplateColumns: 'auto auto', gap: `${Theme.spacing(6)}`, })}; + @media (max-width: 810px) { + align-items: center; + } + @media (min-width: 1200px) { + justify-content: left; + } `; export default function UserGuideMain() { return ( + User Guide 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 f16d087c2b..2d798f2476 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx @@ -49,6 +49,7 @@ const StyledHeadingText = styled.div` cursor: pointer; font-size: ${Theme.font.size.sm}; font-weight: ${Theme.font.weight.medium}; + color: ${Theme.text.color.secondary}; `; const UserGuideSidebar = () => { diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebarSection.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebarSection.tsx index 8a5a0a70f2..57c5323cfa 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebarSection.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideSidebarSection.tsx @@ -23,6 +23,7 @@ const StyledTitle = styled.div` padding-bottom: ${Theme.spacing(2)}; font-family: ${Theme.font.family}; font-size: ${Theme.font.size.xs}; + font-weight: 600; `; const StyledSubTopicItem = styled.div<{ isselected: boolean }>` @@ -53,10 +54,20 @@ const StyledSubTopicItem = styled.div<{ isselected: boolean }>` &:active { text-decoration: none; } + + &:hover { + background: #1414140a; + } + + &:active { + background: #1414140f; + } `; const StyledIcon = styled.div` padding: 0px 4px 0px 4px; + display: flex; + align-items: center; `; const StyledRectangle = styled.div<{ isselected: boolean }>` diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideTableContents.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideTableContents.tsx index 721ae4d11a..7e03abc4d5 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideTableContents.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideTableContents.tsx @@ -37,7 +37,7 @@ const UserGuideTableContents = () => { router.push('/user-guide')}> - Table of Contents + Table of Content diff --git a/packages/twenty-website/src/app/_server-utils/get-posts.tsx b/packages/twenty-website/src/app/_server-utils/get-posts.tsx index e95f7b8ab2..fec2ae72fe 100644 --- a/packages/twenty-website/src/app/_server-utils/get-posts.tsx +++ b/packages/twenty-website/src/app/_server-utils/get-posts.tsx @@ -6,6 +6,10 @@ import path from 'path'; import rehypeSlug from 'rehype-slug'; import gfm from 'remark-gfm'; +import ArticleEditContent from '@/app/_components/ui/layout/articles/ArticleEditContent'; +import ArticleLink from '@/app/_components/ui/layout/articles/ArticleLink'; +import ArticleWarning from '@/app/_components/ui/layout/articles/ArticleWarning'; + interface ItemInfo { title: string; position?: number; @@ -103,6 +107,17 @@ export async function compileMDXFile(filePath: string, addToc = true) { const fileContent = fs.readFileSync(filePath, 'utf8'); const compiled = await compileMDX<{ title: string; position?: number }>({ source: fileContent, + components: { + ArticleWarning(properties) { + return ; + }, + ArticleEditContent(properties) { + return ; + }, + ArticleLink(properties) { + return ; + }, + }, options: { parseFrontmatter: true, mdxOptions: { diff --git a/packages/twenty-website/src/app/layout.css b/packages/twenty-website/src/app/layout.css index 49b9eba436..1869c0e7b0 100644 --- a/packages/twenty-website/src/app/layout.css +++ b/packages/twenty-website/src/app/layout.css @@ -1,16 +1,18 @@ -*, *::before, *::after { - box-sizing: border-box; - font-smooth: antialiased; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +*, +*::before, +*::after { + box-sizing: border-box; + font-smooth: antialiased; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body { - box-sizing: border-box; - padding: 0; - margin: 0; - word-wrap: break-word; - font-family: var(--font-gabarito); + box-sizing: border-box; + padding: 0; + margin: 0; + word-wrap: break-word; + font-family: var(--font-gabarito); } @media (max-width: 810px) { @@ -25,53 +27,106 @@ body { } .container { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 53px; } .warning { - color: rgb(94, 30, 4); + color: rgb(94, 30, 4); } a { - color: rgb(129, 129, 129); - &:hover { - color: #000; - } + color: rgb(129, 129, 129); + &:hover { + color: #000; + } } @media (max-width: 1199px) { -nav { - display: none; - } + nav { + display: none; + } +} + +html { + scroll-behavior: smooth; } nav.toc { width: 20%; position: fixed; - top: 125px; + top: 135px; right: 0; + font-family: var(--font-gabarito); + font-size: 12px; } -nav.toc ol{ - list-style-type: circle; +nav.toc ol { + list-style-type: none; + margin-top: 0px; } -nav.toc li{ - height: 32px; +nav.toc li { + margin-top: 0px; + margin-bottom: 0px; } -nav.toc a{ +.toc-link { + padding: 5px; + border-radius: 4px; +} + +.toc-link.toc-link-h2 { + color: rgb(129, 129, 129); + margin-left: -16px; +} + +.toc-link.toc-link-h2:hover,.toc-link.toc-link-h3:hover, .toc-link.toc-link-h4:hover, .toc-link.toc-link-h5:hover { + background: #1414140a; +} + +.toc-link.toc-link-h2:active,.toc-link.toc-link-h3:active, .toc-link.toc-link-h4:active, .toc-link.toc-link-h5:active { + background: #1414140f; +} + + +.toc-link.toc-link-h3 { + color: rgb(129, 129, 129); + margin-left: -40px; +} + +.toc-link.toc-link-h4 { + color: rgb(129, 129, 129); + margin-left: -64px; +} + +.toc-link.toc-link-h5 { + color: rgb(129, 129, 129); + margin-left: -88px; +} + +nav.toc a { + color: #141414; + font-family: var(--font-inter); + font-size: 12px; + font-weight: 500; + text-decoration: none; + margin-top: 12px; +} + +strong, + b { color: #141414; + -webkit-font-smoothing: auto; font-family: var(--font-inter); - font-size: 15px; font-weight: 500; text-decoration: none; } code { - background: var(--Transparency-Lighter, #1414140a); + background: #1414140a; padding: 4px; border-radius: 4px; } \ No newline at end of file diff --git a/packages/twenty-website/src/app/releases/get-releases.tsx b/packages/twenty-website/src/app/releases/get-releases.tsx index 584977bcb2..58a2d5515f 100644 --- a/packages/twenty-website/src/app/releases/get-releases.tsx +++ b/packages/twenty-website/src/app/releases/get-releases.tsx @@ -2,7 +2,6 @@ import { JSXElementConstructor, ReactElement } from 'react'; import fs from 'fs'; import matter from 'gray-matter'; import { compileMDX } from 'next-mdx-remote/rsc'; -import remarkBehead from 'remark-behead'; import gfm from 'remark-gfm'; import { ReleaseNote } from '@/app/releases/api/route'; @@ -60,7 +59,7 @@ export async function getMdxReleasesContent( parseFrontmatter: true, mdxOptions: { development: process.env.NODE_ENV === 'development', - remarkPlugins: [gfm, [remarkBehead, { depth: 2 }]], + remarkPlugins: [gfm], }, }, }); 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 f4bd4052b4..faa8f5d332 100644 --- a/packages/twenty-website/src/content/user-guide/api-webhooks.mdx +++ b/packages/twenty-website/src/content/user-guide/api-webhooks.mdx @@ -1,5 +1,5 @@ --- -title: API and Wehooks +title: API and Webhooks info: Learn how to manage API keys and Webhooks in Twenty. icon: IconApi image: /images/user-guide/placeholder-header.png @@ -11,7 +11,7 @@ API keys allow automated access to your CRM data, synchronize data with other sy For example, you can use them to retrieve details of a specific `Person` or `Company` record, such as their name or address. -## generate an API key +### Generate an API key 1. Go to Settings in the sidebar on the left. 2. Under Workspace, go to Developers. Here, you'll see a list of active keys that you or your team have created. @@ -20,11 +20,10 @@ For example, you can use them to retrieve details of a specific `Person` or `Com 5. Hit save to see your API key. 6. Since the key is only visible once, make sure you store it somewhere safe. -
+ Since your API key gives access to sensitive information, you shouldn't share it with services you don't fully trust. If leaked, someone can use it maliciously. If your API key's security is compromised, immediately disable it and generate a new one. -
- -
+ +
- \ No newline at end of file + + + \ No newline at end of file diff --git a/packages/twenty-website/src/content/user-guide/integrations.mdx b/packages/twenty-website/src/content/user-guide/integrations.mdx index 8d953fa59e..d26ac9bb88 100644 --- a/packages/twenty-website/src/content/user-guide/integrations.mdx +++ b/packages/twenty-website/src/content/user-guide/integrations.mdx @@ -5,23 +5,23 @@ icon: IconBrandZapier image: /images/user-guide/placeholder-header.png --- -# About +## About Integration with Zapier and Windmill is available for automating your workflows. -# Zapier +## Zapier -Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/apps/twenty/integrations), and automate your work. Here's how you can connect Twenty to Zapier: +Sync Twenty with 3000+ apps using Zapier, and automate your work. Here's how you can connect Twenty to Zapier: 1. Go to Zapier and log in. 2. Click on `+ Create Zap` in the left sidebar. 3. Choose the application you want to set as the trigger. A trigger refers to an event that starts the automation. -4. Select Twenty as the action. An action is the event performed whenever an application triggers an automation. [Learn more about triggers and actions in Zapier.](https://zapier.com/how-it-works) +4. Select Twenty as the action. An action is the event performed whenever an application triggers an automation. Learn more about triggers and actions in Zapier. 5. Once you choose the Twenty account that you want to use for your automation, you'll have to allow Zapier to access it by adding an API key. You can learn [how to generate your API key here.](/user-guide/api-webhooks) 6. Enter your API key and click on 'Yes, Continue to Twenty.' -
+