Add Algolia Search + other quick improvements to docs (#198)

.vscode/settings.json

@@ -26,6 +26,7 @@
   "cSpell.enableFiletypes": [
     "!javascript",
     "!json",
+    "!typescriptreact",
     "md",
     "mdx"
   ],

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

@@ -17,6 +17,6 @@ Run tests: `make front-test`
 Run coverage: `make front-coverage`
 Run storybook: `make front-storybook`
 
-## Note
+## Running commands
-
+If you are using Docker install, make sure to ssh in the docker container during development to execute commands.
-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
+You can use `Makefile` to help you do this: `make sh` will open a CLI in the docker container and commands such as `make front-test` have been setup to be executed in the container.

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

@@ -1,6 +1,7 @@
 # Documentation
 
-The stack is composed of 3 different layers:
+
+# Stack Overview
 
 import ThemedImage from '@theme/ThemedImage';
 
@@ -12,3 +13,13 @@ import ThemedImage from '@theme/ThemedImage';
   }}
 />
 
+
+# Quick Install
+
+```
+npx twenty-cli
+```
+
+# Questions, reports
+
+Please open an issue or a discussion on the [GitHub repository](https://github.com/twenyhq/twenty).

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

@@ -12,6 +12,7 @@ sidebar_custom_props:
 We built a CLI to guide you through the different options.
 
 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
@@ -45,7 +46,12 @@ cd infra/dev
 make build
 ```
 
-### 5. Start
+### 5. Auth setup
+
+Right now the only way to authenticate yourself is to setup Google Sign-in in `server/.env`
+We will add an easier option soon.
+
+### 6. Start
 
 Always in the `infra/dev` folder:
 ```
@@ -59,7 +65,7 @@ Once this is completed you should have:
 - postgres: available on http://localhost:5432 that should contain `twenty` database
 
 
-## 6. Development
+### 6. Development
 
 Documented [here](../development/workflows.mdx)
 
@@ -75,18 +81,36 @@ You also need to bring your own Postgres database.
 `git clone git@github.com:twentyhq/twenty.git`
 
 ### 3. Setup env variables
-
+`cp ./infra/dev/.env.example ./infra/dev/.env` and fill with values 
-`cp ./infra/dev/.env.example ./infra/dev/.env` and fill with values
+Most default value should work out of the box, but don't forget to update the database connection string.
 
 ### 4. Build
+On the frontend:
 ```
 cd front
-npm run
+npm install
 ```
 
-### 5. Start
+On the server side:
+```
+cd server
+npm install
+npm run prisma:migrate
+```
+You can also add `npm run prisma:seed` to seed the database with mock data.
 
+### 5. Auth Setup
+Right now the only way to authenticate yourself is to setup Google Sign-in in `server/.env`
+We will add an easier option soon.
+
+### 6. Start
+On the frontend:
 ```
 cd front
-npm run
+npm run start
+```
+On the server side:
+```
+cd server
+npm run start
 ```

docs/docs/user-guide/intro.md

@@ -1 +1,3 @@
-# Test
+# User Guide
+
+We didn't take the time to write a user-guide yet, but it will come soon.

docs/docusaurus.config.js

@@ -97,19 +97,19 @@ const config = {
         ],
       },
       algolia: {
-        appId: 'YOUR_APP_ID',
+        appId: 'J2OX2P2QAO',
-        apiKey: 'YOUR_SEARCH_API_KEY',
+        apiKey: 'e0a7a59c7862598a0cf87307c8ea97f2',
-        indexName: 'YOUR_INDEX_NAME',
+        indexName: 'twenty',
   
         // Optional: see doc section below
         contextualSearch: true,
         // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
-        externalUrlRegex: 'external\\.com|domain\\.com',
+        // externalUrlRegex: 'external\\.com|domain\\.com',
         // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs
-        replaceSearchResultPathname: {
+        /* replaceSearchResultPathname: {
           from: '/docs/', // or as RegExp: /\/docs\//
           to: '/',
-        },
+        },*/
         // Optional: Algolia search parameters
         searchParameters: {},
         // Optional: path for search page that enabled by default (`false` to disable it)

docs/src/components/HomepageFeatures/index.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-type FeatureItem = {
-  title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: JSX.Element;
-};
-
-const FeatureList: FeatureItem[] = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({title, Svg, description}: FeatureItem) {
-  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures(): JSX.Element {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

docs/src/components/HomepageFeatures/styles.module.css

@@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}

docs/src/pages/graphql.tsx

@@ -10,18 +10,25 @@ import 'graphiql/graphiql.css';
 
 // Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
 function GraphiQLComponent() {
+  if(!window.localStorage.getItem('graphiql:theme') && window.localStorage.getItem('theme') != 'dark') {
+    window.localStorage.setItem('graphiql:theme', 'light');
+  } 
+
   const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
-  return <GraphiQL fetcher={fetcher} />;
+  return (
+  <div className="fullHeightPlayground">
+    <GraphiQL fetcher={fetcher} />;
+  </div>
+  );
 }
 
 export default function graphQL() {
   return (
-    <Layout title="Hello" description="Hello React Page">
+    <Layout title="GraphQL Playground" description="GraphQL Playground for Twenty">
-      <div className="fullHeightPlayground">
+      
         <BrowserOnly>
           {() => <GraphiQLComponent />}
         </BrowserOnly>
-      </div>
     </Layout>
   );
 }