Refactor page builder

1 files changed, 110 insertions, 0 deletions

diff --git a/src/page.rs b/src/page.rs
new file mode 100644
index 0000000..6d788f3
--- /dev/null
+++ b/src/page.rs
@@ -0,0 +1,110 @@
+use maud::{html, Markup, DOCTYPE};
+
+pub trait Page: Sized {
+    fn render_content(self) -> Markup;
+    fn page_title() -> String;
+    fn render_head() -> Markup {
+        html!(
+            head {
+                (DOCTYPE)
+                meta charset="utf-8";
+                meta name="viewport" content="width=device-width,initial-scale=1";
+                title { (Self::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 render_page(self) -> Markup {
+        html!((Self::render_head())(Self::style())(
+            Self::render_navigation()
+        )(Self::render_content(self)))
+    }
+}