histausse/typst-web-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pyscript minimum working example

Browse source
This commit is contained in:
Jean-Marie 'Histausse' Mineau 2026-05-31 15:39:50 +02:00
parent 9d09803ddc
commit 38a192abb6
Signed by: histausse
GPG key ID: B66AEEDA9B645AD2
4 changed files with 63 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

16
lib/html_head.typ
View file

@ -1,5 +1,6 @@
#import "./custom_html.typ" as chtml #import "./custom_html.typ" as chtml
#import "./html_utils.typ": get-css, get-js #import "./html_utils.typ": get-css, get-js
#import "./pyscript.typ": state-use-pyscript, state-pyscript-headers, state-pyscript-version
/// Generate the html <head> element for the page. /// Generate the html <head> element for the page.
#let html_head( #let html_head(
@ -35,7 +36,8 @@
// The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). // The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
// The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. // The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
html.meta(name: "viewport", content: "width=device-width, initial-scale=1.0") // it resize the content instead of only resizeing the visual 'window'. (https://developer.chrome.com/blog/viewport-resize-behavior#:%7E:text=Through%20the%20interactive-widget%20key,Visual%20Viewport%20and%20Layout%20Viewport.)
html.meta(name: "viewport", content: "width=device-width, initial-scale=1.0, interactive-widget=resizes-content")
// Only set the Referer header for out request to the same origin // Only set the Referer header for out request to the same origin
html.meta(name: "referrer", content: "same-origin") html.meta(name: "referrer", content: "same-origin")
@ -93,6 +95,18 @@
} }
}} }}
context if state-use-pyscript.final() {
assert(
state-pyscript-version.final() != none,
message: "Cannot run python script: pyscript-version is not set"
)
assert(
state-pyscript-version.final() in state-pyscript-headers.final(),
message: "Cannot run python script: urls for " + state-pyscript-version.final() + " not set in pyscript-urls"
)
state-pyscript-headers.final().at(state-pyscript-version.final())
}
html.style(get-css()) html.style(get-css())
html.script(get-js()) html.script(get-js())

9
lib/main.typ
View file

@ -2,6 +2,7 @@
#import "./html_body.typ": html_body #import "./html_body.typ": html_body
#import "./html_utils.typ": html_show #import "./html_utils.typ": html_show
#import "./summary.typ": summary, card-list #import "./summary.typ": summary, card-list
#import "./pyscript.typ": state-use-pyscript, state-pyscript-headers, state-pyscript-version, pyscript
#import "./rss.typ": rss #import "./rss.typ": rss
#import "./icons.typ" #import "./icons.typ"
@ -31,6 +32,10 @@
stylesheets: (), stylesheets: (),
/// List of related sites for metadata /// List of related sites for metadata
me-links: (), me-links: (),
/// Dictionnary of available tags to add in header for each versions of pyscript
pyscript-headers: (:),
/// Pyscript version to use
pyscript-version: none,
//-- Body -- //-- Body --
/// Array of element to add on the top left of the page /// Array of element to add on the top left of the page
nav-elements: none, nav-elements: none,
@ -47,6 +52,10 @@
body body
) = { ) = {
assert(type(url) == str, message: "A page must have an url") assert(type(url) == str, message: "A page must have an url")
context {
state-pyscript-headers.update(x => pyscript-headers)
state-pyscript-version.update(x => pyscript-version)
}
show: html_show show: html_show
html.html(lang: lang, { html.html(lang: lang, {
html_head( html_head(

16
lib/pyscript.typ Normal file
View file

@ -0,0 +1,16 @@
#let state-use-pyscript = state("state-use-pyscript", false)
#let state-pyscript-version = state("state-pyscript-version", none)
#let state-pyscript-headers = state("state-pyscript-headers", (:))
#let pyscript(body) = {
show raw.where(block: true, lang: "python"): it => {
state-use-pyscript.update(x => true)
it
html.elem("script", attrs: (
type: "py",
terminal: "",
worker: "",
), it.text)
}
body
}

23
test_template/main.typ
View file

@ -59,11 +59,34 @@
], ],
site-name: "TTT", site-name: "TTT",
icon: "https://jean-marie.mineau.eu/website_assets/platypus.png", icon: "https://jean-marie.mineau.eu/website_assets/platypus.png",
// Pyscript:
pyscript-headers: (
"remote-2026.3.1": {
html.elem("script", attrs: (type: "module", src: "https://pyscript.net/releases/2026.3.1/core.js"))
html.elem("link", attrs: (rel: "stylesheet", href: "https://pyscript.net/releases/2026.3.1/core.js"))
}
),
pyscript-version: "remote-2026.3.1",
) )
#lorem(400) #lorem(400)
#pyscript[
```python
for i in range(1, 16):
if i % 3 == 0 and i % 5 == 0:
print("plopliplop")
elif i % 3 == 0:
print("plop")
elif i % 5 == 0:
print("plip")
else:
print(i)
```
]
#summ.card #summ.card
Test, `this is not a code block`, end test. Test, `this is not a code block`, end test.