+
+
+}
+
+const HamburgerContainer = styled.div`
+ height: 44px;
+ width: 44px;
+ cursor: pointer;
+ position: relative;
+ input {
+ height: 44px;
+ width: 44px;
+ opacity: 0;
+ }`;
+
+const HamburgerLine1 = styled.div`
+ height: 2px;
+ left: calc(50.00000000000002% - 20px / 2);
+ position: absolute;
+ top: calc(37.50000000000002% - 2px / 2);
+ width: 20px;
+ border-radius: 10px;
+ background-color: rgb(179, 179, 179);`;
+
+const HamburgerLine2 = styled.div`
+ height: 2px;
+ left: calc(50.00000000000002% - 20px / 2);
+ position: absolute;
+ top: calc(62.50000000000002% - 2px / 2);
+ width: 20px;
+ border-radius: 10px;
+ background-color: rgb(179, 179, 179);`;
+
+const NavOpen = styled.div`
+ display:none;`;
+
+
+export const HeaderMobile = () => {
+
+ const isTwentyDev = false;
+
+ return ;
+};
+
diff --git a/packages/twenty-website/src/app/components/Icons.tsx b/packages/twenty-website/src/app/components/Icons.tsx
index 897e9318c..e3659fe29 100644
--- a/packages/twenty-website/src/app/components/Icons.tsx
+++ b/packages/twenty-website/src/app/components/Icons.tsx
@@ -1,4 +1,4 @@
-const getSize = size => {
+const getSize = (size: string) => {
switch(size) {
case 'S':
return '14px';
@@ -36,6 +36,16 @@ export const DiscordIcon = ({size = 'S', color = 'rgb(179, 179, 179)'}) => {
export const XIcon = ({size = 'S', color = 'rgb(179, 179, 179)'}) => {
let dimension = getSize(size);
return
-
+
-}
\ No newline at end of file
+}
+
+export const GithubIcon2 = ({size = 'S', color = 'rgb(179, 179, 179)'}) => {
+ let dimension = getSize(size);
+ return
+
+
+}
\ No newline at end of file
diff --git a/packages/twenty-website/src/app/components/PostImage.tsx b/packages/twenty-website/src/app/components/PostImage.tsx
new file mode 100644
index 000000000..58ee96c2e
--- /dev/null
+++ b/packages/twenty-website/src/app/components/PostImage.tsx
@@ -0,0 +1,7 @@
+
+
+import Image from 'next/image'
+
+export const PostImage = ({ sources, style }: { sources: { light: string, dark: string }, style?: React.CSSProperties }) => {
+ return
+
{
+ const entries = fs.readdirSync(filePath, { withFileTypes: true });
+
+ const urlpath = path.toString().split(basePath);
+ const pathName = urlpath.length > 1 ? urlpath[1] : path.basename(filePath);
+ console.log(pathName);
+
+ const directory: Directory = {
+ itemInfo: {
+ title: path.basename(filePath),
+ position,
+ type: 'directory',
+ path: pathName,
+ },
+ };
+
+ for (const entry of entries) {
+ if (entry.isDirectory()) {
+ directory[entry.name] = await getFiles(path.join(filePath, entry.name), position++);
+ } else if (entry.isFile() && path.extname(entry.name) === '.mdx') {
+ const fileContent = fs.readFileSync(path.join(filePath, entry.name), 'utf8');
+ const { content, frontmatter } = await compileMDX<{ title: string, position?: number }>({ source: fileContent, options: { parseFrontmatter: true } });
+ directory[entry.name] = { content, itemInfo: {...frontmatter, type: 'file', path: pathName + "/" + entry.name.replace(/\.mdx$/, '')} };
+ }
+ }
+
+ return directory;
+}
+
+async function parseFrontMatterAndCategory(directory: Directory, dirPath: string): Promise {
+ const parsedDirectory: Directory = {
+ itemInfo: directory.itemInfo,
+ };
+
+ for (const entry in directory) {
+ if (entry !== 'itemInfo' && directory[entry] instanceof Object) {
+ parsedDirectory[entry] = await parseFrontMatterAndCategory(directory[entry] as Directory, path.join(dirPath, entry));
+ }
+ }
+
+ const categoryPath = path.join(dirPath, '_category_.json');
+
+ if (fs.existsSync(categoryPath)) {
+ const categoryJson: ItemInfo = JSON.parse(fs.readFileSync(categoryPath, 'utf8'));
+ parsedDirectory.itemInfo = categoryJson;
+ }
+
+ return parsedDirectory;
+}
+
+export async function getPosts(): Promise {
+ const postsDirectory = path.join(process.cwd(), basePath);
+ const directory = await getFiles(postsDirectory);
+ return parseFrontMatterAndCategory(directory, postsDirectory);
+}
+
+export async function getPost(slug: string[]): Promise {
+ const postsDirectory = path.join(process.cwd(), basePath);
+ const modifiedSlug = slug.join('/');
+ const filePath = path.join(postsDirectory, `${modifiedSlug}.mdx`);
+
+ console.log(filePath);
+
+ if (!fs.existsSync(filePath)) {
+ return null;
+ }
+
+ const fileContent = fs.readFileSync(filePath, 'utf8');
+ const { content, frontmatter } = await compileMDX<{ title: string, position?: number }>({ source: fileContent, options: { parseFrontmatter: true } });
+
+ return { content, itemInfo: {...frontmatter, type: 'file', path: modifiedSlug }};
+}
diff --git a/packages/twenty-website/src/app/user-guide/page.tsx b/packages/twenty-website/src/app/user-guide/page.tsx
new file mode 100644
index 000000000..168767a57
--- /dev/null
+++ b/packages/twenty-website/src/app/user-guide/page.tsx
@@ -0,0 +1,47 @@
+import { ContentContainer } from '@/app/components/ContentContainer';
+import { getPosts, Directory, FileContent } from '@/app/user-guide/get-posts';
+import Link from 'next/link';
+
+
+const DirectoryItem = ({ name, item }: { name: string, item: Directory | FileContent }) => {
+ if ('content' in item) {
+ // If the item is a file, we render a link.
+ return (
+
+ ;
+}
\ No newline at end of file
diff --git a/packages/twenty-docs/docs/user-guide/_category_.json b/packages/twenty-website/src/content/user-guide/_category_.json
similarity index 100%
rename from packages/twenty-docs/docs/user-guide/_category_.json
rename to packages/twenty-website/src/content/user-guide/_category_.json
diff --git a/packages/twenty-website/src/content/user-guide/basics/_category_.json b/packages/twenty-website/src/content/user-guide/basics/_category_.json
new file mode 100644
index 000000000..cd758c340
--- /dev/null
+++ b/packages/twenty-website/src/content/user-guide/basics/_category_.json
@@ -0,0 +1,4 @@
+{
+ "title": "Basics",
+ "position": 1
+}
diff --git a/packages/twenty-docs/docs/user-guide/user-guide.mdx b/packages/twenty-website/src/content/user-guide/basics/basics.mdx
similarity index 84%
rename from packages/twenty-docs/docs/user-guide/user-guide.mdx
rename to packages/twenty-website/src/content/user-guide/basics/basics.mdx
index 8fba99db5..6208d2ff6 100644
--- a/packages/twenty-docs/docs/user-guide/user-guide.mdx
+++ b/packages/twenty-website/src/content/user-guide/basics/basics.mdx
@@ -1,5 +1,5 @@
---
-title: User Guide
+title: Get started
displayed_sidebar: userSidebar
sidebar_class_name: hidden
sidebar_position: 0
@@ -8,7 +8,6 @@ sidebar_custom_props:
isSidebarRoot: true
---
-import ThemedImage from '@theme/ThemedImage';
# Welcome to Twenty's User Guide
@@ -46,13 +45,13 @@ There are multiple ways to create notes and tasks. Learn more about [Notes](./ba
You can also upload and attach files for each record. To do so, expand a record, and head over to the Files tab. You'll then see the `+ Add file` button.
-
## Add Records To Favorites
You can add records to your favorites for quick access. To do so, expand the record you want to add, and click on the heart icon on the top right. You'll now be able to see your favorite records in your sidebar right above your workspace.
-
## Import data
diff --git a/packages/twenty-docs/docs/user-guide/basics/custom objects.mdx b/packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx
similarity index 81%
rename from packages/twenty-docs/docs/user-guide/basics/custom objects.mdx
rename to packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx
index a8554f89b..5ace07038 100644
--- a/packages/twenty-docs/docs/user-guide/basics/custom objects.mdx
+++ b/packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx
@@ -1,11 +1,10 @@
---
-title: Creating Custom Objects
+title: Custom Objects
sidebar_position: 1
sidebar_custom_props:
icon: TbAugmentedReality
---
-import ThemedImage from '@theme/ThemedImage';
Objects are structures that allow you to store data (records, attributes, and values) specific to an organization. Twenty provides both standard and custom objects.
@@ -22,7 +21,7 @@ To create a new custom object:
-
@@ -31,7 +30,7 @@ To create a new custom object:
@@ -39,5 +38,5 @@ To create a new custom object: 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.
## Format Notes
diff --git a/packages/twenty-docs/docs/user-guide/basics/opportunities.mdx b/packages/twenty-website/src/content/user-guide/basics/opportunities.mdx
similarity index 79%
rename from packages/twenty-docs/docs/user-guide/basics/opportunities.mdx
rename to packages/twenty-website/src/content/user-guide/basics/opportunities.mdx
index 8949b33bb..5e05a0567 100644
--- a/packages/twenty-docs/docs/user-guide/basics/opportunities.mdx
+++ b/packages/twenty-website/src/content/user-guide/basics/opportunities.mdx
@@ -5,11 +5,11 @@ sidebar_custom_props:
icon: TbTargetArrow
---
-import ThemedImage from '@theme/ThemedImage';
+import PostImage from '@theme/PostImage';
All opportunities are presented in a Kanban board, where each column represents the stage of your workflow and each card represents a record. For each card, you can list the amount, close date, probability, and the point of contact. You can also move each card between stages as it goes through your workflow.
-
## Add and delete stages
@@ -26,7 +26,7 @@ It's easy to add filters and update your view to focus on only the most importan
- You can also add another filter by following the same steps or clicking on the `+ Add filter` button on top of the columns.
- To remove a filter condition, simply click on the X next to the attribute you used to filter the records.
-
@@ -41,10 +41,10 @@ You can configure your kanban board to display some fields and hide others. By d You can also rearrange the order of fields by holding down the field name and dragging it to where you want it. -
You can also hide all the fields, and get an overview of all the opportunities at a glance. To do so, click on Options on the top right and turn on the toggle in front of the Compact view option. -
\ No newline at end of file
diff --git a/packages/twenty-docs/docs/user-guide/basics/tasks.mdx b/packages/twenty-website/src/content/user-guide/basics/tasks.mdx
similarity index 78%
rename from packages/twenty-docs/docs/user-guide/basics/tasks.mdx
rename to packages/twenty-website/src/content/user-guide/basics/tasks.mdx
index 786da1e75..b2211a84e 100644
--- a/packages/twenty-docs/docs/user-guide/basics/tasks.mdx
+++ b/packages/twenty-website/src/content/user-guide/basics/tasks.mdx
@@ -5,11 +5,11 @@ sidebar_custom_props:
icon: TbChecklist
---
-import ThemedImage from '@theme/ThemedImage';
+import PostImage from '../../../components/PostImage'
You can find all the tasks from across your workspace in the Tasks window in your sidebar. You can also find a dedicated tab for Tasks on each record so you can add and edit tasks directly from each record. Alternatively, you can click on the `+` button on the top right of each record page and then click on Task to create a new task.
-
## Tasks page
diff --git a/packages/twenty-website/src/content/user-guide/integrations/_category_.json b/packages/twenty-website/src/content/user-guide/integrations/_category_.json
new file mode 100644
index 000000000..4309ef82a
--- /dev/null
+++ b/packages/twenty-website/src/content/user-guide/integrations/_category_.json
@@ -0,0 +1,4 @@
+{
+ "title": "Integrations",
+ "position": 2
+}
diff --git a/packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx b/packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx
similarity index 93%
rename from packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx
rename to packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx
index bf7e8c132..801fff10d 100644
--- a/packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx
+++ b/packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx
@@ -21,7 +21,7 @@ Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/), and automate yo
6. Enter your API key and click on 'Yes, Continue to Twenty.'
+
- Releases
- {releases.map(release => ( + {releases.map((release, index) => ({release.name}
{release.body}
diff --git a/packages/twenty-website/src/app/user-guide/[...slug]/page.tsx b/packages/twenty-website/src/app/user-guide/[...slug]/page.tsx
new file mode 100644
index 000000000..46c14e52d
--- /dev/null
+++ b/packages/twenty-website/src/app/user-guide/[...slug]/page.tsx
@@ -0,0 +1,11 @@
+import { getPost } from "@/app/user-guide/get-posts";
+
+export default async function BlogPost({ params }: { params: { slug: string[] } }) {
+ const post = await getPost(params.slug as string[]);
+ console.log(post);
+
+ return
+
;
+}
diff --git a/packages/twenty-website/src/app/user-guide/get-posts.tsx b/packages/twenty-website/src/app/user-guide/get-posts.tsx
new file mode 100644
index 000000000..c286c1f1c
--- /dev/null
+++ b/packages/twenty-website/src/app/user-guide/get-posts.tsx
@@ -0,0 +1,97 @@
+import fs from 'fs';
+import path from 'path';
+import { compileMDX } from 'next-mdx-remote/rsc';
+import { ReactElement } from 'react';
+
+interface ItemInfo {
+ title: string;
+ position?: number;
+ path: string;
+ type: 'file' | 'directory';
+}
+
+export interface FileContent {
+ content: ReactElement;
+ itemInfo: ItemInfo;
+}
+
+export interface Directory {
+ [key: string]: FileContent | Directory | ItemInfo;
+ itemInfo: ItemInfo;
+}
+
+const basePath = '/src/content/user-guide';
+
+
+async function getFiles(filePath: string, position: number = 0): Promise{post?.itemInfo.title}
+{post?.content}
+
+
+ {item.itemInfo.title}
+
+
+ );
+ } else {
+ // If the item is a directory, we render the title and the items in the directory.
+ return (
+
+
+ );
+ }
+};
+
+
+export default async function BlogHome() {
+
+ const posts = await getPosts();
+
+
+ return {item.itemInfo.title}
+ {Object.entries(item).map(([childName, childItem]) => { + if (childName !== 'itemInfo') { + returnUser Guide
+
+ {Object.entries(posts).map(([name, item]) => {
+ if (name !== 'itemInfo') {
+ return
+
## Add Records To Favorites
You can add records to your favorites for quick access. To do so, expand the record you want to add, and click on the heart icon on the top right. You'll now be able to see your favorite records in your sidebar right above your workspace.
-
## Import data
diff --git a/packages/twenty-docs/docs/user-guide/basics/custom objects.mdx b/packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx
similarity index 81%
rename from packages/twenty-docs/docs/user-guide/basics/custom objects.mdx
rename to packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx
index a8554f89b..5ace07038 100644
--- a/packages/twenty-docs/docs/user-guide/basics/custom objects.mdx
+++ b/packages/twenty-website/src/content/user-guide/basics/custom-objects.mdx
@@ -1,11 +1,10 @@
---
-title: Creating Custom Objects
+title: Custom Objects
sidebar_position: 1
sidebar_custom_props:
icon: TbAugmentedReality
---
-import ThemedImage from '@theme/ThemedImage';
Objects are structures that allow you to store data (records, attributes, and values) specific to an organization. Twenty provides both standard and custom objects.
@@ -22,7 +21,7 @@ To create a new custom object:
-
@@ -31,7 +30,7 @@ To create a new custom object:
- 
+ 
+
@@ -39,5 +38,5 @@ To create a new custom object: 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.
- 
+ 
diff --git a/packages/twenty-docs/docs/user-guide/basics/notes.mdx b/packages/twenty-website/src/content/user-guide/basics/notes.mdx
similarity index 84%
rename from packages/twenty-docs/docs/user-guide/basics/notes.mdx
rename to packages/twenty-website/src/content/user-guide/basics/notes.mdx
index 3e71b64f7..edcafeaf4 100644
--- a/packages/twenty-docs/docs/user-guide/basics/notes.mdx
+++ b/packages/twenty-website/src/content/user-guide/basics/notes.mdx
@@ -5,7 +5,7 @@ sidebar_custom_props:
icon: TbNote
---
-import ThemedImage from '@theme/ThemedImage';
+import PostImage from '@theme/PostImage';
Easily create a note to keep track of important information.
@@ -13,7 +13,7 @@ Easily create a note to keep track of important information.
To attach a note to the record, go to the Notes tab of a record page and click on `+ New Note`. You can also format, comment, and upload images to your notes.
-
+
## Format Notes
diff --git a/packages/twenty-docs/docs/user-guide/basics/opportunities.mdx b/packages/twenty-website/src/content/user-guide/basics/opportunities.mdx
similarity index 79%
rename from packages/twenty-docs/docs/user-guide/basics/opportunities.mdx
rename to packages/twenty-website/src/content/user-guide/basics/opportunities.mdx
index 8949b33bb..5e05a0567 100644
--- a/packages/twenty-docs/docs/user-guide/basics/opportunities.mdx
+++ b/packages/twenty-website/src/content/user-guide/basics/opportunities.mdx
@@ -5,11 +5,11 @@ sidebar_custom_props:
icon: TbTargetArrow
---
-import ThemedImage from '@theme/ThemedImage';
+import PostImage from '@theme/PostImage';
All opportunities are presented in a Kanban board, where each column represents the stage of your workflow and each card represents a record. For each card, you can list the amount, close date, probability, and the point of contact. You can also move each card between stages as it goes through your workflow.
-
## Add and delete stages
@@ -26,7 +26,7 @@ It's easy to add filters and update your view to focus on only the most importan
- You can also add another filter by following the same steps or clicking on the `+ Add filter` button on top of the columns.
- To remove a filter condition, simply click on the X next to the attribute you used to filter the records.
-
@@ -41,10 +41,10 @@ You can configure your kanban board to display some fields and hide others. By d You can also rearrange the order of fields by holding down the field name and dragging it to where you want it. -
You can also hide all the fields, and get an overview of all the opportunities at a glance. To do so, click on Options on the top right and turn on the toggle in front of the Compact view option. -
\ No newline at end of file
diff --git a/packages/twenty-docs/docs/user-guide/basics/tasks.mdx b/packages/twenty-website/src/content/user-guide/basics/tasks.mdx
similarity index 78%
rename from packages/twenty-docs/docs/user-guide/basics/tasks.mdx
rename to packages/twenty-website/src/content/user-guide/basics/tasks.mdx
index 786da1e75..b2211a84e 100644
--- a/packages/twenty-docs/docs/user-guide/basics/tasks.mdx
+++ b/packages/twenty-website/src/content/user-guide/basics/tasks.mdx
@@ -5,11 +5,11 @@ sidebar_custom_props:
icon: TbChecklist
---
-import ThemedImage from '@theme/ThemedImage';
+import PostImage from '../../../components/PostImage'
You can find all the tasks from across your workspace in the Tasks window in your sidebar. You can also find a dedicated tab for Tasks on each record so you can add and edit tasks directly from each record. Alternatively, you can click on the `+` button on the top right of each record page and then click on Task to create a new task.
-
## Tasks page
diff --git a/packages/twenty-website/src/content/user-guide/integrations/_category_.json b/packages/twenty-website/src/content/user-guide/integrations/_category_.json
new file mode 100644
index 000000000..4309ef82a
--- /dev/null
+++ b/packages/twenty-website/src/content/user-guide/integrations/_category_.json
@@ -0,0 +1,4 @@
+{
+ "title": "Integrations",
+ "position": 2
+}
diff --git a/packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx b/packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx
similarity index 93%
rename from packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx
rename to packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx
index bf7e8c132..801fff10d 100644
--- a/packages/twenty-docs/docs/user-guide/integrations/connect-zapier.mdx
+++ b/packages/twenty-website/src/content/user-guide/integrations/connect-zapier.mdx
@@ -21,7 +21,7 @@ Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/), and automate yo
6. Enter your API key and click on 'Yes, Continue to Twenty.'
- 
+ 
You can now continue creating your automation!
diff --git a/packages/twenty-docs/docs/user-guide/integrations/generating-api-keys.mdx b/packages/twenty-website/src/content/user-guide/integrations/generating-api-keys.mdx
similarity index 100%
rename from packages/twenty-docs/docs/user-guide/integrations/generating-api-keys.mdx
rename to packages/twenty-website/src/content/user-guide/integrations/generating-api-keys.mdx
diff --git a/packages/twenty-website/src/content/user-guide/others/_category_.json b/packages/twenty-website/src/content/user-guide/others/_category_.json
new file mode 100644
index 000000000..66620be53
--- /dev/null
+++ b/packages/twenty-website/src/content/user-guide/others/_category_.json
@@ -0,0 +1,4 @@
+{
+ "title": "Others",
+ "position": 3
+}
diff --git a/packages/twenty-docs/docs/user-guide/others/glossary.mdx b/packages/twenty-website/src/content/user-guide/others/glossary.mdx
similarity index 100%
rename from packages/twenty-docs/docs/user-guide/others/glossary.mdx
rename to packages/twenty-website/src/content/user-guide/others/glossary.mdx
diff --git a/packages/twenty-docs/docs/user-guide/others/tips.mdx b/packages/twenty-website/src/content/user-guide/others/tips.mdx
similarity index 100%
rename from packages/twenty-docs/docs/user-guide/others/tips.mdx
rename to packages/twenty-website/src/content/user-guide/others/tips.mdx
+