basic home button

lib/custom_html.typ

@@ -16,3 +16,4 @@
   html.elem("icon-container", attrs: args.named(), body)
 }
 #let nav-menu = html.elem.with("nav-menu")
+#let home-symbol = html.elem.with("home-symbol")

lib/html_body.typ

@@ -7,6 +7,8 @@
 #let html_body(
   /// The visible header of the page
   header: none,
+  /// Home button, more or less expect an image in a link
+  home: none,
   /// The footer of the page
   footer: none,
   /// Logo of the site
@@ -39,6 +41,20 @@
         margin-left: 0.25rem;
         margin-right: 0.25rem;
       }
+      
+      /* Typst keep inserting <p> tags everywhere */
+      & > p {
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+      }
+
+      home-symbol, home-symbol a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        /*height: 100%;*/
+
+      }
     }
   
     site-container {
@@ -48,8 +64,10 @@
       padding: 0 20px;
   
       header {
-        // display: flex
-        // flex-wrap: wrap;
+        /*
+         * display: flex
+         * flex-wrap: wrap; 
+         */
         justify-content: space-between;
         align-items: center;
         padding: 15px 5px;
@@ -87,6 +105,7 @@
     chtml.site-wrapper({
       chtml.site-container({
         html.nav({
+          if home != none { chtml.home-symbol(home) }
           theme-picker()
           if menu != none { nav-menu-toggle() }
         })

lib/main.typ

@@ -27,6 +27,8 @@
   /// List of related sites for metadata
   me-links: (),
   //-- Body --
+  /// Home button, more or less expect an image in a link
+  home: none,
   /// Navigation menu content, css style expect a list of links, but it can
   /// be anything
   menu: none,
@@ -53,6 +55,7 @@
       me-links: me-links
     )
     html_body(
+      home: home,
       logo: logo,
       header: header,
       footer: footer,

test_template/main.typ

@@ -6,8 +6,17 @@
   description: "Test of the TTT template",
 )
 
+
 #show: webpage.with(
   "http://test.example.com",
+  home: link(
+    "http://test.example.com",
+    image(
+      "./platypus.png",
+      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.",
+      height: 2em,
+    )
+  ),
   logo: image(
     "./platypus.png", 
     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.",