Merge pull request #181 from CU-ESIIL/codex/embed-interactive-ndvi-example-in-docs

Embed interactive NDVI Plotly iframe in cube viewer docs

Author: ttuff

docs/dev/legacy_reference.md

@@ -470,7 +470,7 @@ cd.show_cube_lexcube(cube, cmap="RdBu_r")
 
 Lexcube widgets run only in live Python environments (JupyterLab, VS Code, Colab, Binder). They will not render on the static documentation site, so screenshots and Binder links are provided for reference.
 
-![Stylized Lexcube example](../img/lexcube_example.svg)
+![Stylized Lexcube example](../assets/img/lexcube_hero.png)
 
 *The SVG is a stylized capture so the documentation can ship a "screenshot" without introducing binary assets.*
 

docs/stylesheets/extra.css

@@ -31,3 +31,30 @@
   height: auto;
   max-height: 280px;
 }
+
+/* Responsive interactive embeds (Plotly HTML iframes) */
+.interactive-embed {
+  margin: 1rem 0 2rem 0;
+}
+
+.interactive-embed iframe {
+  width: 100%;
+  height: 560px;
+  border: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--md-shadow-z2);
+  background: var(--md-default-bg-color);
+}
+
+@media (max-width: 900px) {
+  .interactive-embed iframe {
+    height: 420px;
+  }
+}
+
+.interactive-embed__fallback {
+  margin: 0.5rem 0 0 0;
+  font-size: 0.85em;
+  opacity: 0.85;
+}

docs/viz/cube_viewer.md

@@ -24,6 +24,18 @@ ndvi = cd.ndvi(
 pipe(ndvi) | v.plot()
 ```
 
+<div class="interactive-embed">
+  <iframe
+    src="../assets/figures/ndvi_1_year.html"
+    title="Interactive NDVI example (1 year)"
+    loading="lazy"
+    allowfullscreen
+  ></iframe>
+  <p class="interactive-embed__fallback">
+    If the interactive view doesn’t load, <a href="../assets/figures/ndvi_1_year.html" target="_blank" rel="noopener">open it in a new tab</a>.
+  </p>
+</div>
+
 ## Controls
 
 - **Rotate:** click + drag (or touch and drag) anywhere on the cube.