Add docs CI and fix docs build (#176)

* Add docs CI and fix docs build

* Fix CI name

.github/workflows/ci-docs.yaml

@@ -0,0 +1,27 @@
+name: CI Docs
+on:
+  push:
+jobs:
+  docs-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Docs / Install Dependencies
+        run: cd docs && npm install
+      - name: Docs / Build Documentation
+        run: cd docs && npm run build

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

@@ -8,7 +8,8 @@ The following steps assume that you have installed and configure the project wit
 
 ## 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.
+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.
 
 ## Front tests
 

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

@@ -61,7 +61,7 @@ Once this is completed you should have:
 
 ## 6. Development
 
-Documented [here](/development/workflows.md)
+Documented [here](../development/workflows.mdx)
 
 ## Without Docker (Not recommended)
 

docs/src/pages/graphql.js

@@ -3,16 +3,24 @@ import { GraphiQL } from 'graphiql';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Layout from '@theme/Layout';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import 'graphiql/graphiql.css';
 
-const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
+
+// Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
+function GraphiQLComponent() {
+  const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
+  return <GraphiQL fetcher={fetcher} />;
+}
 
 export default function graphQL() {
   return (
     <Layout title="Hello" description="Hello React Page">
-      <div class="fullHeightPlayground">
+      <div className="fullHeightPlayground">
-        <GraphiQL fetcher={fetcher} />
+        <BrowserOnly>
+          <GraphiQLComponent />
+        </BrowserOnly>
       </div>
     </Layout>
   );