Improve Documentation (#3795)

* Begin docs improvement

* Keep improving documentation

* Upgrade Docusarus

* Fix broken links

packages/twenty-docs/docusaurus.config.js

@@ -1,4 +1,3 @@
-
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
@@ -7,22 +6,40 @@ import { themes } from 'prism-react-renderer';
 const lightCodeTheme = themes.github;
 const darkCodeTheme = themes.dracula;
 
+const filterOutCategory = (items, categoryNameToExclude) => {
+  return items.reduce((filteredItems, item) => {
+    if (item.type === 'category' && item.label === categoryNameToExclude) {
+      // Skip adding the item if the category should be excluded
+      return filteredItems;
+    } else if (item.type === 'category') {
+      // Recursively filter sub-categories
+      return filteredItems.concat({
+        ...item,
+        items: filterOutCategory(item.items, categoryNameToExclude),
+      });
+    } else {
+      // Include the item if it's not a category to be excluded
+      return filteredItems.concat(item);
+    }
+  }, []);
+};
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Twenty - Documentation",
-  tagline: "Twenty is cool",
-  favicon: "img/logo-square-dark.ico",
+  title: 'Twenty - Documentation',
+  tagline: 'Twenty is cool',
+  favicon: 'img/logo-square-dark.ico',
 
   // Prevent search engines from indexing the doc for selected environments
-  noIndex: process.env.SHOULD_INDEX_DOC === "false",
+  noIndex: process.env.SHOULD_INDEX_DOC === 'false',
 
   // Set the production url of your site here
-  url: "https://docs.twenty.com",
+  url: 'https://docs.twenty.com',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
+  baseUrl: '/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
 
   headTags: [],
 
@@ -30,25 +47,34 @@ const config = {
   // metadata like html lang. For example, if your site is Chinese, you may want
   // to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
+    defaultLocale: 'en',
+    locales: ['en'],
   },
   plugins: ['docusaurus-node-polyfills'],
   presets: [
     [
-      "classic",
+      'classic',
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
           breadcrumbs: false,
-          sidebarPath: require.resolve("./sidebars.js"),
+          sidebarPath: require.resolve('./sidebars.js'),
           sidebarCollapsible: false,
-          routeBasePath: "/",
-          editUrl: "https://github.com/twentyhq/twenty/tree/main/packages/twenty-docs"
+          routeBasePath: '/',
+          editUrl:
+            'https://github.com/twentyhq/twenty/tree/main/packages/twenty-docs',
+          sidebarItemsGenerator: async ({
+            defaultSidebarItemsGenerator,
+            ...args
+          }) => {
+            const sidebarItems = await defaultSidebarItemsGenerator(args);
+
+            return filterOutCategory(sidebarItems, 'UI Components');
+          },
         },
         blog: false,
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: require.resolve('./src/css/custom.css'),
         },
       }),
     ],
@@ -58,40 +84,39 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       // Replace with your project's social card
-      image: "img/social-card.png",
+      image: 'img/social-card.png',
       colorMode: {
-        defaultMode: "light",
+        defaultMode: 'light',
         respectPrefersColorScheme: false,
       },
+      docs: {
+        sidebar: {
+          autoCollapseCategories: true,
+        },
+      },
       navbar: {
-        /*title: 'Twenty',*/
+        title: 'for Developers',
         logo: {
-          alt: "Twenty",
-          src: "img/logo-square-dark.svg",
-          srcDark: "img/logo-square-light.svg",
+          alt: 'Twenty',
+          src: 'img/logo-square-dark.svg',
+          srcDark: 'img/logo-square-light.svg',
         },
         items: [
+          /*{
+            to: 'https://github.com/twentyhq/twenty/releases',
+            label: 'Releases',
+            position: 'right',
+          },*/
           {
-            type: "search",
-            position: "left",
-          },
-          {
-            to: "https://github.com/twentyhq/twenty/releases",
-            label: "Releases",
-            position: "right",
-          },
-          {
-            href: "https://github.com/twentyhq/twenty",
-            position: "right",
-            className: "header-github-link",
-            "aria-label": "GitHub repository",
+            type: 'custom-github-link',
+            position: 'right',
           },
         ],
       },
       algolia: {
-        appId: "J2OX2P2QAO",
-        apiKey: "e0a7a59c7862598a0cf87307c8ea97f2",
-        indexName: "twenty",
+        appId: 'J2OX2P2QAO',
+        apiKey: 'e0a7a59c7862598a0cf87307c8ea97f2',
+        indexName: 'twenty',
 
         // Optional: see doc section below
         contextualSearch: true,
@@ -105,7 +130,7 @@ const config = {
         // Optional: Algolia search parameters
         searchParameters: {},
         // Optional: path for search page that enabled by default (`false` to disable it)
-        searchPagePath: "search",
+        searchPagePath: 'search',
       },
       /* footer: {
         copyright: `© ${new Date().getFullYear()} Twenty. Docs generated with Docusaurus.`,