From c4e05a1b283bf9f9834cf5230da3759d69ac0f52 Mon Sep 17 00:00:00 2001 From: pdmurray Date: Mon, 13 Nov 2023 21:58:05 -0800 Subject: [PATCH] [Doc] Add docs index page Signed-off-by: pdmurray --- doc/source/_static/css/splash.css | 130 ++++++++++++++++++ doc/source/_static/js/splash.js | 26 ++++ doc/source/index.rst | 28 ++++ doc/source/{index.md => splash.html} | 189 ++++++++++++--------------- 4 files changed, 268 insertions(+), 105 deletions(-) create mode 100644 doc/source/_static/css/splash.css create mode 100644 doc/source/_static/js/splash.js create mode 100644 doc/source/index.rst rename doc/source/{index.md => splash.html} (74%) diff --git a/doc/source/_static/css/splash.css b/doc/source/_static/css/splash.css new file mode 100644 index 000000000000..cf091ace1b3d --- /dev/null +++ b/doc/source/_static/css/splash.css @@ -0,0 +1,130 @@ +.image-header { + display: flex; + flex-direction: row; + align-items: center; + padding-left: 16px; + padding-right:16px; + gap: 16px; +} + +.info-box { + background-color: var(--pst-color-surface); + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); + border-radius: 8px; + padding: 20px; +} + +.info-box:hover{ + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); +} + +.no-underline{ + text-decoration: none; +} +.no-underline:hover{ + text-decoration: none; +} + +.icon-hover:hover{ + height: 30px ; + width: 30px; +} + +.info-box-2 { + background-color: var(--pst-color-surface); + border-radius: 8px; + padding-right: 16px; + padding-left: 16px; + padding-bottom: 24px; + padding-top: 4px; +} + + +.bold-link { + color: var(--pst-color-link) !important; + font-weight: 600; +} + +.community-box { + border: 1px solid var(--pst-color-border); + border-radius: 8px; + display: flex; + margin-bottom: 16px; +} + +.community-box:hover { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); + text-decoration: none; +} + +.community-box p { + margin-top: 1rem !important; +} + +.tab-pane pre { + margin: 0; + padding: 0; + max-height: 252px; + overflow-y: auto; + animation: fadeEffect 1s; /* Fading effect takes 1 second */ +} + +.grid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 16px; +} + +.grid-item { +padding: 20px; +} + +.nav-pills { + background-color: var(--pst-color-surface); + padding: 8px; + border-bottom:none; + border-radius: 8px; +} + +.nav-pills .nav-link.active { + background-color: var(--pst-color-background) !important; + box-shadow: 0px 3px 14px 2px var(--pst-color-shadow); + border-radius: 8px; + padding-top: 1rem; + padding-bottom: 1rem; + color: var(--pst-color-text-base); + font-weight: 500; +} + +#v-pills-tab > .nav-link:hover { + text-decoration: none; +} + +#v-pills-tab > a { + cursor: pointer; +} + +#v-pills-tab > .nav-link { + color: var(--pst-color-text-base); +} + +#v-pills-tabContent { + box-shadow: 0px 6px 30px 5px var(--pst-color-shadow); + border-radius:8px; +} + +#v-pills-data { + user-select: none; +} + +/* Go from zero to full opacity */ +@keyframes fadeEffect { + from {opacity: 0;} + to {opacity: 1;} +} + +#ray-intro-video { + width: 100%; + height: 100%; + border-radius: 10px; +} diff --git a/doc/source/_static/js/splash.js b/doc/source/_static/js/splash.js new file mode 100644 index 000000000000..b41a72a20045 --- /dev/null +++ b/doc/source/_static/js/splash.js @@ -0,0 +1,26 @@ +function animateTabs() { + const tabs = Array.from(document.getElementById("v-pills-tab").children) + const contentTabs = Array.from(document.getElementById("v-pills-tabContent").children) + + tabs.forEach((item, index) => { + item.onclick = () => { + tabs.forEach((tab, i) => { + if (i === index) { + item.classList.add('active') + } else { + tab.classList.remove('active') + } + }) + contentTabs.forEach((tab, i) => { + if (i === index) { + tab.classList.add('active', 'show') + } else { + tab.classList.remove('active', 'show') + } + }) + } + }) +} + +document.addEventListener("DOMContentLoaded", animateTabs) +document.addEventListener("DOMContentLoaded", () => hljs.highlightAll()) diff --git a/doc/source/index.rst b/doc/source/index.rst new file mode 100644 index 000000000000..1a8ba42fc0f0 --- /dev/null +++ b/doc/source/index.rst @@ -0,0 +1,28 @@ +:html_theme.sidebar_secondary.remove: + +.. title:: Welcome to Ray! + +.. toctree:: + :hidden: + + Overview + Getting Started + Installation + Use Cases + Example Gallery + Ecosystem + Ray Core + Ray Data + Ray Train + Ray Tune + Ray Serve + Ray RLlib + More Libraries + Ray Clusters + Monitoring and Debugging + Developer Guides + Glossary + Security + +.. raw:: html + :file: splash.html diff --git a/doc/source/index.md b/doc/source/splash.html similarity index 74% rename from doc/source/index.md rename to doc/source/splash.html index 0018abe0e202..7122e59e5549 100644 --- a/doc/source/index.md +++ b/doc/source/splash.html @@ -1,85 +1,65 @@ -```{title} Welcome to Ray! -``` - -```{raw} html - - - - - - - - - Welcome to Ray! -
-
-
-
-

Welcome to Ray!

-

Ray is an open-source unified framework for scaling AI and Python applications. - It provides the compute layer for parallel processing so that - you don’t need to be a distributed systems expert. -

-
- - - - - - - - - +
+
+
+
+

Welcome to Ray!

+

Ray is an open-source unified framework for scaling AI and Python applications. + It provides the compute layer for parallel processing so that + you don’t need to be a distributed systems expert. +

+
+ + + + + + + + + +
+
+
+
-
-
-
-
-
-

Scaling with Ray

-
- +
+ -
-
-
- 

+
+
+
+
+ 

 from typing import Dict
 import numpy as np
 
@@ -121,7 +101,7 @@ 
Scaling with Ray

                   Learn more  |  API references
- + Open in Github
@@ -154,7 +134,7 @@

Scaling with Ray

Learn more | API references
- + Open in colab
@@ -191,7 +171,7 @@

Scaling with Ray

Learn more | API references
- + Open in Github
@@ -241,12 +221,12 @@

Scaling with Ray

Learn more | API references
- + Open in Github
-
-
+
+ 

 from ray.rllib.algorithms.ppo import PPOConfig
@@ -274,34 +254,34 @@ 
Scaling with Ray

                   Learn more  |  API references
- + Open in Github
-
+
- - + +
- +

Getting Started

- +

Learn basics

-

Understand how the Ray framework scales your ML workflows.

-

Learn more >

-
+

Understand how the Ray framework scales your ML workflows.

+

Learn more >

+
@@ -309,14 +289,14 @@

Install Ray

Installation guide >

 -

Try it out

-

Experiment with Ray with an introductory notebook.

-

Open the notebook>

+

Experiment with Ray with an introductory notebook.

+

Open the notebook>
@@ -331,7 +311,7 @@

Beyond the basics

Ray Libraries

-

Scale the entire ML pipeline from data ingest to model serving with high-level Python APIs that integrate with popular ecosystem frameworks.

+

Scale the entire ML pipeline from data ingest to model serving with high-level Python APIs that integrate with popular ecosystem frameworks.

Learn more about Ray Libraries>
@@ -340,15 +320,15 @@

Ray Libraries

Ray Core

Scale generic Python code with simple, foundational primitives that enable a high degree of control for building distributed applications or custom platforms.

- Learn more about Core > + Learn more about Core >

Ray Clusters

-

Deploy a Ray cluster on AWS, GCP, Azure or kubernetes from a laptop to a large cluster to seamlessly scale workloads for production

- Learn more about clusters > +

Deploy a Ray cluster on AWS, GCP, Azure or kubernetes from a laptop to a large cluster to seamlessly scale workloads for production

+ Learn more about clusters >
@@ -357,62 +337,61 @@

Ray Clusters

Getting involved

- +

Follow us on Twitter

-
-
+ + -

Open an issue

-
+
- -```