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 <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
2024-06-03 19:52:43 +03:00
committed by GitHub
parent f7cdd14c75
commit 671de4170f
139 changed files with 7057 additions and 494 deletions

View File

@ -1,26 +1,35 @@
export const USER_GUIDE_INDEX = {
'Getting Started': [
{ fileName: 'what-is-twenty' },
{ fileName: 'create-workspace' },
],
Objects: [
{ fileName: 'objects' },
{ fileName: 'fields' },
{ fileName: 'views-sort-filter' },
{ fileName: 'table-views' },
{ fileName: 'kanban-views' },
{ fileName: 'import-export-data' },
],
Functions: [
{ fileName: 'emails' },
{ fileName: 'notes' },
{ fileName: 'tasks' },
{ fileName: 'integrations' },
{ fileName: 'api-webhooks' },
],
Other: [
{ fileName: 'glossary' },
{ fileName: 'tips' },
{ fileName: 'github' },
],
'User Guide': {
'Getting Started': [
{ fileName: 'getting-started' },
{ fileName: 'what-is-twenty' },
{ fileName: 'create-workspace' },
],
Objects: [
{ fileName: 'objects' },
{ fileName: 'standard-objects' },
{ fileName: 'fields' },
{ fileName: 'views-sort-filter' },
{ fileName: 'table-views' },
{ fileName: 'kanban-views' },
{ fileName: 'import-export-data' },
],
Functions: [
{ fileName: 'functions' },
{ fileName: 'emails' },
{ fileName: 'notes' },
{ fileName: 'tasks' },
{ fileName: 'integrations' },
{ fileName: 'api-webhooks' },
],
Other: [
{ fileName: 'other' },
{ fileName: 'glossary' },
{ fileName: 'tips' },
{ fileName: 'github' },
],
},
Developers: {
'Empty Section': [],
},
};

View File

@ -0,0 +1,107 @@
import fs from 'fs';
import matter from 'gray-matter';
import path from 'path';
import { DOCS_INDEX } from '@/content/developers/constants/DocsIndex';
import { TWENTY_UI_INDEX } from '@/content/twenty-ui/constants/TwentyUiIndex';
import { USER_GUIDE_INDEX } from '@/content/user-guide/constants/UserGuideIndex';
export interface DocsArticlesProps {
title: string;
info: string;
image: string;
fileName: string;
topic: string;
section: string;
sectionInfo: string;
numberOfFiles: number;
}
export function getDocsArticles(basePath: string, isSideBar = false) {
const guides: DocsArticlesProps[] = [];
const index = basePath.includes('developers')
? DOCS_INDEX
: basePath.includes('user-guide')
? USER_GUIDE_INDEX
: TWENTY_UI_INDEX;
const findFileRecursively = (
directory: string,
fileName: string,
): string | null => {
const files = fs.readdirSync(directory);
for (const file of files) {
const fullPath = path.join(directory, file);
const stat = fs.statSync(fullPath);
if (stat.isDirectory()) {
const nestedResult = findFileRecursively(fullPath, fileName);
if (nestedResult) {
return nestedResult;
}
} else if (stat.isFile() && path.basename(fullPath) === fileName) {
return fullPath;
}
}
return null;
};
const processFiles = (
section: string,
topic: string,
files: { fileName: string }[],
): void => {
if (files.length === 0) {
guides.push({
title: '',
info: '',
image: '',
fileName: '',
topic: topic,
section: section,
sectionInfo: '',
numberOfFiles: 0,
});
return;
}
files.forEach(({ fileName }) => {
let filePath;
if (isSideBar) {
const nestedPath = findFileRecursively(basePath, `${fileName}.mdx`);
const directPath = `${basePath}${fileName}.mdx`;
filePath = nestedPath || directPath;
} else {
filePath = `${basePath}${fileName}.mdx`;
}
if (fs.existsSync(filePath)) {
const fileContent = fs.readFileSync(filePath, 'utf-8');
const { data: frontmatter } = matter(fileContent);
guides.push({
title: frontmatter.title || '',
info: frontmatter.info || '',
image: frontmatter.image || '',
fileName: fileName,
topic: topic,
section: section,
sectionInfo: frontmatter.sectionInfo || '',
numberOfFiles: files.length,
});
}
});
};
for (const [mainTopic, subTopics] of Object.entries(index)) {
if (typeof subTopics === 'object' && !Array.isArray(subTopics)) {
for (const [subTopic, files] of Object.entries(subTopics)) {
processFiles(mainTopic, subTopic, files as { fileName: string }[]);
}
} else {
processFiles(mainTopic, mainTopic, subTopics);
}
}
return guides;
}

View File

@ -1,36 +0,0 @@
import fs from 'fs';
import matter from 'gray-matter';
import { USER_GUIDE_INDEX } from '@/content/user-guide/constants/UserGuideIndex';
export interface UserGuideArticlesProps {
title: string;
info: string;
image: string;
fileName: string;
topic: string;
}
export function getUserGuideArticles() {
const guides: UserGuideArticlesProps[] = [];
for (const [topic, files] of Object.entries(USER_GUIDE_INDEX)) {
files.forEach(({ fileName }) => {
const filePath = `src/content/user-guide/${fileName}.mdx`;
if (fs.existsSync(filePath)) {
const fileContent = fs.readFileSync(filePath, 'utf-8');
const { data: frontmatter } = matter(fileContent);
guides.push({
title: frontmatter.title || '',
info: frontmatter.info || '',
image: frontmatter.image || '',
fileName: fileName,
topic: topic,
});
}
});
}
return guides;
}

View File

@ -1,14 +1,14 @@
import { UserGuideArticlesProps } from '@/content/user-guide/constants/getUserGuideArticles';
import { DocsArticlesProps } from '@/content/user-guide/constants/getDocsArticles';
export const groupArticlesByTopic = (
items: UserGuideArticlesProps[],
): Record<string, UserGuideArticlesProps[]> => {
items: DocsArticlesProps[],
): Record<string, DocsArticlesProps[]> => {
return items.reduce(
(acc, item) => {
acc[item.topic] = acc[item.topic] || [];
acc[item.topic].push(item);
return acc;
},
{} as Record<string, UserGuideArticlesProps[]>,
{} as Record<string, DocsArticlesProps[]>,
);
};

View File

@ -0,0 +1,7 @@
---
title: Functions
info: Learn how to connect Twenty to your other tools.
icon: IconApi
image: /images/user-guide/api/api.png
sectionInfo: A brief guide to grasp the basics of Twenty
---

View File

@ -3,6 +3,7 @@ title: API and Webhooks
info: Learn how to manage API keys and Webhooks in Twenty.
icon: IconApi
image: /images/user-guide/api/api.png
sectionInfo: Learn how to connect Twenty to your other tools.
---
## API Keys

View File

@ -3,6 +3,7 @@ title: Emails
info: Understand the concept of email synchronization in Twenty, including how to read synced emails, connect new mailboxes, and set sharing levels.
icon: IconChecklist
image: /images/user-guide/emails/emails_header.png
sectionInfo: Learn how to connect Twenty to your other tools.
---
## Email Synchronization

View File

@ -3,6 +3,7 @@ title: Integrations
info: Learn how to connect Twenty to your other tools.
icon: IconBrandZapier
image: /images/user-guide/integrations/plug.png
sectionInfo: Learn how to connect Twenty to your other tools.
---
## About

View File

@ -3,6 +3,7 @@ title: Notes
info: Explore how to efficiently manage notes within record pages in Twenty, including procedures for creating, formatting, commenting, saving, and deleting notes.
icon: IconNote
image: /images/user-guide/notes/notes_header.png
sectionInfo: Learn how to connect Twenty to your other tools.
---
Manage your record-linked notes efficiently using the powerful **Notes** feature. This guide walks through how to create, format, comment, and delete notes seamlessly within record pages.

View File

@ -2,6 +2,7 @@
title: Tasks
info: Understand how to effectively manage tasks in Twenty, including tasks creation, viewing, editing, marking as complete, and deletion.
image: /images/user-guide/tasks/tasks_header.png
sectionInfo: Learn how to connect Twenty to your other tools.
---
Manage all tasks within your workspace using the **Tasks** feature. This guide will show you how to create and manage tasks, switch between upcoming and completed tasks, edit task details, and much more.

View File

@ -0,0 +1,7 @@
---
title: Getting Started
icon: IconUsers
info: Discover Twenty, an open-source CRM, its features, benefits, system requirements, and how to get involved.
image: /images/user-guide/what-is-twenty/20.png
sectionInfo: A brief guide to grasp the basics of Twenty
---

View File

@ -3,6 +3,7 @@ title: Create a Workspace
info: Follow a step-by-step guide on how to register on Twenty, choose a subscription plan, confirm your payment and set up your account, with additional advice on seeking assistance if needed.
icon: IconNote
image: /images/user-guide/create-workspace/workspace-cover.png
sectionInfo: Discover Twenty, an open-source CRM.
---
## Step 1: Registration

View File

@ -3,6 +3,7 @@ title: What is Twenty
icon: IconUsers
info: Discover Twenty, an open-source CRM, its features, benefits, system requirements, and how to get involved.
image: /images/user-guide/what-is-twenty/20.png
sectionInfo: Discover Twenty, an open-source CRM.
---
## Overview

View File

@ -3,82 +3,5 @@ title: Objects
info: Discover how to use standard and custom objects in your workspace.
icon: IconChecklist
image: /images/user-guide/objects/objects.png
sectionInfo: A brief guide to grasp the basics of Twenty
---
## Standard Objects
Standard objects are predefined entities in your workspace that offer integrated, standardized intelligence requiring no extra configuration. They're part of a shared data model accessible to all users of Twenty.
<img src="/images/user-guide/objects/standard-objects.png"style={{width:'100%'}}/>
### People
The `People` object aggregates customer relations data. It includes contact details and interaction history, providing a comprehensive view of your business's customer interactions.
### Company
The `Companies` object consolidates business account information. It encompasses all pertinent data such as industry, size, location, and contact personnel, thereby offering an integrated perspective of your business's organizational connections. It is both link to the People and Opportunities objects.
### Opportunities
The `Opportunities` object encapsulates deal-related data. It tracks the progression of potential sales, from prospecting to closure, recording stages, deal sizes, associated accounts, and expected closure dates. This provides a well-rounded view of your business's sales pipeline.
## Custom objects
Custom objects are objects that you can create to store information that's unique to your organization. They're not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for. For example, if you're SpaceX, you may want to create a custom object for Rockets and Launches.
<img src="/images/user-guide/objects/custom-objects.png"style={{width:'100%'}}/>
### Creating a new custom object
To create a new custom object:
1. Go to Settings in the sidebar on the left.
2. Under Workspace, go to Data model. Here you'll be able to see an overview of all your existing Standard and Custom objects (both active and disabled).
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/926288174?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
3. Click on `+ New object` at the top, then choose Custom as the object type. Enter the name (both singular and plural), choose an icon, and add a description for your custom object and hit Save (at the top right). Using Listing as an example of custom object, the singular would be "listing" and the plural would be "listings" along with a description like "Listings that hosts created to showcase their property."
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/926293493?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
4. Once you create your custom object, you'll be able to manage it. You can edit the name, icon and description, view the different fields, and add more fields.
<img src="/images/user-guide/objects/customize-fields.png"style={{width:'100%'}}/>
<ArticleEditContent articleTitle="objects.mdx"></ArticleEditContent>

View File

@ -3,6 +3,7 @@ title: Fields
info: Understand the role of fields and how to handle them.
icon: IconChecklist
image: /images/user-guide/fields/field.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---

View File

@ -3,6 +3,7 @@ title: Import/Export Data
info: Learn the procedures for importing and exporting data.
icon: IconNote
image: /images/user-guide/import-export-data/cloud.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## Import data

View File

@ -3,6 +3,7 @@ title: Kanban Views
info: Learn how to customize and navigate Kanban Views.
icon: IconTargetArrow
image: /images/user-guide/kanban-views/kanban.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## About Kanban Views

View File

@ -0,0 +1,85 @@
---
title: Standard and Custom Objects
info: Discover how to use standard and custom objects in your workspace.
icon: IconChecklist
image: /images/user-guide/objects/objects.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## Standard Objects
Standard objects are predefined entities in your workspace that offer integrated, standardized intelligence requiring no extra configuration. They're part of a shared data model accessible to all users of Twenty.
<img src="/images/user-guide/objects/standard-objects.png"style={{width:'100%'}}/>
### People
The `People` object aggregates customer relations data. It includes contact details and interaction history, providing a comprehensive view of your business's customer interactions.
### Company
The `Companies` object consolidates business account information. It encompasses all pertinent data such as industry, size, location, and contact personnel, thereby offering an integrated perspective of your business's organizational connections. It is both link to the People and Opportunities objects.
### Opportunities
The `Opportunities` object encapsulates deal-related data. It tracks the progression of potential sales, from prospecting to closure, recording stages, deal sizes, associated accounts, and expected closure dates. This provides a well-rounded view of your business's sales pipeline.
## Custom objects
Custom objects are objects that you can create to store information that's unique to your organization. They're not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for. For example, if you're SpaceX, you may want to create a custom object for Rockets and Launches.
<img src="/images/user-guide/objects/custom-objects.png"style={{width:'100%'}}/>
### Creating a new custom object
To create a new custom object:
1. Go to Settings in the sidebar on the left.
2. Under Workspace, go to Data model. Here you'll be able to see an overview of all your existing Standard and Custom objects (both active and disabled).
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/926288174?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
3. Click on `+ New object` at the top, then choose Custom as the object type. Enter the name (both singular and plural), choose an icon, and add a description for your custom object and hit Save (at the top right). Using Listing as an example of custom object, the singular would be "listing" and the plural would be "listings" along with a description like "Listings that hosts created to showcase their property."
<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
<iframe
src="https://player.vimeo.com/video/926293493?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
style={{
position:'absolute',
top:0,
left:0,
width:'100%',
height:'100%',
borderRadius: '16px',
border:'2px solid black'
}}
title="Export data"
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
4. Once you create your custom object, you'll be able to manage it. You can edit the name, icon and description, view the different fields, and add more fields.
<img src="/images/user-guide/objects/customize-fields.png"style={{width:'100%'}}/>
<ArticleEditContent articleTitle="objects.mdx"></ArticleEditContent>

View File

@ -3,6 +3,7 @@ title: Table Views
info: Learn how to customize and navigate Table Views.
icon: IconChecklist
image: /images/user-guide/table-views/table.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## About Table Views

View File

@ -3,6 +3,7 @@ title: Views, Sort and Filter
info: Find out how to create, manage and delete Object Views.
icon: IconChecklist
image: /images/user-guide/views/filter.png
sectionInfo: Discover how to use standard and custom objects in your workspace.
---
## About Views

View File

@ -0,0 +1,7 @@
---
title: Other
info: Discover tips and tricks for optimizing your experience, including user and workspace management, personalization settings, and navigation enhancements.
icon: IconGitHub
image: /images/user-guide/tips/light-bulb.png
sectionInfo: A brief guide to grasp the basics of Twenty
---

View File

@ -3,6 +3,7 @@ title: GitHub
info: Learn about the Twenty GitHub repository and the variety of resources it hosts including source code, documentation, and discussions.
icon: IconGitHub
image: /images/user-guide/github/github-header.png
sectionInfo: Discover tips and tricks to optimize your experience.
---
## About

View File

@ -3,6 +3,7 @@ title: Glossary
info: Get familiar with essential terminology used in Twenty.
icon: IconVocabulary
image: /images/user-guide/glossary/glossary.png
sectionInfo: Discover tips and tricks to optimize your experience.
---
## Company & People

View File

@ -3,6 +3,7 @@ title: Tips
info: Discover tips and tricks for optimizing your experience, including user and workspace management, personalization settings, and navigation enhancements.
icon: IconInfoCircle
image: /images/user-guide/tips/light-bulb.png
sectionInfo: Discover tips and tricks to optimize your experience.
---
## Update workspace name & logo