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

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`