Add common page elements

1 files changed, 103 insertions, 2 deletions

diff --git a/src/main.rs b/src/main.rs
index e1460f2..6da30fc 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,5 +1,5 @@
 use anyhow::{Context, Result};
-use maud::{html, Markup};
+use maud::{html, Markup, DOCTYPE};
 use serde::Deserialize;
 
 #[derive(Deserialize)]
@@ -32,11 +32,112 @@ impl Story {
     }
 }
 
+fn render_head(page_title: &str) -> Markup {
+    html!(
+        head {
+            (DOCTYPE)
+            meta charset="utf-8";
+            meta name="viewport" content="width=device-width,initial-scale=1";
+            title { (page_title) }
+        }
+    )
+}
+
+fn render_navigation() -> Markup {
+    html!(
+        div class="navbar" {
+            header {
+                h1 {
+                    "V2 Tales";
+                }
+            }
+            nav {
+                a href="" {
+                    "HOME";
+                }
+                a href="" {
+                    "STORIES";
+                }
+            }
+        }
+    )
+}
+
+fn style() -> Markup {
+    html!(
+        style {
+            """
+* {
+        padding: 0;
+        margin: 0;
+    }
+
+    h1 {
+        padding: 0.3rem;
+        letter-spacing: 0.8rem;
+        font-size: 1.5rem;
+        color: #0d234adb;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+    }
+
+    h2 {
+        font-size: 2rem;
+        margin-bottom: 2rem;
+        color: #0d234adb;
+    }
+
+
+    body {
+        margin: 2rem 1rem;
+        background-color: #ffc994;
+        text-align: center;
+    }
+
+    hr {
+        margin: 1rem;
+    }
+
+    img {
+        max-width: 3rem;
+        max-height: 3rem;
+    }
+
+    .navbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 3rem;
+    }
+
+    nav {
+        display: flex;
+        justify-content: space-around;
+        width: 50%;
+
+        a {
+            text-decoration: none;
+            color: #0d234adb;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+            """
+        }
+    )
+}
+
 fn main() -> Result<()> {
     let data_file_content =
         std::fs::read_to_string("data.toml").with_context(|| "Failed to read data.toml")?;
     let data: Data = toml::from_str(&data_file_content)?;
-    let stories_html = html!((data.render_stories()));
+    let stories_html = html!((render_head("Stories - V2 Tales"))(style())(
+        render_navigation()
+    )(data.render_stories()));
     std::fs::write("dist/stories.html", stories_html.into_string())
         .with_context(|| "Failed to write dist/stories.html")?;
     Ok(())