admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

User guide layout (#5016)

Browse Source 
- Modified CSS: font-size, colors, margins...

- Added an ArticleContent Component that will be used for the changelog
and user guide articles, which contains the styles for each titles,
paragraphs, images etc.

- Added link to User Guide in footer

- Added a UserGuideWarning Component: 

<img width="332" alt="Screenshot 2024-04-17 at 18 14 48"
src="https://github.com/twentyhq/twenty/assets/102751374/0f5c601b-a2c0-4c63-baeb-1990d65fc332">

- Added a UserGuideEditContent Component:

<img width="394" alt="Screenshot 2024-04-17 at 18 16 24"
src="https://github.com/twentyhq/twenty/assets/102751374/6c7c3bd4-c5bb-4d02-8f93-bd99bc30ce7b">

- Added a UserGuideLink Component (for usage in MDX to allow links to
open in new tab)

- Fixed table of content

- Made responsive

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
2024-04-22 18:04:26 +03:00
committed by GitHub
parent 68662fa543
commit b9a7eb5a98
44 changed files with 730 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-website/src/app/_components/oss-friends/Background.tsx
View File

@ -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;

1
packages/twenty-website/src/app/_components/releases/Line.tsx
View File

@ -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%;

40
packages/twenty-website/src/app/_components/releases/Release.tsx
View File

@ -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}
</StyledDate>
</StyledVersion>
<StlyedContent>{mdxReleaseContent}</StlyedContent>
<ArticleContent>{mdxReleaseContent}</ArticleContent>
</StyledContainer>
</MotionContainer>
);

3
packages/twenty-website/src/app/_components/releases/StyledTitle.tsx
View File

@ -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`

2
packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx
View File

@ -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`

1
packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx
View File

@ -10,7 +10,6 @@ const Container = styled.div`
@media (max-width: 809px) {
width: 100%;
padding: 0px 24px 0px 24px;
margin-top: 64px;
}
`;

3
packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx
View File

@ -102,6 +102,9 @@ export const FooterDesktop = () => {
<RightSideFooterLink href="/releases">
Changelog
</RightSideFooterLink>
<RightSideFooterLink href="/user-guide">
User Guide
</RightSideFooterLink>
</RightSideFooterColumn>
<RightSideFooterColumn>
<RightSideFooterColumnTitle>Other</RightSideFooterColumnTitle>

93
packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx Normal file
View File

@ -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 <StyledContent>{children}</StyledContent>;
};

118
packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx Normal file
View File

@ -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 (
<StyledContainer>
<div>
<h1>Noticed something to modify?</h1>
<p>
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!
</p>
<StyledButtonContainer>
<a
href={`https://github.com/twentyhq/twenty/blob/main/packages/twenty-website/src/content/user-guide/${articleTitle}`}
target="_blank"
style={{ textDecoration: 'none' }}
>
<StyledButton>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 0.449951C4.475 0.449951 0 4.92495 0 10.45C0 14.875 2.8625 18.6125 6.8375 19.9375C7.3375 20.025 7.525 19.725 7.525 19.4625C7.525 19.225 7.5125 18.4375 7.5125 17.6C5 18.0625 4.35 16.9875 4.15 16.425C4.0375 16.1375 3.55 15.25 3.125 15.0125C2.775 14.825 2.275 14.3625 3.1125 14.35C3.9 14.3375 4.4625 15.075 4.65 15.375C5.55 16.8875 6.9875 16.4625 7.5625 16.2C7.65 15.55 7.9125 15.1125 8.2 14.8625C5.975 14.6125 3.65 13.75 3.65 9.92495C3.65 8.83745 4.0375 7.93745 4.675 7.23745C4.575 6.98745 4.225 5.96245 4.775 4.58745C4.775 4.58745 5.6125 4.32495 7.525 5.61245C8.325 5.38745 9.175 5.27495 10.025 5.27495C10.875 5.27495 11.725 5.38745 12.525 5.61245C14.4375 4.31245 15.275 4.58745 15.275 4.58745C15.825 5.96245 15.475 6.98745 15.375 7.23745C16.0125 7.93745 16.4 8.82495 16.4 9.92495C16.4 13.7625 14.0625 14.6125 11.8375 14.8625C12.2 15.175 12.5125 15.775 12.5125 16.7125C12.5125 18.05 12.5 19.125 12.5 19.4625C12.5 19.725 12.6875 20.0375 13.1875 19.9375C17.1375 18.6125 20 14.8625 20 10.45C20 4.92495 15.525 0.449951 10 0.449951Z"
fill="white"
/>
</svg>
<StyledButtonText>Edit Content</StyledButtonText>
</StyledButton>
</a>
</StyledButtonContainer>
</div>
<StyledRightColumn>
<img
src="/images/user-guide/github/github-edit-content.png"
alt="twenty github image"
/>
</StyledRightColumn>
</StyledContainer>
);
}

14
packages/twenty-website/src/app/_components/ui/layout/articles/ArticleLink.tsx Normal file
View File

@ -0,0 +1,14 @@
import React, { ReactNode } from 'react';
interface ArticleLinkProps {
href: string;
children: ReactNode;
}
const ArticleLink: React.FC<ArticleLinkProps> = ({ href, children }) => (
<a href={href} target="_blank" rel="noopener noreferrer">
{children}
</a>
);
export default ArticleLink;

41
packages/twenty-website/src/app/_components/ui/layout/articles/ArticleWarning.tsx Normal file
View File

@ -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 (
<StyledContainer>
<StyledIconContainer>
<IconAlertCircle />
</StyledIconContainer>
<StyledText>{children}</StyledText>
</StyledContainer>
);
}

10
packages/twenty-website/src/app/_components/ui/layout/header/styled.ts
View File

@ -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`

23
packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx
View File

@ -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({

70
packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx
View File

@ -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 (
<StyledContainer>
<StyledWrapper>
@ -81,13 +123,15 @@ export default function UserGuideContent({ item }: { item: FileContent }) {
separator="/"
/>
<StyledHeading>{item.itemInfo.title}</StyledHeading>
{item.itemInfo.image && (
<img
id={`img-${item.itemInfo.title}`}
src={item.itemInfo.image}
alt={item.itemInfo.title}
/>
)}
<StyledImageContainer>
{item.itemInfo.image && (
<img
id={`img-${item.itemInfo.title}`}
src={item.itemInfo.image}
alt={item.itemInfo.title}
/>
)}
</StyledImageContainer>
<StyledHeaderInfoSection>
<StyledHeaderInfoSectionTitle>
In this article
@ -98,7 +142,7 @@ export default function UserGuideContent({ item }: { item: FileContent }) {
</StyledHeaderInfoSection>
<StyledRectangle />
</StyledHeader>
<div>{item.content}</div>
<ArticleContent>{item.content}</ArticleContent>
</StyledWrapper>
</StyledContainer>
);

56
packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx
View File

@ -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 (
<StyledContainer>
<StyledWrapper>
<StyledTitle>User Guide</StyledTitle>
<StyledHeader>
<StyledHeading>User Guide</StyledHeading>
<StyledSubHeading>

1
packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx
View File

@ -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 = () => {

11
packages/twenty-website/src/app/_components/user-guide/UserGuideSidebarSection.tsx
View File

@ -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 }>`

2
packages/twenty-website/src/app/_components/user-guide/UserGuideTableContents.tsx
View File

@ -37,7 +37,7 @@ const UserGuideTableContents = () => {
<StyledContainer>
<StyledContent>
<StyledHeadingText onClick={() => router.push('/user-guide')}>
Table of Contents
Table of Content
</StyledHeadingText>
</StyledContent>
</StyledContainer>