54 lines
1.7 KiB
Typst
54 lines
1.7 KiB
Typst
#import "@local/template-web:0.0.1": *
|
|
#import "/lib.typ": webpage
|
|
|
|
#let 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.",
|
|
)
|
|
#show: webpage.with(
|
|
path: "/cards.html",
|
|
title: "Summary cards",
|
|
description: "Showcase the summary card system",
|
|
date: datetime(year: 1942, month: 4, day: 1),
|
|
tags: ("test", "html/css", "typst"),
|
|
page-label: <cards-page>,
|
|
preview-image: preview-image,
|
|
header: [
|
|
= Summary Cards
|
|
Showcase summary cards
|
|
],
|
|
)
|
|
|
|
|
|
#context state-page-summaries.at(here()).last().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(
|
|
url: "https://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: 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)))
|
|
]
|