[docs] sphinx design 1/n (ray-project#34625)

Signed-off-by: Jack He <[email protected]>
ProjectsByJackHe · May 4, 2023 · e4e97bc · e4e97bc
1 parent 8995867
commit e4e97bc
Show file tree

Hide file tree

Showing 10 changed files with 465 additions and 413 deletions.
diff --git a/ci/ci.sh b/ci/ci.sh
@@ -308,7 +308,8 @@ build_sphinx_docs() {
     if [ "${OSTYPE}" = msys ]; then
       echo "WARNING: Documentation not built on Windows due to currently-unresolved issues"
     else
-      FAST=True make html
+      # TODO: revert to "make html" once "sphinx_panels" plugin is fully removed.
+      FAST=True make develop
       pip install datasets==2.0.0
       RAY_MOCK_MODULES=0 RAY_DEDUP_LOGS=0 make doctest
     fi

diff --git a/doc/requirements-doc.txt b/doc/requirements-doc.txt
@@ -65,6 +65,7 @@ sphinxcontrib-redoc==1.6.0
 sphinx-tabs==3.4.0
 sphinx-remove-toctrees==0.0.3
 autodoc_pydantic==1.6.1
+sphinx_design==0.4.1
 
 # MyST
 myst-parser==0.15.2

diff --git a/doc/source/conf.py b/doc/source/conf.py
@@ -38,7 +38,6 @@
 
 extensions = [
     "callouts",  # custom extension from _ext folder
-    "sphinx_panels",
     "sphinx.ext.autodoc",
     "sphinx.ext.viewcode",
     "sphinx.ext.napoleon",
@@ -58,6 +57,8 @@
     "sphinxcontrib.redoc",
     "sphinx_tabs.tabs",
     "sphinx_remove_toctrees",
+    "sphinx_panels",
+    "sphinx_design",
 ]
 
 # Prune deep toc-trees on demand for smaller html and faster builds.

diff --git a/doc/source/data/examples/index.rst b/doc/source/data/examples/index.rst
@@ -17,50 +17,68 @@ modalities and types. Here you will find a few end-to-end examples of some basic
 processing with Ray Data on tabular data, text (coming soon!), and imagery (coming
 soon!).
 
-.. panels::
-    :container: container pb-4
-    :column: col-md-4 px-2 py-2
-    :img-top-cls: pt-5 w-75 d-block mx-auto
-
-    ---
-    :img-top: /images/taxi.png
-
-    +++
-    .. link-button:: nyc_taxi_basic_processing
-        :type: ref
-        :text: Processing the NYC taxi dataset
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: /images/taxi.png
-
-    +++
-    .. link-button:: batch_training
-        :type: ref
-        :text: Batch Training with Ray Data
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: /images/ocr.jpg
-
-    +++
-    .. link-button:: ocr_example
-        :type: ref
-        :text: Scaling OCR with Ray Data
-        :classes: btn-link btn-block stretched-link
+.. grid:: 3
+    :gutter: 2
+    :class-container: container pb-4
+
+    .. grid-item-card::
+        :img-top: /images/taxi.png
+        :class-img-top: pt-5 w-75 d-block mx-auto
+
+        +++
+        .. button-ref:: nyc_taxi_basic_processing
+            :ref-type: doc
+            :color: primary
+            :outline:
+            :expand:
+
+            Processing the NYC taxi dataset
+
+    .. grid-item-card::
+        :img-top: /images/taxi.png
+        :class-img-top: pt-5 w-75 d-block mx-auto
+
+        +++
+        .. button-ref:: batch_training
+            :ref-type: doc
+            :color: primary
+            :outline:
+            :expand:
+
+            Batch Training with Ray Data
+
+    .. grid-item-card::
+        :img-top: /images/ocr.jpg
+        :class-img-top: pt-5 w-75 d-block mx-auto
+
+        +++
+        .. button-ref:: ocr_example
+            :ref-type: doc
+            :color: primary
+            :outline:
+            :expand:
+
+            Scaling OCR with Ray Data
+
 
 
 Other Examples
 --------------
 
-.. panels::
-    :container: container pb-4
-    :column: col-md-4 px-2 py-2
-    :img-top-cls: pt-5 w-75 d-block mx-auto
 
-    ---
-    :img-top: ../images/datastream-arch.svg
+.. grid:: 3
+    :gutter: 2
+    :class-container: container pb-4
+
+    .. grid-item-card::
+        :img-top: ../images/datastream-arch.svg
+        :class-img-top: pt-5 w-75 d-block mx-auto
+
+        +++
+        .. button-ref:: random-access
+            :ref-type: doc
+            :color: primary
+            :outline:
+            :expand:
 
-    +++
-    .. link-button:: random-access
-        :type: ref
-        :text: Random Data Access (Experimental)
-        :classes: btn-link btn-block stretched-link
+            Random Data Access (Experimental)