diff --git a/docs/concepts/what-is-pyscript.md b/docs/concepts/what-is-pyscript.md index 0c847c1f..a0e0032c 100644 --- a/docs/concepts/what-is-pyscript.md +++ b/docs/concepts/what-is-pyscript.md @@ -9,8 +9,10 @@ PyScript turns the browser into a code deployment tool that anyone can learn to In this example, we are using the `` HTML tag to generate a Matplotlib figure and display it as an image. Click **Preview** to see the rendered HTML. -To try it in your browser, copy the HTML source to a new HTML file and double-click it to open. +To try it in your browser, copy the code below into an online HTML editor like W3School's [Tryit Editor](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default_default), which allows you to modify, run, and even save your code. Watch the video below to see it in action! +```{youtube} ZtC7TCt_LhU +``` ::::{tab-set} :::{tab-item} HTML Source diff --git a/docs/conf.py b/docs/conf.py index c6af21b2..e15b3ebf 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -35,6 +35,7 @@ extensions = [ "sphinx_togglebutton", "sphinx_sitemap", "sphinxemoji.sphinxemoji", + "sphinxcontrib.youtube", ] # Add any paths that contain templates here, relative to this directory. diff --git a/docs/environment.yml b/docs/environment.yml index e21bf628..e60a1be2 100644 --- a/docs/environment.yml +++ b/docs/environment.yml @@ -10,7 +10,9 @@ dependencies: - sphinx-copybutton - sphinx-design - sphinx-togglebutton + - pip: - sphinxemoji - sphinx-sitemap - sphinx-autobuild + - sphinxcontrib-youtube diff --git a/docs/tutorials/getting-started.md b/docs/tutorials/getting-started.md index 8e3d16d2..446f206a 100644 --- a/docs/tutorials/getting-started.md +++ b/docs/tutorials/getting-started.md @@ -72,13 +72,13 @@ print(s) ### Writing into labeled elements -In the example above, we had a single `` tag and it printed +In the example above, we had a single `` tag printing one or more lines onto the page in order. Within the ``, you have access to the `pyscript` module, which provides a `.write()` method to send strings into labeled elements on the page. For example, we'll add some style elements and provide place holders for -the `` tag write to. +the `` tag to write to. ```html @@ -109,12 +109,12 @@ pyscript.write('pi', f'π is approximately {pi:.3f}') ``` -## Packages and modules +## The py-env tag In addition to the [Python Standard Library](https://docs.python.org/3/library/) and the `pyscript` module, many 3rd-party OSS packages will work out-of-the-box with PyScript. -In order to use them, you will need to declare the dependencies using the `` in the +In order to use them, you will need to declare the dependencies using the `` tag in the HTML head. You can also link to `.whl` files directly on disk like in our [toga example](https://github.com/pyscript/pyscript/blob/main/pyscriptjs/examples/toga/freedom.html). ``` @@ -207,3 +207,18 @@ fig ``` +## The py-repl tag + +The `` tag creates a REPL component that is rendered to the page as a code editor, allowing you to write executable code inline. + +## Visual components + +The following tags control visual attributes of your HTML page. + +| Tag | Description | +| --- | ----------- | +| `` | TBD | +| `` | TBD | +| `` | TBD | +| `` | TBD | +| `` | TBD |