Migrated Developer Docs

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>

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>

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">

packages/twenty-website/src/app/_components/user-guide/AlgoliaDocSearch.tsx → packages/twenty-website/src/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}`}
     />
   );
 };

packages/twenty-website/src/app/_components/user-guide/UserGuideCard.tsx → packages/twenty-website/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>
+    );
+  }
 }

packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx → packages/twenty-website/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,
     },
   ];
 

packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx → packages/twenty-website/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>
   );