Update documentation, add GraphiQL to docs (#175)

* Update docusaurus and fix security vulnerabilities

* Begin cleanup docs

* Remove redocusaurus

* Add graphiql in doc

* Add architecture schema

* New tableIcons and cleanup docs

.vscode/settings.json

@@ -22,5 +22,14 @@
     "editor.formatOnSave": true
   },
   "javascript.format.enable": false,
-  "typescript.format.enable": false
+  "typescript.format.enable": false,
+  "cSpell.enableFiletypes": [
+    "!javascript",
+    "!json",
+    "md",
+    "mdx"
+  ],
+  "cSpell.words": [
+    "twentyhq"
+  ]
 }

docs/docs/dev-docs/data/README.mdx

@@ -1 +0,0 @@
-# Data layer

docs/docs/dev-docs/data/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Data layer",
-  "position": 3
-}

docs/docs/dev-docs/data/connect.mdx

@@ -1 +0,0 @@
-# Connecting to data sources

docs/docs/dev-docs/data/mapping.mdx

@@ -1 +0,0 @@
-# Mapping entities

docs/docs/dev-docs/data/optimization.mdx

@@ -1 +0,0 @@
-# Caching and optimization

docs/docs/dev-docs/development/architecture.mdx

@@ -1 +1,19 @@
+---
+sidebar_custom_props:
+  icon: TbApps
+---
+
 # Architecture
+
+
+import ThemedImage from '@theme/ThemedImage';
+
+<ThemedImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: '/img/architecture.png',
+    dark: '/img/architecture-dark.png',
+  }}
+/>
+
+

docs/docs/dev-docs/development/core-entities.mdx

@@ -1 +0,0 @@
-# Core entities

docs/docs/dev-docs/development/workflows.mdx

@@ -0,0 +1,21 @@
+---
+sidebar_custom_props:
+  icon: TbTopologyStar
+---
+# Workflows
+
+The following steps assume that you have installed and configure the project with Docker.
+
+## IDE Setup
+
+If you are using VSCode, please use the `Dev Containers` extension to open the project in a container. This will allow you to run Visual Studio on top of the docker container. This will allow you to run the project without having to install node on your machine.
+
+## Front tests
+
+Run tests: `make front-test`
+Run coverage: `make front-coverage`
+Run storybook: `make front-storybook`
+
+## Note
+
+If you are using Docker install, make sure to ssh in the docker container during development to execute commands. You can also use `Makefile` to help you

docs/docs/dev-docs/getting-started/cloud-setup.mdx

@@ -1 +1,9 @@
+---
+sidebar_custom_props:
+  icon: TbCloud
+---
+
 # Cloud setup
+
+The easiest way to quickly try the app is to signup on [app.twenty.com](https://app.twenty.com).
+Signup is free  

docs/docs/dev-docs/getting-started/index.mdx

@@ -0,0 +1,14 @@
+# Documentation
+
+The stack is composed of 3 different layers:
+
+import ThemedImage from '@theme/ThemedImage';
+
+<ThemedImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: '/img/architecture.png',
+    dark: '/img/architecture-dark.png',
+  }}
+/>
+

docs/docs/dev-docs/getting-started/local-setup.mdx

@@ -1,44 +1,54 @@
 ---
 sidebar_position: 0
 slug: '/'
+sidebar_custom_props:
+  icon: TbBolt
 ---
 
-# Twenty
+# Local Setup
 
-Welcome to Twenty documentation!
+## Quickstart CLI
 
-## High Level Overview
+We built a CLI to guide you through the different options.
 
-Twenty development stack is composed of 3 different layers
+If you prefer to have more control and do things manually, go through the Docker section below.
+Otherwise run the following command to get started:
+```
+npx twenty-cli
+```
 
-- front: our frontend React app
-- server: our backend that contain endpoint, crm logic, scripts, jobs...
-- storages: postgres
 
-## Setup env variables
+## Docker
+
+### 1. Pre-requisites
+
+Make sure to have the latest Docker and Docker-compose versions installed on your computer.
+
+You can run `docker-compose --version` and `docker --version` to check they are installed.
+
+### 2. Git clone
+`git clone git@github.com:twentyhq/twenty.git`
+
+### 3. Setup env variables
 
 `cp ./infra/dev/.env.example ./infra/dev/.env` and fill with values
 
-## Development environment setup with docker-compose (Recommended)
+### 4. Build
 
-We also provide a containerized environment with Docker and orchestrated with docker-compose in case it is easier for you. This install will also provision a postgres container out of the box.
+We provide a containerized environment with Docker and orchestrated with docker-compose.
+This install will also provision a postgres container out of the box.
 
-### Step 1: pre-requesites
+The configuration is stored `infra/dev` folder. 
-
-Make sure to have the latest Docker and Docker-compose versions installed on your computer. You can run `docker-compose --version` to check if you have docker-compose installed and `docker --version` to check if you have docker installed.
-
-### Step 2: docker build
-
-Build docker containers.
-
-The whole setup experience is happening in `infra/dev` folder. Make sure to be in this folder:
 
 ```
 cd infra/dev
+make build
 ```
 
+### 5. Start
+
+Always in the `infra/dev` folder:
 ```
-make build
 make up
 ```
 
@@ -48,18 +58,35 @@ Once this is completed you should have:
 - server available on: http://localhost:3000/health
 - postgres: available on http://localhost:5432 that should contain `twenty` database
 
-### Step 3: IDE setup
 
-If you are using VSCode, please use the `Dev Containers` extension to open the project in a container. This will allow you to run Visual Studio on top of the docker container. This will allow you to run the project without having to install node on your machine.
+## 6. Development
 
-### Note
+Documented [here](/development/workflows.md)
 
-If you are using Docker install, make sure to ssh in the docker container during development to execute commands. You can also use `Makefile` to help you
+## Without Docker (Not recommended)
 
-## Development workflow
+While Docker is the recommended way to run Twenty, you might want to keep a light install.
 
-### Front tests
+### 1. Pre-requisites
+You need to have git, node and npm install on your computer.
+You also need to bring your own Postgres database.
 
-Run tests: `make front-test`
+### 2. Git clone
-Run coverage: `make front-coverage`
+`git clone git@github.com:twentyhq/twenty.git`
-Run storybook: `make front-storybook`
+
+### 3. Setup env variables
+
+`cp ./infra/dev/.env.example ./infra/dev/.env` and fill with values
+
+### 4. Build
+```
+cd front
+npm run
+```
+
+### 5. Start
+
+```
+cd front
+npm run
+```

docs/docs/dev-docs/getting-started/self-hosting.mdx

@@ -1 +1,8 @@
+---
+sidebar_custom_props:
+  icon: TbServer
+---
 # Self hosting
+
+We will soon be working on options to make it easy to self host the app (click-to-deploy buttons for Heroku, Railway...).
+Contributions are welcome!

docs/docs/dev-docs/modules/README.mdx

@@ -1 +0,0 @@
-# Modules

docs/docs/dev-docs/modules/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Modules",
-  "position": 4
-}

docs/docs/dev-docs/modules/analytics.mdx

@@ -1 +0,0 @@
-# Analytics

docs/docs/dev-docs/modules/sales.mdx

@@ -1 +0,0 @@
-# Sales

docs/docs/dev-docs/modules/third-party.mdx

@@ -1 +0,0 @@
-# Third party 

docs/docs/dev-docs/modules/upcoming.mdx

@@ -1 +0,0 @@
-# Upcoming

docs/docs/dev-docs/others/CLI.mdx

@@ -1,5 +1,6 @@
 ---
 sidebar_class_name: coming-soon
 sidebar_custom_props:
-  icon: terminal
+  icon: TbTerminal2
 ---
+

docs/docs/dev-docs/others/SDKs.mdx

@@ -1,5 +0,0 @@
----
-sidebar_class_name: coming-soon
----
-
-# SDKs

docs/docs/dev-docs/others/telemetry.mdx

@@ -1,8 +1,11 @@
 ---
 sidebar_class_name: coming-soon
+sidebar_custom_props:
+  icon: TbChartDots
 ---
 
 
+
 # Data collected
 ...
 

docs/docs/dev-docs/others/troubleshooting.mdx

@@ -1,7 +1,8 @@
-# Troubleshotting
+---
-
+sidebar_custom_props:
-## Common issues and solutions
+  icon: TbBug
-...
+---
+# Troubleshooting
 
 ## Reporting bugs
-...
+Please create an issue on Github: [https://github.com/twentyhq/twenty/issues/new](https://github.com/twentyhq/twenty/issues/new)

docs/docs/dev-docs/others/upgrade-guide.mdx

@@ -1,5 +0,0 @@
----
-sidebar_class_name: coming-soon
----
-
-# Upgrade guide

docs/docusaurus.config.js

@@ -20,16 +20,7 @@ const config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
 
-  headTags: [
+  headTags: [],
-    {
-      tagName: 'link',
-      attributes: {
-        rel: 'stylesheet',
-        href: 'https://kit.fontawesome.com/c4eca3d765.css',
-        crossorigin: 'anonymous'
-      },
-    },
-  ],
 
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
@@ -56,23 +47,6 @@ const config = {
         },
       }),
 
-    ],
-    [
-      'redocusaurus',
-      {
-        // Plugin Options for loading OpenAPI files
-        specs: [
-          {
-            spec: 'docs/open-api/openapi.yaml',
-            route: '/api/',
-          },
-        ],
-        // Theme Options for modifying how redoc renders them
-        theme: {
-          // Change with your site colors
-          primaryColor: '#1890ff',
-        },
-      },
     ]
   ],
 
@@ -106,8 +80,8 @@ const config = {
             label: 'User guide',
           },
           {
-            to: '/api/',
+            to: '/graphql/',
-            label: 'API',
+            label: 'GraphQL Playground',
             position: 'right'
           },
           {

docs/package.json

@@ -15,20 +15,26 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.0",
+    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "2.4.0",
+    "@docusaurus/preset-classic": "^2.4.1",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
+    "graphiql": "^2.4.7",
+    "graphql": "^16.6.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "redocusaurus": "^1.6.2"
+    "react-icons": "^4.9.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.0",
+    "@docusaurus/module-type-aliases": "^2.4.1",
     "@tsconfig/docusaurus": "^1.0.5",
     "typescript": "^4.7.4"
   },
+  "overrides": {
+    "trim": "^0.0.3",
+    "got": "^11.8.5"
+  },
   "browserslist": {
     "production": [
       ">0.5%",

docs/src/css/custom.css

@@ -97,9 +97,9 @@ li.coming-soon {
   display: flex;
 }
 
-
 li.coming-soon a {
-  display: inline-block;
+  display: flex;
+  justify-content: space-between;
   pointer-events: none;
   cursor: default;
 }
@@ -127,5 +127,16 @@ li.coming-soon a::after {
 }
 
 .sidebar-item-icon {
+  display: flex;
+  vertical-align: center;
   padding-right: 0.5rem;
 }
+
+.icon-and-text {
+  display: flex;
+  align-items: center;
+}
+
+.fullHeightPlayground {
+  height: calc(100vh - var(--ifm-navbar-height));
+}

docs/src/pages/graphql.js

@@ -0,0 +1,19 @@
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Layout from '@theme/Layout';
+
+import 'graphiql/graphiql.css';
+
+const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
+
+export default function graphQL() {
+  return (
+    <Layout title="Hello" description="Hello React Page">
+      <div class="fullHeightPlayground">
+        <GraphiQL fetcher={fetcher} />
+      </div>
+    </Layout>
+  );
+}

docs/src/theme/DocSidebarItem/Link/index.js

@@ -6,6 +6,9 @@ import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import styles from './styles.module.css';
+import { TbFaceIdError, TbTerminal2, TbCloud, TbServer, TbBolt, TbApps, TbTopologyStar, TbChartDots, TbBug } from "react-icons/tb";
+
+
 export default function DocSidebarItemLink({
   item,
   onItemClick,
@@ -17,6 +20,18 @@ export default function DocSidebarItemLink({
   const {href, label, className, autoAddBaseUrl, customProps = {}} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);
+  let icons = {
+    'TbTerminal2': TbTerminal2,
+    'TbCloud': TbCloud,
+    'TbServer': TbServer,
+    'TbBolt': TbBolt,
+    'TbApps': TbApps,
+    'TbTopologyStar': TbTopologyStar,
+    'TbChartDots': TbChartDots,
+    'TbBug': TbBug,
+  };
+
+  let IconComponent = customProps && customProps.icon ? icons[customProps.icon] : TbFaceIdError;
   return (
     <li
       className={clsx(
@@ -41,8 +56,12 @@ export default function DocSidebarItemLink({
           onClick: onItemClick ? () => onItemClick(item) : undefined,
         })}
         {...props}>
-        <i className={"sidebar-item-icon fa-light " + (customProps && customProps.icon ? ("fa-"+customProps.icon) : "fa-notdef")}></i>
+        <span className="icon-and-text">
+          <i className="sidebar-item-icon">
+            <IconComponent />
+          </i>
           {label}
+        </span>
         {!isInternalLink && <IconExternalLink />}
       </Link>
     </li>