mirror of
https://github.com/pyscript/pyscript.git
synced 2026-04-30 16:00:32 -04:00
Rewrite the get started tutorial using the ice cream demo (#985)
* Rewrite the get started tutorial using the ice cream demo * Update docs/tutorials/getting-started.md Co-authored-by: Antonio Cuni <anto.cuni@gmail.com> * Address Antonio's comments Co-authored-by: Antonio Cuni <anto.cuni@gmail.com>
This commit is contained in:
Fábio Rosado
@@ -2,6 +2,8 @@
|
||||
|
||||
Use the `<py-config>` tag to set and configure general metadata along with declaring dependencies for your PyScript application. The configuration has to be set in either [TOML](https://toml.io/)(default) or [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) format.
|
||||
|
||||
If you are unfamiliar with TOML, consider [reading about it](https://learnxinyminutes.com/docs/toml/) or if you are unfamiliar with JSON, consider reading [freecodecamp's JSON for beginners](https://www.freecodecamp.org/news/what-is-json-a-json-file-example/) guide for more information.
|
||||
|
||||
The `<py-config>` element should be placed within the `<body>` element.
|
||||
|
||||
## Attributes
|
||||
@@ -13,8 +15,7 @@ The `<py-config>` element should be placed within the `<body>` element.
|
||||
|
||||
## Examples
|
||||
|
||||
- `<py-config>` using TOML (default)
|
||||
|
||||
### `<py-config>` using TOML (default)
|
||||
```{note}
|
||||
Reminder: when using TOML, any Arrays of Tables defined with double-brackets (like `[[runtimes]]` and `[[fetch]]` must come after individual keys (like `paths = ...` and `packages=...`)
|
||||
```
|
||||
@@ -30,7 +31,8 @@ Reminder: when using TOML, any Arrays of Tables defined with double-brackets (li
|
||||
</py-config>
|
||||
```
|
||||
|
||||
- JSON config using the `type` attribute.
|
||||
### JSON config using the `type` attribute.
|
||||
|
||||
```html
|
||||
<py-config type="json">
|
||||
{
|
||||
@@ -44,7 +46,8 @@ Reminder: when using TOML, any Arrays of Tables defined with double-brackets (li
|
||||
</py-config>
|
||||
```
|
||||
|
||||
- Use of the `src` attribute:
|
||||
### Use of the `src` attribute:
|
||||
|
||||
```html
|
||||
<py-config src="./custom.toml"></py-config>
|
||||
```
|
||||
@@ -58,7 +61,7 @@ name = "pyodide-0.21.2"
|
||||
lang = "python"
|
||||
```
|
||||
|
||||
- JSON using the `type` attribute.
|
||||
### JSON using the `type` and `src` attribute.
|
||||
```html
|
||||
<py-config type="json" src="./custom.json"></py-config>
|
||||
```
|
||||
@@ -75,6 +78,8 @@ where `custom.json` contains
|
||||
}
|
||||
```
|
||||
|
||||
### Expanding with inline configuration
|
||||
|
||||
One can also use both i.e pass the config from `src` attribute as well as specify it as `inline`. So the following snippet is also valid:
|
||||
|
||||
```html
|
||||
|
||||
@@ -10,7 +10,10 @@ The `<py-script>` element lets you execute multi-line Python scripts both inline
|
||||
|
||||
## Examples
|
||||
|
||||
- Inline `<py-script>` element:
|
||||
### Inline `<py-script>` element:
|
||||
|
||||
Let's execute this multi-line Python script to compute π and print it back onto the page
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
@@ -34,19 +37,75 @@ The `<py-script>` element lets you execute multi-line Python scripts both inline
|
||||
</html>
|
||||
```
|
||||
|
||||
- `<py-script>` element with `src` attribute:
|
||||
### Using `<py-script>` element with `src` attribute:
|
||||
|
||||
we can also move our python code to its own file and reference it via the `src` attribute.
|
||||
|
||||
|
||||
```python
|
||||
# compute_pi.py
|
||||
print("Let's compute π:")
|
||||
def compute_pi(n):
|
||||
pi = 2
|
||||
for i in range(1,n):
|
||||
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
|
||||
return pi
|
||||
|
||||
pi = compute_pi(100000)
|
||||
s = f"π is approximately {pi:.3f}"
|
||||
print(s)
|
||||
```
|
||||
|
||||
Since both compute_pi.py and index.html are in the same directory, we can reference the python file with a relative path.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
<py-config>
|
||||
[[fetch]]
|
||||
files =["compute_pi.py"]
|
||||
</py-config>
|
||||
</head>
|
||||
<body>
|
||||
<py-script src="compute_pi.py"></py-script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Writing into labeled elements
|
||||
|
||||
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 can
|
||||
use the `Element` class to create a python object for interacting with
|
||||
page elements. Objects created from the `Element` class provide the `.write()` method
|
||||
which enables you to send strings into the page elements referenced by those objects.
|
||||
|
||||
For example, we'll add some style elements and provide placeholders for
|
||||
the `<py-script>` tag to write to.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<b><p>Today is <u><label id='today'></label></u></p></b>
|
||||
<br>
|
||||
<div id="pi" class="alert alert-primary"></div>
|
||||
<py-script>
|
||||
import datetime as dt
|
||||
Element('today').write(dt.date.today().strftime('%A %B %d, %Y'))
|
||||
|
||||
def compute_pi(n):
|
||||
pi = 2
|
||||
for i in range(1,n):
|
||||
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
|
||||
return pi
|
||||
|
||||
pi = compute_pi(100000)
|
||||
Element('pi').write(f'π is approximately {pi:.3f}')
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user