From e0e86201e66e5e0be2a215b7e1295a40df726dc5 Mon Sep 17 00:00:00 2001 From: Jean-Marie 'Histausse' Mineau Date: Tue, 21 Apr 2026 21:38:43 +0200 Subject: [PATCH 1/3] Sort card by date in summaries --- lib/summary.typ | 7 ++++++- test_template/main.typ | 7 ++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/lib/summary.typ b/lib/summary.typ index 7596b9b..568f5e3 100644 --- a/lib/summary.typ +++ b/lib/summary.typ @@ -130,7 +130,12 @@ lang: "raw-css", ) chtml.summary-card-list(attrs: (class: class-name), { - for summ in summs { + for summ in summs.sorted(key: it => + -(it.document-args.date.day()-1 + 31 * ( + (it.document-args.date.month()-1) + + 12 * it.document-args.date.year() + )) + ) { summ.card } }) diff --git a/test_template/main.typ b/test_template/main.typ index cca7e15..f684e0d 100644 --- a/test_template/main.typ +++ b/test_template/main.typ @@ -164,16 +164,17 @@ thead { caption: [A Big Platypus!] ) +#let perm = (17, 6, 20, 19, 15, 5, 13, 11, 14, 12, 16, 10, 2, 3, 1, 9, 7, 4, 18, 8) #card-list( min-width: 200, - range(1, 21).map(i => + range(20).map(i => summary( url: "http://test.example.com", - title: "Card " + str(i), + title: "Card " + str(perm.at(i)), preview-image: summ.preview-image, author: "Me!", description: lorem(10 * calc.rem(i * 123, 10)), - date: datetime(year: 2000, month: 12, day: i), + date: datetime(year: 2000, month: 12, day: perm.at(i)), ) ) ) From 16d17f7ed7ceb862ec04a10b1259f18b095353c7 Mon Sep 17 00:00:00 2001 From: Jean-Marie 'Histausse' Mineau Date: Fri, 1 May 2026 18:44:23 +0200 Subject: [PATCH 2/3] add option to indicate image copyright for summary preview --- lib/summary.typ | 14 +++++++++++--- test_template/main.typ | 1 + 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/lib/summary.typ b/lib/summary.typ index 568f5e3..84bb9f8 100644 --- a/lib/summary.typ +++ b/lib/summary.typ @@ -23,10 +23,12 @@ } summary-card-preview { - display: block; + display: flex; + flex-direction: column; width: 100%; img { + display: block; width: 100%; height: 100%; object-fit: contain; @@ -54,9 +56,12 @@ } ``` chtml.summary-card({ - chtml.summary-card-preview( + chtml.summary-card-preview({ html.a(href: summ.template-args.url, summ.preview-image) - ) + if summ.img-copyright != none { + html.small[Image: #sym.copyright #summ.img-copyright] + } + }) chtml.summary-card-description({ heading(level: 2, html.a(href: summ.template-args.url, summ.document-args.title)) @@ -79,6 +84,8 @@ /// 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 copyright for the image + img-copyright: none, /// The author or authors of the page author: none, /// A description of the page @@ -104,6 +111,7 @@ url: url, ), preview-image: preview-image, + img-copyright: img-copyright, card: [] ) summ.card = gen_summary_card(summ) diff --git a/test_template/main.typ b/test_template/main.typ index f684e0d..4d66161 100644 --- a/test_template/main.typ +++ b/test_template/main.typ @@ -172,6 +172,7 @@ thead { url: "http://test.example.com", title: "Card " + str(perm.at(i)), 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)), From f653ed944ff01e711c127e5d1f44cc993beb1c7b Mon Sep 17 00:00:00 2001 From: Jean-Marie 'Histausse' Mineau Date: Fri, 1 May 2026 19:32:14 +0200 Subject: [PATCH 3/3] add support for tags --- lib/custom_html.typ | 1 + lib/html_head.typ | 7 +++++++ lib/main.typ | 3 +++ lib/summary.typ | 28 ++++++++++++++++++++++++++++ lib/theme_colors.typ | 3 ++- test_template/main.typ | 6 ++++++ 6 files changed, 47 insertions(+), 1 deletion(-) diff --git a/lib/custom_html.typ b/lib/custom_html.typ index 8d3e1e7..057c644 100644 --- a/lib/custom_html.typ +++ b/lib/custom_html.typ @@ -33,3 +33,4 @@ #let summary-card-details = html.elem.with("summary-card-details") #let summary-card-list = html.elem.with("summary-card-list") +#let tag-box = html.elem.with("tag-box") diff --git a/lib/html_head.typ b/lib/html_head.typ index 324221f..04fa55f 100644 --- a/lib/html_head.typ +++ b/lib/html_head.typ @@ -17,6 +17,8 @@ description: none, /// Author of the site for metadata, default to document.author author: none, + /// Tags describing the content of the page + tags: (), /// Additional stylesheet for the page: must be a list of url stylesheets: (), /// List of related sites for metadata @@ -38,6 +40,11 @@ // Only set the Referer header for out request to the same origin html.meta(name: "referrer", content: "same-origin") + // Tags + if tags.len() != 0 { + html.meta(name: "keywords", content: tags.join(", ")) + } + if icon != none { html.link(rel: "icon", type: "image/png", href: icon) } diff --git a/lib/main.typ b/lib/main.typ index 0a6db10..0f985f3 100644 --- a/lib/main.typ +++ b/lib/main.typ @@ -23,6 +23,8 @@ description: none, /// Author of the site for metadata, default to document.author author: none, + /// Tags describing the content of the page + tags: (), /// Additional stylesheet for the page: must be a list of url stylesheets: (), /// List of related sites for metadata @@ -53,6 +55,7 @@ site-name: site-name, description: description, author: author, + tags: tags, stylesheets: stylesheets, me-links: me-links ) diff --git a/lib/summary.typ b/lib/summary.typ index 84bb9f8..b149597 100644 --- a/lib/summary.typ +++ b/lib/summary.typ @@ -51,6 +51,30 @@ margin-top: auto; padding-top: 1em; } + + tag-box { + display: flex; + flex-wrap: wrap; + margin-top: 0.3em; + + .tag { + max-width: ; + overflow: hidden; + text-overflow: ellipsis; + display:inline-block; + white-space: nowrap; + + background-color: var(--color-bg-highlight); + margin: 0.1em; + padding-top: 0.1em; + padding-bottom: 0.1em; + padding-left: 0.4em; + padding-right: 0.4em; + border-radius: 1em; + + } + } + } } @@ -68,6 +92,7 @@ html.a(href: summ.template-args.url, summ.document-args.description) chtml.summary-card-details(summ.document-args.date.display()) + chtml.tag-box(for tag in summ.template-args.tags { html.span(class: ("tag",), "#" + tag) }) }) }) } @@ -92,6 +117,8 @@ description: none, /// The date of publication (or maybe update?) of the page. date: none, + /// Tags associated to the content of the page + tags: (), ) = { assert(type(url) == str, message: "summary() must have an url") assert(type(title) == str or type(title) == content, message: "summary() must have title") @@ -109,6 +136,7 @@ ), template-args: ( url: url, + tags: tags, ), preview-image: preview-image, img-copyright: img-copyright, diff --git a/lib/theme_colors.typ b/lib/theme_colors.typ index 3df786a..8f68ff2 100644 --- a/lib/theme_colors.typ +++ b/lib/theme_colors.typ @@ -14,7 +14,8 @@ --color-button-shadow: light-dark(#888, #000); --color-button-focus: light-dark(#000, #FFF); - --color-code-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); + --color-bg-highlight: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); + --color-code-bg: var(--color-bg-highlight); --color-bg-overlay: light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.9)); diff --git a/test_template/main.typ b/test_template/main.typ index 4d66161..01354de 100644 --- a/test_template/main.typ +++ b/test_template/main.typ @@ -8,6 +8,7 @@ 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), ) @@ -171,6 +172,11 @@ thead { summary( url: "http://test.example.com", 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!",