Merge pull request #131 from Carreau/misc-css

Misc parsing warnings.

Author: steppi

docs/_static/try_examples.css

@@ -1,21 +1,64 @@
+:root {
+  --jupyter-light-primary: #f7dc1e;
+  --jupyter-light-primary-muted: #fff221;
+}
+
 .try_examples_button {
-    background-color: #f7dc1e;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 15px;
-    font-family: vibur;
-    font-size: larger;
-    box-shadow: 0 2px 5px rgba(108,108,108,0.2);
+  background-color: var(--jupyter-light-primary);
+  border: none;
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-family: vibur;
+  font-size: larger;
+  box-shadow: 0 2px 5px rgba(108, 108, 108, 0.2);
 }
 
 .try_examples_button:hover {
-    background-color: #fff221;
-    transform: scale(1.02);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    cursor: pointer;
+  background-color: var(--jupyter-light-primary-muted);
+  transform: scale(1.02);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
 }
 
 .try_examples_button_container {
-    display: flex;
-    justify-content: flex-end;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.try_examples_outer_container,
+.try_examples_outer_iframe {
+  flex-direction: column-reverse;
+  display: flex;
+}
+
+/* override class + hidden, otherwise any attempt  of custom css to
+ * set the display mode would lead to the iframe/container always visible.
+ * */
+
+.try_examples_outer_container.hidden,
+.try_examples_outer_iframe.hidden {
+  display: none;
+}
+
+/* customisation when the buttons containers have the blue-bottom class */
+
+/* here we just show how to:
+ *   - change the color of the button
+ *   - change the color on hover.
+ *
+ *  As we _used to have_ option to show the button above/below, and left/right
+ *  we show how to achieve the same with flex-direction
+ */
+
+.blue-bottom .try_examples_button_container {
+  justify-content: flex-start;
+}
+
+.blue-bottom .try_examples_button {
+  background-color: #00bcd4;
+  color: white;
+}
+
+.blue-bottom button.try_examples_button:hover {
+  background-color: #2196f3;
 }

docs/configuration.md

@@ -33,7 +33,7 @@ Furthermore, this automatically installs any labextension that it founds, for ex
 
 Say you want to install NumPy, Matplotlib and ipycanvas, it can be done by creating the environment.yml file with the following content:
 
-```yml
+```yaml
 name: xeus-python-kernel
 channels:
   - https://repo.mamba.pm/emscripten-forge

docs/directives/try_examples.md

@@ -125,6 +125,7 @@ Here's an example with some options set
 .. try_examples::
     :button_text: Try it in your browser!
     :height: 400px
+    :example_class: blue-bottom
 
     The button text has changed and the height now exceeds the size of the content.
 
@@ -133,6 +134,11 @@ Here's an example with some options set
     >>> x + y
     4
 
+    We've also added the ``blue-bottom`` class, the button should appear as blue,
+    below the examples, and on the left side of the screen.
+
+    See ``try_examples.css`` in the Repository to see how we achieved this via
+    custom css.
 ```
 
 and here is the result
@@ -141,6 +147,7 @@ and here is the result
 .. try_examples::
     :button_text: Try it in your browser!
     :height: 400px
+    :example_class: blue-bottom
 
     The button text has changed and the height now exceeds the size of the content.
 
@@ -149,6 +156,11 @@ and here is the result
     >>> x + y
     4
 
+    We've also added the ``blue-bottom`` class, the button should appear as blue,
+    below the examples, and on the left side of the screen.
+
+    See ``try_examples.css`` in the Repository to see how we achieved this via
+    custom css.
 ```
 
 
@@ -230,7 +242,7 @@ patterns, effectively disabling the interactive documentation. In the provided e
   in a Jupyterlite kernel.
 
 * The pattern `"^/stable/reference/generated/example.html"` targets a particular url
-  in the documentation for the latest stable release. 
+  in the documentation for the latest stable release.
 
 Note that these patterns should match the [pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) of the url, not the full url. This is the path portion of
 the url. For instance, the pathname of https://jupyterlite-sphinx.readthedocs.io/en/latest/directives/try_examples.html is `/en/latest/directives/try_examples.html`.

jupyterlite_sphinx/_try_examples.py

@@ -36,7 +36,7 @@ def examples_to_notebook(input_lines):
     >>>            "\n",
     >>>            ".. math::\n",
     >>>            "\n",
-    >>>            "    x = 2,\;y = 2
+    >>>            "    x = 2,\\;y = 2
     >>>            "\n",
     >>>            "    x + y = 4\n",
     >>>          ]

jupyterlite_sphinx/jupyterlite_sphinx.py

@@ -394,7 +394,7 @@ def run(self):
         notebooks_path = "../notebooks/"
 
         content_container_node = nodes.container(
-            classes=["try_examples_outer_container"]
+            classes=["try_examples_outer_container", example_class]
         )
         examples_div_id = uuid4()
         content_container_node["ids"].append(examples_div_id)
@@ -430,7 +430,7 @@ def run(self):
         # Parent container (initially hidden)
         iframe_parent_container_div_start = (
             f'<div id="{iframe_parent_div_id}" '
-            f'class="try_examples_outer_container {example_class} hidden">'
+            f'class="try_examples_outer_iframe {example_class} hidden">'
         )
 
         iframe_parent_container_div_end = "</div>"