Merge pull request #181 from hubert-deriv/branding_removal

Author: hubert-deriv

.eslintignore

@@ -3,4 +3,5 @@ docusaurus.config.js
 jest.config.js
 commitlint.config.js
 babel.config.js
-examples
+examples
+src/theme

docs/code-examples/javascript/keep-alive/index.mdx

@@ -16,9 +16,12 @@ keywords:
 description: Keep Alive code example
 ---
 
+import RenderOfficialContents from '@site/src/components/RenderOfficialContents';
 import SandboxIframe from '@site/src/components/SandboxIframe';
 import { sandboxes } from '@site/src/components/SandboxIframe/utility/sandboxes';
 
-In this example you'll see how to keep a connection alive when getting contract proposals via the Deriv API. This example keeps the connection alive by sending a ping every 30 seconds.
+<RenderOfficialContents>
+  <p>In this example you'll see how to keep a connection alive when getting contract proposals via the Deriv API. This example keeps the connection alive by sending a ping every 30 seconds.</p>
+</RenderOfficialContents>
 
 <SandboxIframe sandbox={sandboxes.keep_alive} />

docs/code-examples/javascript/ticks-history/index.mdx

@@ -16,13 +16,16 @@ keywords:
 description: Ticks History code example
 ---
 
+import RenderOfficialContents from '@site/src/components/RenderOfficialContents';
 import SandboxIframe from '@site/src/components/SandboxIframe';
 import { sandboxes } from '@site/src/components/SandboxIframe/utility/sandboxes';
 
 With ticks history you are able to get a collection of past tick times and prices.
 
 <SandboxIframe sandbox={sandboxes.ticks_history} />
 
-We subscribe to the ticks functionality from the Deriv API websocket to keep track of current and past ticks.
+<RenderOfficialContents>
+  <p>We subscribe to the ticks functionality from the Deriv API websocket to keep track of current and past ticks.</p>
+</RenderOfficialContents>
 
 As an example you could create an interactive tick graph.

docs/code-examples/javascript/ticks/index.mdx

@@ -14,13 +14,20 @@ keywords:
 description: Ticks code example
 ---
 
+import RenderOfficialContents from '@site/src/components/RenderOfficialContents';
 import SandboxIframe from '@site/src/components/SandboxIframe';
 import { sandboxes } from '@site/src/components/SandboxIframe/utility/sandboxes';
 
-The easiest way to understand how Deriv API works is to try our Tick call:
+<RenderOfficialContents>
+  <p>The easiest way to understand how Deriv API works is to try our Tick call:</p>
+</RenderOfficialContents>
 
 <SandboxIframe sandbox={sandboxes.ticks} />
 
-We'll start with the ticks example because it's a pretty simple block of code to implement. You don't have to log into the Deriv account and get your app authenticated to try it.
+<RenderOfficialContents>
+  <p>We'll start with the ticks example because it's a pretty simple block of code to implement. You don't have to log into the Deriv account and get your app authenticated to try it.</p>
+</RenderOfficialContents>
 
-A tick is a measure of minimum upward or downward movement in the price of a trading commodity. We subscribe to the ticks functionality from the Deriv API websocket, which will return new tick data every second. As an example you could create an interactive tick graph with this data.
+<RenderOfficialContents>
+  <p>A tick is a measure of minimum upward or downward movement in the price of a trading commodity. We subscribe to the ticks functionality from the Deriv API websocket, which will return new tick data every second. As an example you could create an interactive tick graph with this data.</p>
+</RenderOfficialContents>

docs/core-concepts/_category_.json

@@ -1,4 +1,5 @@
 {
+  "className": "hide-sidebar-item",
   "label": "Core concepts",
   "position": 2,
   "link": {

docs/guides/_category_.json

@@ -1,4 +1,5 @@
 {
+  "className": "hide-sidebar-item",
   "label": "Guides",
   "position": 6,
   "link": {

docs/guides/monetizing-the-deriv-api/index.md

@@ -4,6 +4,7 @@ hide_title: true
 draft: false
 sidebar_label: Monetizing the Deriv API
 sidebar_position: 1
+sidebar_class_name: hide-sidebar-item
 tags:
   - concept
   - earn

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

@@ -1,4 +1,5 @@
 {
+  "className": "hide-sidebar-item",
   "label": "Languages",
   "position": 4,
   "link": {