Add option to run examples directly with binder (#3427)

* Add option to run examples directly with binder

The minified JS is from
https://github.com/naveen521kk/manim-binder

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* slight style changes

* update the js file to fix on chrome

Signed-off-by: Naveen M K <naveen521kk@gmail.com>

* show the run button as an cursor

* make the video to be 100% of the width

* Update manim/utils/docbuild/manim_directive.py

Co-authored-by: Benjamin Hackl <devel@benjamin-hackl.at>

* Add a "Make interactive" button instead of "Run" button

Clicking on the "Make interactive" button show the code-editor and "run" button

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* update margin for run interactive button

---------

Signed-off-by: Naveen M K <naveen521kk@gmail.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Hackl <devel@benjamin-hackl.at>

docs/source/_static/custom.css

@@ -82,3 +82,22 @@ h4, h5, h6{
 .sidebar-tree a.internal.reference {
     display: table-cell;
 }
+
+.manim-binder-button {
+    text-transform: capitalize;
+    padding: 10px 20px;
+    margin: 10px 0;
+}
+
+.manim-binder-wrapper {
+    background-color: var(--color-code-background);
+    color: var(--color-code-foreground);
+}
+
+.manim-binder-title {
+    margin-top: 0;
+}
+
+.manim-binder-button-wrapper {
+    margin: 0px 10px;
+}

docs/source/_static/manim-binder.min.js.LICENSE.txt

@@ -0,0 +1,6 @@
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */

docs/source/conf.py

@@ -172,8 +172,6 @@ inheritance_edge_attrs = {
     "penwidth": 1,
 }
 
-html_js_files = [
-    "responsiveSvg.js",
-]
+html_js_files = ["responsiveSvg.js"]
 
 graphviz_output_format = "svg"

manim/utils/docbuild/manim_directive.py

@@ -85,6 +85,7 @@ import os
 import re
 import shutil
 import sys
+import textwrap
 from pathlib import Path
 from timeit import timeit
 
@@ -94,6 +95,7 @@ from docutils.parsers.rst import Directive, directives  # type: ignore
 from docutils.statemachine import StringList
 
 from manim import QUALITIES
+from manim import __version__ as manim_version
 
 classnamedict = {}
 
@@ -168,16 +170,25 @@ class ManimDirective(Directive):
             or self.state.document.settings.env.app.builder.name == "gettext"
         )
         if should_skip:
+            clsname = self.arguments[0]
             node = SkipManimNode()
             self.state.nested_parse(
                 StringList(
                     [
-                        f"Placeholder block for ``{self.arguments[0]}``.",
+                        f"Placeholder block for ``{clsname}``.",
                         "",
                         ".. code-block:: python",
                         "",
                     ]
                     + ["    " + line for line in self.content]
+                    + [
+                        "",
+                        ".. raw:: html",
+                        "",
+                        f'    <pre data-manim-binder data-manim-classname="{clsname}">',
+                    ]
+                    + ["    " + line for line in self.content]
+                    + ["    </pre>"],
                 ),
                 self.content_offset,
                 node,
@@ -235,6 +246,13 @@ class ManimDirective(Directive):
             "",
             "    from manim import *\n",
             *("    " + line for line in self.content),
+            "",
+            ".. raw:: html",
+            "",
+            f'    <pre data-manim-binder data-manim-classname="{clsname}">',
+            *("    " + line for line in self.content),
+            "",
+            "    </pre>",
         ]
         source_block = "\n".join(source_block)
 
@@ -380,6 +398,16 @@ def setup(app):
     app.connect("builder-inited", _delete_rendering_times)
     app.connect("build-finished", _log_rendering_times)
 
+    app.add_js_file("manim-binder.min.js")
+    app.add_js_file(
+        None,
+        body=textwrap.dedent(
+            f"""\
+                window.initManimBinder({{branch: "v{manim_version}"}})
+            """
+        ).strip(),
+    )
+
     metadata = {"parallel_read_safe": False, "parallel_write_safe": True}
     return metadata