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 000000000..e61b8b0e6 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 2599de89f..8ac88afd6 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 1b850bc1c..1898c044f 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 3381fd644..27593d7d1 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 573139899..229ce150c 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 9906d82b6..9fd8b274f 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 6066f514c..06f472f48 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 a0d618c7e..3b9267c0b 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 d0a10a746..0b5a28cec 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 9b85c91b3..04c045aa3 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 c3df927a5..394039f74 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 7c0f0099e..556401a28 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 7b92e25a5..2f1bbe863 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 000000000..b9492a8cd --- /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 000000000..b2dd02650 --- /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 000000000..6e0a0de1a --- /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 000000000..a90b5275f --- /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 6a7f5e107..27e90a184 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 000e24118..1984a174b 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 dfdf41d03..18515168a 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 54007cbfc..1c30d9353 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 f16d087c2..2d798f247 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 8a5a0a70f..57c5323cf 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 721ae4d11..7e03abc4d 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 e95f7b8ab..fec2ae72f 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 49b9eba43..1869c0e7b 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 584977bcb..58a2d5515 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 f4bd4052b..faa8f5d33 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 8d953fa59..d26ac9bb8 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.' -
+