Modifications user guide

packages/twenty-website/src/app/_components/contributors/Header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
 const Title = styled.h2`
   font-size: 56px;
@@ -23,10 +24,16 @@ const Title = styled.h2`
 export const Header = () => {
   return (
     <>
-      <Title>
-        Our amazing <br />
-        <span style={{ color: '#141414' }}>Contributors</span>
-      </Title>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.2 }}
+      >
+        <Title>
+          Our amazing <br />
+          <span style={{ color: '#141414' }}>Contributors</span>
+        </Title>
+      </motion.div>
     </>
   );
 };

packages/twenty-website/src/app/_components/oss-friends/Header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
 import { Theme } from '@/app/_components/ui/theme/theme';
 
@@ -32,15 +33,20 @@ const Description = styled.h2`
 
 export const Header = () => {
   return (
-    <div>
-      <Title>
-        Open-source <br /> <span style={{ color: 'black' }}>friends</span>
-      </Title>
-
+    <>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.2 }}
+      >
+        <Title>
+          Open-source <br /> <span style={{ color: 'black' }}>friends</span>
+        </Title>
+      </motion.div>
       <Description>
         We are proud to collaborate with a diverse group of partners to promote
         open-source software.
       </Description>
-    </div>
+    </>
   );
 };

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

@@ -1,6 +1,7 @@
 'use client';
 
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
 const StyledTitle = styled.div`
   margin: 64px auto 0px;
@@ -23,9 +24,15 @@ const StyledSubHeader = styled.h1`
 
 export const Title = () => {
   return (
-    <StyledTitle>
-      <StyledHeader>Latest</StyledHeader>
-      <StyledSubHeader>Releases</StyledSubHeader>
-    </StyledTitle>
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.2 }}
+    >
+      <StyledTitle>
+        <StyledHeader>Latest</StyledHeader>
+        <StyledSubHeader>Releases</StyledSubHeader>
+      </StyledTitle>
+    </motion.div>
   );
 };

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

@@ -77,7 +77,6 @@ export const FooterDesktop = () => {
       <div
         style={{
           width: '100%',
-          maxWidth: '1200px',
           margin: '0 auto',
           display: 'flex',
           flexDirection: 'row',
@@ -126,7 +125,6 @@ export const FooterDesktop = () => {
       <div
         style={{
           width: '100%',
-          maxWidth: '1200px',
           margin: '0 auto',
           display: 'flex',
           flexDirection: 'row',

packages/twenty-website/src/app/_components/ui/layout/articles/ArticleEditContent.tsx

@@ -96,8 +96,8 @@ export default function ArticleEditContent({
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
+                  fillRule="evenodd"
+                  clipRule="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"
                 />

packages/twenty-website/src/app/_components/user-guide/TableContent.tsx

@@ -0,0 +1,149 @@
+'use client';
+import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { usePathname } from 'next/navigation';
+
+import mq from '@/app/_components/ui/theme/mq';
+import { Theme } from '@/app/_components/ui/theme/theme';
+import { useHeadsObserver } from '@/app/user-guide/hooks/useHeadsObserver';
+
+const StyledContainer = styled.div`
+  ${mq({
+    display: ['none', 'none', 'flex'],
+    flexDirection: 'column',
+    background: `${Theme.background.secondary}`,
+    borderLeft: `1px solid ${Theme.background.transparent.medium}`,
+    borderBottom: `1px solid ${Theme.background.transparent.medium}`,
+    padding: `0px ${Theme.spacing(6)}`,
+  })};
+  width: 300px;
+  min-width: 300px;
+`;
+
+const StyledNav = styled.nav`
+  width: 220px;
+  min-width: 220px;
+  align-self: flex-start;
+  padding: 32px 0px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 70px;
+  max-height: calc(100vh - 70px);
+  overflow: auto;
+`;
+
+const StyledUnorderedList = styled.ul`
+  list-style-type: none;
+  padding: 0;
+`;
+
+const StyledList = styled.li`
+  margin: 12px 0px;
+`;
+
+const StyledLink = styled.a`
+  text-decoration: none;
+  font-size: 12px;
+  font-family: var(--font-inter);
+  color: ${Theme.text.color.tertiary};
+  &:hover {
+    color: ${Theme.text.color.secondary};
+  }
+  &:active {
+    color: ${Theme.text.color.primary};
+    font-weight: 500 !important;
+  }
+`;
+
+const StyledHeadingText = styled.div`
+  font-size: ${Theme.font.size.sm};
+  color: ${Theme.text.color.quarternary};
+  margin-bottom: 20px;
+`;
+
+const getStyledHeading = (level: number) => {
+  switch (level) {
+    case 3:
+      return {
+        marginLeft: 10,
+      };
+    case 4:
+      return {
+        marginLeft: 20,
+      };
+    case 5:
+      return {
+        marginLeft: 30,
+      };
+    default:
+      return undefined;
+  }
+};
+
+interface HeadingType {
+  id: string;
+  elem: HTMLElement;
+  className: string;
+  text: string;
+  level: number;
+}
+
+const UserGuideTableContents = () => {
+  const [headings, setHeadings] = useState<HeadingType[]>([]);
+  const pathname = usePathname();
+  const { activeText } = useHeadsObserver(pathname);
+
+  useEffect(() => {
+    const nodes: HTMLElement[] = Array.from(
+      document.querySelectorAll('h2, h3, h4, h5'),
+    );
+    const elements: HeadingType[] = nodes.map(
+      (elem): HeadingType => ({
+        id: elem.id,
+        elem: elem,
+        className: elem.className,
+        text: elem.innerText,
+        level: Number(elem.nodeName.charAt(1)),
+      }),
+    );
+
+    setHeadings(elements);
+  }, [pathname]);
+
+  return (
+    <StyledContainer>
+      <StyledNav>
+        <StyledHeadingText>Table of Content</StyledHeadingText>
+        <StyledUnorderedList>
+          {headings.map((heading) => (
+            <StyledList
+              key={heading.text}
+              style={getStyledHeading(heading.level)}
+            >
+              <StyledLink
+                href={`#${heading.text}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  const yOffset = -70;
+                  const y =
+                    heading.elem.getBoundingClientRect().top +
+                    window.scrollY +
+                    yOffset;
+
+                  window.scrollTo({ top: y, behavior: 'smooth' });
+                }}
+                style={{
+                  fontWeight: activeText === heading.text ? 'bold' : 'normal',
+                }}
+              >
+                {heading.text}
+              </StyledLink>
+            </StyledList>
+          ))}
+        </StyledUnorderedList>
+      </StyledNav>
+    </StyledContainer>
+  );
+};
+
+export default UserGuideTableContents;

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

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { useRouter } from 'next/navigation';
 
 import { Theme } from '@/app/_components/ui/theme/theme';
-import { UserGuideHomeCardsType } from '@/content/user-guide/constants/UserGuideHomeCards';
+import { UserGuideArticlesProps } from '@/content/user-guide/constants/getUserGuideArticles';
 
 const StyledContainer = styled.div`
   color: ${Theme.border.color.plain};
@@ -13,15 +13,10 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   cursor: pointer;
-  width: 340px;
 
   &:hover {
     box-shadow: -8px 8px 0px -4px ${Theme.color.gray60};
   }
-
-  @media (max-width: 385px) {
-    width: 280px;
-  }
 `;
 
 const StyledHeading = styled.div`
@@ -38,26 +33,34 @@ const StyledSubHeading = styled.div`
   font-size: ${Theme.font.size.xs};
   color: ${Theme.text.color.secondary};
   font-family: ${Theme.font.family};
-  padding: 0 16px 24px;
+  margin: 0 16px 24px;
   font-weight: ${Theme.font.weight.regular};
   line-height: 21px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 `;
 
 const StyledImage = styled.img`
   border-bottom: 1.5px solid #14141429;
+  height: 160px;
 `;
 
 export default function UserGuideCard({
   card,
 }: {
-  card: UserGuideHomeCardsType;
+  card: UserGuideArticlesProps;
 }) {
   const router = useRouter();
   return (
-    <StyledContainer onClick={() => router.push(`/user-guide/${card.url}`)}>
+    <StyledContainer
+      onClick={() => router.push(`/user-guide/${card.fileName}`)}
+    >
       <StyledImage src={card.image} alt={card.title} />
       <StyledHeading>{card.title}</StyledHeading>
-      <StyledSubHeading>{card.subtitle}</StyledSubHeading>
+      <StyledSubHeading>{card.info}</StyledSubHeading>
     </StyledContainer>
   );
 }