start migration to bundle format
This commit is contained in:
Jean-Marie 'Histausse' Mineau
parent
64e270a868
commit
7fe9b99535
GPG key ID:
B66AEEDA9B645AD2
13 changed files with 378 additions and 470 deletions
89
test_template/pages/cards.typ
Normal file
89
test_template/pages/cards.typ
Normal file
|
|
@ -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: <cards-page>,
|
||||
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(<index-page>)[Home]
|
||||
- #link(<pyscript-page>)[Demo Pyscript]
|
||||
- #link(<cards-page>)[Demo the card system]
|
||||
],
|
||||
site-name: "TTT",
|
||||
icon: "/img/platypus.png", // TODO: use <ico> 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 <mini-coi> 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)))
|
||||
]
|
||||
159
test_template/pages/index.typ
Normal file
159
test_template/pages/index.typ
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
#import "@local/template-web:0.0.1": *
|
||||
|
||||
#let summ = summary(
|
||||
base-url: "http://test.example.com",
|
||||
path: "/index.html",
|
||||
page-label: <index-page>,
|
||||
title: "TeTyTe",
|
||||
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: "Test of the TTT template",
|
||||
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: [
|
||||
= Test TeTyTe
|
||||
Hello World!
|
||||
],
|
||||
footer: context [
|
||||
|
||||
#sym.copyright #document.date.display("[year]") Histausse \
|
||||
Please don't train AI on my stuff without explicit permission
|
||||
],
|
||||
nav-elements: (
|
||||
/*
|
||||
link(
|
||||
"http://test.example.com",
|
||||
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: 2em,
|
||||
)
|
||||
),*/
|
||||
html.a(href: "http://test.example.com", aria-label: "Home", icons.home-icon), // /!\ aria-label is important for accessibility /!\
|
||||
html.a(href: "/feed.rss", aria-label: "RSS feed", icons.rss-icon),
|
||||
),
|
||||
menu: [
|
||||
- #link(<index-page>)[Home]
|
||||
- #link(<pyscript-page>)[Demo Pyscript]
|
||||
- #link(<cards-page>)[Demo the summary card system]
|
||||
],
|
||||
site-name: "TTT",
|
||||
icon: "/img/platypus.png", // TODO: use <ico> somehow? probably not supported in 0.15
|
||||
)
|
||||
|
||||
|
||||
#lorem(400)
|
||||
|
||||
Test, `this is not a code block`, end test.
|
||||
|
||||
```python
|
||||
def plopliplop(n: int)
|
||||
for i in range(n):
|
||||
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)
|
||||
```
|
||||
|
||||
#raw(range(10).map(i => lorem(100)).join("\n"), block: true)
|
||||
|
||||
#figure({
|
||||
show table: set text(size: 0.80em)
|
||||
table(
|
||||
columns: 5,
|
||||
//inset: (x: 0% + 5pt, y: 0% + 2pt),
|
||||
stroke: none,
|
||||
align: center+horizon,
|
||||
table.hline(),
|
||||
table.header(
|
||||
table.cell(colspan: 5, inset: 3pt)[],
|
||||
table.cell(rowspan: 2)[*SDK version*],
|
||||
table.vline(end: 3),
|
||||
table.vline(start: 4),
|
||||
table.cell(colspan: 4)[*Number of API methods*],
|
||||
[Documented], [In emulator], [Only documented], [Only in emulator],
|
||||
),
|
||||
table.cell(colspan: 5, inset: 3pt)[],
|
||||
table.hline(),
|
||||
table.cell(colspan: 5, inset: 3pt)[],
|
||||
|
||||
[32], [495713], [499837], [1060], [5184],
|
||||
[33], [537427], [539236], [1258], [3067],
|
||||
[34], [605106], [605098], [26], [18],
|
||||
|
||||
table.cell(colspan: 4, inset: 3pt)[],
|
||||
table.hline(),
|
||||
)},
|
||||
|
||||
caption: [Comparison of API methods between documentation and emulators],
|
||||
)<tab:cl-platform_apis>
|
||||
|
||||
```raw-css
|
||||
table {
|
||||
//border: 1px solid blue;
|
||||
border-bottom: 1px solid #999999;
|
||||
border-top: 1px solid #999999;
|
||||
border-collapse: collapse;
|
||||
margin: 0.4em;
|
||||
}
|
||||
th, td {
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
td {
|
||||
//border: 1px solid red;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid #999999;
|
||||
}
|
||||
```
|
||||
#table(
|
||||
columns: 5,
|
||||
//inset: (x: 0% + 5pt, y: 0% + 2pt),
|
||||
//stroke: none,
|
||||
align: center+horizon,
|
||||
table.hline(),
|
||||
table.header(
|
||||
table.cell(rowspan: 2)[*SDK version*],
|
||||
table.cell(colspan: 4)[*Number of API methods*],
|
||||
table.cell(stroke: black)[Documented], [In emulator], [Only documented], [Only in emulator],
|
||||
),
|
||||
table.hline(),
|
||||
[32], [495713], [499837], [1060], [5184],
|
||||
[33], [537427], [539236], [1258], [3067],
|
||||
[34], [605106], [605098], [26], [18],
|
||||
table.hline(),
|
||||
)
|
||||
|
||||
#figure(
|
||||
image(
|
||||
"/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",
|
||||
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!]
|
||||
)
|
||||
|
||||
129
test_template/pages/pyscript.typ
Normal file
129
test_template/pages/pyscript.typ
Normal file
|
|
@ -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: <pyscript-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 <ico> somehow? probably not supported in 0.15
|
||||
menu: [
|
||||
- #link(<index-page>)[Home]
|
||||
- #link(<pyscript-page>)[Demo Pyscript]
|
||||
- #link(<cards-page>)[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 <mini-coi> 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()
|
||||
```
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue