Articles page

blog_server/src/service/index.rs

@@ -9,7 +9,7 @@ use super::response::HtmlResponse;
 
 pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> HtmlResponse {
     HtmlResponse::new()
-        .with_title_static("Placeholder title")
+        .with_title_static("Pantonshire")
         .with_crawler_permissive()
         .with_head(html! {
             link href="/static/styles/main.css" rel="stylesheet";
@@ -26,7 +26,7 @@ pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> HtmlRe
                              egg-shaped body and a smiling face, and is doing a little dance next \
                              to a Raspberry Pi."
                         width="256";
-                    figcaption {
+                    figcaption .quiet {
                         "Drawn by "
                         a href="https://twitter.com/smolrobots" { "@smolrobots" }
                     }
@@ -41,12 +41,15 @@ pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> HtmlRe
             section .content_section {
                 h2 { "Articles" }
                 ul {
-                    @for post in posts.read().await.iter_by_created().rev() {
+                    @for post in posts.read().await.iter_by_created().rev().take(5) {
                         li {
                             a href={"/articles/" (post.id_str())} { (post.title()) }
                         }
                     }
                 }
+                p {
+                    a href="/articles" { "See all" }
+                }
             }
         }))
 }

blog_server/src/service/mod.rs

@@ -1,5 +1,6 @@
 mod index;
-mod posts;
+mod post;
+mod posts_list;
 mod response;
 mod site;
 mod static_content;

blog_server/src/service/posts_list.rs

@@ -0,0 +1,35 @@
+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("Articles")
+        .with_crawler_permissive()
+        .with_head(html! {
+            link href="/static/styles/main.css" rel="stylesheet";
+        })
+        .with_body(template::main_page(html! {
+            section .content_section {
+                h1 { "Articles" }
+                p {
+                    "A collection of words I have written, against my better judgement."
+                }
+                ul {
+                    @for post in posts.read().await.iter_by_created().rev() {
+                        li {
+                            a href={"/articles/" (post.id_str())} { (post.title()) }
+                            span class="quiet" {
+                                " — " (post.created().format("%Y/%m/%d"))
+                            }
+                        }
+                    }
+                }
+            }
+        }))
+}

blog_server/src/service/site.rs

@@ -14,7 +14,8 @@ use tracing::info;
 use crate::posts_store::ConcurrentPostsStore;
 use super::{
     index,
-    posts,
+    post,
+    posts_list,
     response::ErrorResponse,
     static_content,
 };
@@ -27,7 +28,8 @@ pub fn service(
 {
     Router::new()
         .route("/", get(index::handle))
-        .route("/articles/:post_id", get(posts::handle))
+        .route("/articles", get(posts_list::handle))
+        .route("/articles/:post_id", get(post::handle))
         .nest("/static", static_content::service(static_dir))
         .fallback(handle_fallback.into_service())
         .layer(ConcurrencyLimitLayer::new(concurrency_limit))

static/styles/main.css

@@ -146,7 +146,19 @@ body {
     margin-bottom: 2rem;
 }
 
+.quiet {
+    color: #898989;
+}
+
+h1 {
+    font-size: 2rem;
+}
+
 h2 {
+    font-size: 1.75rem;
+}
+
+h1, h2 {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 }
@@ -161,13 +173,21 @@ figure {
 figcaption {
     text-align: center;
     font-size: 0.9rem;
-    color: #898989;
 }
 
 figcaption a {
     color: inherit;
 }
 
+ul {
+    list-style-type: circle;
+}
+
+li {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
 /* 
 Palette
 #94BFBE