basic site

2026-03-16 00:28:28 +01:00 · 2026-03-16 00:28:28 +01:00 · a4337b3514
commit a4337b3514
parent e99be95ce6
8 changed files with 207 additions and 2 deletions
--- a/lib/html_head.typ
+++ b/lib/html_head.typ
@ -0,0 +1,103 @@
+#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;
+        }
+      }
+    }
+    ```
+  })
+}