Fix playground, update content

Author: FelixMalfait

packages/twenty-docs/src/components/token-form.tsx

@@ -29,8 +29,7 @@ const TokenForm = ({
   const location = useLocation();
   const [isLoading, setIsLoading] = useState(false);
   const [locationSetting, setLocationSetting] = useState(
-    parseJson(localStorage.getItem('baseUrl'))?.locationSetting ??
-      'production',
+    parseJson(localStorage.getItem('baseUrl'))?.locationSetting ?? 'production',
   );
   const [baseUrl, setBaseUrl] = useState(
     parseJson(localStorage.getItem('baseUrl'))?.baseUrl ??
@@ -63,14 +62,17 @@ const TokenForm = ({
       url = 'http://localhost:3000';
     } else {
       url = baseUrl?.endsWith('/')
-      ? baseUrl.substring(0, baseUrl.length - 1)
-      : baseUrl
+        ? baseUrl.substring(0, baseUrl.length - 1)
+        : baseUrl;
     }
-    
+
     setBaseUrl(url);
     setLocationSetting(locationSetting);
     submitBaseUrl?.(url);
-    localStorage.setItem('baseUrl', JSON.stringify({ baseUrl: url, locationSetting }));
+    localStorage.setItem(
+      'baseUrl',
+      JSON.stringify({ baseUrl: url, locationSetting }),
+    );
   };
 
   const validateToken = (openApiJson) => {
@@ -133,7 +135,7 @@ const TokenForm = ({
           <select
             className="select"
             onChange={(event) => {
-              updateBaseUrl(baseUrl, event.target.value)
+              updateBaseUrl(baseUrl, event.target.value);
             }}
             value={locationSetting}
           >
@@ -154,7 +156,9 @@ const TokenForm = ({
             disabled={locationSetting !== 'other'}
             placeholder="Base URL"
             value={baseUrl}
-            onChange={(event) => updateBaseUrl(event.target.value, locationSetting)}
+            onChange={(event) =>
+              updateBaseUrl(event.target.value, locationSetting)
+            }
             onBlur={() => submitToken(token)}
           />
         </div>

packages/twenty-website/src/app/_components/playground/graphql-playground.tsx

@@ -14,7 +14,6 @@ const SubDocToPath = {
   metadata: 'metadata',
 };
 
-// Docusaurus does SSR for custom pages, but we need to load GraphiQL in the browser
 const GraphQlComponent = ({ token, baseUrl, path }: any) => {
   const explorer = explorerPlugin({
     showAttribution: true,

packages/twenty-website/src/app/_components/playground/token-form.tsx

@@ -3,7 +3,6 @@
 import React, { useEffect, useState } from 'react';
 import { TbApi, TbChevronLeft, TbLink } from 'react-icons/tb';
 import { usePathname, useRouter } from 'next/navigation';
-import { parseJson } from 'nx/src/utils/json';
 
 // @ts-expect-error Migration loader as text not passing warnings
 import tokenForm from '!css-loader!./token-form.css';
@@ -34,27 +33,30 @@ const TokenForm = ({
 
   const [isLoading, setIsLoading] = useState(false);
   const [locationSetting, setLocationSetting] = useState(
-    parseJson?.(localStorage.getItem('baseUrl') || '')?.locationSetting ??
+    (window.localStorage.getItem('baseUrl') &&
+      JSON.parse(window.localStorage.getItem('baseUrl') ?? '')
+        ?.locationSetting) ??
       'production',
   );
   const [baseUrl, setBaseUrl] = useState(
-    parseJson?.(localStorage.getItem('baseUrl') || '')?.baseUrl ??
+    (window.localStorage.getItem('baseUrl') &&
+      JSON.parse(window.localStorage.getItem('baseUrl') ?? '')?.baseUrl) ??
       'https://api.twenty.com',
   );
 
-  const tokenLocal = localStorage?.getItem?.(
+  const tokenLocal = window.localStorage?.getItem?.(
     'TryIt_securitySchemeValues',
   ) as string;
 
-  const token = parseJson?.(tokenLocal)?.bearerAuth ?? '';
+  const token = JSON.parse(tokenLocal)?.bearerAuth ?? '';
 
   const updateLoading = (loading = false) => {
     setIsLoading(loading);
     setLoadingState?.(!!loading);
   };
 
   const updateToken = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    localStorage.setItem(
+    window.localStorage.setItem(
       'TryIt_securitySchemeValues',
       JSON.stringify({ bearerAuth: event.target.value }),
     );
@@ -78,7 +80,7 @@ const TokenForm = ({
     setBaseUrl(url);
     setLocationSetting(locationSetting);
     submitBaseUrl?.(url);
-    localStorage.setItem(
+    window.localStorage.setItem(
       'baseUrl',
       JSON.stringify({ baseUrl: url, locationSetting }),
     );

packages/twenty-website/src/content/developers/cloud.mdx

@@ -1,7 +1,6 @@
 export const DOCS_INDEX = {
   'Getting Started': {
     'Getting Started': [{ fileName: 'index' }],
-    'Managed Cloud': [{ fileName: 'cloud' }],
     'Local Setup': [{ fileName: 'local-setup' }],
     'Self-Hosting': [
       { fileName: 'self-hosting' },
@@ -10,6 +9,20 @@ export const DOCS_INDEX = {
       { fileName: 'cloud-providers' },
     ],
   },
+  Extending: {
+    'Rest APIs': [
+      { fileName: 'rest-apis' },
+      { fileName: 'core-api-rest' },
+      { fileName: 'metadata-api-rest' },
+    ],
+    'GraphQL APIs': [
+      { fileName: 'graphql-apis' },
+      { fileName: 'core-api-graphql' },
+      { fileName: 'metadata-api-graphql' },
+    ],
+    // Storybook: [{ fileName: 'storybook' }],
+  },
+
   Contributing: {
     'Bugs and Requests': [{ fileName: 'bug-and-requests' }],
     'Frontend Development': [
@@ -32,20 +45,14 @@ export const DOCS_INDEX = {
       { fileName: 'queue' },
     ],
   },
-  Extending: {
-    Storybook: [{ fileName: 'storybook' }],
-    'Rest APIs': [
-      { fileName: 'rest-apis' },
-      { fileName: 'core-api-rest' },
-      { fileName: 'metadata-api-rest' },
-    ],
-    'GraphQL APIs': [
-      { fileName: 'graphql-apis' },
-      { fileName: 'core-api-graphql' },
-      { fileName: 'metadata-api-graphql' },
+
+  'User Guide': {
+    'Getting Started': [
+      { fileName: 'getting-started' },
+      { fileName: 'get-section' },
     ],
   },
-  Components: {
+  /* Components: {
     Display: [
       { fileName: 'display' },
       { fileName: 'checkmark' },
@@ -77,11 +84,5 @@ export const DOCS_INDEX = {
       { fileName: 'navigation-bar' },
       { fileName: 'step-bar' },
     ],
-  },
-  'User Guide': {
-    'Getting Started': [
-      { fileName: 'getting-started' },
-      { fileName: 'get-section' },
-    ],
-  },
+  }, */
 };

packages/twenty-website/src/content/developers/constants/DocsIndex.ts

@@ -1,5 +1,5 @@
 ---
-title: Vendor-specific instructions
+title: Vendor-Specific Instructions
 icon: TbCloud
 image: /images/user-guide/notes/notes_header.png
 ---

packages/twenty-website/src/content/developers/index.mdx

@@ -1,25 +1,20 @@
 ---
-title: 1-click Docker Compose 
+title: 1-Click Docker Compose 
 icon: TbBrandDocker
 image: /images/user-guide/objects/objects.png
 ---
-## Step by step instructions:
 
-### One command installation
+## Option 1: One-line script
 
-Install the project with the command below. By default, it installs the latest version from the main branch.
+Install the project with the command below.
+It will install the latest stable version.
 ```bash
 bash <(curl -sL https://git.new/20)
 ```
 
-### Custom Installation:
+If you want to install a specific version, you can do so by adding the version number. `VERSION=x.y.z BRANCH=branch-name bash <(curl -sL https://git.new/20)`
 
-Set VERSION for a specific docker image version, BRANCH for a specific clone branch:
-```bash
-VERSION=x.y.z BRANCH=branch-name bash <(curl -sL https://git.new/20)
-```
-
-### Manual installation
+## Option 2: Manual steps
 
 1. Copy the [.env.example](https://github.com/twentyhq/twenty/blob/main/packages/twenty-docker/.env.example) into a `.env` in the same directory where your `docker-compose.yml` file will be
 2. Run the command `openssl rand -base64 32` four times, make note of the string for each
@@ -36,7 +31,7 @@ FILE_TOKEN_SECRET=replace_me_with_a_random_string_refresh
 5. Run the command `docker-compose up -d`
 6. Go to http://localhost:3000 and see your docker instance.
 
-### Troubleshooting
+## Troubleshooting
 
 #### Not able to login
 

packages/twenty-website/src/content/developers/self-hosting/cloud-providers.mdx

@@ -4038,9 +4038,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codesandbox/sandpack-react@npm:^2.13.10":
-  version: 2.13.10
-  resolution: "@codesandbox/sandpack-react@npm:2.13.10"
+"@codesandbox/sandpack-react@npm:^2.13.5":
+  version: 2.14.0
+  resolution: "@codesandbox/sandpack-react@npm:2.14.0"
   dependencies:
     "@codemirror/autocomplete": "npm:^6.4.0"
     "@codemirror/commands": "npm:^6.1.3"
@@ -4064,7 +4064,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17 || ^18
     react-dom: ^16.8.0 || ^17 || ^18
-  checksum: c707e5abfa9f19cf8a298656fe41a3245570ea26c3f0cdcb325bf670fd025c303091befdfe1c53d6e1d0bf972067970d6611d637e041cb6ae03eea44f3b6d352
+  checksum: d12217e5e3098679ddf483bf2dd32a29e0f18252d1bef3a47c5462ecddb64c503dde1b801dfbe6e3e729285828e06daea270a7e1caddffa84c52a552675866d5
   languageName: node
   linkType: hard
 
@@ -46827,7 +46827,7 @@ __metadata:
     "@blocknote/react": "npm:^0.12.2"
     "@chakra-ui/accordion": "npm:^2.3.0"
     "@chakra-ui/system": "npm:^2.6.0"
-    "@codesandbox/sandpack-react": "npm:^2.13.10"
+    "@codesandbox/sandpack-react": "npm:^2.13.5"
     "@crxjs/vite-plugin": "npm:^1.0.14"
     "@dagrejs/dagre": "npm:^1.1.2"
     "@docusaurus/core": "npm:^3.1.0"