jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-22 19:53:00 -05:00
Code Issues Projects Releases Wiki Activity

Embedding video, adding PS tag definitions (#403)

Browse Source 
* Embedding video, adding PS tag definitions

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

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

* html -> HTML; add sphinxcontrib.youtube to env.yml

* change place of sphinxcontrib.youtube in env.yml

* one more sphinxcontrib-youtube change

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
idanenglander
2022-05-18 09:03:46 -05:00
committed by GitHub
parent b767a78b05
commit 0d946f853f
4 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/concepts/what-is-pyscript.md
View File

@@ -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 `<py-script>` HTML tag to generate a Matplotlib figure and display it as an image. In this example, we are using the `<py-script>` HTML tag to generate a Matplotlib figure and display it as an image.
Click **Preview** to see the rendered HTML. 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-set}
:::{tab-item} HTML Source :::{tab-item} HTML Source

1
docs/conf.py
View File

@@ -35,6 +35,7 @@ extensions = [
"sphinx_togglebutton", "sphinx_togglebutton",
"sphinx_sitemap", "sphinx_sitemap",
"sphinxemoji.sphinxemoji", "sphinxemoji.sphinxemoji",
"sphinxcontrib.youtube",
] ]
# Add any paths that contain templates here, relative to this directory. # Add any paths that contain templates here, relative to this directory.

2
docs/environment.yml
View File

@@ -10,7 +10,9 @@ dependencies:
- sphinx-copybutton - sphinx-copybutton
- sphinx-design - sphinx-design
- sphinx-togglebutton - sphinx-togglebutton
- pip: - pip:
- sphinxemoji - sphinxemoji
- sphinx-sitemap - sphinx-sitemap
- sphinx-autobuild - sphinx-autobuild
- sphinxcontrib-youtube

23
docs/tutorials/getting-started.md
View File

@@ -72,13 +72,13 @@ print(s)
### Writing into labeled elements ### Writing into labeled elements
In the example above, we had a single `<py-script>` tag and it printed In the example above, we had a single `<py-script>` tag printing
one or more lines onto the page in order. Within the `<py-script>`, you one or more lines onto the page in order. Within the `<py-script>`, you
have access to the `pyscript` module, which provides a `.write()` method have access to the `pyscript` module, which provides a `.write()` method
to send strings into labeled elements on the page. to send strings into labeled elements on the page.
For example, we'll add some style elements and provide place holders for For example, we'll add some style elements and provide place holders for
the `<py-script>` tag write to. the `<py-script>` tag to write to.
```html ```html
<html> <html>
@@ -109,12 +109,12 @@ pyscript.write('pi', f'π is approximately {pi:.3f}')
</html> </html>
``` ```
## Packages and modules ## The py-env tag
In addition to the [Python Standard Library](https://docs.python.org/3/library/) and 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. 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 `<py-env>` in the In order to use them, you will need to declare the dependencies using the `<py-env>` 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). 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
</body> </body>
</html> </html>
``` ```
## The py-repl tag
The `<py-repl>` 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 |
| --- | ----------- |
| `<py-inputbox>` | TBD |
| `<py-box>` | TBD |
| `<py-button>` | TBD |
| `<py-list>` | TBD |
| `<py-title>` | TBD |