add support for tags

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")

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)
     }

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
     )

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;
@@ -49,20 +51,48 @@
         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;
+
+        }
+      }
+
     }
 
   }
   ```
   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))
 
         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) })
       })
   })
 }
@@ -79,12 +109,16 @@
   /// 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
   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")
@@ -102,8 +136,10 @@
     ),
     template-args: (
       url: url,
+      tags: tags,
     ),
     preview-image: preview-image,
+    img-copyright: img-copyright,
     card: []
   )
   summ.card = gen_summary_card(summ)
@@ -130,7 +166,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
     }
   })

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));
 

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),
 )
@@ -164,16 +165,23 @@ 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)),
+      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: i),
+      date: datetime(year: 2000, month: 12, day: perm.at(i)),
     )
   )
 )