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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Benjamin Hackl <[email protected]>
ManimCommunity · Nov 10, 2023 · adfef5e · adfef5e
1 parent 20028ce
commit adfef5e
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 4 deletions.
diff --git a/docs/source/_static/custom.css b/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;
+}
diff --git a/docs/source/_static/manim-binder.min.js b/docs/source/_static/manim-binder.min.js
diff --git a/docs/source/_static/manim-binder.min.js.LICENSE.txt b/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.
+ */
diff --git a/docs/source/_static/manim-binder.min.js.map b/docs/source/_static/manim-binder.min.js.map
diff --git a/docs/source/conf.py b/docs/source/conf.py
@@ -172,8 +172,6 @@
     "penwidth": 1,
 }
 
-html_js_files = [
-    "responsiveSvg.js",
-]
+html_js_files = ["responsiveSvg.js"]
 
 graphviz_output_format = "svg"
diff --git a/manim/utils/docbuild/manim_directive.py b/manim/utils/docbuild/manim_directive.py
@@ -85,6 +85,7 @@ def construct(self):
 import re
 import shutil
 import sys
+import textwrap
 from pathlib import Path
 from timeit import timeit
 
@@ -94,6 +95,7 @@ def construct(self):
 from docutils.statemachine import StringList
 
 from manim import QUALITIES
+from manim import __version__ as manim_version
 
 classnamedict = {}
 
@@ -168,16 +170,25 @@ def run(self):
             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 @@ def run(self):
             "",
             "    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