89 lines
2.8 KiB
Typst
89 lines
2.8 KiB
Typst
#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)))
|
|
]
|