8000 Rewrite the get started tutorial using the ice cream demo (#985) · WilliamHackspeare/pyscript@4337e68 · GitHub
[go: up one dir, main page]
Skip to content

Commit 4337e68

Browse files
FabioRosadoantocuni
FabioRosado
and
antocuni
authored
Rewrite the get started tutorial using the ice cream demo (pyscript#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>
1 parent a73c73b commit 4337e68

File tree

3 files changed

+235
-346
lines changed

3 files changed

+235
-346
lines changed

‎docs/reference/elements/py-config.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
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.
44

5+
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.
6+
57
The `<py-config>` element should be placed within the `<body>` element.
68

79
## Attributes
@@ -13,8 +15,7 @@ The `<py-config>` element should be placed within the `<body>` element.
1315

1416
## Examples
1517

16-
- `<py-config>` using TOML (default)
17-
18+
### `<py-config>` using TOML (default)
1819
```{note}
1920
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=...`)
2021
```
@@ -30,7 +31,8 @@ Reminder: when using TOML, any Arrays of Tables defined with double-brackets (li
3031
</py-config>
3132
```
3233

33-
- JSON config using the `type` attribute.
34+
### JSON config using the `type` attribute.
35+
3436
```html
3537
<py-config type="json">
3638
{
@@ -44,7 +46,8 @@ Reminder: when using TOML, any Arrays of Tables defined with double-brackets (li
4446
</py-config>
4547
```
4648

47-
- Use of the `src` attribute:
49+
### Use of the `src` attribute:
50+
4851
```html
4952
<py-config src="./custom.toml"></py-config>
5053
```
@@ -58,7 +61,7 @@ name = "pyodide-0.21.2"
5861
lang = "python"
5962
```
6063

61-
- JSON using the `type` attribute.
64+
### JSON using the `type` and `src` attribute.
6265
```html
6366
<py-config type="json" src="./custom.json"></py-config>
6467
```
@@ -75,6 +78,8 @@ where `custom.json` contains
7578
}
7679
```
7780

81+
### Expanding with inline configuration
82+
7883
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:
7984

8085
```html

‎docs/reference/elements/py-script.md

Lines changed: 65 additions & 6 deletions
106
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ The `<py-script>` element lets you execute multi-line Python scripts both inline
1010

1111
## Examples
1212

13-
- Inline `<py-script>` element:
13+
### Inline `<py-script>` element:
14+
15+
Let's execute this multi-line Python script to compute π and print it back onto the page
16+
1417
```html
1518
<html>
1619
<head>
@@ -34,19 +37,75 @@ The `<py-script>` element lets you execute multi-line Python scripts both inline
3437
</html>
3538
```
3639

37-
- `<py-script>` element with `src` attribute:
40+
### Using `<py-script>` element with `src` attribute:
41+
42+
we can also move our python code to its own file and reference it via the `src` attribute.
43+
44+
45+
```python
46+
# compute_pi.py
47+
print("Let's compute π:")
48+
def compute_pi(n):
49+
pi = 2
50+
for i in range(1,n):
51+
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
52+
return pi
53+
54+
pi = compute_pi(100000)
55+
s = f"π is approximately {pi:.3f}"
56+
print(s)
57+
```
58+
59+
Since both compute_pi.py and index.html are in the same directory, we can reference the python file with a relative path.
60+
3861
```html
3962
<html>
4063
<head>
4164
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
4265
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
43-
<py-config>
44-
[[fetch]]
45-
files =["compute_pi.py"]
46-
</py-config>
4766
</head>
4867
<body>
4968
<py-script src="compute_pi.py"></py-script>
5069
</body>
5170
</html>
5271
```
72+
73+
### Writing into labeled elements
74+
75+
In the example above, we had a single `<py-script>` tag printing
76+
one or more lines onto the page in order. Within the `<py-script>`, you can
77+
use the `Element` class to create a python object for interacting with
78+
page elements. Objects created from the `Element` class provide the `.write()` method
79+
which enables you to send strings into the page elements referenced by those objects.
80+
81+
For example, we'll add some style elements and provide placeholders for
82+
the `<py-script>` tag to write to.
83+
84+
```html
85+
<html>
86+
<head>
87+
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
88+
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
89+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
90+
</head>
91+
92+
<body>
93+
<b><p>Today is <u><label id='today'></label></u></p></b>
94+
<br>
95+
<div id="pi" class="alert alert-primary"></div>
96+
<py-script>
97+
import datetime as dt
98+
Element('today').write(dt.date.today().strftime('%A %B %d, %Y'))
99+
100+
def compute_pi(n):
101+
pi = 2
102+
for i in range(1,n):
103+
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
104+
return pi
105+
+
pi = compute_pi(100000)
107+
Element('pi').write(f'π is approximately {pi:.3f}')
108+
</py-script>
109+
</body>
110+
</html>
111+
```

0 commit comments

Comments
 (0)
0