typst-web-template/test_template/pages/index.typ
Jean-Marie 'Histausse' Mineau 7fe9b99535
start migration to bundle format
2026-06-17 12:40:20 +02:00

159 lines
4.2 KiB
Typst

#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!]
)