feat: paginated post archive page

Added a new /posts route that shows a paginated archive of all of my
posts.

Author: realprogrammersusevim

src/main.rs

@@ -3,7 +3,7 @@ mod routes;
 mod rss;
 
 use post::{Post, QueryPost};
-use routes::{about, contact, main_page, post, Static, WellKnown};
+use routes::{about, contact, main_page, post, posts_index, Static, WellKnown};
 use rss::feed;
 
 use std::env;
@@ -62,6 +62,7 @@ async fn main() {
 
     let app = Router::new()
         .route("/", get(main_page))
+        .route("/posts", get(posts_index))
         .route("/about", get(about))
         .route("/contact", get(contact))
         .route("/post/:id", get(post))
@@ -106,6 +107,28 @@ impl IntoResponse for MainPage {
     }
 }
 
+#[derive(Debug, Clone)]
+struct PostsPage {
+    title: String,
+    posts: Vec<Post>,
+    current_page: usize,
+    total_pages: usize,
+}
+
+impl IntoResponse for PostsPage {
+    fn into_response(self) -> Response {
+        let mut context = Context::new();
+        context.insert("title", &self.title);
+        context.insert("posts", &self.posts);
+        context.insert("current_page", &self.current_page);
+        context.insert("total_pages", &self.total_pages);
+        let rendered = TEMPLATES
+            .render("posts.html", &context)
+            .expect("Failed to render template");
+        Html(rendered).into_response()
+    }
+}
+
 #[derive(RustEmbed)]
 #[folder = "templates/"]
 struct Templates;

src/routes.rs

@@ -1,17 +1,19 @@
-use crate::{post::QueryPost, AppState, MainPage, Post};
+use crate::{post::QueryPost, AppState, MainPage, Post, PostsPage};
 use axum::{
-    extract::{Path, State},
+    extract::{Path, Query, State},
     http::StatusCode,
     response::IntoResponse,
 };
 use rust_embed::RustEmbed;
+use serde::Deserialize;
 
 pub async fn main_page(app: State<AppState>) -> impl IntoResponse {
     let queried = sqlx::query_as!(
         QueryPost,
         r#"
         SELECT *
         FROM posts
+        WHERE content_type != 'special'
         ORDER BY date DESC
         LIMIT 5
         "#,
@@ -31,6 +33,56 @@ pub async fn main_page(app: State<AppState>) -> impl IntoResponse {
     }
 }
 
+#[derive(Deserialize)]
+pub struct Pagination {
+    page: Option<usize>,
+}
+
+pub async fn posts_index(pagination: Query<Pagination>, app: State<AppState>) -> impl IntoResponse {
+    let page = pagination.page.unwrap_or(1);
+    const POSTS_PER_PAGE: i64 = 10;
+    let offset = (page as i64 - 1) * POSTS_PER_PAGE;
+
+    // Fetch one page of posts
+    let queried = sqlx::query_as!(
+        QueryPost,
+        r#"
+        SELECT *
+        FROM posts
+        WHERE content_type != 'special'
+        ORDER BY date DESC
+        LIMIT ? OFFSET ?
+        "#,
+        POSTS_PER_PAGE,
+        offset
+    )
+    .fetch_all(&app.pool)
+    .await
+    .unwrap();
+
+    let mut posts: Vec<Post> = Vec::new();
+    for post in queried.iter() {
+        posts.push(post.clone().into_post(app.clone()).await);
+    }
+
+    // Get total number of posts to calculate total pages
+    let total_posts: i64 =
+        sqlx::query!("SELECT COUNT(*) as count FROM posts WHERE content_type != 'special'")
+            .fetch_one(&app.pool)
+            .await
+            .unwrap()
+            .count;
+
+    let total_pages = (total_posts as f64 / POSTS_PER_PAGE as f64).ceil() as usize;
+
+    PostsPage {
+        title: "All Posts".to_string(),
+        posts,
+        current_page: page,
+        total_pages,
+    }
+}
+
 pub async fn about(app: State<AppState>) -> impl IntoResponse {
     let query = QueryPost::fetch_special("about", app.clone())
         .await

static/css/style.css

@@ -173,3 +173,20 @@ p > a[href^="/post/"] {
     font-size: 0.9em;
     color: #666;
 }
+
+/* Pagination Styles */
+.pagination {
+    text-align: center;
+    padding-top: 20px;
+    margin-top: 20px;
+    border-top: 1px solid #eee;
+}
+
+.pagination a,
+.pagination span {
+    margin: 0 15px;
+}
+
+.pagination span {
+    color: #666;
+}

templates/base.html

@@ -24,6 +24,7 @@
       <h1><a href="/">Jonathan's Blog</a></h1>
       <nav>
         <a href="/">Home</a>
+        <a href="/posts">Archive</a>
         <a href="/about">About</a>
         <a href="/contact">Contact</a>
       </nav>

templates/posts.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+
+{% block content %}
+<main>
+  <h2>All Posts</h2>
+  <ul>
+  {% for post in posts %}
+  <li>
+    {% if post.content_type == "Post" %}
+      {% include "partial/post.html" %}
+    {% elif post.content_type == "Link" %}
+      {% include "partial/link.html" %}
+    {% elif post.content_type == "Quote" %}
+      {% include "partial/quote.html" %}
+    {% endif %}
+  </li>
+  {% endfor %}
+  </ul>
+
+  {% if total_pages > 0 %}
+  <div class="pagination">
+      {% if current_page > 1 %}
+          <a href="/posts?page={{ current_page - 1 }}">&laquo; Previous</a>
+      {% endif %}
+
+      <span>Page {{ current_page }} of {{ total_pages }}</span>
+
+      {% if current_page < total_pages %}
+          <a href="/posts?page={{ current_page + 1 }}">Next &raquo;</a>
+      {% endif %}
+  </div>
+  {% endif %}
+</main>
+{% endblock content %}