PyScript Integrated Component

PyAr · Jun 19, 2024 · 8c90f10 · 8c90f10
1 parent 912c7df
commit 8c90f10
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 2 deletions.
diff --git a/_ext/pyscript.py b/_ext/pyscript.py
@@ -0,0 +1,49 @@
+from docutils import nodes
+from docutils.parsers.rst import Directive
+
+
+class PyScriptDirective(Directive):
+    has_content = True
+
+    def run(self):
+        self.assert_has_content()
+        code = '\n'.join(self.content)
+
+        # Create the necessary HTML and JavaScript code for the PyScript
+        html = f'''
+        <div>
+            <iframe height="600px" width="100%" srcdoc='
+                <!DOCTYPE html>
+                    <html>
+                    <head>
+                        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+                        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
+                        <style>
+                            .py-repl-run-button{{opacity: 1;}}
+                            .py-repl-output{{margin-top: 1rem;background-color: #000;color: #fff;font-family: monospace;padding: 0.5rem;min-height: 10em;overflow: auto;}}
+                        </style>
+                    </head>
+                    <body>
+                        <py-config>
+                            terminal = false
+                            packages = ["pandas", "matplotlib", "numpy"]
+                        </py-config>
+                        <py-repl id="code">
+                            {code}
+                        </py-repl>
+                    </body>
+                    </html>'
+                    style="border: 8px solid #ccc;border-radius: 10px;"
+                >
+            </iframe>
+        </div>
+        '''
+
+        # Create a raw node that will contain the HTML and JavaScript code
+        raw_node = nodes.raw('', html, format='html')
+
+        return [raw_node]
+
+
+def setup(app):
+    app.add_directive('pyscript', PyScriptDirective)
diff --git a/_sources/index.rst b/_sources/index.rst
@@ -31,4 +31,5 @@ Contenidos:
    :maxdepth: 1
 
    index_es
-   index_en
+   index_en
+   pyComponent
diff --git a/_sources/pyComponent.rst b/_sources/pyComponent.rst
@@ -0,0 +1,7 @@
+-------------------
+PyScript Component
+-------------------
+
+.. pyscript::
+
+    print("Hello, World!")
diff --git a/conf.py b/conf.py
@@ -17,6 +17,7 @@
 # add these directories to sys.path here. If the directory is relative to the
 # documentation root, use os.path.abspath to make it absolute, like shown here.
 # sys.path.insert(0, os.path.abspath('../modules'))
+sys.path.insert(0, os.path.abspath('_ext'))
 
 from runestone import runestone_static_dirs, runestone_extensions, setup
 import pkg_resources
@@ -28,7 +29,7 @@
 
 # Add any Sphinx extension module names here, as strings. They can be extensions
 # coming with Sphinx (named 'sphinx.ext.*') or your custom ones.
-extensions = ["sphinx.ext.mathjax"] + runestone_extensions()
+extensions = ["sphinx.ext.mathjax", "pyscript"] + runestone_extensions()
 
 # ,'runestone.video','runestone.reveal','runestone.poll','runestone.tabbedStuff','runestone.disqus','runestone.codelens','runestone.activecode', 'runestone.assess', 'runestone.animation','runestone.meta', 'runestone.parsons', 'runestone.blockly', 'runestone.livecode','runestone.accessibility']