Pass the nav links in the PageHeader render context.

default_environment/stylesheet/main.css

@@ -22,6 +22,11 @@
   --table-border-color: #6a687a;
   --table-odd-background-color: #0a0a0a;
   --table-even-background-color: #141414;
+
+  --header-nav-regular-font-color: var(--site-text-color);
+  --header-nav-regular-background-color: var(--site-background-color);
+  --header-nav-hover-font-color: var(--site-background-color);
+  --header-nav-hover-background-color: var(--site-text-color);
 }
 
 @media (prefers-color-scheme: light) {
@@ -45,6 +50,11 @@
     --table-border-color: #959785;
     --table-odd-background-color: #f5f5f5;
     --table-even-background-color: #ebebeb;
+
+    --header-nav-regular-font-color: var(--site-text-color);
+    --header-nav-regular-background-color: var(--site-background-color);
+    --header-nav-hover-font-color: var(--site-background-color);
+    --header-nav-hover-background-color: var(--site-text-color);
   }
 }
 
@@ -72,11 +82,16 @@ body {
 }
 
 .page_header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
   width: 100%;
   max-width: var(--main-max-width);
   border-bottom: 0.1rem solid var(--header-divider-color);
 
   .home_link {
+    display: block;
     font-size: 2rem;
     font-weight: 600;
     text-decoration: none;
@@ -86,6 +101,32 @@ body {
       color: var(--site-text-color);
     }
   }
+
+  .header_nav_bar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: end;
+    align-items: stretch;
+    column-gap: 1rem;
+
+    .nav_link {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      color: var(--header-nav-regular-font-color);
+      background: var(--header-nav-regular-background-color);
+      padding: 0 0.5rem;
+      transition-property: background, color;
+      transition-duration: 0.1s;
+      transition-timing-function: ease-out;
+
+      &:hover {
+        color: var(--header-nav-hover-font-color);
+        background: var(--header-nav-hover-background-color);
+      }
+    }
+  }
 }
 
 .main_content {

default_environment/templates/html/page_header.dust

@@ -1,4 +1,9 @@
 <header class="page_header">
   <a class="home_link" href="{.home_link}">{.website_title}</a>
   {! TODO: Additional links? Probably using the nav semantic element. !}
+  <nav class="header_nav_bar">
+    {#.nav_links}
+      <a class="nav_link" href="{.url}"><div>{.text}</div></a>
+    {/.nav_links}
+  </nav>
 </header>

src/context/blog_post_page.rs

@@ -61,6 +61,12 @@ render!(
                     render_context.output_file,
                     "",
                 )?),
+                Some(get_web_path(
+                    render_context.config,
+                    render_context.output_root_directory,
+                    render_context.output_file,
+                    "about_me",
+                )?),
             );
             let link_to_blog_post = get_web_path(
                 render_context.config,

src/context/blog_stream.rs

@@ -59,6 +59,12 @@ render!(
                 render_context.output_file,
                 "",
             )?),
+            Some(get_web_path(
+                render_context.config,
+                render_context.output_root_directory,
+                render_context.output_file,
+                "about_me",
+            )?),
         );
 
         let children = original

src/context/page.rs

@@ -40,6 +40,12 @@ render!(RenderPage, IPage, original, render_context, {
                 render_context.output_file,
                 "",
             )?),
+            Some(get_web_path(
+                render_context.config,
+                render_context.output_root_directory,
+                render_context.output_file,
+                "about_me",
+            )?),
         );
         let link_to_blog_post = get_web_path(
             render_context.config,

src/context/page_header.rs

@@ -7,13 +7,35 @@ use serde::Serialize;
 pub(crate) struct PageHeader {
     website_title: Option<String>,
     home_link: Option<String>,
+    nav_links: Vec<NavLink>,
+}
+
+/// A link in the top-right of the page.
+#[derive(Debug, Serialize)]
+#[serde(tag = "type")]
+#[serde(rename = "nav_link")]
+pub(crate) struct NavLink {
+    text: Option<String>,
+    url: Option<String>,
 }
 
 impl PageHeader {
-    pub(crate) fn new(website_title: Option<String>, home_link: Option<String>) -> PageHeader {
+    pub(crate) fn new(
+        website_title: Option<String>,
+        home_link: Option<String>,
+        about_me_link: Option<String>,
+    ) -> PageHeader {
         PageHeader {
             website_title,
             home_link,
+            nav_links: about_me_link
+                .map(|url| {
+                    vec![NavLink {
+                        text: Some("About Me".to_owned()),
+                        url: Some(url),
+                    }]
+                })
+                .unwrap_or_default(),
         }
     }
 }