Merge branch 'master' of https://scm.wyattjmiller.com/wymiller/my-website-v2

backend/public/Cargo.toml

@@ -7,7 +7,7 @@ authors = ["Wyatt J. Miller <wyatt@wyattjmiller.com"]
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-axum = { version = "0.7.6", features = ["http2", "tokio"] }
+axum = { version = "0.8.4", features = ["http2", "tokio"] }
 tower-http = { version = "0.6.1", features = ["trace", "cors"] }
 tower_governor = "0.4.2"
 tokio = { version = "1.40.0", features = ["full"] }

backend/public/src/datasources/authors.rs

@@ -1,6 +1,9 @@
 use sqlx::{Pool, Postgres};
 
-use crate::routes::{authors::Author, comments::Pagination, posts::Post};
+use crate::{
+    routes::{authors::Author, posts::Post},
+    utils::pagination::Pagination,
+};
 
 pub struct AuthorsDatasource;
 impl AuthorsDatasource {
@@ -8,11 +11,11 @@ impl AuthorsDatasource {
         pool: &Pool<Postgres>,
         pagination: Pagination,
     ) -> Result<Vec<Author>, sqlx::Error> {
-        let offset: i64 = (pagination.page_number - 1) * pagination.page_size;
+        let offset: i64 = (pagination.page - 1) * pagination.limit;
         sqlx::query_as!(
             Author,
             "SELECT author_id, first_name, last_name, bio, image FROM authors ORDER BY created_at DESC LIMIT $1 OFFSET $2",
-            pagination.page_size,
+            pagination.page,
             offset,
         )
         .fetch_all(pool)
@@ -32,13 +35,32 @@ impl AuthorsDatasource {
     pub async fn get_authors_posts(
         pool: &Pool<Postgres>,
         author_id: i32,
-    ) -> Result<Vec<Post>, sqlx::Error> {
+        pagination: Pagination,
-        sqlx::query_as!(
+    ) -> Result<(Vec<Post>, i64), sqlx::Error> {
-            Post,
+        let offset: i64 = (pagination.page - 1) * pagination.limit;
-            "SELECT p.post_id, a.first_name, a.last_name, p.title, p.body, p.created_at, a.author_id FROM posts p LEFT JOIN authors a ON a.author_id = p.author_id WHERE p.deleted_at IS NULL AND p.author_id = $1 ORDER BY created_at DESC",
+        println!(
+            "Author ID: {}, Page: {}, Size: {}, Offset: {}",
+            author_id, pagination.page, pagination.limit, offset
+        );
+
+        let total_count = sqlx::query_scalar!(
+            "SELECT COUNT(*) FROM posts p WHERE p.deleted_at IS NULL AND p.author_id = $1",
             author_id
         )
+        .fetch_one(pool)
+        .await?
+        .unwrap_or(0);
+
+        let posts_query = sqlx::query_as!(
+            Post,
+            "SELECT p.post_id, a.first_name, a.last_name, p.title, p.body, p.created_at, a.author_id FROM posts p LEFT JOIN authors a ON a.author_id = p.author_id WHERE p.deleted_at IS NULL AND p.author_id = $1 ORDER BY created_at DESC LIMIT $2 OFFSET $3",
+            author_id,
+            pagination.limit,
+            offset,
+        )
         .fetch_all(pool)
-        .await
+        .await?;
+
+        Ok((posts_query, total_count))
     }
 }

backend/public/src/datasources/comments.rs

@@ -1,4 +1,7 @@
-use crate::routes::comments::{Comment, CommentInputPayload, Pagination};
+use crate::{
+    routes::comments::{Comment, CommentInputPayload},
+    utils::pagination::Pagination,
+};
 use sqlx::{Pool, Postgres};
 
 pub struct CommentsDatasource;
@@ -25,8 +28,8 @@ impl CommentsDatasource {
         pool: &Pool<Postgres>,
         pagination: Pagination,
     ) -> Result<Vec<Comment>, sqlx::Error> {
-        let offset: i64 = (pagination.page_number - 1) * pagination.page_size;
+        let offset: i64 = (pagination.page - 1) * pagination.limit;
-        sqlx::query_as!(Comment, "SELECT comment_id, name, body, created_at FROM comments ORDER BY created_at DESC LIMIT $1 OFFSET $2", pagination.page_size, offset)
+        sqlx::query_as!(Comment, "SELECT comment_id, name, body, created_at FROM comments ORDER BY created_at DESC LIMIT $1 OFFSET $2", pagination.page, offset)
             .fetch_all(pool)
             .await
     }

backend/public/src/main.rs

@@ -121,20 +121,11 @@ async fn main() {
 
     // build our application with some routes
     let app = Router::new()
-        .nest("/", routes::root::RootRoute::routes())
+        .merge(routes::root::RootRoute::routes())
-        .nest("/posts", routes::posts::PostsRoute::routes(&app_state))
+        .merge(routes::posts::PostsRoute::routes(&app_state))
-        .nest(
+        .merge(routes::comments::CommentsRoute::routes(&app_state))
-            "/comments",
+        .merge(routes::authors::AuthorsRoute::routes(&app_state))
-            routes::comments::CommentsRoute::routes(&app_state),
+        .merge(routes::projects::ProjectsRoute::routes(&app_state))
-        )
-        .nest(
-            "/authors",
-            routes::authors::AuthorsRoute::routes(&app_state),
-        )
-        .nest(
-            "/projects",
-            routes::projects::ProjectsRoute::routes(&app_state),
-        )
         .layer(CorsLayer::permissive())
         .layer(
             TraceLayer::new_for_http()
@@ -179,3 +170,5 @@ async fn shutdown_signal() {
         _ = terminate => {},
     }
 }
+
+

backend/public/src/routes/authors.rs

@@ -1,5 +1,5 @@
 use axum::{
-    extract::{Path, State},
+    extract::{Path, Query, State},
     http::StatusCode,
     response::IntoResponse,
     routing::get,
@@ -8,9 +8,12 @@ use axum::{
 use cache::Expiration;
 use serde::{Deserialize, Serialize};
 
-use crate::{datasources::authors::AuthorsDatasource, state::AppState};
+use crate::{
-
+    datasources::authors::AuthorsDatasource,
-use super::comments::Pagination;
+    routes::posts::Post,
+    state::AppState,
+    utils::pagination::{Pagination, PaginationQuery},
+};
 
 #[derive(Deserialize, Serialize, Clone)]
 pub struct Author {
@@ -26,20 +29,31 @@ pub struct AuthorGetOneParams {
     pub id: i32,
 }
 
+#[derive(Deserialize, Serialize)]
+pub struct AuthorPostsResponse {
+    posts: Vec<Post>,
+    total_posts: i64,
+}
+
 pub struct AuthorsRoute;
 impl AuthorsRoute {
     pub fn routes(app_state: &AppState) -> axum::Router {
         axum::Router::new()
-            .route("/", get(AuthorsRoute::get_all))
+            .route("/authors", get(AuthorsRoute::get_all))
-            .route("/:id", get(AuthorsRoute::get_one))
+            .route("/authors/{id}", get(AuthorsRoute::get_one))
-            .route("/:id/posts", get(AuthorsRoute::get_authors_posts))
+            .route("/authors/{id}/posts", get(AuthorsRoute::get_authors_posts))
             .with_state(app_state.clone())
     }
 
     async fn get_all(
         State(app_state): State<AppState>,
-        Json(pagination): Json<Pagination>,
+        Query(query): Query<PaginationQuery>,
     ) -> impl IntoResponse {
+        let pagination = Pagination {
+            page: query.page.unwrap_or(1),
+            limit: query.limit.unwrap_or(12),
+        };
+
         let mut state = app_state.lock().await;
         let cached: Option<Vec<Author>> = state
             .cache
@@ -104,6 +118,7 @@ impl AuthorsRoute {
                     let state = app_state.clone();
 
                     tracing::info!("storing database data in cache");
+
                     tokio::spawn(async move {
                         let mut s = state.lock().await;
                         let _ = s
@@ -127,12 +142,20 @@ impl AuthorsRoute {
     async fn get_authors_posts(
         State(app_state): State<AppState>,
         Path(params): Path<AuthorGetOneParams>,
+        Query(pagination): Query<PaginationQuery>,
     ) -> impl IntoResponse {
+        let pagination = Pagination {
+            page: pagination.page.unwrap_or(1),
+            limit: pagination.limit.unwrap_or(12),
+        };
+
         let state = app_state.lock().await;
 
-        match AuthorsDatasource::get_authors_posts(&state.database, params.id).await {
+        match AuthorsDatasource::get_authors_posts(&state.database, params.id, pagination).await {
-            Ok(p) => Ok(Json(p)),
+            Ok((posts, total_posts)) => Ok(Json(AuthorPostsResponse { posts, total_posts })),
             Err(e) => Err((StatusCode::INTERNAL_SERVER_ERROR, e.to_string())),
         }
     }
 }
+
+

backend/public/src/routes/comments.rs

@@ -1,6 +1,13 @@
-use crate::{datasources::comments::CommentsDatasource, state::AppState, utils::datetime::*};
+use crate::{
+    datasources::comments::CommentsDatasource,
+    state::AppState,
+    utils::{
+        datetime::*,
+        pagination::{Pagination, PaginationQuery},
+    },
+};
 use axum::{
-    extract::{Path, State},
+    extract::{Path, Query, State},
     http::StatusCode,
     response::IntoResponse,
     routing::{get, post},
@@ -21,13 +28,6 @@ pub struct CommentInputPayload {
 pub struct CommentPathParams {
     id: i32,
 }
-
-#[derive(Deserialize, Serialize)]
-pub struct Pagination {
-    pub page_number: i64,
-    pub page_size: i64,
-}
-
 #[derive(sqlx::FromRow, Deserialize, Serialize, Debug, Clone)]
 pub struct Comment {
     pub comment_id: i32,
@@ -43,9 +43,9 @@ impl CommentsRoute {
     pub fn routes(app_state: &AppState) -> axum::Router {
         // add more comment routes here!
         axum::Router::new()
-            .route("/post/:id", get(CommentsRoute::get_post_comments))
+            .route("/comments/post/{id}", get(CommentsRoute::get_post_comments))
-            .route("/add", post(CommentsRoute::insert_comment))
+            .route("/comments/add", post(CommentsRoute::insert_comment))
-            .route("/index", get(CommentsRoute::get_comments_index))
+            .route("/comments/index", get(CommentsRoute::get_comments_index))
             .with_state(app_state.clone())
     }
 
@@ -96,8 +96,13 @@ impl CommentsRoute {
 
     async fn get_comments_index(
         State(app_state): State<AppState>,
-        Json(pagination): Json<Pagination>,
+        Query(query): Query<PaginationQuery>,
     ) -> impl IntoResponse {
+        let pagination = Pagination {
+            page: query.page.unwrap_or(1),
+            limit: query.limit.unwrap_or(12),
+        };
+
         let state = app_state.lock().await;
 
         match CommentsDatasource::get_index_comments(&state.database, pagination).await {
@@ -106,3 +111,5 @@ impl CommentsRoute {
         }
     }
 }
+
+

backend/public/src/routes/posts.rs

@@ -57,14 +57,14 @@ impl PostsRoute {
     pub fn routes(app_state: &AppState) -> Router {
         // add more post routes here!
         Router::new()
-            .route("/all", get(PostsRoute::get_all))
+            .route("/posts/all", get(PostsRoute::get_all))
-            .route("/:id", get(PostsRoute::get_one))
+            .route("/posts/{id}", get(PostsRoute::get_one))
-            .route("/recent", get(PostsRoute::get_recent_posts))
+            .route("/posts/recent", get(PostsRoute::get_recent_posts))
-            .route("/popular", get(PostsRoute::get_popular_posts))
+            .route("/posts/popular", get(PostsRoute::get_popular_posts))
-            .route("/hot", get(PostsRoute::get_hot_posts))
+            .route("/posts/hot", get(PostsRoute::get_hot_posts))
-            .route("/featured", get(PostsRoute::get_featured_posts))
+            .route("/posts/featured", get(PostsRoute::get_featured_posts))
-            .route("/rss", get(PostsRoute::get_rss_posts))
+            .route("/posts/rss", get(PostsRoute::get_rss_posts))
-            .route("/sitemap", get(PostsRoute::get_sitemap))
+            .route("/posts/sitemap", get(PostsRoute::get_sitemap))
             .with_state(app_state.clone())
     }
 
@@ -399,3 +399,5 @@ impl PostsRoute {
         }
     }
 }
+
+

backend/public/src/routes/projects.rs

@@ -20,7 +20,7 @@ pub struct ProjectsRoute;
 impl ProjectsRoute {
     pub fn routes(app_state: &AppState) -> Router {
         Router::new()
-            .route("/", get(ProjectsRoute::get_all))
+            .route("/projects", get(ProjectsRoute::get_all))
             .with_state(app_state.clone())
     }
 
@@ -66,3 +66,5 @@ impl ProjectsRoute {
         }
     }
 }
+
+

backend/public/src/routes/root.rs

@@ -1,15 +1,10 @@
 use axum::{
-    extract::State,
     http::StatusCode,
     response::{Html, IntoResponse},
     routing::get,
     Router,
 };
 
-use crate::{datasources::posts::PostsDatasource, state::AppState};
-
-use super::posts::Post;
-
 pub struct RootRoute;
 impl RootRoute {
     pub fn routes() -> Router {

backend/public/src/utils/mod.rs

@@ -1,3 +1,4 @@
 pub mod datetime;
+pub mod pagination;
 pub mod rss;
 pub mod sitemap;

backend/public/src/utils/pagination.rs

@@ -0,0 +1,13 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Deserialize, Serialize)]
+pub struct PaginationQuery {
+    pub page: Option<i64>,
+    pub limit: Option<i64>,
+}
+
+#[derive(Deserialize, Serialize)]
+pub struct Pagination {
+    pub page: i64,
+    pub limit: i64,
+}

frontend/components/PaginationControl.tsx

@@ -0,0 +1,89 @@
+import * as hi from "jsr:@preact-icons/hi2";
+
+export function PaginationControl({
+  paginatedData,
+  currentUrl,
+  authorId,
+}: {
+  paginatedData: PaginatedPosts;
+  currentUrl: URL;
+  authorId: number;
+}) {
+  const buildUrl = (page: number, limit?: number) => {
+    const params = new URLSearchParams(currentUrl.searchParams);
+    params.set("page", page.toString());
+    if (limit) params.set("limit", limit.toString());
+    return `${currentUrl.pathname}?${params.toString()}`;
+  };
+
+  if (paginatedData.totalPages <= 1) return null;
+
+  return (
+    <div class="mt-8 space-y-4">
+      {/* Pagination info and controls */}
+      <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
+        <div class="flex items-center gap-2">
+          {paginatedData.hasPrevPage && (
+            <a
+              href={buildUrl(paginatedData.currentPage - 1)}
+              class="px-4 py-2 bg-[#45475a] text-[#cdd6f4] shadow-sm rounded hover:bg-[#6A6B7A] transition-colors"
+            >
+              <div class="flex items-center gap-2">
+                <hi.HiChevronDoubleLeft />
+                Previous
+              </div>
+            </a>
+          )}
+
+          {/* Page numbers */}
+          <div class="flex gap-1">
+            {Array.from(
+              { length: Math.min(paginatedData.totalPages, 7) },
+              (_, i) => {
+                let pageNum;
+                if (paginatedData.totalPages <= 7) {
+                  pageNum = i + 1;
+                } else {
+                  const start = Math.max(1, paginatedData.currentPage - 3);
+                  const end = Math.min(paginatedData.totalPages, start + 6);
+                  pageNum = start + i;
+                  if (pageNum > end) return null;
+                }
+
+                const isCurrentPage = pageNum === paginatedData.currentPage;
+
+                return (
+                  <a
+                    key={pageNum}
+                    href={buildUrl(pageNum)}
+                    class={`px-3 py-1 rounded text-sm shadow-sm ${
+                      isCurrentPage
+                        ? "bg-[#6A6B7A] text-[#cdd6f4]"
+                        : "bg-[#45475a] text-[#cdd6f4] hover:bg-[#6A6B7A]"
+                    }`}
+                  >
+                    {pageNum}
+                  </a>
+                );
+              },
+            )}
+          </div>
+
+          {paginatedData.hasNextPage && (
+            <a
+              href={buildUrl(paginatedData.currentPage + 1)}
+              class="px-4 py-2 bg-[#45475a] text-[#cdd6f4] shadow-sm rounded hover:bg-[#6A6B7A] transition-colors"
+            >
+              <div class="flex items-center gap-2">
+                Next
+                <hi.HiChevronDoubleRight />
+              </div>
+            </a>
+          )}
+        </div>
+
+        {/* Quick jump to page */}
+      </div>
+    </div>
+  );
+}

frontend/components/PostCard.tsx

@@ -4,7 +4,7 @@ import { Post } from "../types/index.ts";
 
 export const PostCard = function PostCard({ post }: { post: Post }) {
   return (
-    <div class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
+    <div class="p-6 bg-[#45475a] rounded-lg shadow-xl transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
       <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
         <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
         <p class="text-white">
@@ -17,7 +17,7 @@ export const PostCard = function PostCard({ post }: { post: Post }) {
           </a>{" "}
           at {convertUtc(post.created_at)}
         </p>
-        <p class="text-gray-400">{truncateString(post.body, 15)}</p>
+        <p class="text-gray-400">{truncateString(post.body, 30)}</p>
       </a>
     </div>
   );

frontend/lib/truncate.ts

@@ -1,3 +1,4 @@
 export const truncateString = (str: string, maxLength: number) => {
+  str = str.replace(/<[^>]*>/g, "");
   return str.length > maxLength ? `${str.slice(0, maxLength)}...` : str;
 };

frontend/routes/authors/[id].tsx

@@ -2,13 +2,20 @@ import { FreshContext, Handlers, PageProps } from "$fresh/server.ts";
 import AuthorCard from "../../components/AuthorCard.tsx";
 import { Post } from "../../types/index.ts";
 import { PostCarousel } from "../../components/PostCarousel.tsx";
+import { PaginationControl } from "../../components/PaginationControl.tsx";
 
 export const handler: Handlers<PageData> = {
-  async GET(_req: Request, ctx: FreshContext) {
+  async GET(req: Request, ctx: FreshContext) {
     try {
+      const url = new URL(req.url);
+      const page = parseInt(url.searchParams.get("page") || "1");
+      const limit = parseInt(url.searchParams.get("limit") || "12");
+
       const [authorResponse, authorPostResponse] = await Promise.all([
         fetch(`${Deno.env.get("BASE_URI_API")}/authors/${ctx.params.id}`),
-        fetch(`${Deno.env.get("BASE_URI_API")}/authors/${ctx.params.id}/posts`),
+        fetch(
+          `${Deno.env.get("BASE_URI_API")}/authors/${ctx.params.id}/posts?page=${page}&limit=${limit}`,
+        ),
       ]);
 
       const [authorData, authorPostData] = await Promise.all([
@@ -16,9 +23,37 @@ export const handler: Handlers<PageData> = {
         authorPostResponse.json(),
       ]);
 
+      let paginatedData: PaginatedPosts;
+
+      if (authorPostData.posts && authorPostData.total_posts !== undefined) {
+        const totalPages = Math.ceil(authorPostData.total_posts / limit);
+        paginatedData = {
+          posts: authorPostData.posts,
+          currentPage: page,
+          totalPages,
+          hasNextPage: page < totalPages,
+          hasPrevPage: page > 1,
+          totalPosts: authorPostData.total_posts,
+        };
+      } else {
+        const allPosts = Array.isArray(authorPostData) ? authorPostData : [];
+        const totalPages = Math.ceil(allPosts.length / limit);
+        const startIndex = (page - 1) * limit;
+        const endIndex = startIndex + limit;
+
+        paginatedData = {
+          posts: allPosts.slice(startIndex, endIndex),
+          currentPage: page,
+          totalPages,
+          hasNextPage: page < totalPages,
+          hasPrevPage: page > 1,
+          totalPosts: allPosts.length,
+        };
+      }
+
       return ctx.render({
         authorData,
-        authorPostData,
+        authorPostData: paginatedData,
       });
     } catch (error) {
       return ctx.render({
@@ -30,7 +65,7 @@ export const handler: Handlers<PageData> = {
   },
 };
 
-export default function AuthorIdentifier({ data }: PageProps<PageData>) {
+export default function AuthorIdentifier({ data, url }: PageProps<PageData>) {
   const { authorData, authorPostData, error } = data;
 
   if (error) {
@@ -52,7 +87,12 @@ export default function AuthorIdentifier({ data }: PageProps<PageData>) {
         <AuthorCard author={authorData} isIdentified={true} />
       </div>
       <div>
-        <PostCarousel posts={authorPostData} />
+        <PostCarousel posts={authorPostData.posts} />
+        <PaginationControl
+          paginatedData={authorPostData}
+          currentUrl={url}
+          authorId={authorData.author_id}
+        />
       </div>
     </>
   );