Styling for index page

blog_server/src/main.rs

@@ -3,7 +3,8 @@ mod fs_watcher;
 mod post;
 mod posts_store;
 mod render;
-mod services;
+mod service;
+mod template;
 
 use std::{env, fs, path::PathBuf, thread};
 
@@ -79,7 +80,7 @@ fn main() -> miette::Result<()> {
 }
 
 async fn run(config: Config, posts_store: ConcurrentPostsStore) -> miette::Result<()> {
-    let service = services::site_service(
+    let service = service::site_service(
         posts_store,
         &config.static_dir,
         config.concurrency_limit

blog_server/src/service/index.rs

@@ -0,0 +1,52 @@
+use axum::extract::Extension;
+use maud::html;
+
+use crate::{
+    posts_store::ConcurrentPostsStore,
+    template,
+};
+use super::response::HtmlResponse;
+
+pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> HtmlResponse {
+    HtmlResponse::new()
+        .with_title_static("Placeholder title")
+        .with_crawler_permissive()
+        .with_head(html! {
+            link href="/static/styles/main.css" rel="stylesheet";
+        })
+        .with_body(template::main_page(html! {
+            section .content_section {
+                h2 { "Who I am" }
+                p {
+                    "Hi! I'm Tom, a computer science student and hobbyist programmer."
+                }
+                figure {
+                    img src="/static/images/tombot_450.png"
+                        alt="A drawing by @smolrobots (on Twitter) of me as a robot. It has an \
+                             egg-shaped body and a smiling face, and is doing a little dance next \
+                             to a Raspberry Pi."
+                        width="256";
+                    figcaption {
+                        "Drawn by "
+                        a href="https://twitter.com/smolrobots" { "@smolrobots" }
+                    }
+                }
+            }
+
+            section .content_section {
+                h2 { "Things I've made" }
+                p { "Todo" }
+            }
+
+            section .content_section {
+                h2 { "Articles" }
+                ul {
+                    @for post in posts.read().await.iter_by_created().rev() {
+                        li {
+                            a href={"/posts/" (post.id_str())} { (post.title()) }
+                        }
+                    }
+                }
+            }
+        }))
+}

blog_server/src/service/response.rs

@@ -131,6 +131,7 @@ impl IntoResponse for HtmlResponse {
                 head {
                     meta charset="utf-8";
                     meta name="robots" content=(self.crawler_hints);
+                    meta name="viewport" content="width=device-width, initial-scale=1";
                     title { (self.title) }
                     @if let Some(head) = self.head {
                         (head)

blog_server/src/services/index.rs

@@ -1,24 +0,0 @@
-use axum::extract::Extension;
-use maud::html;
-
-use crate::posts_store::ConcurrentPostsStore;
-use super::response::HtmlResponse;
-
-pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> HtmlResponse {
-    HtmlResponse::new()
-        .with_title_static("Placeholder title")
-        .with_crawler_permissive()
-        .with_body(html! {
-            h1 { "Here is my great heading" }
-            p { "Hello world" }
-            ul {
-                @for post in posts.read().await.iter_by_created().rev() {
-                    li {
-                        a href={ "/posts/" (post.id_str()) } {
-                            (post.title())
-                        };
-                    }
-                }
-            }
-        })
-}

blog_server/src/template.rs

@@ -0,0 +1,34 @@
+use maud::{html, Markup};
+
+pub fn main_page(content: Markup) -> Markup {
+    html! {
+        header #page_header .sticky_header {
+            nav #page_nav {
+                #title_box {
+                    a href="/" { "Pantonshire" }
+                }
+                #right_nav_box {
+                    ul {
+                        li { a href="/" { "Articles" } }
+                        li { a href="/" { "Atom" } }
+                        li { a href="/" { "RSS" } }
+                        li { a href="/" { "GitHub" } }
+                        li { a href="/" { "Contact" } }
+                    }
+                }
+            }
+        }
+
+        main #page_main {
+            #content {
+                (content)
+            }
+        }
+
+        footer #page_footer {
+            #page_footer_content {
+                span { "Here is some footer text" }
+            }
+        }
+    }
+}