add support for page summary and summary cards

2026-04-20 14:13:32 +02:00 · 2026-04-20 14:13:32 +02:00 · ff024740a4
commit ff024740a4
parent 383cf855b5
5 changed files with 176 additions and 7 deletions
--- a/lib/summary.typ
+++ b/lib/summary.typ
@ -0,0 +1,136 @@
+#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: left;
+      height: 100%;
+
+      h3 {
+        text-align: center;
+        margin: 0.5em;
+      }
+
+      summary-card-details {
+        margin-top: auto;
+        padding-top: 0.5em;
+      }
+    }
+
+  }
+  ```
+  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
+    }
+  })
+}