jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -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.
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

1
docs/conf.py
View File

@@ -35,6 +35,7 @@ extensions = [
"sphinx_togglebutton",
"sphinx_sitemap",
"sphinxemoji.sphinxemoji",
"sphinxcontrib.youtube",
]
# 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-design
- sphinx-togglebutton
- pip:
- sphinxemoji
- sphinx-sitemap
- sphinx-autobuild
- sphinxcontrib-youtube

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

@@ -72,13 +72,13 @@ print(s)
### 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
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 `<py-script>` tag write to.
the `<py-script>` tag to write to.
```html
<html>
@@ -109,12 +109,12 @@ pyscript.write('pi', f'π is approximately {pi:.3f}')
</html>
```
## 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 `<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).
```
@@ -207,3 +207,18 @@ fig
</body>
</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 |