137 lines
3.4 KiB
Typst
137 lines
3.4 KiB
Typst
#import "./custom_html.typ" as chtml
|
|
|
|
/// Generate a "card" fom a page summary.
|
|
#let gen_summary_card(summ) = {
|
|
```raw-css
|
|
summary-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 400px;
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
padding: 1em;
|
|
margin: 1em;
|
|
border: solid;
|
|
border-radius: 1em;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
summary-card-preview {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
summary-card-description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: justify;
|
|
height: 100%;
|
|
|
|
h3 {
|
|
text-align: center;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
summary-card-details {
|
|
text-align: left;
|
|
margin-top: auto;
|
|
padding-top: 1em;
|
|
}
|
|
}
|
|
|
|
}
|
|
```
|
|
chtml.summary-card({
|
|
chtml.summary-card-preview(
|
|
html.a(href: summ.template-args.url, summ.preview-image)
|
|
)
|
|
chtml.summary-card-description({
|
|
heading(level: 2, html.a(href: summ.template-args.url, summ.document-args.title))
|
|
|
|
html.a(href: summ.template-args.url, summ.document-args.description)
|
|
|
|
chtml.summary-card-details(summ.document-args.date.display())
|
|
})
|
|
})
|
|
}
|
|
|
|
/// Summary of a page.
|
|
/// 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 title of the page
|
|
title: none,
|
|
/// The image preview of the page.
|
|
/// Right now, this cannot be used for link preview because open graph expect an url for the image, and typst inline
|
|
/// the images directly in the html file in base64.
|
|
preview-image: none,
|
|
/// The author or authors of the page
|
|
author: none,
|
|
/// A description of the page
|
|
description: none,
|
|
/// The date of publication (or maybe update?) of the page.
|
|
date: none,
|
|
) = {
|
|
assert(type(url) == str, message: "summary() must have an url")
|
|
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")
|
|
|
|
let summ = (
|
|
document-args: (
|
|
title: title,
|
|
author: author,
|
|
description: description,
|
|
date: date,
|
|
),
|
|
template-args: (
|
|
url: url,
|
|
),
|
|
preview-image: preview-image,
|
|
card: []
|
|
)
|
|
summ.card = gen_summary_card(summ)
|
|
return summ
|
|
}
|
|
|
|
/// Display a list of summary cards.
|
|
///
|
|
/// min-width is the minimum width of the cards, in px.
|
|
#let card-list(min-width: 400, summs) = {
|
|
let class-name = "summary-card-list-" + str(min-width)
|
|
raw(
|
|
```
|
|
summary-card-list.<CLASSNAME> {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, <MINWIDTH>px), 1fr));
|
|
|
|
summary-card {
|
|
max-width: none;
|
|
}
|
|
}
|
|
```.text.replace("<CLASSNAME>", class-name).replace("<MINWIDTH>", str(min-width)),
|
|
lang: "raw-css",
|
|
)
|
|
chtml.summary-card-list(attrs: (class: class-name), {
|
|
for summ in summs {
|
|
summ.card
|
|
}
|
|
})
|
|
}
|