docs: add a landing page to the documentation

docs/_static/custom.css

@@ -6,6 +6,30 @@ div.jupyter_container.docutils {
   padding: 0.4em;
 }
 
+/* Hero from Homepage */
+#hero {
+  display: flex;
+  flex-direction: row;
+  min-height: min(calc(80vh), 1100px);
+}
+
+#hero img {
+  border: 1px solid var(--pst-color-border);
+  border-radius: 0.25em;
+}
+
+#hero-left {
+  max-width: 476px;
+  width: 40%;
+  margin: auto 1em;
+}
+
+#hero-right {
+  min-width: 476px;
+  width: 60%;
+  margin: auto 1em;
+}
+
 /* customize primary color to align with the vuetify website */
 html[data-theme="light"] {
   --pst-color-primary: #1867c0;

docs/conf.py

@@ -15,7 +15,7 @@
 
 # -- General configuration ---------------------------------------------------
 
-extensions = ["jupyter_sphinx"]
+extensions = ["jupyter_sphinx", "sphinx_rtd_theme", "sphinx_design"]
 templates_path = ["_templates"]
 exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
 
@@ -49,6 +49,9 @@
             "icon": "fa-brands fa-python",
         },
     ],
+    "logo": {
+        "text": "ipyvuetify",
+    },
 }
 html_context = {
     "github_user": "widgetti",

docs/index.rst

@@ -1,7 +1,68 @@
+:html_theme.sidebar_secondary.remove:
+
+.. raw:: html
+
+    <!-- CSS overwrite for the landing page only -->
+    <style>
+    /* Make homepage wider */
+    .bd-main .bd-content .bd-article-container {
+        max-width: 80%;
+    }
+    /* hide the main title */
+    h1 {display: none;}
+    h2 {
+        font-weight: bold;
+        font-size: var(--pst-font-size-h1);
+    }
+    </style>
+
 ipyvuetify: Jupyter widgets based on Vuetify UI components
 ==========================================================
 
+.. raw:: html
+
+    <div id="hero">
+        <div id="hero-left">
+
+IpyVuetify
+----------
+
+Jupyter widgets based on Vuetify UI components
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+**Ipyvuetify** is a widget library for making modern-looking GUIs in Jupyter notebooks (`classic <https://github.com/jupyter/notebook>`__, `lab <https://github.com/jupyterlab/jupyterlab>`__, `lite <https://github.com/jupyterlite/jupyterlite>`__) and dashboards (`Voilà <https://github.com/voila-dashboards/voila>`__, `Voici <https://github.com/voila-dashboards/voici>`__). Based on the `Vuetify UI <https://v2.vuetifyjs.com/en/>`__ library, it extends the standard Jupyter widget library with additional widgets that are more customizable and composable.
+
+.. raw:: html
+
+    <!-- these button are only displayed in the html build -->
+    <div class="homepage-button-container" style="display: none;">
+        <div class="homepage-button-container-row">
+            <a href="#" class="btn btn-lg sd-btn-primary">Get Started</a>
+            <a href="#" class="btn btn-lg sd-btn-outline-primary">See Gallery</a>
+        </div>
+        <div class="homepage-button-container-row">
+            <a href="#">See API Reference →</a>
+        </div>
+    </div>
+
+.. raw:: html
+
+    </div> <!-- hero-left -->
+    <div id="hero-right">
+
+.. image:: images/light-demo.gif
+    :class: only-light
+
+.. image:: images/dark-demo.gif
+    :class: only-dark
+
+.. raw:: html
+
+    </div> <!-- hero-right -->
+    </div> <!-- hero -->
+
 .. toctree::
+    :hidden:
 
     introduction
     installation

pyproject.toml

@@ -41,7 +41,13 @@ content-type = "text/markdown"
 [project.optional-dependencies]
 dev = ["nox", "pre-commit", "mypy"]
 test = ["pytest", "pytest-playwright", "nbformat<5.10", "jupyterlab<4", "solara[pytest]"]
-doc = ["sphinx<7", "jupyter-sphinx", "ipykernel", "pydata-sphinx-theme"]
+doc = [
+    "sphinx<7",
+    "jupyter-sphinx",
+    "ipykernel",
+    "pydata-sphinx-theme",
+    "sphinx-design"
+]
 
 [tool.setuptools]
 include-package-data = true