docs: Update SDK and landing page docs

docs/getting-started/concepts/environment-variables.md

@@ -4,7 +4,7 @@ sidebar_label: Environment variables
 description: Manage environment variables on Onepanel
 ---
 
-Environment variables are unique to each namespace and will automatically added to any container in [Workspaces](/docs/getting-started/concepts/workspaces) or [Workflows](/docs/getting-started/concepts/workflows).
+Environment variables are unique to each namespace and will be automatically added to any running Workspace or Workflow Task.
 
 The following system environment variables are always automatically added to both Workspaces and Workflow containers:
 
@@ -13,3 +13,7 @@ The following system environment variables are always automatically added to bot
 - `ONEPANEL_DOMAIN` Domain name where the platform is installed. Example: `sub.domain.com`
 - `ONEPANEL_RESOURCE_NAMESPACE` The namespace where the resource is running.
 - `ONEPANEL_RESOURCE_UID` The unique ID of the resource in namespace.
+
+You can add your own environment variables by navigating to the **Settings** menu and clicking **Add environment variable**.
+
+![](../../../static/img/environment-variables-155310.png)

docs/getting-started/concepts/sdk.md

@@ -4,10 +4,8 @@ sidebar_label: Python SDK
 description: Onepanel - Python SDK
 ---
 
-Onepanel's [Python SDK](https://github.com/onepanelio/python-sdk) can be used to programmatically perform any task that is available through the web UI.
+Onepanel's Python SDK can be used to programmatically perform any task that is available through the web UI. It is by default installed in all out of the box Workspaces and Workflows in Onepanel.
 
-Some examples include:
+Additionally, you can use the Python SDK to define Workflows in Python and execute them from any environment that supports Python.
 
-- [Define Workflow Templates in Python](https://github.com/onepanelio/python-sdk/blob/master/examples/python-defined-workflow.ipynb)
-- [Execute Workflows from Workspaces](https://github.com/onepanelio/python-sdk/blob/master/examples/execute-workflow.ipynb)
-- [Automatically launch CVAT annotation Workspaces](https://github.com/onepanelio/templates/blob/master/workflows/auto-cvat/template.yaml)
+See [Python SDK](/docs/reference/sdks/python) in **User Guide** for more detailed information.

docs/getting-started/quickstart.md

@@ -13,6 +13,7 @@ In this quick start, we will walk you through:
 1. Deploying Onepanel to one of the major cloud providers.
 2. Labelling your images or video using the integrated annotation Workspace.
 3. Training your model with the newly labelled data using the integrated training Workflows.
+4. Automatically annotating new data using your newly trained model.
 
 Before getting started, take a look at [concepts](/docs/getting-started/concepts/namespaces) to understand the different components in Onepanel.
 

docs/reference/sdks/python.md

@@ -0,0 +1,38 @@
+---
+title: Python SDK
+sidebar_label: Python SDK
+description: Onepanel - Python SDK
+---
+
+Onepanel's Python SDK can be used to programmatically perform any task that is available through the web UI.
+
+Additionally, you can use the Python SDK to [define and execute](https://github.com/onepanelio/python-sdk/blob/master/examples/python-defined-workflow.ipynb) Workflows in Python instead of YAML.
+
+## Installation
+:::important
+The Python SDK is already installed in all the Workspace and Workflow templates that are available in Onepanel out of the box.
+:::
+
+The Python SDK can be installed via PyPi as follows:
+
+```bash
+pip install onepanel-sdk
+```
+
+## Reference
+
+See [Getting started](https://github.com/onepanelio/python-sdk#getting-started) in the Python SDK repository for sample code and API reference.
+
+## Defining Workflows in Python
+
+The Python SDK is integrated with [Couler](https://github.com/couler-proj/couler) making it possible to define Workflows in Python instead of YAML.
+
+For a complete example of defining a Workflow with data augmentation and training tasks, see [this notebook](https://github.com/onepanelio/python-sdk/blob/master/examples/python-defined-workflow.ipynb).
+
+## Sample JupyterLab notebooks
+
+Here are some example notebooks that you can run from a JupyterLab Workspace in Onepanel:
+
+- [Define Workflows in Python](https://github.com/onepanelio/python-sdk/blob/master/examples/python-defined-workflow.ipynb)
+- [Execute Workflows from Workspaces](https://github.com/onepanelio/python-sdk/blob/master/examples/execute-workflow.ipynb)
+- [Automatically launch CVAT annotation Workspaces](https://github.com/onepanelio/templates/tree/release-v0.18.0/workflows/auto-cvat)

docusaurus.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  title: 'The open source, end-to-end vision AI platform',
-  tagline: 'The open source, production grade, end-to-end vision AI platform with fully integrated modules for model building, automated labeling, data processing, model training and hyperparameter tuning.',
+  title: 'The open and extensible IDE for computer vision',
+  tagline: 'The open and extensible integrated development environment (IDE) for computer vision',
   url: 'https://docs.onepanel.ai',
   baseUrl: '/',
   favicon: 'img/favicon.png',
@@ -10,24 +10,23 @@ module.exports = {
     colorMode: {
       disableSwitch: true,
     },
-    announcementBar: {
-      id: 'supportus',
-      content:
-        'If you like Onepanel, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/onepanelio/core">GitHub</a>! ⭐️',
-      backgroundColor: '#013d6d',
-      textColor: '#fff',
-    },
+    // announcementBar: {
+    //   id: 'supportus',
+    //   content:
+    //     'If you like Onepanel, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/onepanelio/core">GitHub</a>! ⭐️',
+    //   backgroundColor: '#013d6d',
+    //   textColor: '#fff',
+    // },
     navbar: {
       title: '',
       logo: {
         alt: 'Onepanel logo',
-        src: 'img/icon.png',
+        src: 'img/icon.svg',
       },
       items: [
         {to: 'docs/getting-started/quickstart', label: 'Getting Started', position: 'left'},
         {to: 'docs/reference/overview', label: 'User Guide', position: 'left'},
         {to: 'docs/deployment/overview', label: 'Operator Manual', position: 'left'},
-        {to: 'docs/api-sdk/overview', label: 'APIs and SDKs', position: 'left'},
         {href: 'https://github.com/onepanelio/core/releases', label: 'Releases', position: 'left'},
         {href: 'https://github.com/onepanelio/core/milestones?direction=asc&sort=due_date&state=open', label: 'Roadmap', position: 'left'},
         // {to: 'blog', label: 'Changelog', position: 'left'},

sidebars.js

@@ -140,5 +140,13 @@ module.exports = {
         'reference/jupyterlab/language-server',
       ]
     },
+    { 
+      type: 'category',
+      label: 'SDKs',
+      collapsed: false,
+      items: [
+        'reference/sdks/python',
+      ]
+    },
   ]
 };

src/css/custom.css

@@ -4,12 +4,14 @@
  * work well for content-centric websites.
  */
 
+@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #01579b;
   --ifm-color-primary-dark: #014e8b;
   --ifm-color-primary-darker: #014a84;
-  --ifm-color-primary-darkest: #013d6d;
+  --ifm-color-primary-darkest: #00233f;
   --ifm-color-primary-light: #0160ab;
   --ifm-color-primary-lighter: #0164b2;
   --ifm-color-primary-lightest: #0171ca;
@@ -19,8 +21,16 @@
   --ifm-heading-color: var(--ifm-color-primary-darker);
   --ifm-font-size-base: 16px;
   --ifm-list-left-padding: 1.25rem;
-  --ifm-navbar-link-hover-color: rgb(255, 255, 255);
-  --ifm-navbar-link-color: rgb(255, 255, 255, 0.8);
+}
+
+body {
+  font-family: 'Questrial', sans-serif;
+}
+
+.hero.hero--primary.heroBanner_src-pages- {
+  padding: 1.2rem 0 0 0;
+  --ifm-hero-background-color: #e4ecf2;
+  --ifm-hero-text-color: var(--ifm-font-color-base);
 }
 
 ol > li::marker {
@@ -67,29 +77,74 @@ ol > li::marker {
 }
 
 .button--primary {
-  background-color: #ff9100;
-  border-color: #ff9100;
+  background-color: #f28627;
+  border-color: #f28627;
   color: #fff;
 }
 
+.button--primary:active,
+.button--primary:hover,
+.button--primary.button--active {
+  background-color: #e27d25;
+  border-color: #e27d25;
+}
+
 .button--primary.button--outline {
   background-color: transparent;
-  border-color: #ff9100;
-  color: #ff9100;
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
 }
 
 .hero__name {
-  color: var(--ifm-font-base-color-inverse);
+  color: var(--ifm-color-primary);
   font-size: 3rem;
 }
 
+.hero__name div {
+  display: inline-block;
+  color: #fff;
+  background-color: var(--ifm-color-primary);
+  font-size: 1rem;
+  line-height: 1.2rem;
+  padding: 5px 5px 3px;
+  border-radius: 4px;
+  position: relative;
+  vertical-align: middle;
+  top: -8px;
+}
+
 .hero__title {
   color: var(--ifm-font-base-color-inverse);
   font-size: 2rem;
 }
 
+.hero__subtitle {
+  font-size: 1.3rem;
+  color: var(--ifm-color-primary);
+}
+
+.hero__platforms {
+  font-size: 0.8rem;
+  color: var(--ifm-color-primary);
+  margin: 0.2rem;
+}
+
+.hero__platforms img {
+  vertical-align: middle;
+  margin-left: 5px;
+}
+
 .hero__video {
-  margin-top: 2rem;
+  margin: 0 auto;
+  padding: 1.2rem 0 1.2rem 0;
+  background-image: url('/img/landing/video-bg.svg');
+  background-size: cover;
+}
+
+.hero__video video {
+  width: 680px;
+  border: 5px solid #cedde9;
+  border-radius: 6px;
 }
 
 .navbar--light {
@@ -105,10 +160,6 @@ ol > li::marker {
   padding: 0 var(--ifm-pre-padding);
 }
 
-.button.button--secondary.button--outline:not(.button--active):not(:hover) {
-  color: var(--ifm-color-secondary);
-}
-
 .ml-1 {
   margin-left: 10px;
 }
@@ -303,7 +354,7 @@ ol > li::before {
   left: -26px;
   height: 26px;
   width: 26px;
-  color: var(--ifm-heading-color);
+  color: var(--ifm-color-primary);
   font-size: 18px;
   font-weight: bold;
 }
@@ -312,3 +363,53 @@ ol > li::before {
 article > div > span.badge--secondary {
   display: none;
 }
+
+section.features_src-pages- {
+  background-color: #f8fafc;
+  padding: 0.5rem;
+}
+
+.features_src-pages- h3 {
+  color: var(--ifm-color-primary);
+}
+
+.features__list ul {
+  list-style-type: none;
+  font-size: 0.85rem;
+  line-height: 1.2rem;
+}
+
+.features__list ul li {
+  margin-bottom: 1.2rem;
+}
+
+.features__list ul li h4 {
+  font-size: 0.85rem;
+  color: var(--ifm-color-primary);
+  margin-bottom: 4px;
+}
+
+.features_src-pages- .features__arrow-1 {
+  position: relative;
+  right: -100px;
+  height: 20px;
+  top: 2px;
+}
+
+.features_src-pages- .features__arrow-2 {
+  position: relative;
+  right: -100px;
+  height: 20px;
+  top: 2px;
+}
+
+.features_src-pages- .features__arrow-3 {
+  position: relative;
+  right: -75px;
+  height: 20px;
+  top: 2px;
+}
+
+.footer {
+  background-color: var(--ifm-color-primary-darkest);
+}