flyteorg · cosmicBboy · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024
diff --git a/docs/_static/custom.css b/docs/_static/custom.css
@@ -0,0 +1,113 @@
+html[data-theme=light], html[data-theme=dark] {
+    --pst-color-primary: #7652A2;
+    --pst-color-link: #7652A2;
+    --pst-color-link-hover: #7652A2;
+}
+
+
+/* Styling for page layout */
+.bd-page-width {
+    max-width: 100%;
+}
+
+/* style the main title logo */
+.navbar-brand:hover, .navbar-brand:visited:hover {
+    text-decoration: none;
+}
+
+.navbar-brand img {
+    height: 70%;
+}
+
+/*
+Center the main page content only when the sidebar has the .hide-on-wide
+class, which is only on the root page
+*/
+.bd-sidebar.hide-on-wide + main.bd-main .bd-content {
+    justify-content: center;
+}
+
+/* left sidebar nav width */
+.bd-sidebar-primary {
+    width: 15%;
+    min-width: 250px;
+    padding: 1rem;
+}
+
+/* make the scroll bar sleeker */
+.bd-sidebar::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+    background: transparent;
+}
+
+.bd-sidebar::-webkit-scrollbar-thumb {
+    background: var(--pst-color-border);
+}
+
+/* make sure page content fills up the page */
+.bd-main .bd-content {
+    justify-content: left;
+}
+
+.bd-main .bd-content .bd-article-container {
+    padding: 2.5rem;
+    max-width: 75em;
+}
+
+/* aligh navbar items with the sidebar */
+.bd-header .navbar-header-items__start {
+    width: 15%;
+    min-width: 250px;
+}
+
+/* styles for the main page subtitle and badges */
+div.sd-card.sd-shadow-sm.subtitle-and-badges {
+    border: none;
+    box-shadow: none !important;
+}
+
+div.subtitle-and-badges .sd-card-body {
+    padding: 0;
+}
+
+div.subtitle-and-badges .sd-card-title {
+    color: #808080;
+    font-weight: 350 !important;
+    font-size: 25px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+div.subtitle-and-badges a {
+    text-decoration: none;
+}
+
+div.subtitle-and-badges a img {
+    margin: 2px 0;
+}
+
+/* update table hover color to neutral color */
+.table tbody tr:hover {
+    background-color: var(--pst-color-table-inner-border);
+}
+
+/* custom footer style */
+div.custom-footer {
+    text-align: center;
+    background-color: var(--pst-color-surface);
+    padding: 15px 0;
+    color: var(--pst-color-text-muted);
+}
+
+/* anchor link hover style */
+a:hover,
+nav.bd-links li>a:active,
+nav.bd-links li>a:hover,
+.bd-header ul.navbar-nav>li.nav-item>.nav-link:hover {
+    color: var(--pst-color-primary);
+}
+
+.bd-header ul.navbar-nav>li.nav-item>.nav-link:hover:before {
+    border-bottom: max(3px, .1875rem, .12em) solid var(--pst-color-primary);
+}
diff --git a/docs/_static/custom.js b/docs/_static/custom.js
@@ -0,0 +1,10 @@
+window.addEventListener("DOMContentLoaded", function() {
+    // Select all <a> elements with class "external"
+    var externalLinks = document.querySelectorAll("a.external");
+
+    // Loop through each <a> element with class "external"
+    externalLinks.forEach(function(link) {
+        // Set the target attribute to "_blank"
+        link.setAttribute("target", "_blank");
+    });
+});
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
diff --git a/docs/api/index.md b/docs/api/index.md
@@ -2,6 +2,7 @@
 
 
 ::::{grid} 2
+:gutter: 2
 
 :::{grid-item-card} {octicon}`rocket` Flytekit SDK
 :link: flytekit/docs_index

diff --git a/docs/conf.py b/docs/conf.py
@@ -385,14 +385,31 @@
 
 html_theme_options = {
     # custom flyteorg pydata theme options
-    "github_url": "https://github.com/flyteorg/flyte",
+    # "github_url": "https://github.com/flyteorg/flyte",
     "logo": {
-        "text": "Flyte Docs",
+        "text": "Flyte",
     },
+    "external_links": [
+        {"name": "Flyte", "url": "https://flyte.org"},
+    ],
     "icon_links": [
         {
             "name": "GitHub",
+            "icon": "fa-brands fa-github",
+            "type": "fontawesome",
             "url": "https://github.com/flyteorg/flyte",
+        },
+        {
+            "name": "Slack",
+            "url": "https://slack.flyte.org",
+            "icon": "fa-brands fa-slack",
+            "type": "fontawesome",
+        },
+        {
+            "name": "Flyte",
+            "url": "https://flyte.org",
+            "icon": "fa-solid fa-dragon",
+            "type": "fontawesome",
         }
     ],
     "use_edit_page_button": True,
@@ -403,9 +420,9 @@
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
-# html_static_path = []
-# html_css_files = []
-# html_js_files = []
+html_static_path = ["_static"]
+html_css_files = ["custom.css"]
+html_js_files = ["custom.js"]
 
 # Custom sidebar templates, must be a dictionary that maps document names
 # to template names.

diff --git a/docs/index.md b/docs/index.md
@@ -1,54 +1,55 @@
 # Welcome to Flyte!
 
-```{eval-rst}
-.. raw:: html
+````{card} The highly scalable and flexible workflow orchestrator that unifies data, ML and analytics.
+:class-card: subtitle-and-badges
 
-   <p style="color: #808080; font-weight: 350; font-size: 25px; padding-top: 10px; padding-bottom: 10px;">
-   The highly scalable and flexible workflow orchestrator that unifies data, ML and analytics.
-   </p>
-
-.. image:: https://img.shields.io/badge/Graduate%20Project-Linux%20Foundation-purple?style=for-the-badge
-    :target: https://lfaidata.foundation/projects/flyte/
-    :alt: Linux Foundation
-
-.. image:: https://img.shields.io/github/stars/flyteorg/flyte?label=github&logo=github&style=for-the-badge
-   :target: https://github.com/flyteorg/flyte
-   :alt: GitHub Repo stars
+```{image} https://img.shields.io/badge/Graduate%20Project-Linux%20Foundation-purple?style=for-the-badge
+:target: https://lfaidata.foundation/projects/flyte/
+:alt: Linux Foundation
+```
 
-.. image:: https://img.shields.io/github/release/flyteorg/flyte.svg?style=for-the-badge&color=blue
-   :target: https://github.com/flyteorg/flyte/releases/latest
-   :alt: Flyte Release
+```{image} https://img.shields.io/github/stars/flyteorg/flyte?label=github&logo=github&style=for-the-badge
+:target: https://github.com/flyteorg/flyte
+:alt: GitHub Repo stars
+```
 
-.. image:: https://img.shields.io/github/actions/workflow/status/flyteorg/flyte/tests.yml?label=tests&style=for-the-badge
-   :target: https://github.com/flyteorg/flyte/actions/workflows/tests.yml
-   :alt: GitHub Test Status
+```{image} https://img.shields.io/github/release/flyteorg/flyte.svg?style=for-the-badge&color=blue
+:target: https://github.com/flyteorg/flyte/releases/latest
+:alt: Flyte Release
+```
 
-.. image:: https://img.shields.io/github/actions/workflow/status/flyteorg/flyte/sandbox.yml?label=Sandbox%20docker%20image&style=for-the-badge
-   :target: https://github.com/flyteorg/flyte/actions/workflows/sandbox.yml
-   :alt: GitHub Sandbox Status
+```{image} https://img.shields.io/github/actions/workflow/status/flyteorg/flyte/tests.yml?label=tests&style=for-the-badge
+:target: https://github.com/flyteorg/flyte/actions/workflows/tests.yml
+:alt: GitHub Test Status
+```
 
-.. image:: https://img.shields.io/github/milestones/closed/flyteorg/flyte?style=for-the-badge
-    :target: https://github.com/flyteorg/flyte/milestones?state=closed
-    :alt: Completed Milestones
+```{image} https://img.shields.io/github/actions/workflow/status/flyteorg/flyte/sandbox.yml?label=Sandbox%20docker%20image&style=for-the-badge
+:target: https://github.com/flyteorg/flyte/actions/workflows/sandbox.yml
+:alt: GitHub Sandbox Status
+```
 
-.. image:: https://img.shields.io/pypi/dm/flytekit?color=blue&label=flytekit%20downloads&style=for-the-badge&logo=pypi&logoColor=white
-   :target: https://github.com/flyteorg/flytekit
-   :alt: Flytekit Downloads
+```{image} https://img.shields.io/github/milestones/closed/flyteorg/flyte?style=for-the-badge
+:target: https://github.com/flyteorg/flyte/milestones?state=closed
+:alt: Completed Milestones
+```
 
-.. image:: https://img.shields.io/badge/Slack-Chat-pink?style=for-the-badge&logo=slack
-    :target: https://slack.flyte.org
-    :alt: Flyte Slack
+```{image} https://img.shields.io/pypi/dm/flytekit?color=blue&label=flytekit%20downloads&style=for-the-badge&logo=pypi&logoColor=white
+:target: https://github.com/flyteorg/flytekit
+:alt: Flytekit Downloads
+```
 
-.. image:: https://img.shields.io/badge/LICENSE-Apache2.0-ff69b4.svg?style=for-the-badge
-    :target: http://www.apache.org/licenses/LICENSE-2.0.html
-    :alt: License
+```{image} https://img.shields.io/badge/Slack-Chat-pink?style=for-the-badge&logo=slack
+:target: https://slack.flyte.org
+:alt: Flyte Slack
+```
 
-.. |br| raw:: html
+```{image} https://img.shields.io/badge/LICENSE-Apache2.0-ff69b4.svg?style=for-the-badge
+:target: http://www.apache.org/licenses/LICENSE-2.0.html
+:alt: License
+```
 
-   <br>
-   <br>
+````
 
-```
 
 [Flyte](https://github.com/flyteorg/flyte) is an open-source, Kubernetes-native
 workflow orchestrator implemented in [Go](https://go.dev/). It enables highly

diff --git a/docs/user_guide/index.md b/docs/user_guide/index.md
@@ -94,7 +94,6 @@ concepts/component_architecture/index
 :hidden:
 
 flytekit-java <https://github.com/spotify/flytekit-java>
-unionml <https://unionml.readthedocs.io/>
 pterodactyl <https://github.com/NotMatthewGriffin/pterodactyl>
 latch sdk <https://docs.latch.bio/>
 ```