Compare commits
No commits in common. "f653ed944ff01e711c127e5d1f44cc993beb1c7b" and "cdcf69db60a4d312b912083c0d474827d0bd6cb0" have entirely different histories.
f653ed944f
...
cdcf69db60
6 changed files with 8 additions and 69 deletions
|
|
@ -33,4 +33,3 @@
|
||||||
#let summary-card-details = html.elem.with("summary-card-details")
|
#let summary-card-details = html.elem.with("summary-card-details")
|
||||||
|
|
||||||
#let summary-card-list = html.elem.with("summary-card-list")
|
#let summary-card-list = html.elem.with("summary-card-list")
|
||||||
#let tag-box = html.elem.with("tag-box")
|
|
||||||
|
|
|
||||||
|
|
@ -17,8 +17,6 @@
|
||||||
description: none,
|
description: none,
|
||||||
/// Author of the site for metadata, default to document.author
|
/// Author of the site for metadata, default to document.author
|
||||||
author: none,
|
author: none,
|
||||||
/// Tags describing the content of the page
|
|
||||||
tags: (),
|
|
||||||
/// Additional stylesheet for the page: must be a list of url
|
/// Additional stylesheet for the page: must be a list of url
|
||||||
stylesheets: (),
|
stylesheets: (),
|
||||||
/// List of related sites for metadata
|
/// List of related sites for metadata
|
||||||
|
|
@ -40,11 +38,6 @@
|
||||||
// Only set the Referer header for out request to the same origin
|
// Only set the Referer header for out request to the same origin
|
||||||
html.meta(name: "referrer", content: "same-origin")
|
html.meta(name: "referrer", content: "same-origin")
|
||||||
|
|
||||||
// Tags
|
|
||||||
if tags.len() != 0 {
|
|
||||||
html.meta(name: "keywords", content: tags.join(", "))
|
|
||||||
}
|
|
||||||
|
|
||||||
if icon != none {
|
if icon != none {
|
||||||
html.link(rel: "icon", type: "image/png", href: icon)
|
html.link(rel: "icon", type: "image/png", href: icon)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,8 +23,6 @@
|
||||||
description: none,
|
description: none,
|
||||||
/// Author of the site for metadata, default to document.author
|
/// Author of the site for metadata, default to document.author
|
||||||
author: none,
|
author: none,
|
||||||
/// Tags describing the content of the page
|
|
||||||
tags: (),
|
|
||||||
/// Additional stylesheet for the page: must be a list of url
|
/// Additional stylesheet for the page: must be a list of url
|
||||||
stylesheets: (),
|
stylesheets: (),
|
||||||
/// List of related sites for metadata
|
/// List of related sites for metadata
|
||||||
|
|
@ -55,7 +53,6 @@
|
||||||
site-name: site-name,
|
site-name: site-name,
|
||||||
description: description,
|
description: description,
|
||||||
author: author,
|
author: author,
|
||||||
tags: tags,
|
|
||||||
stylesheets: stylesheets,
|
stylesheets: stylesheets,
|
||||||
me-links: me-links
|
me-links: me-links
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -23,12 +23,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
summary-card-preview {
|
summary-card-preview {
|
||||||
display: flex;
|
display: block;
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
|
@ -51,48 +49,20 @@
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding-top: 1em;
|
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({
|
||||||
chtml.summary-card-preview({
|
chtml.summary-card-preview(
|
||||||
html.a(href: summ.template-args.url, summ.preview-image)
|
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({
|
chtml.summary-card-description({
|
||||||
heading(level: 2, html.a(href: summ.template-args.url, summ.document-args.title))
|
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)
|
html.a(href: summ.template-args.url, summ.document-args.description)
|
||||||
|
|
||||||
chtml.summary-card-details(summ.document-args.date.display())
|
chtml.summary-card-details(summ.document-args.date.display())
|
||||||
chtml.tag-box(for tag in summ.template-args.tags { html.span(class: ("tag",), "#" + tag) })
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -109,16 +79,12 @@
|
||||||
/// Right now, this cannot be used for link preview because open graph expect an url for the image, and typst inline
|
/// 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.
|
/// the images directly in the html file in base64.
|
||||||
preview-image: none,
|
preview-image: none,
|
||||||
/// The copyright for the image
|
|
||||||
img-copyright: none,
|
|
||||||
/// The author or authors of the page
|
/// The author or authors of the page
|
||||||
author: none,
|
author: none,
|
||||||
/// A description of the page
|
/// A description of the page
|
||||||
description: none,
|
description: none,
|
||||||
/// The date of publication (or maybe update?) of the page.
|
/// The date of publication (or maybe update?) of the page.
|
||||||
date: none,
|
date: none,
|
||||||
/// Tags associated to the content of the page
|
|
||||||
tags: (),
|
|
||||||
) = {
|
) = {
|
||||||
assert(type(url) == str, message: "summary() must have an url")
|
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(title) == str or type(title) == content, message: "summary() must have title")
|
||||||
|
|
@ -136,10 +102,8 @@
|
||||||
),
|
),
|
||||||
template-args: (
|
template-args: (
|
||||||
url: url,
|
url: url,
|
||||||
tags: tags,
|
|
||||||
),
|
),
|
||||||
preview-image: preview-image,
|
preview-image: preview-image,
|
||||||
img-copyright: img-copyright,
|
|
||||||
card: []
|
card: []
|
||||||
)
|
)
|
||||||
summ.card = gen_summary_card(summ)
|
summ.card = gen_summary_card(summ)
|
||||||
|
|
@ -166,12 +130,7 @@
|
||||||
lang: "raw-css",
|
lang: "raw-css",
|
||||||
)
|
)
|
||||||
chtml.summary-card-list(attrs: (class: class-name), {
|
chtml.summary-card-list(attrs: (class: class-name), {
|
||||||
for summ in summs.sorted(key: it =>
|
for summ in summs {
|
||||||
-(it.document-args.date.day()-1 + 31 * (
|
|
||||||
(it.document-args.date.month()-1) +
|
|
||||||
12 * it.document-args.date.year()
|
|
||||||
))
|
|
||||||
) {
|
|
||||||
summ.card
|
summ.card
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,7 @@
|
||||||
--color-button-shadow: light-dark(#888, #000);
|
--color-button-shadow: light-dark(#888, #000);
|
||||||
--color-button-focus: light-dark(#000, #FFF);
|
--color-button-focus: light-dark(#000, #FFF);
|
||||||
|
|
||||||
--color-bg-highlight: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
|
--color-code-bg: 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));
|
--color-bg-overlay: light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.9));
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
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.",
|
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!",
|
author: "Me!",
|
||||||
tags: ("test", "html/css", "typst"),
|
|
||||||
description: "Test of the TTT template",
|
description: "Test of the TTT template",
|
||||||
date: datetime(year: 1942, month: 4, day: 1),
|
date: datetime(year: 1942, month: 4, day: 1),
|
||||||
)
|
)
|
||||||
|
|
@ -165,23 +164,16 @@ thead {
|
||||||
caption: [A Big Platypus!]
|
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(
|
#card-list(
|
||||||
min-width: 200,
|
min-width: 200,
|
||||||
range(20).map(i =>
|
range(1, 21).map(i =>
|
||||||
summary(
|
summary(
|
||||||
url: "http://test.example.com",
|
url: "http://test.example.com",
|
||||||
title: "Card " + str(perm.at(i)),
|
title: "Card " + str(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,
|
preview-image: summ.preview-image,
|
||||||
img-copyright: if calc.rem(i, 3) == 0 { [Histausse ] } else { none },
|
|
||||||
author: "Me!",
|
author: "Me!",
|
||||||
description: lorem(10 * calc.rem(i * 123, 10)),
|
description: lorem(10 * calc.rem(i * 123, 10)),
|
||||||
date: datetime(year: 2000, month: 12, day: perm.at(i)),
|
date: datetime(year: 2000, month: 12, day: i),
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue