Migrated Developer Docs (#5683)

- Migrated developer docs to Twenty website - Modified User Guide and Docs layout to include sections and subsections **Section Example:** <img width="549" alt="Screenshot 2024-05-30 at 15 44 42" src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8"> **Subsection Example:** <img width="557" alt="Screenshot 2024-05-30 at 15 44 55" src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a"> - Created different components (Tabs, Tables, Editors etc.) for the mdx files **Tabs & Editor** <img width="665" alt="Screenshot 2024-05-30 at 15 47 39" src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531"> **Tables** <img width="698" alt="Screenshot 2024-05-30 at 15 57 39" src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a"> <img width="661" alt="Screenshot 2024-05-30 at 16 03 32" src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff"> - Created a crawler for Twenty Developers (now that it will be on the twenty website). Once this PR is merged and the website is re-deployed, we need to start crawling and make sure the index name is ‘twenty-developer’ - Added a dropdown menu in the header to access User Guide and Developers + added Developers to footer https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1 - Made new layout responsive Please fill in the information for each mdx file so that it can appear on its card, as well as in the ‘In this article’ section. Example with ‘Getting Started’ in the User Guide: <img width="786" alt="Screenshot 2024-05-30 at 16 29 39" src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea"> Example with info and sectionInfo filled in for 'Getting Started': <img width="620" alt="Screenshot 2024-05-30 at 16 33 57" src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11"> Please keep in mind that the images that are being used for Developers are the same as those found in User Guide and may not match the article. --------- Co-authored-by: Félix Malfait <[email protected]>
twentyhq · Jun 3, 2024 · 671de41 · 671de41
1 parent f7cdd14
commit 671de41
Show file tree

Hide file tree

Showing 139 changed files with 7,057 additions and 494 deletions.
diff --git a/packages/twenty-docs/src/components/token-form.tsx b/packages/twenty-docs/src/components/token-form.tsx
@@ -29,8 +29,7 @@ const TokenForm = ({
   const location = useLocation();
   const [isLoading, setIsLoading] = useState(false);
   const [locationSetting, setLocationSetting] = useState(
-    parseJson(localStorage.getItem('baseUrl'))?.locationSetting ??
-      'production',
+    parseJson(localStorage.getItem('baseUrl'))?.locationSetting ?? 'production',
   );
   const [baseUrl, setBaseUrl] = useState(
     parseJson(localStorage.getItem('baseUrl'))?.baseUrl ??
@@ -63,14 +62,17 @@ const TokenForm = ({
       url = 'http://localhost:3000';
     } else {
       url = baseUrl?.endsWith('/')
-      ? baseUrl.substring(0, baseUrl.length - 1)
-      : baseUrl
+        ? baseUrl.substring(0, baseUrl.length - 1)
+        : baseUrl;
     }
-    
+
     setBaseUrl(url);
     setLocationSetting(locationSetting);
     submitBaseUrl?.(url);
-    localStorage.setItem('baseUrl', JSON.stringify({ baseUrl: url, locationSetting }));
+    localStorage.setItem(
+      'baseUrl',
+      JSON.stringify({ baseUrl: url, locationSetting }),
+    );
   };
 
   const validateToken = (openApiJson) => {
@@ -133,7 +135,7 @@ const TokenForm = ({
           <select
             className="select"
             onChange={(event) => {
-              updateBaseUrl(baseUrl, event.target.value)
+              updateBaseUrl(baseUrl, event.target.value);
             }}
             value={locationSetting}
           >
@@ -154,7 +156,9 @@ const TokenForm = ({
             disabled={locationSetting !== 'other'}
             placeholder="Base URL"
             value={baseUrl}
-            onChange={(event) => updateBaseUrl(event.target.value, locationSetting)}
+            onChange={(event) =>
+              updateBaseUrl(event.target.value, locationSetting)
+            }
             onBlur={() => submitToken(token)}
           />
         </div>

diff --git a/packages/twenty-website/public/images/docs/getting-started/doc-preview.png b/packages/twenty-website/public/images/docs/getting-started/doc-preview.png
diff --git a/packages/twenty-website/public/images/docs/server/add-custom-objects.jpeg b/packages/twenty-website/public/images/docs/server/add-custom-objects.jpeg
diff --git a/packages/twenty-website/public/images/docs/server/custom-object-schema.png b/packages/twenty-website/public/images/docs/server/custom-object-schema.png
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
diff --git a/packages/twenty-website/src/app/_components/contributors/AvatarGrid.tsx b/packages/twenty-website/src/app/_components/contributors/AvatarGrid.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import styled from '@emotion/styled';
+import Image from 'next/image';
 import Link from 'next/link';
 
 import MotionContainer from '@/app/_components/ui/layout/LoaderAnimation';
@@ -36,12 +37,6 @@ const AvatarItem = styled.div`
     box-shadow: -6px 6px 0px 1px rgba(0, 0, 0, 1);
   }
 
-  img {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
-
   .username {
     position: absolute;
     bottom: 0;
@@ -74,7 +69,12 @@ const AvatarGrid = ({ users }: { users: User[] }) => {
         {users.map((user) => (
           <Link href={`/contributors/${user.id}`} key={`l_${user.id}`}>
             <AvatarItem key={user.id}>
-              <img src={user.avatarUrl} alt={user.id} />
+              <Image
+                src={user.avatarUrl}
+                alt={user.id}
+                layout="fill"
+                objectFit="cover"
+              />
               <span className="username">{user.id}</span>
             </AvatarItem>
           </Link>

diff --git a/packages/twenty-website/src/app/_components/contributors/ProfileCard.tsx b/packages/twenty-website/src/app/_components/contributors/ProfileCard.tsx
@@ -2,6 +2,7 @@
 
 import styled from '@emotion/styled';
 import { format } from 'date-fns';
+import Image from 'next/image';
 
 import { GithubIcon } from '@/app/_components/ui/icons/SvgIcons';
 
@@ -89,7 +90,7 @@ export const ProfileCard = ({
   return (
     <ProfileContainer>
       <Avatar>
-        <img src={avatarUrl} alt={username} />
+        <Image src={avatarUrl} alt={username} width={100} height={100} />
       </Avatar>
       <Details>
         <h3 className="username">

diff --git a/...omponents/user-guide/AlgoliaDocSearch.tsx → ...app/_components/docs/AlgoliaDocSearch.tsx b/...omponents/user-guide/AlgoliaDocSearch.tsx → ...app/_components/docs/AlgoliaDocSearch.tsx
@@ -7,7 +7,14 @@ interface AlgoliaHit extends StoredDocSearchHit {
   };
 }
 
-export const AlgoliaDocSearch = () => {
+interface AlgoliaDocSearchProps {
+  pathname: string;
+}
+
+export const AlgoliaDocSearch = ({ pathname }: AlgoliaDocSearchProps) => {
+  const indexName = pathname.includes('user-guide')
+    ? 'user-guide'
+    : 'developer';
   return (
     <DocSearch
       hitComponent={({ hit }: { hit: AlgoliaHit }) => (
@@ -42,7 +49,7 @@ export const AlgoliaDocSearch = () => {
       )}
       appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID as string}
       apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string}
-      indexName="twenty-user-guide"
+      indexName={`twenty-${indexName}`}
     />
   );
 };
diff --git a/.../_components/user-guide/UserGuideCard.tsx → ...ite/src/app/_components/docs/DocsCard.tsx b/.../_components/user-guide/UserGuideCard.tsx → ...ite/src/app/_components/docs/DocsCard.tsx
@@ -1,9 +1,10 @@
 'use client';
 import styled from '@emotion/styled';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 
 import { Theme } from '@/app/_components/ui/theme/theme';
-import { UserGuideArticlesProps } from '@/content/user-guide/constants/getUserGuideArticles';
+import { DocsArticlesProps } from '@/content/user-guide/constants/getDocsArticles';
+import { getCardPath } from '@/shared-utils/getCardPath';
 
 const StyledContainer = styled.div`
   color: ${Theme.border.color.plain};
@@ -46,23 +47,28 @@ const StyledSubHeading = styled.div`
 const StyledImage = styled.img`
   border-bottom: 1.5px solid #14141429;
   height: 160px;
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
 `;
 
-export default function UserGuideCard({
+export default function DocsCard({
   card,
+  isSection = false,
 }: {
-  card: UserGuideArticlesProps;
+  card: DocsArticlesProps;
+  isSection?: boolean;
 }) {
   const router = useRouter();
-  return (
-    <StyledContainer
-      onClick={() => router.push(`/user-guide/${card.fileName}`)}
-    >
-      <StyledImage src={card.image} alt={card.title} />
-      <StyledHeading>{card.title}</StyledHeading>
-      <StyledSubHeading>{card.info}</StyledSubHeading>
-    </StyledContainer>
-  );
+  const pathname = usePathname();
+  const path = getCardPath(card, pathname, isSection);
+
+  if (card.title) {
+    return (
+      <StyledContainer onClick={() => router.push(path)}>
+        <StyledImage src={card.image} alt={card.title} />
+        <StyledHeading>{card.title}</StyledHeading>
+        <StyledSubHeading>{card.info}</StyledSubHeading>
+      </StyledContainer>
+    );
+  }
 }
diff --git a/...omponents/user-guide/UserGuideContent.tsx → .../src/app/_components/docs/DocsContent.tsx b/...omponents/user-guide/UserGuideContent.tsx → .../src/app/_components/docs/DocsContent.tsx
@@ -1,12 +1,14 @@
 'use client';
 import React from 'react';
 import styled from '@emotion/styled';
+import { usePathname } from 'next/navigation';
 
 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';
 import { FileContent } from '@/app/_server-utils/get-posts';
+import { getUriAndLabel } from '@/shared-utils/pathUtils';
 
 const StyledContainer = styled('div')`
   ${mq({
@@ -27,6 +29,7 @@ const StyledContainer = styled('div')`
 const StyledWrapper = styled.div`
   @media (max-width: 450px) {
     padding: ${Theme.spacing(10)} 30px ${Theme.spacing(20)};
+    width: 340px;
   }
 
   @media (min-width: 451px) and (max-width: 800px) {
@@ -112,11 +115,14 @@ const StyledImageContainer = styled.div`
   }
 `;
 
-export default function UserGuideContent({ item }: { item: FileContent }) {
+export default function DocsContent({ item }: { item: FileContent }) {
+  const pathname = usePathname();
+  const { uri, label } = getUriAndLabel(pathname);
+
   const BREADCRUMB_ITEMS = [
     {
-      uri: '/user-guide',
-      label: 'User Guide',
+      uri: uri,
+      label: label,
     },
   ];
 

diff --git a/.../_components/user-guide/UserGuideMain.tsx → ...ite/src/app/_components/docs/DocsMain.tsx b/.../_components/user-guide/UserGuideMain.tsx → ...ite/src/app/_components/docs/DocsMain.tsx
@@ -1,10 +1,15 @@
 'use client';
 import styled from '@emotion/styled';
+import { usePathname } from 'next/navigation';
 
+import DocsCard from '@/app/_components/docs/DocsCard';
+import { Breadcrumbs } from '@/app/_components/ui/layout/Breadcrumbs';
 import mq from '@/app/_components/ui/theme/mq';
 import { Theme } from '@/app/_components/ui/theme/theme';
-import UserGuideCard from '@/app/_components/user-guide/UserGuideCard';
-import { UserGuideArticlesProps } from '@/content/user-guide/constants/getUserGuideArticles';
+import { DocsArticlesProps } from '@/content/user-guide/constants/getDocsArticles';
+import { constructSections } from '@/shared-utils/constructSections';
+import { filterDocsIndex } from '@/shared-utils/filterDocsIndex';
+import { getUriAndLabel } from '@/shared-utils/pathUtils';
 
 const StyledContainer = styled.div`
   ${mq({
@@ -26,12 +31,14 @@ const StyledWrapper = styled.div`
 
   @media (max-width: 450px) {
     padding: ${Theme.spacing(10)} 30px ${Theme.spacing(20)};
-    align-items: center;
+    align-items: flex-start;
+    width: 340px;
   }
 
   @media (min-width: 450px) and (max-width: 800px) {
     padding: ${Theme.spacing(10)} 50px ${Theme.spacing(20)};
-    align-items: center;
+    align-items: flex-start;
+    width: 440px;
   }
 
   @media (min-width: 1500px) {
@@ -45,12 +52,25 @@ const StyledTitle = styled.div`
   font-size: ${Theme.font.size.sm};
   color: ${Theme.text.color.quarternary};
   font-weight: ${Theme.font.weight.medium};
-  margin-bottom: 32px;
   width: 100%;
 
   @media (min-width: 450px) and (max-width: 800px) {
     width: 340px;
-    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const StyledSection = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  @media (min-width: 801px) {
+    align-items: flex-start;
+  }
+  &:not(:last-child) {
+    margin-bottom: 50px;
   }
 `;
 
@@ -63,6 +83,10 @@ const StyledHeader = styled.div`
     width: 340px;
     margin-bottom: 24px;
   }
+  @media (min-width: 450px) and (max-width: 800px) {
+    margin-bottom: 24px;
+    width: 340px;
+  }
 `;
 
 const StyledHeading = styled.h1`
@@ -71,6 +95,7 @@ const StyledHeading = styled.h1`
   font-size: 40px;
   color: ${Theme.text.color.primary};
   margin: 0px;
+  margin-top: 32px;
   @media (max-width: 800px) {
     font-size: 28px;
   }
@@ -102,28 +127,60 @@ const StyledContent = styled.div`
   }
 `;
 
-interface UserGuideProps {
-  userGuideArticleCards: UserGuideArticlesProps[];
+interface DocsProps {
+  docsArticleCards: DocsArticlesProps[];
+  isSection?: boolean;
 }
 
-export default function UserGuideMain({
-  userGuideArticleCards,
-}: UserGuideProps) {
+export default function DocsMain({
+  docsArticleCards,
+  isSection = false,
+}: DocsProps) {
+  const sections = constructSections(docsArticleCards, isSection);
+  const pathname = usePathname();
+  const { uri, label } = getUriAndLabel(pathname);
+
+  const BREADCRUMB_ITEMS = [
+    {
+      uri: uri,
+      label: label,
+    },
+  ];
+
   return (
     <StyledContainer>
       <StyledWrapper>
-        <StyledTitle>User Guide</StyledTitle>
-        <StyledHeader>
-          <StyledHeading>User Guide</StyledHeading>
-          <StyledSubHeading>
-            A brief guide to grasp the basics of Twenty
-          </StyledSubHeading>
-        </StyledHeader>
-        <StyledContent>
-          {userGuideArticleCards.map((card) => {
-            return <UserGuideCard key={card.title} card={card} />;
-          })}
-        </StyledContent>
+        {isSection ? (
+          <Breadcrumbs
+            items={BREADCRUMB_ITEMS}
+            activePage={sections[0].name}
+            separator="/"
+          />
+        ) : (
+          <StyledTitle>{label}</StyledTitle>
+        )}
+        {sections.map((section, index) => {
+          const filteredArticles = isSection
+            ? docsArticleCards
+            : filterDocsIndex(docsArticleCards, section.name);
+          return (
+            <StyledSection key={index}>
+              <StyledHeader>
+                <StyledHeading>{section.name}</StyledHeading>
+                <StyledSubHeading>{section.info}</StyledSubHeading>
+              </StyledHeader>
+              <StyledContent>
+                {filteredArticles.map((card) => (
+                  <DocsCard
+                    key={card.title}
+                    card={card}
+                    isSection={isSection}
+                  />
+                ))}
+              </StyledContent>
+            </StyledSection>
+          );
+        })}
       </StyledWrapper>
     </StyledContainer>
   );