diff --git a/demos/readme/index.html b/demos/readme/index.html index f41cfb5..a83d6b0 100644 --- a/demos/readme/index.html +++ b/demos/readme/index.html @@ -195,7 +195,7 @@ } // Store cell data -globalThis.qpyodideCellDetails = [{"id":1,"code":"print(\"Hello Quarto-Pyodide World!\")","options":{"results":"markup","label":"","message":"true","dpi":72,"output":"true","comment":"","fig-cap":"","fig-width":7,"warning":"true","fig-height":5,"classes":"","out-width":"700px","context":"interactive","out-height":"","autorun":""}}]; +globalThis.qpyodideCellDetails = [{"id":1,"code":"print(\"Hello Quarto-Pyodide World!\")","options":{"output":"true","results":"markup","fig-height":5,"dpi":72,"out-width":"700px","autorun":"","label":"","message":"true","classes":"","warning":"true","fig-width":7,"comment":"","fig-cap":"","out-height":"","context":"interactive"}}]; diff --git a/index.html b/index.html index 78d1db8..905bb91 100644 --- a/index.html +++ b/index.html @@ -237,7 +237,7 @@ } // Store cell data -globalThis.qpyodideCellDetails = [{"code":"# Welcome to Python!\n\nprint(\"Hello, Quarto-Pyodide!\")\nprint(\"You've just entered the world of Python programming.\")\n\n# Let's make a graph\nimport matplotlib.pyplot as plt\nplt.plot([1, 2, 3, 4], [1, 4, 9, 16])\nplt.ylabel('Magic Numbers')\nplt.show()\n\n# Feel free to add your own code below and have fun with Python!","options":{"message":"true","label":"","out-height":"","warning":"true","context":"interactive","fig-height":5,"results":"markup","classes":"","autorun":"","output":"true","dpi":72,"fig-cap":"","fig-width":7,"out-width":"700px","comment":""},"id":1}]; +globalThis.qpyodideCellDetails = [{"code":"# Welcome to Python!\n\nprint(\"Hello, Quarto-Pyodide!\")\nprint(\"You've just entered the world of Python programming.\")\n\n# Let's make a graph\nimport matplotlib.pyplot as plt\nplt.plot([1, 2, 3, 4], [1, 4, 9, 16])\nplt.ylabel('Magic Numbers')\nplt.show()\n\n# Feel free to add your own code below and have fun with Python!","id":1,"options":{"dpi":72,"context":"interactive","out-height":"","fig-cap":"","warning":"true","autorun":"","label":"","message":"true","output":"true","classes":"","results":"markup","fig-width":7,"comment":"","out-width":"700px","fig-height":5}}]; diff --git a/qpyodide-code-cell-demo.html b/qpyodide-code-cell-demo.html index 57f3917..a59cc61 100644 --- a/qpyodide-code-cell-demo.html +++ b/qpyodide-code-cell-demo.html @@ -273,7 +273,7 @@ } // Store cell data -globalThis.qpyodideCellDetails = [{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"1 + 1","id":1},{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"1 + 1","id":2},{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"greet = 'Hello'\ngreet","id":3},{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"len(greet)","id":4},{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"def square(x):\n return x**2\n\nsquare(8)","id":5},{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"num_list = [1, 2, 3]\n[square(num)for num in num_list]","id":6},{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"import pandas as pd\n\ndf = pd.DataFrame({\n 'Name': ['JJB', 'H', 'Alex', 'Steve'],\n 'Age': [18, 25, 33, 42]\n})\n\ndf","id":7},{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"import pandas as pd \n\ndf.Age","id":8},{"options":{"fig-height":5,"comment":"","out-height":"","context":"interactive","results":"markup","message":"true","out-width":"700px","output":"true","warning":"true","classes":"","label":"","autorun":"","dpi":72,"fig-cap":"","fig-width":7},"code":"import matplotlib.pyplot as plt\n\nx = [1, 5, 3, -2]\ny = [-5, 8, 9, 4]\n\nplt.plot(x, y)\nplt.show()","id":9}]; +globalThis.qpyodideCellDetails = [{"id":1,"code":"1 + 1","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}},{"id":2,"code":"1 + 1","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}},{"id":3,"code":"greet = 'Hello'\ngreet","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}},{"id":4,"code":"len(greet)","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}},{"id":5,"code":"def square(x):\n return x**2\n\nsquare(8)","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}},{"id":6,"code":"num_list = [1, 2, 3]\n[square(num)for num in num_list]","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}},{"id":7,"code":"import pandas as pd\n\ndf = pd.DataFrame({\n 'Name': ['JJB', 'H', 'Alex', 'Steve'],\n 'Age': [18, 25, 33, 42]\n})\n\ndf","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}},{"id":8,"code":"import pandas as pd \n\ndf.Age","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}},{"id":9,"code":"import matplotlib.pyplot as plt\n\nx = [1, 5, 3, -2]\ny = [-5, 8, 9, 4]\n\nplt.plot(x, y)\nplt.show()","options":{"label":"","comment":"","out-width":"700px","warning":"true","autorun":"","context":"interactive","classes":"","results":"markup","message":"true","output":"true","fig-height":5,"fig-cap":"","out-height":"","fig-width":7,"dpi":72}}]; diff --git a/qpyodide-dev-notes.html b/qpyodide-dev-notes.html new file mode 100644 index 0000000..eaf1dfa --- /dev/null +++ b/qpyodide-dev-notes.html @@ -0,0 +1,635 @@ + + + + + + + + + +quarto-pyodide – qpyodide-dev-notes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ + +
+ + + +
+ + + + + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/search.json b/search.json index 00cbe12..7e89c01 100644 --- a/search.json +++ b/search.json @@ -54,6 +54,84 @@ "Acknowledgements" ] }, + { + "objectID": "qpyodide-code-cell-demo.html", + "href": "qpyodide-code-cell-demo.html", + "title": "Python Interactive Code Cells", + "section": "", + "text": "Welcome to the world of interactive code cells, unlocked by the quarto-pyodide extension. These cells allow you to run Python code directly within your Quarto HTML documents, enabling real-time computations and more. Let’s explore the impressive capabilities pyodide offers.\npyodide-enabled code cell are established by using {pyodide-python} in a Quarto HTML document." + }, + { + "objectID": "qpyodide-code-cell-demo.html#sample-calculations", + "href": "qpyodide-code-cell-demo.html#sample-calculations", + "title": "Python Interactive Code Cells", + "section": "Sample Calculations", + "text": "Sample Calculations\nLet’s start off with a quick calculation\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." + }, + { + "objectID": "qpyodide-code-cell-demo.html#strings", + "href": "qpyodide-code-cell-demo.html#strings", + "title": "Python Interactive Code Cells", + "section": "Strings", + "text": "Strings\nViewing string data\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." + }, + { + "objectID": "qpyodide-code-cell-demo.html#retrieving-prior-objects", + "href": "qpyodide-code-cell-demo.html#retrieving-prior-objects", + "title": "Python Interactive Code Cells", + "section": "Retrieving prior objects", + "text": "Retrieving prior objects\nChecking string length\n\nPlease enable JavaScript to experience the dynamic code cell content on this page.\nNotice, we’re able to track the run value of code." + }, + { + "objectID": "qpyodide-code-cell-demo.html#define-and-call-functions", + "href": "qpyodide-code-cell-demo.html#define-and-call-functions", + "title": "Python Interactive Code Cells", + "section": "Define and Call Functions", + "text": "Define and Call Functions\nFunctions can be defined in one cell and called.\n\nPlease enable JavaScript to experience the dynamic code cell content on this page.\nSimilarly, they persist to other cells.\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." + }, + { + "objectID": "qpyodide-code-cell-demo.html#load-a-package", + "href": "qpyodide-code-cell-demo.html#load-a-package", + "title": "Python Interactive Code Cells", + "section": "Load a package", + "text": "Load a package\nWe’ve enabled dynamic package detection to handle importing packages into the environment. The dynamic part comes from detecting whether a non-core Python package is used, installing, and, then, importing it.\n\n\n\n\n\n\nNote\n\n\n\nImporting a package for the first time will require more time. Subsequent import statements will be resolve quicker.\n\n\n\nPlease enable JavaScript to experience the dynamic code cell content on this page.\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." + }, + { + "objectID": "qpyodide-code-cell-demo.html#graphing", + "href": "qpyodide-code-cell-demo.html#graphing", + "title": "Python Interactive Code Cells", + "section": "Graphing", + "text": "Graphing\nWe provide support for generating graphs through the interactive HTML5 backend, e.g. [module://matplotlib_pyodide.html5_canvas_backend](https://github.com/pyodide/matplotlib-pyodide). At the end of each graph call, you must include aplt.show()` call for the graph to render.\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." + }, + { + "objectID": "index.html", + "href": "index.html", + "title": "Hello from quarto-pyodide!", + "section": "", + "text": "Welcome to the documentation site for the quarto-pyodide extension – your key to unlocking the endless possibilities of Pyodide within various Quarto formats, including HTML, RevealJS, Websites, Blogs, and Books.\nReady for an exciting journey into the world of Pyodide’s interactive code cells? Click the “Run Code” button below to experience it firsthand:\n\nPlease enable JavaScript to experience the dynamic code cell content on this page.\nAt its core, the quarto-pyodide extension is designed to empower you to run Python code directly in your web browser using familiar reporting tools, all without the need for an external Python server. Moreover, the extension abstracts away the need to know HTML or JavaScript to use Pyodide. Just write Python code like you usually would! Though, it’s worth noting that you can also choose to unlock the full potential of Pyodide and create more complex applications independently by directly using Pyodide’s JavaScript API, granting you unparalleled freedom to harness the power of Python in innovative ways." + }, + { + "objectID": "qpyodide-release-notes.html", + "href": "qpyodide-release-notes.html", + "title": "Release Notes", + "section": "", + "text": "Enable pyodide code cells for Python inside of a Quarto document.", + "crumbs": [ + "Extra Information", + "Release Notes" + ] + }, + { + "objectID": "qpyodide-release-notes.html#features", + "href": "qpyodide-release-notes.html#features", + "title": "Release Notes", + "section": "", + "text": "Enable pyodide code cells for Python inside of a Quarto document.", + "crumbs": [ + "Extra Information", + "Release Notes" + ] + }, { "objectID": "qpyodide-faq.html", "href": "qpyodide-faq.html", @@ -154,81 +232,10 @@ ] }, { - "objectID": "qpyodide-release-notes.html", - "href": "qpyodide-release-notes.html", - "title": "Release Notes", - "section": "", - "text": "Enable pyodide code cells for Python inside of a Quarto document.", - "crumbs": [ - "Extra Information", - "Release Notes" - ] - }, - { - "objectID": "qpyodide-release-notes.html#features", - "href": "qpyodide-release-notes.html#features", - "title": "Release Notes", - "section": "", - "text": "Enable pyodide code cells for Python inside of a Quarto document.", - "crumbs": [ - "Extra Information", - "Release Notes" - ] - }, - { - "objectID": "index.html", - "href": "index.html", - "title": "Hello from quarto-pyodide!", + "objectID": "qpyodide-dev-notes.html", + "href": "qpyodide-dev-notes.html", + "title": "quarto-pyodide", "section": "", - "text": "Welcome to the documentation site for the quarto-pyodide extension – your key to unlocking the endless possibilities of Pyodide within various Quarto formats, including HTML, RevealJS, Websites, Blogs, and Books.\nReady for an exciting journey into the world of Pyodide’s interactive code cells? Click the “Run Code” button below to experience it firsthand:\n\nPlease enable JavaScript to experience the dynamic code cell content on this page.\nAt its core, the quarto-pyodide extension is designed to empower you to run Python code directly in your web browser using familiar reporting tools, all without the need for an external Python server. Moreover, the extension abstracts away the need to know HTML or JavaScript to use Pyodide. Just write Python code like you usually would! Though, it’s worth noting that you can also choose to unlock the full potential of Pyodide and create more complex applications independently by directly using Pyodide’s JavaScript API, granting you unparalleled freedom to harness the power of Python in innovative ways." - }, - { - "objectID": "qpyodide-code-cell-demo.html", - "href": "qpyodide-code-cell-demo.html", - "title": "Python Interactive Code Cells", - "section": "", - "text": "Welcome to the world of interactive code cells, unlocked by the quarto-pyodide extension. These cells allow you to run Python code directly within your Quarto HTML documents, enabling real-time computations and more. Let’s explore the impressive capabilities pyodide offers.\npyodide-enabled code cell are established by using {pyodide-python} in a Quarto HTML document." - }, - { - "objectID": "qpyodide-code-cell-demo.html#sample-calculations", - "href": "qpyodide-code-cell-demo.html#sample-calculations", - "title": "Python Interactive Code Cells", - "section": "Sample Calculations", - "text": "Sample Calculations\nLet’s start off with a quick calculation\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." - }, - { - "objectID": "qpyodide-code-cell-demo.html#strings", - "href": "qpyodide-code-cell-demo.html#strings", - "title": "Python Interactive Code Cells", - "section": "Strings", - "text": "Strings\nViewing string data\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." - }, - { - "objectID": "qpyodide-code-cell-demo.html#retrieving-prior-objects", - "href": "qpyodide-code-cell-demo.html#retrieving-prior-objects", - "title": "Python Interactive Code Cells", - "section": "Retrieving prior objects", - "text": "Retrieving prior objects\nChecking string length\n\nPlease enable JavaScript to experience the dynamic code cell content on this page.\nNotice, we’re able to track the run value of code." - }, - { - "objectID": "qpyodide-code-cell-demo.html#define-and-call-functions", - "href": "qpyodide-code-cell-demo.html#define-and-call-functions", - "title": "Python Interactive Code Cells", - "section": "Define and Call Functions", - "text": "Define and Call Functions\nFunctions can be defined in one cell and called.\n\nPlease enable JavaScript to experience the dynamic code cell content on this page.\nSimilarly, they persist to other cells.\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." - }, - { - "objectID": "qpyodide-code-cell-demo.html#load-a-package", - "href": "qpyodide-code-cell-demo.html#load-a-package", - "title": "Python Interactive Code Cells", - "section": "Load a package", - "text": "Load a package\nWe’ve enabled dynamic package detection to handle importing packages into the environment. The dynamic part comes from detecting whether a non-core Python package is used, installing, and, then, importing it.\n\n\n\n\n\n\nNote\n\n\n\nImporting a package for the first time will require more time. Subsequent import statements will be resolve quicker.\n\n\n\nPlease enable JavaScript to experience the dynamic code cell content on this page.\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." - }, - { - "objectID": "qpyodide-code-cell-demo.html#graphing", - "href": "qpyodide-code-cell-demo.html#graphing", - "title": "Python Interactive Code Cells", - "section": "Graphing", - "text": "Graphing\nWe provide support for generating graphs through the interactive HTML5 backend, e.g. [module://matplotlib_pyodide.html5_canvas_backend](https://github.com/pyodide/matplotlib-pyodide). At the end of each graph call, you must include aplt.show()` call for the graph to render.\n\nPlease enable JavaScript to experience the dynamic code cell content on this page." + "text": "Pyodide\n\nUsing Pyodide\n\nQuarto Extensions\n\nquarto-ext/shinylive\nmcanouil/quarto-elevator\nshafayetShafee/downloadthis\n\nQuarto Documentation\n\nFilters Documentation\nLua Development Tips\nLua API\n\nPandoc Documentation\n\nExample Filters\nCodeBlock\n\nmatplotlib patches\n\ngzuidhof/starboard-notebook graphics patch\njupyterlite/pyodide-kernel graphics patch" } ] \ No newline at end of file diff --git a/tests/index.html b/tests/index.html index 54ae812..e77277e 100644 --- a/tests/index.html +++ b/tests/index.html @@ -228,7 +228,7 @@ } // Store cell data -globalThis.qpyodideCellDetails = [{"code":"print(\"Welcome to behind the scenes of quarto-pyodide!\")","id":1,"options":{"warning":"true","out-height":"","classes":"","comment":"","output":"true","label":"","message":"true","fig-cap":"","autorun":"","dpi":72,"out-width":"700px","results":"markup","context":"interactive","fig-height":5,"fig-width":7}}]; +globalThis.qpyodideCellDetails = [{"options":{"fig-width":7,"message":"true","autorun":"","warning":"true","results":"markup","classes":"","comment":"","output":"true","out-height":"","dpi":72,"label":"","out-width":"700px","context":"interactive","fig-height":5,"fig-cap":""},"id":1,"code":"print(\"Welcome to behind the scenes of quarto-pyodide!\")"}]; diff --git a/tests/qpyodide-test-graphic-output.html b/tests/qpyodide-test-graphic-output.html index 149ea4c..cf60c8b 100644 --- a/tests/qpyodide-test-graphic-output.html +++ b/tests/qpyodide-test-graphic-output.html @@ -228,7 +228,7 @@ } // Store cell data -globalThis.qpyodideCellDetails = [{"code":"import matplotlib.pyplot as plt\n\nx = [1, 5, 3, -2]\ny = [-5, 8, 9, 4]\n\nplt.plot(x, y)\nplt.show()","options":{"message":"true","fig-cap":"","out-height":"","results":"markup","context":"interactive","output":"true","comment":"","dpi":72,"label":"","autorun":"","out-width":"700px","warning":"true","classes":"","fig-width":7,"fig-height":5},"id":1}]; +globalThis.qpyodideCellDetails = [{"code":"import matplotlib.pyplot as plt\n\nx = [1, 5, 3, -2]\ny = [-5, 8, 9, 4]\n\nplt.plot(x, y)\nplt.show()","options":{"results":"markup","context":"interactive","autorun":"","comment":"","fig-width":7,"classes":"","fig-cap":"","warning":"true","dpi":72,"out-width":"700px","message":"true","output":"true","label":"","fig-height":5,"out-height":""},"id":1}]; diff --git a/tests/qpyodide-test-internal-cell.html b/tests/qpyodide-test-internal-cell.html index 6364625..33db6b7 100644 --- a/tests/qpyodide-test-internal-cell.html +++ b/tests/qpyodide-test-internal-cell.html @@ -228,7 +228,7 @@ } // Store cell data -globalThis.qpyodideCellDetails = [{"id":1,"options":{"context":"interactive","warning":"true","results":"markup","dpi":72,"out-width":"700px","label":"","classes":"","comment":"","output":"true","autorun":"","fig-width":7,"message":"true","out-height":"","fig-height":5,"fig-cap":""},"code":"1 + 1"},{"id":2,"options":{"context":"setup","warning":"true","results":"markup","dpi":72,"out-width":"700px","label":"","classes":"","comment":"","output":"true","autorun":"","fig-width":7,"message":"true","out-height":"","fig-height":5,"fig-cap":""},"code":"x = [1, 5, 3, -2]\ny = [-5, 8, 9, 4]"},{"id":3,"options":{"context":"output","warning":"true","results":"markup","dpi":72,"out-width":"700px","label":"","classes":"","comment":"","output":"true","autorun":"","fig-width":7,"message":"true","out-height":"","fig-height":5,"fig-cap":""},"code":"import matplotlib.pyplot as plt\n\nprint(f\"x: {x}\")\n\nprint(f\"y: {y}\")\n\nplt.plot(x, y)"}]; +globalThis.qpyodideCellDetails = [{"id":1,"options":{"context":"interactive","out-width":"700px","results":"markup","message":"true","warning":"true","dpi":72,"comment":"","classes":"","fig-width":7,"label":"","autorun":"","out-height":"","fig-cap":"","output":"true","fig-height":5},"code":"1 + 1"},{"id":2,"options":{"context":"setup","out-width":"700px","results":"markup","message":"true","warning":"true","dpi":72,"comment":"","classes":"","fig-width":7,"label":"","autorun":"","out-height":"","fig-cap":"","output":"true","fig-height":5},"code":"x = [1, 5, 3, -2]\ny = [-5, 8, 9, 4]"},{"id":3,"options":{"context":"output","out-width":"700px","results":"markup","message":"true","warning":"true","dpi":72,"comment":"","classes":"","fig-width":7,"label":"","autorun":"","out-height":"","fig-cap":"","output":"true","fig-height":5},"code":"import matplotlib.pyplot as plt\n\nprint(f\"x: {x}\")\n\nprint(f\"y: {y}\")\n\nplt.plot(x, y)"}];