Improve Documentation (#3795)

* Begin docs improvement

* Keep improving documentation

* Upgrade Docusarus

* Fix broken links

packages/twenty-docs/src/css/custom.css

@@ -88,29 +88,46 @@ html {
 }
 
 .DocSearch-Button {
+  margin: inherit !important;
   height: 32px !important;
-  border-radius: 8px !important;
+  border-radius: 0 !important;
+  margin-top: 12px !important;
+  background: inherit !important;
+  color: var(--ifm-navbar-link-color) !important;
+
+  :hover {
+    box-shadow: none !important;
+  }
 }
 
 .DocSearch-Button-Placeholder {
   padding: 0 100px 0 6px !important;
 }
 
-.DocSearch-Button .DocSearch-Search-Icon {
-  color: inherit !important;
-  width: 13px;
+.DocSearch-Button {
+  display: none  !important;
 }
 
+
 .DocSearch-Button-Key {
   height: 14px !important;
   width: 14px !important;
   font-size: 9px !important;
+  padding: none !important;
+  top: inherit !important;
 }
 
 .DocSearch-Button-Keys {
   min-width: inherit !important;
 }
 
+.search-menu-item {
+  padding-top: 12px;
+}
+.menu__link:hover > .DocSearch-Button-Keys {
+    display: flex !important;
+}
+
 .theme-edit-this-page {
   font-size: 70%;
 }
@@ -272,21 +289,22 @@ a.table-of-contents__link:hover{
   opacity: 0.6;
 }
 
-.header-github-link:before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-  content: "";
-  display: flex;
-  height: 24px;
-  width: 24px;
-}
-
-[data-theme='dark'] .header-github-link::before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-}
-
 
 .hidden {
 display: none !important;
 }
+
+.navbar__title {
+  color: var(--ifm-link-color);
+  font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
+  font-size: 11px;
+}
+
+.navbar__brand {
+  text-decoration: none;
+}
+
+.navbar__link {
+  color: var(--ifm-link-color);
+}
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

packages/twenty-docs/src/theme/DocCard/index.js

@@ -1,37 +1,39 @@
 import React from 'react';
-import clsx from 'clsx';
+import isInternalUrl from '@docusaurus/isInternalUrl';
 import Link from '@docusaurus/Link';
 import {
   findFirstCategoryLink,
   useDocById,
 } from '@docusaurus/theme-common/internal';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import {translate} from '@docusaurus/Translate';
+import { translate } from '@docusaurus/Translate';
+import clsx from 'clsx';
+
+import * as icons from '../icons';
+
 import styles from './styles.module.css';
-import * as icons from "../icons"; 
 
-
-function CardContainer({href, children}) {
+function CardContainer({ href, children }) {
   return (
     <Link
       href={href}
-      className={clsx('card padding--lg', styles.cardContainer)}>
+      className={clsx('card padding--lg', styles.cardContainer)}
+    >
       {children}
     </Link>
   );
 }
-function CardLayout({href, icon, title, description}) {
+function CardLayout({ href, icon, title, description }) {
   return (
     <CardContainer href={href}>
-      <h2 className={clsx("text--truncate", styles.cardTitle)} title={title}>
+      <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
         <span className={styles.icon}>
-          {typeof icon === "function" ? icon() : icon}
-        </span>{" "}
+          {typeof icon === 'function' ? icon() : icon}
+        </span>{' '}
         {title}
       </h2>
       {description && (
         <p
-          className={clsx("text--truncate", styles.cardDescription)}
+          className={clsx('text--truncate', styles.cardDescription)}
           title={description}
         >
           {description}
@@ -41,7 +43,7 @@ function CardLayout({href, icon, title, description}) {
   );
 }
 
-function CardCategory({item}) {
+function CardCategory({ item }) {
   const href = findFirstCategoryLink(item);
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {
@@ -61,17 +63,16 @@ function CardCategory({item}) {
             description:
               'The default description for a category card in the generated index about how many items this category includes',
           },
-          {count: item.items.length},
+          { count: item.items.length },
         )
       }
     />
   );
 }
 
-
 function CardLink({ item }) {
   const customIcon = item.customProps.icon;
-  const icon = icons[customIcon] || (isInternalUrl(item.href) ? "📄️" : "🔗");
+  const icon = icons[customIcon] || (isInternalUrl(item.href) ? '📄️' : '🔗');
   const doc = useDocById(item.docId ?? undefined);
 
   return (
@@ -84,8 +85,7 @@ function CardLink({ item }) {
   );
 }
 
-
-export default function DocCard({item}) {
+export default function DocCard({ item }) {
   switch (item.type) {
     case 'link':
       return <CardLink item={item} />;

packages/twenty-docs/src/theme/DocSidebarItem/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { TbSearch } from 'react-icons/tb';
+import DocSidebarItem from '@theme-original/DocSidebarItem';
+import SearchBar from '@theme-original/SearchBar';
+
+const CustomComponents = {
+  'search-bar': () => {
+    const openSearchModal = () => {
+      console.log('yo');
+
+      const searchInput = document.querySelector('#search-bar');
+      if (searchInput) {
+        searchInput.focus();
+      }
+
+      const event = new KeyboardEvent('keydown', {
+        key: 'k',
+        code: 'KeyK',
+        keyCode: 75,
+        which: 75,
+        // If the shortcut is Cmd+K on Mac or Ctrl+K on Windows/Linux, set the respective key to true:
+        metaKey: true, // for Cmd+K (Mac)
+        // ctrlKey: true, // for Ctrl+K (Windows/Linux)
+        bubbles: true,
+      });
+
+      // Dispatch the event
+      window.dispatchEvent(event);
+    };
+
+    return (
+      <>
+        <li className="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--level2 search-menu-item">
+          <SearchBar style={{ display: 'none' }} />
+          <a className="menu__link" onClick={openSearchModal}>
+            <span className="icon-and-text">
+              <i className="sidebar-item-icon">
+                <TbSearch />
+              </i>
+              Search
+            </span>
+            <span
+              className="DocSearch-Button-Keys"
+              style={{ paddingLeft: '10px', display: 'none' }}
+            >
+              <kbd className="DocSearch-Button-Key">⌘</kbd>
+              <kbd className="DocSearch-Button-Key">K</kbd>
+            </span>
+          </a>
+        </li>
+      </>
+    );
+  },
+};
+
+export default function DocSidebarItemWrapper(props) {
+  const CustomComponent = CustomComponents[props.item?.customProps?.type];
+  if (CustomComponent) {
+    return <CustomComponent {...props.item?.customProps?.props} />;
+  }
+
+  return (
+    <>
+      <DocSidebarItem {...props} />
+    </>
+  );
+}

packages/twenty-docs/src/theme/Icon/DarkMode/index.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { TbMoon } from 'react-icons/tb';
-import {useColorMode} from '@docusaurus/theme-common';
-
+import { useColorMode } from '@docusaurus/theme-common';
 
 const IconDarkMode = (props) => {
   const { colorMode } = useColorMode();
-  return colorMode === 'dark' ? <TbMoon /> : <></>;
-}
+  return colorMode === 'dark' ? <TbMoon className="navbar__link" /> : <></>;
+};
 
-export default IconDarkMode
+export default IconDarkMode;

packages/twenty-docs/src/theme/Icon/LightMode/index.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { TbSun } from 'react-icons/tb';
-import {useColorMode} from '@docusaurus/theme-common';
+import { useColorMode } from '@docusaurus/theme-common';
 
-
-const IconLightMode = (props) =>  {
+const IconLightMode = (props) => {
   const { colorMode } = useColorMode();
-  return colorMode === 'light' ? <TbSun /> : <></>;
-}
+  return colorMode === 'light' ? <TbSun className="navbar__link" /> : <></>;
+};
 
 export default IconLightMode;

packages/twenty-docs/src/theme/Navbar/Search/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function SearchWrapper(props) {
+  return <></>;
+}

packages/twenty-docs/src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,24 @@
+import GithubLink from '@site/src/theme/NavbarItem/GithubLink';
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+
+const ComponentTypes = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+  'custom-github-link': GithubLink,
+};
+export default ComponentTypes;

packages/twenty-docs/src/theme/NavbarItem/GithubLink.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TbBrandGithub } from 'react-icons/tb';
+
+const GithubLink = () => {
+  return (
+    <a
+      className="navbar__item navbar__link"
+      href="https://github.com/twentyhq/twenty"
+      target="_blank"
+      rel="noreferrer noopener"
+      style={{
+        display: 'flex',
+        verticalAlign: 'middle',
+      }}
+    >
+      <TbBrandGithub />
+    </a>
+  );
+};
+
+export default GithubLink;

packages/twenty-docs/src/theme/icons.js

@@ -1,76 +1,78 @@
 export {
+  TbAddressBook,
+  TbApi,
   TbApps,
+  TbAppWindow,
   TbArrowBackUp,
   TbArrowBigRight,
   TbArticle,
+  TbAugmentedReality,
   TbBolt,
+  TbBrandDocker,
   TbBrandFigma,
+  TbBrandGithub,
+  TbBrandGraphql,
   TbBrandVscode,
   TbBrandWindows,
   TbBrandZapier,
   TbBug,
   TbBugOff,
   TbChartDots,
+  TbCheck,
+  TbCheckbox,
   TbChecklist,
+  TbCircleCheckFilled,
+  TbCircleDot,
   TbCloud,
-  TbScript,
-  TbForms,
-  TbTable,
-  TbSlideshow,
-  TbBrandDocker,
+  TbColorFilter,
+  TbColorPicker,
+  TbComponents,
   TbDeviceDesktop,
   TbExclamationCircle,
   TbEyeglass,
   TbFaceIdError,
+  TbFlag,
   TbFolder,
+  TbForms,
+  TbIcons,
+  TbInfoCircle,
+  TbInputSearch,
   TbKeyboard,
+  TbLayoutGrid,
+  TbLayoutList,
+  TbLink,
+  TbLoader2,
+  TbMenu,
+  TbNavigation,
+  TbNote,
+  TbNotebook,
   TbPaint,
   TbPencil,
+  TbPill,
   TbPlus,
+  TbRectangle,
+  TbRocket,
+  TbSchema,
+  TbScript,
+  TbSelect,
   TbServer,
+  TbSlideshow,
+  TbSquareChevronsRight,
+  TbSquareRoundedPlusFilled,
+  TbTable,
+  TbTag,
+  TbTargetArrow,
+  TbTemplate,
+  TbTerminal,
   TbTerminal2,
+  TbTextPlus,
+  TbTextSize,
+  TbToggleRight,
+  TbTooltip,
   TbTopologyStar,
+  TbUpload,
+  TbUsers,
+  TbVariable,
   TbVocabulary,
   TbZoomQuestion,
-  TbRocket,
-  TbAugmentedReality,
-  TbTerminal,
-  TbBrandGraphql,
-  TbApi,
-  TbUsers,
-  TbCheck,
-  TbPill,
-  TbAppWindow,
-  TbTooltip,
-  TbTag,
-  TbLayoutList,
-  TbAddressBook,
-  TbLoader2,
-  TbInputSearch,
-  TbIcons,
-  TbSquareRoundedPlusFilled,
-  TbLayoutGrid,
-  TbColorFilter,
-  TbTextSize,
-  TbComponents,
-  TbCheckbox,
-  TbColorPicker,
-  TbCircleDot,
-  TbUpload,
-  TbVariable,
-  TbSchema,
-  TbSelect,
-  TbToggleRight,
-  TbTextPlus,
-  TbTargetArrow,
-  TbNote,
-  TbInfoCircle,
-  TbLink,
-  TbNavigation,
-  TbMenu,
-  TbSquareChevronsRight,
-  TbTemplate,
-  TbRectangle,
-  TbCircleCheckFilled,
-  TbFlag
-} from "react-icons/tb";
+} from 'react-icons/tb';