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

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>
-        {label}
+        <span className="icon-and-text">
+          <i className="sidebar-item-icon">
+            <IconComponent />
+          </i>
+          {label}
+        </span>
         {!isInternalLink && <IconExternalLink />}
       </Link>
     </li>