chore: refactoring code

Author: Hubert Koster

docs/intro.md

@@ -0,0 +1,77 @@
+---
+title: Introduction
+hide_title: false
+draft: false
+sidebar_label: Introduction
+sidebar_position: 0
+sidebar_class_name: hide-sidebar-item
+tags:
+  - introduction
+  - getting started
+  - quick startup
+keywords:
+  - deriv
+  - api
+  - getting started
+  - quick startup
+description: Getting started with Deriv API
+---
+
+import RenderOfficialContents from '@site/src/components/RenderOfficialContents';
+
+Our Documentation is divided in several sections:
+
+<RenderOfficialContents>
+  <ul>
+    <li><a href='category/core-concepts'>Core concepts</a></li>
+    <li><a href='category/code-examples'>Code examples</a></li>
+    <li><a href='category/languages'>Languages</a></li>
+    <li><a href='category/guides'>Guides</a></li>
+    <li><a href='setting-up-a-deriv-application'>Setting up a deriv app</a></li>
+  </ul>
+  <ul>
+    <li><a href='category/code-examples'>Code examples</a></li>
+  </ul>
+</RenderOfficialContents>
+
+<h3>Quick Start</h3>
+
+<RenderOfficialContents>
+    <h4>Core Concepts</h4>
+</RenderOfficialContents>
+
+<RenderOfficialContents>
+  <p>Have a look at the <a href='/docs/category/core-concepts'>Core concepts</a> pages and take your time to read through it. These concepts will help you get familiar with our WebSocket server api and how to use it more efficiently. They are not related to any of our frameworks or libraries.</p>
+</RenderOfficialContents>
+
+<RenderOfficialContents>
+  <p>When you read through the <a href='/docs/category/core-concepts'>Core concepts</a> page, you can start choosing your implementation approach based on the language, framework or library you want to use in your application.</p>
+</RenderOfficialContents>
+
+<h4>Code Examples</h4>
+
+<p>If you want to know how you can implement our API within your code, then we suggest to have a look at our <a href='/docs/category/code-examples'>Code examples</a>. These code examples come in `CodeSandboxes`. This allows you to easily fork the code examples and experiment with them for personal use. For now we only have JavaScript code examples, but, we plan to add more examples that are created with different languages, frameworks and libraries in the near future.</p>
+
+<RenderOfficialContents>
+  <h4>Languages</h4>
+</RenderOfficialContents>
+
+<RenderOfficialContents>
+  <p>When using our code examples, we also suggest to have a look at our <a href='/docs/category/languages'>Languages</a> section. Here, we describe in detail how you can setup your personal project properly to make use of our API. This will surely come helpful when you try to integrate some of our code examples in your own project.</p>
+</RenderOfficialContents>
+
+<RenderOfficialContents>
+  <h4>Guides</h4>
+</RenderOfficialContents>
+
+<RenderOfficialContents>
+  <p>If you want to know for example how you can `monetize your application` or how to create a `secure way for users to log in` to your application, then we provide a handful of <a href='/docs/category/guides'>Guides</a> that can assist you with that.</p>
+</RenderOfficialContents>
+
+<RenderOfficialContents>
+  <h4>Setting up a Deriv application</h4>
+</RenderOfficialContents>
+
+<RenderOfficialContents>
+  <p>If you want to know more about the essentials that are needed to setup your own application, then have a look at the <a href='/docs/setting-up-a-deriv-application'>Setting up a Deriv application</a> section.</p>
+</RenderOfficialContents>

docs/intro.mdx

@@ -6,6 +6,7 @@ import TokenDropdown from '../CustomSelectDropdown/token-dropdown/TokenDropdown'
 import useClickOutsideDropdown from '@site/src/hooks/useClickOutsideDropdown';
 import useAppManager from '@site/src/hooks/useAppManager';
 import styles from './api_token_switcher.module.scss';
+import RenderOfficialContents from '../RenderOfficialContents';
 
 const ApiTokenNavbarItem = () => {
   const { is_logged_in, is_authorized } = useAuthContext();
@@ -55,7 +56,9 @@ const ApiTokenNavbarItem = () => {
           <span>{currentToken.display_name}</span>
         </button>
       ) : (
-        <CreateToken />
+        <RenderOfficialContents>
+          <CreateToken />
+        </RenderOfficialContents>
       )}
 
       {is_toggle_dropdown && (
@@ -65,7 +68,9 @@ const ApiTokenNavbarItem = () => {
               <TokenDropdown />
             </div>
           )}
-          <CreateToken />
+          <RenderOfficialContents>
+            <CreateToken />
+          </RenderOfficialContents>
         </div>
       )}
     </div>

src/components/ApiTokenNavbarItem/index.tsx

@@ -8,7 +8,11 @@ type TRenderOfficialContents = {
 const RenderOfficialContents = ({ children }: TRenderOfficialContents) => {
   const Alternative = () => (children[1] ? <React.Fragment>{children[1]}</React.Fragment> : <></>);
   const { is_official_domain } = useOfficialContentsContext();
-  return is_official_domain ? <React.Fragment>{children}</React.Fragment> : <Alternative />;
+  return is_official_domain ? (
+    <React.Fragment>{children[0] ?? children}</React.Fragment>
+  ) : (
+    <Alternative />
+  );
 };
 
 export default RenderOfficialContents;

src/components/RenderOfficialContents/index.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 
 export interface IOfficialContents {
   is_official_domain: boolean;

src/contexts/official-contents/official-contents.context.tsx

@@ -174,6 +174,10 @@ div[class*='sidebarViewport'] {
   align-items: center;
 }
 
+.main-wrapper {
+  height: calc(100vh - rem(7.2));
+}
+
 .navbar {
   padding: 0 5%;
   height: var(--nav-height);

src/styles/index.scss

@@ -14,13 +14,13 @@ function useNavbarItems() {
   return useThemeConfig().navbar.items;
 }
 function NavbarItems({ items }) {
-  let unofficial_domain_item;
+  const unofficial_domain_items = [];
   const { is_official_domain } = useOfficialContentsContext();
 
   for (const value of Object.values(items)) {
-    if (value.label === 'Documentation') {
-      unofficial_domain_item = value;
-      break;
+    console.log(value);
+    if (value.label === 'Documentation' || value.position === 'right') {
+      unofficial_domain_items.push(value);
     }
   }
 
@@ -46,19 +46,21 @@ function NavbarItems({ items }) {
         </React.Fragment>
       ) : (
         <React.Fragment>
-          <ErrorCauseBoundary
-            key={unofficial_domain_item?.label}
-            onError={(error) =>
-              new Error(
-                `A theme navbar item failed to render.
-      Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
-      ${JSON.stringify(unofficial_domain_item, null, 2)}`,
-                { cause: error },
-              )
-            }
-          >
-            <NavbarItem {...unofficial_domain_item} />
-          </ErrorCauseBoundary>
+          {unofficial_domain_items.map((unofficial_item, i) => (
+            <ErrorCauseBoundary
+              key={i}
+              onError={(error) =>
+                new Error(
+                  `A theme navbar item failed to render.
+        Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+        ${JSON.stringify(unofficial_item, null, 2)}`,
+                  { cause: error },
+                )
+              }
+            >
+              <NavbarItem {...unofficial_item} />
+            </ErrorCauseBoundary>
+          ))}
         </React.Fragment>
       )}
     </>

src/theme/Navbar/Content/index.js

@@ -34,7 +34,7 @@ export const domains = [
   'staging.deriv.be',
   'staging.deriv.me',
   'staging.deriv.com',
-  'localhost',
+  // 'localhost',
   'deriv-com-git-fork',
   'deriv-developers-portal-git-fork',
   'deriv-api-docs-git-fork',