From 7fe9b995355a8495350e476d29175b44a4f844e1 Mon Sep 17 00:00:00 2001 From: Jean-Marie 'Histausse' Mineau Date: Wed, 17 Jun 2026 12:40:20 +0200 Subject: [PATCH] start migration to bundle format --- lib/html_head.typ | 15 +- lib/html_utils.typ | 29 +-- lib/main.typ | 26 ++- lib/pyscript.typ | 20 +- lib/rss.typ | 4 +- lib/states.typ | 57 ++++++ lib/summary.typ | 26 ++- test_template/build.sh | 2 +- test_template/main.typ | 24 ++- test_template/main/index.html | 286 +--------------------------- test_template/pages/cards.typ | 89 +++++++++ test_template/{ => pages}/index.typ | 141 ++------------ test_template/pages/pyscript.typ | 129 +++++++++++++ 13 files changed, 378 insertions(+), 470 deletions(-) create mode 100644 lib/states.typ mode change 100644 => 100755 test_template/build.sh create mode 100644 test_template/pages/cards.typ rename test_template/{ => pages}/index.typ (54%) create mode 100644 test_template/pages/pyscript.typ diff --git a/lib/html_head.typ b/lib/html_head.typ index fcc764a..66557db 100644 --- a/lib/html_head.typ +++ b/lib/html_head.typ @@ -4,10 +4,14 @@ /// Generate the html element for the page. #let html-head( - /// Page url, - url, + /// The base url of the site (eg: "http://test.example.com") + base-url, + /// The url path of the page (full url of the page is base-url + path), eg: "/index.html" + path, /// Title of the page title, + /// Label of the page + page-label, /// Path to the icon (TODO: /!\ must be an url, typst image not yet supported) icon: none, /// Type of the page for open-graph data @@ -25,6 +29,7 @@ /// List of related sites for metadata me-links: (), ) = { + let url = base-url + path html.head({ html.meta(charset: "utf-8") if title != none { @@ -95,9 +100,9 @@ } }} - get-css() - get-js() - context for tag in additionnal-head-tags.final() { + get-css(page-label) + get-js(page-label) + context for tag in additionnal-head-tags.at(label(str(page-label) + "-end")) { tag } diff --git a/lib/html_utils.typ b/lib/html_utils.typ index cd75b0b..7f94cda 100644 --- a/lib/html_utils.typ +++ b/lib/html_utils.typ @@ -1,34 +1,7 @@ +#import "./states.typ": * #import "./figures.typ": show-rule-figure #import "./code.typ": show-rule-code-block -#let css-list = state("css-list", ()) -#let js-list = state("js-list", ()) -#let additionnal-head-tags = state("additionnal-head-tags", ()) - -/// Add string `css` to `css-list` if not already present -#let add-css(css) = context { - css-list.update(x => if css in x { x } else { x + (css,) }) -} - -/// Add string `js` to `js-list` if not already present -#let add-js(js) = context { - js-list.update(x => if js in x { x } else { x + (js,) }) -} - -/// Add additionnal html tag to insert in -#let add-tag-in-head(tag) = context { - additionnal-head-tags.update(x => if tag in x { x } else { x + (tag, ) }) -} - -/// Concatenate all css found in css-list at the end of the document -#let get-css() = context { - html.style(css-list.final().join("\n\n")) -} - -/// Concatenate all js found in js-list at the end of the document -#let get-js() = context { - html.script(js-list.final().join("\n\n")) -} #let html-show(body) = { show raw: it => { diff --git a/lib/main.typ b/lib/main.typ index 6de6b54..63eb3d5 100644 --- a/lib/main.typ +++ b/lib/main.typ @@ -1,7 +1,8 @@ #import "./html_head.typ": html-head #import "./html_body.typ": html-body -#import "./html_utils.typ": html-show +#import "./html_utils.typ": html-show, reset-page-states #import "./summary.typ": summary, card-list +#import "./states.typ": current-page-label #import "./pyscript.typ": state-use-pyscript, state-pyscript-data-list, state-pyscript-version, state-pyscript-interpreters, state-pyscript-default-interpreter, pyscript-show, pyscript-data #import "./rss.typ": rss #import "./icons.typ" @@ -9,8 +10,10 @@ /// Mail template function #let webpage( - /// Page url - url: none, + /// The base url of the site (eg: "http://test.example.com") + base-url: none, + /// The url path of the page (full url of the page is base-url + path), eg: "/index.html" + path: none, /// Title of the page, default to document.title title: none, /// Use only for html 'lang' attribute. @@ -32,6 +35,8 @@ stylesheets: (), /// List of related sites for metadata me-links: (), + /// Label of the page (for links) + page-label: none, /// Dictionnary of available pyscript-data for each versions of pyscript /// expected in the form of ("": pyscript-data-list("", { html.link(...) }), ...) pyscript-data-list: (:), @@ -56,7 +61,9 @@ /// Body of the page body ) = { - assert(type(url) == str, message: "A page must have an url") + assert(type(base-url) == str, message: "A page must have a base url") + assert(type(path) == str, message: "A page must have a path") + context { state-pyscript-data-list.update(x => pyscript-data-list) state-pyscript-interpreters.update(x => pyscript-interpreters) @@ -65,10 +72,13 @@ } show: html-show show raw.where(block: true, lang: "python-run"): pyscript-show + current-page-label.update(x => page-label) html.html(lang: lang, { html-head( - url, + base-url, + path, title, + page-label, icon: icon, og-type: og-type, site-name: site-name, @@ -84,7 +94,11 @@ footer: footer, nav-elements: nav-elements, menu: menu, - body + [ + #body + #metadata("end of page " + str(page-label)) #label(str(page-label) + "-end") + ] ) + reset-page-states() }) } diff --git a/lib/pyscript.typ b/lib/pyscript.typ index 9c6967b..da81356 100644 --- a/lib/pyscript.typ +++ b/lib/pyscript.typ @@ -1,11 +1,13 @@ #import "./html_utils.typ": add-tag-in-head - -#let state-use-pyscript = state("state-use-pyscript", false) -#let state-pyscript-version = state("state-pyscript-version", none) -#let state-pyscript-data-list = state("state-pyscript-data-list", (:)) -#let state-pyscript-interpreters = state("state-pyscript-interpreters", (:)) -#let state-pyscript-default-interpreter = state("state-pyscript-default-interpreter", none) -#let state-pyscript-canvas-ids = state("state-pyscript-canvas-ids", ()) +#import "./states.typ": ( + state-use-pyscript, + state-pyscript-version, + state-pyscript-data-list, + state-pyscript-interpreters, + state-pyscript-default-interpreter, + state-pyscript-canvas-ids, + current-page-label, +) /// Define data needed to load a version of pyscript #let pyscript-data( @@ -139,7 +141,9 @@ if canvas-attr != none { html.elem("canvas", attrs: ("id": canvas-attr)) - let core-js-url = state-pyscript-data-list.final().at(state-pyscript-version.final()).core-js-url + let page-label = current-page-label.at(here()) + let end-page-label = label(str(page-label) + "-end") + let core-js-url = state-pyscript-data-list.at(end-page-label).at(state-pyscript-version.at(end-page-label)).core-js-url add-tag-in-head( html.script( type: "module", diff --git a/lib/rss.typ b/lib/rss.typ index 1f8175b..3ac6ef5 100644 --- a/lib/rss.typ +++ b/lib/rss.typ @@ -64,8 +64,8 @@ "item", children: ( xml-tag("title", body: it.document-args.title), - xml-tag("link", body: it.template-args.url), - xml-tag("guid", body: it.template-args.url), + xml-tag("link", body: it.template-args.base-url + it.template-args.path), + xml-tag("guid", body: it.template-args.base-url + it.template-args.path), xml-tag("description", body: it.document-args.description), xml-tag("pubDate", body: it.document-args.date.display(date-format-rfc822)), ) + it.template-args.tags.map(tag => xml-tag("category", body: tag)) diff --git a/lib/states.typ b/lib/states.typ new file mode 100644 index 0000000..f9e7e99 --- /dev/null +++ b/lib/states.typ @@ -0,0 +1,57 @@ + +// Pyscript +#let state-use-pyscript = state("state-use-pyscript", false) +#let state-pyscript-version = state("state-pyscript-version", none) +#let state-pyscript-data-list = state("state-pyscript-data-list", (:)) +#let state-pyscript-interpreters = state("state-pyscript-interpreters", (:)) +#let state-pyscript-default-interpreter = state("state-pyscript-default-interpreter", none) +#let state-pyscript-canvas-ids = state("state-pyscript-canvas-ids", ()) + +#let reset-pyscript-page-states() = { + state-use-pyscript.update(x => false) + state-pyscript-version.update(x => state-pyscript-version) + state-pyscript-data-list.update(x => (:)) + state-pyscript-interpreters.update(x => (:)) + state-pyscript-default-interpreter.update(x => none) + state-pyscript-canvas-ids.update(x => ()) +} + +// CSS / JS / misc tags +#let current-page-label = state("current-page-label", none) +#let css-list = state("css-list", ()) +#let js-list = state("js-list", ()) +#let additionnal-head-tags = state("additionnal-head-tags", ()) + +/// Add string `css` to `css-list` if not already present +#let add-css(css) = context { + css-list.update(x => if css in x { x } else { x + (css,) }) +} + +/// Add string `js` to `js-list` if not already present +#let add-js(js) = context { + js-list.update(x => if js in x { x } else { x + (js,) }) +} + +/// Add additionnal html tag to insert in +#let add-tag-in-head(tag) = context { + additionnal-head-tags.update(x => if tag in x { x } else { x + (tag, ) }) +} + +/// Concatenate all css found in css-list at the end of the document +#let get-css(page-label) = context { + html.style(css-list.at(label(str(page-label) + "-end")).join("\n\n")) +} + +/// Concatenate all js found in js-list at the end of the document +#let get-js(page-label) = context { + html.script(js-list.at(label(str(page-label) + "-end")).join("\n\n")) +} + +#let reset-page-states() = { + current-page-label.update(x => none) + css-list.update(x => ()) + js-list.update(x => ()) + additionnal-head-tags.update(x => ()) + reset-pyscript-page-states() +} + diff --git a/lib/summary.typ b/lib/summary.typ index a0bc01a..10a512f 100644 --- a/lib/summary.typ +++ b/lib/summary.typ @@ -81,15 +81,15 @@ ``` chtml.summary-card({ chtml.summary-card-preview({ - html.a(href: summ.template-args.url, summ.preview-image) + link(summ.template-args.page-label, summ.preview-image) if summ.img-copyright != none { html.small[Image: #sym.copyright #summ.img-copyright] } }) chtml.summary-card-description({ - heading(level: 2, html.a(href: summ.template-args.url, summ.document-args.title)) + heading(level: 2, link(summ.template-args.page-label, summ.document-args.title)) - html.a(href: summ.template-args.url, summ.document-args.description) + link(summ.template-args.page-label, summ.document-args.description) chtml.summary-card-details(summ.document-args.date.display()) chtml.tag-box(for tag in summ.template-args.tags { html.span(class: ("tag",), "#" + tag) }) @@ -101,8 +101,10 @@ /// Store data form `set document(...)` and `show: webpage.with(...)` in `summ.document-args` and `summ.template-args`, /// and generate a summary card that can be used as a link for the page. #let summary( - /// The url of the page - url: none, + /// The base url of the site (eg: "http://test.example.com") + base-url: none, + /// The url path of the page (full url of the page is base-url + path), eg: "/index.html" + path: none, /// The title of the page title: none, /// The image preview of the page. @@ -119,14 +121,21 @@ date: none, /// Tags associated to the content of the page tags: (), + /// Label of the page (for links) + page-label: none, ) = { - assert(type(url) == str, message: "summary() must have an url") + assert(type(base-url) == str, message: "summary() must have a base url") + assert(type(path) == str, message: "summary() must have a path") assert(type(title) == str or type(title) == content, message: "summary() must have title") assert(type(preview-image) != none, message: "summary() must have a preview-image") assert(type(author) != none, message: "summary() must have at least one author") assert(type(description) != none, message: "summary() must have a description") assert(type(date) != none, message: "summary() must have a date") + if page-label == none { + page-label = label(path) + } + let summ = ( document-args: ( title: title, @@ -135,9 +144,12 @@ date: date, ), template-args: ( - url: url, + base-url: base-url, + path: path, tags: tags, + page-label: page-label, ), + path: path, preview-image: preview-image, img-copyright: img-copyright, card: [] diff --git a/test_template/build.sh b/test_template/build.sh old mode 100644 new mode 100755 index dcd763f..63bee9a --- a/test_template/build.sh +++ b/test_template/build.sh @@ -1,4 +1,4 @@ - +#/usr/bin/env bash MAIN="$(dirname $(realpath "${0}"))/main.typ" if [ "${1}" = "watch" ]; then diff --git a/test_template/main.typ b/test_template/main.typ index 80e9133..95571b7 100644 --- a/test_template/main.typ +++ b/test_template/main.typ @@ -1,11 +1,27 @@ -#import "index.typ": summ, summaries #import "@local/template-web:0.0.1": rss +#import "pages/index.typ": summ as summ-index #document( "index.html", - ..summ.document-args, - include "index.typ" -) + ..summ-index.document-args, + include "/pages/index.typ" +) + +#import "pages/pyscript.typ": summ as summ-pyscript +#document( + "pycript.html", + ..summ-pyscript.document-args, + include "/pages/pyscript.typ" +) + +#import "pages/cards.typ": summ as summ-cards, summaries +#document( + "cards.html", + ..summ-cards.document-args, + include "/pages/cards.typ" +) + + #asset( "/img/platypus.png", read("assets/platypus.png", encoding: none), diff --git a/test_template/main/index.html b/test_template/main/index.html index df7fbca..adcdf3d 100644 --- a/test_template/main/index.html +++ b/test_template/main/index.html @@ -1,4 +1,4 @@ -TeTyTe

Test TeTyTe

Hello World!

A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia defensa et collaudata est, cum id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum defuturum, quas natura non depravata desiderat. Et quem ad me accedis, saluto: 'chaere,' inquam, 'Tite!' lictores, turma omnis chorusque: 'chaere, Tite!' hinc hostis mi Albucius, hinc inimicus. Sed iure Mucius. Ego autem mirari satis non queo unde hoc sit tam insolens domesticarum rerum fastidium. Non est omnino hic docendi locus; sed ita prorsus existimo, neque eum Torquatum, qui hoc primus cognomen invenerit, aut torquem illum hosti detraxisse, ut aliquam ex eo est consecutus? – Laudem et caritatem, quae sunt vitae sine metu degendae praesidia firmissima. – Filium morte multavit. – Si sine causa, nollem me ab eo delectari, quod ista Platonis, Aristoteli, Theophrasti orationis ornamenta neglexerit. Nam illud quidem physici, credere aliquid esse minimum, quod profecto numquam putavisset, si a Polyaeno, familiari suo, geometrica discere maluisset quam illum etiam ipsum dedocere. Sol Democrito magnus videtur, quippe homini erudito in geometriaque perfecto, huic pedalis fortasse; tantum enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. Mihi quidem videtur, inermis ac nudus est. Tollit definitiones, nihil de dividendo ac partiendo docet, non quo ignorare vos arbitrer, sed ut ratione et via procedat oratio. Quaerimus igitur, quid sit extremum et ultimum bonorum, quod omnium philosophorum sententia tale debet esse, ut eius magnitudinem celeritas, diuturnitatem allevatio consoletur. Ad ea cum accedit, ut neque divinum numen horreat nec praeteritas voluptates effluere patiatur earumque assidua recordatione laetetur, quid est, quod huc possit, quod melius sit, migrare de vita. His rebus instructus semper est in voluptate esse aut in armatum hostem impetum fecisse aut in poetis evolvendis, ut ego et Triarius te hortatore facimus, consumeret, in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas.

n = ""
-while not n.isnumeric():
-  n = input("enter a valid number: ")
-
-for i in range(1, int(n) + 1):
-  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)
# /// script
-# # requires-python = ">=3.11" # not supported yet
-# dependencies = [
-#   "rich",
-# ]
-#
-# [tool.pyscript]
-# repl = true
-# [tool.pyscript.files]
-# "https://peps.python.org/api/peps.json" = "./peps.json"
-# ///
-
-import json
-from rich.pretty import pprint
-
-with open("./peps.json") as fd:
-    data = json.load(fd)
-pprint([(k, v["title"]) for k, v in data.items()][:10])
-# >>> print(data["723"]["title"])
-# Inline script metadata
# setting tool.pyscript.hide-meta to true will hide the `/// script` section
-import json
-from rich.pretty import pprint
-
-with open("./peps.json") as fd:
-    data = json.load(fd)
-pprint([(k, v["title"]) for k, v in data.items()][:10])
-# >>> print(data["723"]["title"])
-# Inline script metadata
# /// script
-# dependencies = [
-#   "pygame-ce",
-#   "./python-packages/isn_s_cube-0.1.0-py3-none-any.whl"
-# ]
-# [tool.pyscript]
-# pygame = true
-# ///
-from isn_s_cube import wasm
-await wasm()

A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

TeTyTe

Test of the TTT template

1942-04-01#test#html/css#typst

Test, this is not a code block, end test.

Test TeTyTe

Hello World!

A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia defensa et collaudata est, cum id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum defuturum, quas natura non depravata desiderat. Et quem ad me accedis, saluto: 'chaere,' inquam, 'Tite!' lictores, turma omnis chorusque: 'chaere, Tite!' hinc hostis mi Albucius, hinc inimicus. Sed iure Mucius. Ego autem mirari satis non queo unde hoc sit tam insolens domesticarum rerum fastidium. Non est omnino hic docendi locus; sed ita prorsus existimo, neque eum Torquatum, qui hoc primus cognomen invenerit, aut torquem illum hosti detraxisse, ut aliquam ex eo est consecutus? – Laudem et caritatem, quae sunt vitae sine metu degendae praesidia firmissima. – Filium morte multavit. – Si sine causa, nollem me ab eo delectari, quod ista Platonis, Aristoteli, Theophrasti orationis ornamenta neglexerit. Nam illud quidem physici, credere aliquid esse minimum, quod profecto numquam putavisset, si a Polyaeno, familiari suo, geometrica discere maluisset quam illum etiam ipsum dedocere. Sol Democrito magnus videtur, quippe homini erudito in geometriaque perfecto, huic pedalis fortasse; tantum enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. Mihi quidem videtur, inermis ac nudus est. Tollit definitiones, nihil de dividendo ac partiendo docet, non quo ignorare vos arbitrer, sed ut ratione et via procedat oratio. Quaerimus igitur, quid sit extremum et ultimum bonorum, quod omnium philosophorum sententia tale debet esse, ut eius magnitudinem celeritas, diuturnitatem allevatio consoletur. Ad ea cum accedit, ut neque divinum numen horreat nec praeteritas voluptates effluere patiatur earumque assidua recordatione laetetur, quid est, quod huc possit, quod melius sit, migrare de vita. His rebus instructus semper est in voluptate esse aut in armatum hostem impetum fecisse aut in poetis evolvendis, ut ego et Triarius te hortatore facimus, consumeret, in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas.

Test, this is not a code block, end test.

elif i % 5 == 0: print("plip") else: - print(i)print(i)
A Platypus!
A Big Platypus!
A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At.

2000-12-20#tag2#tag5#loooooonnnnnnnnnnnnnng-tag#some-tag#some-other-tagA drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.Image: ©︎ Histausse

Card 19

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia defensa et collaudata est, cum id, quod maxime placeat, facere possimus, omnis.

2000-12-19A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.Image: ©︎ Histausse

Card 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere.

2000-12-18#tag2#tag3A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.Image: ©︎ Histausse

Card 17

2000-12-17A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 16

2000-12-16#tag2A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 15

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat.

2000-12-15#tag3#tag5A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere.

2000-12-14#tag2#tag7A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.Image: ©︎ Histausse

Card 13

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia defensa et.

2000-12-13A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.Image: ©︎ Histausse

Card 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos.

2000-12-12#tag2#tag3A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

2000-12-11A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri.

2000-12-10#tag2#tag5A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.Image: ©︎ Histausse

Card 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut.

2000-12-09#tag3A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos.

2000-12-08#tag2A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia defensa et.

2000-12-07#tag7A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri.

2000-12-06#tag2#tag3A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut.

2000-12-05#tag5A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

2000-12-04#tag2A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia defensa et collaudata est, cum id, quod maxime placeat, facere possimus, omnis.

2000-12-03#tag3A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.Image: ©︎ Histausse

Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At.

2000-12-02#tag2A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat.

2000-12-01

©︎ 1942 Histausse
Please don’t train AI on my stuff without explicit permission

\ No newline at end of file +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia defensa et collaudata est, cum id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et.
SDK versionNumber of API methods
DocumentedIn emulatorOnly documentedOnly in emulator
3249571349983710605184
3353742753923612583067
346051066050982618
Comparison of API methods between documentation and emulators
SDK versionNumber of API methods
DocumentedIn emulatorOnly documentedOnly in emulator
3249571349983710605184
3353742753923612583067
346051066050982618
A Platypus!
A Big Platypus!

©︎ 1942 Histausse
Please don’t train AI on my stuff without explicit permission

 \ No newline at end of file diff --git a/test_template/pages/cards.typ b/test_template/pages/cards.typ new file mode 100644 index 0000000..4371dda --- /dev/null +++ b/test_template/pages/cards.typ @@ -0,0 +1,89 @@ +#import "@local/template-web:0.0.1": * + +#let summ = summary( + base-url: "http://test.example.com", + path: "/cards.html", + title: "Summary cards", + page-label: , + preview-image: image( + "/assets/platypus.png", + alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", + ), + author: "Me!", + tags: ("test", "html/css", "typst"), + description: "Showcase the summary card system", + date: datetime(year: 1942, month: 4, day: 1), +) + +#show: webpage.with( + ..summ.template-args, + logo: image( + "/assets/platypus.png", + alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", + height: 100pt, + width: 100pt, // TODO 0.15 regression? in 0.14 setting the height was enough + ), + header: [ + = Summary Cards + Showcase summary cards + ], + footer: context [ + + #sym.copyright #document.date.display("[year]") Histausse \ + Please don't train AI on my stuff without explicit permission + ], + menu: [ + - #link()[Home] + - #link()[Demo Pyscript] + - #link()[Demo the card system] + ], + site-name: "TTT", + icon: "/img/platypus.png", // TODO: use somehow? probably not supported in 0.15 + + // Pyscript: + pyscript-data-list: ( + "remote-2026.3.1": pyscript-data( + "https://pyscript.net/releases/2026.3.1/core.js", + additionnal-head-tags: { + html.elem("script", attrs: (src: "/mini-coi.js")) // TODO: use somehow? probably not supported in 0.15 + html.elem("link", attrs: (rel: "stylesheet", href: "https://pyscript.net/releases/2026.3.1/core.css")) + }, + ) + ), + pyscript-version: "remote-2026.3.1", +) + + +#summ.card + + +#let perm = (17, 6, 20, 19, 15, 5, 13, 11, 14, 12, 16, 10, 2, 3, 1, 9, 7, 4, 18, 8) +#let summaries = range(20).map(i => + summary( + base-url: "http://test.example.com", + path: "/tst/" + str(perm.at(i)), + title: "Card " + str(perm.at(i)), + tags: if perm.at(i) == 20 { + ("tag2", "tag5","loooooonnnnnnnnnnnnnng-tag","some-tag","some-other-tag") + } else { + (2, 3, 5, 7).filter(j => calc.rem(perm.at(i), j) == 0).map(j => "tag" + str(j)) + }, + preview-image: summ.preview-image, + img-copyright: if calc.rem(i, 3) == 0 { [Histausse ] } else { none }, + author: "Me!", + description: lorem(10 * calc.rem(i * 123, 10)), + date: datetime(year: 2000, month: 12, day: perm.at(i)), + page-label: label("dummy-label-" + str(perm.at(i))), + ) +) +#card-list( + min-width: 200, + summaries, +) + +== Card Link Targets +Cards need a label to link to. Usually it is the label of a page, but here we don't generate the pages, to we target elements of this list: + +#for i in range(20) [ + - Target of card #i #label("dummy-label-" + str(perm.at(i))) +] diff --git a/test_template/index.typ b/test_template/pages/index.typ similarity index 54% rename from test_template/index.typ rename to test_template/pages/index.typ index 4265adf..a915368 100644 --- a/test_template/index.typ +++ b/test_template/pages/index.typ @@ -1,10 +1,12 @@ #import "@local/template-web:0.0.1": * #let summ = summary( - url: "http://test.example.com", + base-url: "http://test.example.com", + path: "/index.html", + page-label: , title: "TeTyTe", preview-image: image( - "assets/platypus.png", + "/assets/platypus.png", alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", ), author: "Me!", @@ -16,7 +18,7 @@ #show: webpage.with( ..summ.template-args, logo: image( - "assets/platypus.png", + "/assets/platypus.png", alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", height: 100pt, width: 100pt, // TODO 0.15 regression? in 0.14 setting the height was enough @@ -35,7 +37,7 @@ link( "http://test.example.com", image( - "assets/platypus.png", + "/assets/platypus.png", alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", height: 2em, ) @@ -44,113 +46,17 @@ html.a(href: "/feed.rss", aria-label: "RSS feed", icons.rss-icon), ), menu: [ - - #link("example.com")[Hello Void!] - - #link("example.com")[Demons] - - #link("example.com")[Run] - - #link("example.com")[When] - - #link("example.com")[A] - - #link("example.com")[Good] - - #link("example.com")[Man] - - #link("example.com")[Goes] - - #link("example.com")[To] - - #link("example.com")[War] + - #link()[Home] + - #link()[Demo Pyscript] + - #link()[Demo the summary card system] ], site-name: "TTT", icon: "/img/platypus.png", // TODO: use somehow? probably not supported in 0.15 - - // Pyscript: - pyscript-data-list: ( - "remote-2026.3.1": pyscript-data( - "https://pyscript.net/releases/2026.3.1/core.js", - additionnal-head-tags: { - html.elem("script", attrs: (src: "/mini-coi.js")) // TODO: use somehow? probably not supported in 0.15 - html.elem("link", attrs: (rel: "stylesheet", href: "https://pyscript.net/releases/2026.3.1/core.css")) - }, - ) - ), - pyscript-version: "remote-2026.3.1", ) #lorem(400) -```python-run -n = "" -while not n.isnumeric(): - n = input("enter a valid number: ") - -for i in range(1, int(n) + 1): - 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) -``` -```python-run -# /// script -# # requires-python = ">=3.11" # not supported yet -# dependencies = [ -# "rich", -# ] -# -# [tool.pyscript] -# repl = true -# [tool.pyscript.files] -# "https://peps.python.org/api/peps.json" = "./peps.json" -# /// - -import json -from rich.pretty import pprint - -with open("./peps.json") as fd: - data = json.load(fd) -pprint([(k, v["title"]) for k, v in data.items()][:10]) -# >>> print(data["723"]["title"]) -# Inline script metadata -``` - -```python-run -# /// script -# # requires-python = ">=3.11" # not supported yet -# dependencies = [ -# "rich", -# ] -# -# [tool.pyscript] -# repl = true -# hide-meta = true -# [tool.pyscript.files] -# "https://peps.python.org/api/peps.json" = "./peps.json" -# /// -# setting tool.pyscript.hide-meta to true will hide the `/// script` section -import json -from rich.pretty import pprint - -with open("./peps.json") as fd: - data = json.load(fd) -pprint([(k, v["title"]) for k, v in data.items()][:10]) -# >>> print(data["723"]["title"]) -# Inline script metadata -``` - -```python-run -# /// script -# dependencies = [ -# "pygame-ce", -# "./python-packages/isn_s_cube-0.1.0-py3-none-any.whl" -# ] -# [tool.pyscript] -# pygame = true -# /// -from isn_s_cube import wasm -await wasm() -``` - -#summ.card - Test, `this is not a code block`, end test. ```python @@ -168,7 +74,6 @@ def plopliplop(n: int) #raw(range(10).map(i => lorem(100)).join("\n"), block: true) -/* #figure({ show table: set text(size: 0.80em) table( @@ -199,7 +104,6 @@ def plopliplop(n: int) caption: [Comparison of API methods between documentation and emulators], ) -*/ ```raw-css table { @@ -220,7 +124,6 @@ thead { border-bottom: 1px solid #999999; } ``` -/* #table( columns: 5, //inset: (x: 0% + 5pt, y: 0% + 2pt), @@ -238,41 +141,19 @@ thead { [34], [605106], [605098], [26], [18], table.hline(), ) -*/ #figure( image( - "assets/smol-platypus.png", + "/assets/smol-platypus.png", alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", ), caption: [A Platypus!] ) #figure( image( - "assets/big-platypus.png", + "/assets/big-platypus.png", alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", ), caption: [A Big Platypus!] ) -#let perm = (17, 6, 20, 19, 15, 5, 13, 11, 14, 12, 16, 10, 2, 3, 1, 9, 7, 4, 18, 8) -#let summaries = range(20).map(i => - summary( - url: "http://test.example.com/tst/" + str(perm.at(i)), - title: "Card " + str(perm.at(i)), - tags: if perm.at(i) == 20 { - ("tag2", "tag5","loooooonnnnnnnnnnnnnng-tag","some-tag","some-other-tag") - } else { - (2, 3, 5, 7).filter(j => calc.rem(perm.at(i), j) == 0).map(j => "tag" + str(j)) - }, - preview-image: summ.preview-image, - img-copyright: if calc.rem(i, 3) == 0 { [Histausse ] } else { none }, - author: "Me!", - description: lorem(10 * calc.rem(i * 123, 10)), - date: datetime(year: 2000, month: 12, day: perm.at(i)), - ) -) -#card-list( - min-width: 200, - summaries, -) diff --git a/test_template/pages/pyscript.typ b/test_template/pages/pyscript.typ new file mode 100644 index 0000000..28b0c7e --- /dev/null +++ b/test_template/pages/pyscript.typ @@ -0,0 +1,129 @@ +#import "@local/template-web:0.0.1": * + +#let summ = summary( + base-url: "http://test.example.com", + path: "/pycript.html", + title: "TeTyTe", + page-label: , + preview-image: image( + "/assets/platypus.png", + alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", + ), + author: "Me!", + tags: ("test", "html/css", "typst", "pyscript"), + description: "Demonstrate how to use pyscript to run python in the browser", + date: datetime(year: 1942, month: 4, day: 1), +) + +#show: webpage.with( + ..summ.template-args, + logo: image( + "/assets/platypus.png", + alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", + height: 100pt, + width: 100pt, // TODO 0.15 regression? in 0.14 setting the height was enough + ), + header: [ + = Showcase Pyscript + Show how to run Python in the browser + ], + footer: context [ + + #sym.copyright #document.date.display("[year]") Histausse \ + Please don't train AI on my stuff without explicit permission + ], + site-name: "TTT", + icon: "/img/platypus.png", // TODO: use somehow? probably not supported in 0.15 + menu: [ + - #link()[Home] + - #link()[Demo Pyscript] + - #link()[Demo the summary card system] + ], + // Pyscript: + pyscript-data-list: ( + "remote-2026.3.1": pyscript-data( + "https://pyscript.net/releases/2026.3.1/core.js", + additionnal-head-tags: { + html.elem("script", attrs: (src: "/mini-coi.js")) // TODO: use somehow? probably not supported in 0.15 + html.elem("link", attrs: (rel: "stylesheet", href: "https://pyscript.net/releases/2026.3.1/core.css")) + }, + ) + ), + pyscript-version: "remote-2026.3.1", +) + +```python-run +n = "" +while not n.isnumeric(): + n = input("enter a valid number: ") + +for i in range(1, int(n) + 1): + 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) +``` +```python-run +# /// script +# # requires-python = ">=3.11" # not supported yet +# dependencies = [ +# "rich", +# ] +# +# [tool.pyscript] +# repl = true +# [tool.pyscript.files] +# "https://peps.python.org/api/peps.json" = "./peps.json" +# /// + +import json +from rich.pretty import pprint + +with open("./peps.json") as fd: + data = json.load(fd) +pprint([(k, v["title"]) for k, v in data.items()][:10]) +# >>> print(data["723"]["title"]) +# Inline script metadata +``` + +```python-run +# /// script +# # requires-python = ">=3.11" # not supported yet +# dependencies = [ +# "rich", +# ] +# +# [tool.pyscript] +# repl = true +# hide-meta = true +# [tool.pyscript.files] +# "https://peps.python.org/api/peps.json" = "./peps.json" +# /// +# setting tool.pyscript.hide-meta to true will hide the `/// script` section +import json +from rich.pretty import pprint + +with open("./peps.json") as fd: + data = json.load(fd) +pprint([(k, v["title"]) for k, v in data.items()][:10]) +# >>> print(data["723"]["title"]) +# Inline script metadata +``` + +```python-run +# /// script +# dependencies = [ +# "pygame-ce", +# "./python-packages/isn_s_cube-0.1.0-py3-none-any.whl" +# ] +# [tool.pyscript] +# pygame = true +# /// +from isn_s_cube import wasm +await wasm() +``` +