103 lines
3.2 KiB
Typst
103 lines
3.2 KiB
Typst
#import "./custom_html.typ" as chtml
|
|
|
|
/// Generate the html <head> element for the page.
|
|
#let html_head(
|
|
/// Page url,
|
|
url,
|
|
/// Title of the page
|
|
title,
|
|
/// Path to the icon (TODO: /!\ must be an url, typst image not yet supported)
|
|
icon,
|
|
/// Type of the page for open-graph data
|
|
og-type: "website",
|
|
/// Name of the site for metadata of the page
|
|
site-name: none,
|
|
/// Description of the site for metadata #TODO default to document.description
|
|
description: none,
|
|
/// Author of the site for metadata #TODO default to document.author
|
|
author: none,
|
|
/// Additional stylesheet for the page: must be a list of url
|
|
stylesheets: (),
|
|
/// List of related sites for metadata
|
|
me-links: (),
|
|
) = {
|
|
html.head({
|
|
html.meta(charset: "utf-8")
|
|
html.title(title)
|
|
// html.meta(http-equiv: "Content-Language", content: "en") Obsolet, now use the html tag attr "lang" instead
|
|
|
|
// The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
|
|
// The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
|
|
html.meta(name: "viewport", content: "width=device-width, initial-scale=1.0")
|
|
|
|
// Only set the Referer header for out request to the same origin
|
|
html.meta(name: "referrer", content: "same-origin")
|
|
|
|
if icon != none {
|
|
html.link(rel: "icon", type: "image/png", href: icon)
|
|
}
|
|
|
|
// Open Graph (https://ogp.me/), used by social media for link previsualisation
|
|
chtml.meta-og(property: "og:title", content: repr(title))
|
|
chtml.meta-og(property: "og:type", content: og-type)
|
|
chtml.meta-og(property: "og:url", content: url)
|
|
if icon != none {
|
|
chtml.meta-og(property: "og:image", content: icon) // TODO: right now the logo need to be the full URL
|
|
}
|
|
if site-name != none {
|
|
chtml.meta-og(property: "og:site_name", content: site-name)
|
|
}
|
|
if description != none {
|
|
chtml.meta-og(property: "og:description", content: description)
|
|
}
|
|
|
|
// Check https://www.w3schools.com/tags/att_link_rel.asp for other interesting link rel
|
|
for stylesheet in stylesheets {
|
|
html.link(rel: "stylesheet", type: "text/css", href: stylesheet)
|
|
}
|
|
for me-link in me-links {
|
|
html.elem("link", attrs: (rel: "me", href: me-link))
|
|
}
|
|
if description != none {
|
|
html.meta(name: "description", content: description)
|
|
}
|
|
if author != none {
|
|
html.meta(name: "author", content: author)
|
|
}
|
|
|
|
```raw-css
|
|
:root {
|
|
color-scheme: light dark;
|
|
&:has(#theme-light:checked) {
|
|
color-scheme: light;
|
|
}
|
|
&:has(#theme-dark:checked) {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
--color-border: light-dark(#414868, #414868);
|
|
}
|
|
site-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
justify-content: center;
|
|
|
|
site-container {
|
|
width: 1050px;
|
|
padding: 0 20px;
|
|
|
|
header {
|
|
// display: flex
|
|
// flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 5px;
|
|
border-bottom: solid 1px var(--color-border);
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
```
|
|
})
|
|
}
|