fix(frontend) fix editor warning

.gitignore

@@ -6,6 +6,10 @@
 .idea
 .vscode
 
+# macOS system files
+.DS_Store
+**/.DS_Store
+
 # exclude content repo
 /blog_posts_git
 

backend/server/src/modules/blog/api/posts/get.rs

@@ -1,32 +1,110 @@
-use macros::dev_consume;
+use crate::{
+    constants::blog::PAGE_SIZE,
+    err_resp_log,
+    utils::axum_response::{err_resp, succ_resp},
+};
 
 use axum::{
-    Json,
-    extract::{Path, State},
+    extract::{Query, State},
+    http::StatusCode,
     response::IntoResponse,
 };
+use chrono::NaiveDate;
+use serde::{Deserialize, Serialize};
 use serde_json::json;
-use sqlx::PgPool;
+use sqlx::{FromRow, PgPool, query_as};
 use uuid::Uuid;
 
+#[derive(FromRow, Serialize)]
+struct PostBriefModel {
+    id: Uuid,
+    identifier: String,
+    title: String,
+    subtitle: String,
+    tags: Vec<String>,
+    category: String,
+    date_created: NaiveDate,
+    date_updated: Option<NaiveDate>,
+    header_img: Option<String>,
+}
+
+#[derive(Deserialize, Serialize)]
+pub struct Pagination {
+    page: Option<u32>,
+    page_size: Option<u32>,
+}
+
+#[derive(Serialize)]
+pub struct RespPagination {
+    page: u32,
+    page_size: u32,
+    page_count: u32,
+}
+
+#[derive(Serialize)]
+struct Response {
+    posts: Vec<PostBriefModel>,
+    pagination: RespPagination,
+}
+
+#[derive(FromRow)]
+struct UuidRow {
+    id: Uuid,
+}
+
+const GET_POST_WITH_BRIEF_MODEL: &str = include_str!("get_post_with_brief_model.sql");
+
 pub async fn handler(
-    State(db_connection): State<PgPool>,
-    Path(identifier): Path<String>,
+    State(db): State<PgPool>,
+    Query(pagination): Query<Pagination>,
 ) -> impl IntoResponse {
-    if let Ok(id) = identifier.parse::<Uuid>() {
-        select_post_by_uuid(&db_connection, id).await
-    } else {
-        select_post_by_str_id(&db_connection, &identifier).await
+    let page = pagination.page.unwrap_or(1);
+    let page_size = pagination.page_size.unwrap_or(PAGE_SIZE);
+    let page_count = match sqlx::query_scalar::<_, i64>("SELECT COUNT(*) FROM posts")
+        .fetch_one(&db)
+        .await
+    {
+        Ok(post_count) => ((post_count as f64) / (page_size as f64)).ceil() as u32,
+        Err(e) => return err_resp_log!(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
     };
-    Json::from(json!({"res": "ok"})).into_response()
+
+    let pagination = RespPagination {
+        page,
+        page_size,
+        page_count,
+    };
+
+    if page > page_count {
+        return err_resp(
+            StatusCode::BAD_REQUEST,
+            "page number should not be greater than page count",
+            Some(json!({"pagination": pagination})),
+        );
     }
 
-async fn select_post_by_uuid(db: &PgPool, id: Uuid) {
-    dev_consume!(db, id);
-    todo!()
-}
+    let offset = page_size * (page - 1);
 
-async fn select_post_by_str_id(db: &PgPool, id: &str) {
-    dev_consume!(db, id);
-    todo!()
+    let ids = match query_as::<_, UuidRow>(
+        "SELECT id FROM posts ORDER BY date_created DESC LIMIT $1 OFFSET $2",
+    )
+    .bind(page_size as i32)
+    .bind(offset as i32)
+    .fetch_all(&db)
+    .await
+    {
+        Ok(res) => res.into_iter().map(|item| item.id).collect::<Vec<_>>(),
+        Err(e) => return err_resp_log!(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
+    };
+
+    let posts = match query_as::<_, PostBriefModel>(GET_POST_WITH_BRIEF_MODEL)
+        .bind(&ids)
+        .fetch_all(&db)
+        .await
+    {
+        Ok(posts) => posts,
+        Err(e) => return err_resp_log!(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
+    };
+
+    let resp = Response { posts, pagination };
+    succ_resp(StatusCode::OK, serde_json::to_value(resp).unwrap())
 }

backend/server/src/modules/blog/api/posts/get_identifier.rs

@@ -0,0 +1,132 @@
+use crate::{err_resp_log, utils::axum_response::succ_resp};
+
+use axum::{
+    extract::{Path, State},
+    http::StatusCode,
+    response::IntoResponse,
+};
+use chrono::NaiveDate;
+use futures::future::OptionFuture;
+use serde_json::Value;
+use sqlx::{FromRow, PgPool, query_as};
+use uuid::Uuid;
+
+const SELECT_POST_BY_UUID: &str = include_str!("get_post_by_uuid.sql");
+const SELECT_POST_BY_STR_ID: &str = include_str!("get_post_by_str_id.sql");
+const SELECT_POST_ADJACENT_IDS: &str = include_str!("get_post_adjacent_ids.sql");
+const SELECT_POST_WITH_ADJACENT_MODEL: &str = include_str!("get_post_with_adjacent_model.sql");
+
+#[derive(serde::Serialize, FromRow)]
+struct SelectedPost {
+    id: Uuid,
+    identifier: String,
+    title: String,
+    subtitle: String,
+    status: String,
+    date_created: NaiveDate,
+    date_updated: Option<NaiveDate>,
+    category: String,
+    tags: Vec<String>,
+    content: String,
+    metadata: Option<Value>,
+}
+
+#[derive(serde::Serialize, FromRow)]
+struct AdjacentPost {
+    id: Uuid,
+    identifier: String,
+    title: String,
+    subtitle: String,
+    date_created: NaiveDate,
+    category: String,
+    tags: Vec<String>,
+    header_img: Option<String>,
+}
+
+#[derive(FromRow, Debug)]
+struct AdjacentIds {
+    prev: Option<Uuid>,
+    next: Option<Uuid>,
+}
+
+#[derive(serde::Serialize, Default)]
+struct AdjacentPosts {
+    prev: Option<AdjacentPost>,
+    next: Option<AdjacentPost>,
+}
+
+#[derive(serde::Serialize)]
+struct ResponseModel {
+    post: SelectedPost,
+    adjacent: AdjacentPosts,
+}
+
+pub async fn handler(
+    State(db_connection): State<PgPool>,
+    Path(identifier): Path<String>,
+) -> impl IntoResponse {
+    let post = match if let Ok(id) = identifier.parse::<Uuid>() {
+        select_post_by_uuid(&db_connection, id).await
+    } else {
+        select_post_by_str_id(&db_connection, &identifier).await
+    } {
+        Ok(post) => post,
+        Err(e) => {
+            return match e {
+                sqlx::Error::RowNotFound => {
+                    err_resp_log!(StatusCode::NOT_FOUND, "no matching post")
+                }
+                _ => err_resp_log!(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
+            };
+        }
+    };
+
+    let adj_ids = query_as::<_, AdjacentIds>(SELECT_POST_ADJACENT_IDS)
+        .bind(post.id)
+        .fetch_one(&db_connection)
+        .await
+        .unwrap();
+    let adjacent_prev = OptionFuture::from(
+        adj_ids
+            .prev
+            .map(|id| select_post_with_adjacent_model(&db_connection, id)),
+    )
+    .await
+    .flatten();
+    let adjacent_next = OptionFuture::from(
+        adj_ids
+            .next
+            .map(|id| select_post_with_adjacent_model(&db_connection, id)),
+    )
+    .await
+    .flatten();
+    let adjacent = AdjacentPosts {
+        prev: adjacent_prev,
+        next: adjacent_next,
+    };
+
+    let response = ResponseModel { post, adjacent };
+    succ_resp(StatusCode::OK, serde_json::to_value(response).unwrap())
+}
+
+async fn select_post_by_uuid(db: &PgPool, id: Uuid) -> Result<SelectedPost, sqlx::Error> {
+    query_as::<_, SelectedPost>(SELECT_POST_BY_UUID)
+        .bind(id)
+        .fetch_one(db)
+        .await
+}
+
+async fn select_post_by_str_id(db: &PgPool, id: &str) -> Result<SelectedPost, sqlx::Error> {
+    query_as::<_, SelectedPost>(SELECT_POST_BY_STR_ID)
+        .bind(id)
+        .fetch_one(db)
+        .await
+}
+
+async fn select_post_with_adjacent_model(db: &PgPool, id: Uuid) -> Option<AdjacentPost> {
+    query_as(SELECT_POST_WITH_ADJACENT_MODEL)
+        .bind(id)
+        .fetch_optional(db)
+        .await
+        .unwrap()
+}

backend/server/src/modules/blog/api/posts/get_post_adjacent_ids.sql

@@ -0,0 +1,13 @@
+WITH target_create_date AS (SELECT p.date_created AS date FROM posts p WHERE p.id = $1)
+SELECT (SELECT p.id
+        FROM posts p
+        WHERE p.date_created < t.date
+        ORDER BY p.date_created DESC
+        LIMIT 1) AS prev,
+       (SELECT p.id
+        FROM posts p
+        WHERE p.date_created > t.date
+        ORDER BY p.date_created
+        LIMIT 1) AS next
+FROM target_create_date t
+

backend/server/src/modules/blog/api/posts/get_post_by_str_id.sql

@@ -0,0 +1,19 @@
+SELECT p.id,
+       p.identifier,
+       p.title,
+       p.subtitle,
+       p.status,
+       p.date_created,
+       p.date_updated,
+       c.name                 AS category,
+       (SELECT array_agg(t.name)
+        FROM tags t
+                 JOIN post_tag pt ON pt.tag = t.id
+        WHERE pt.post = p.id) AS tags,
+       p.content,
+       (SELECT json_object_agg(m.meta_key, m.meta_value)
+        FROM metadata m
+        WHERE m.pid = p.id)   AS metadata
+FROM posts p
+         JOIN categories c ON c.id = p.category
+WHERE p.identifier = $1;

backend/server/src/modules/blog/api/posts/get_post_by_uuid.sql

@@ -1 +1,19 @@
-SELECT 
+SELECT p.id,
+       p.identifier,
+       p.title,
+       p.subtitle,
+       p.status,
+       p.date_created,
+       p.date_updated,
+       c.name                 AS category,
+       (SELECT array_agg(t.name)
+        FROM tags t
+                 JOIN post_tag pt ON pt.tag = t.id
+        WHERE pt.post = p.id) AS tags,
+       p.content,
+       (SELECT json_object_agg(m.meta_key, m.meta_value)
+        FROM metadata m
+        WHERE m.pid = p.id)   AS metadata
+FROM posts p
+         JOIN categories c ON c.id = p.category
+WHERE p.id = $1;

backend/server/src/modules/blog/api/posts/get_post_with_adjacent_model.sql

@@ -0,0 +1,17 @@
+SELECT p.id,
+       identifier,
+       title,
+       subtitle,
+       date_created,
+       c.name                            AS category,
+       (SELECT array_agg(t.name)
+        FROM tags t
+                 JOIN post_tag pt ON pt.tag = t.id
+        WHERE pt.post = p.id)            AS tags,
+       (SELECT m.meta_value
+        FROM metadata m
+        WHERE m.pid = p.id
+          AND m.meta_key = 'header_img') AS header_img
+FROM posts p
+         JOIN public.categories c on c.id = p.category
+WHERE p.id = $1

backend/server/src/modules/blog/api/posts/get_post_with_brief_model.sql

@@ -0,0 +1,19 @@
+SELECT p.id,
+       identifier,
+       title,
+       subtitle,
+       date_created,
+       date_updated,
+       c.name                            AS category,
+       (SELECT array_agg(t.name)
+        FROM tags t
+                 JOIN post_tag pt ON pt.tag = t.id
+        WHERE pt.post = p.id)            AS tags,
+       (SELECT m.meta_value
+        FROM metadata m
+        WHERE m.pid = p.id
+          AND m.meta_key = 'header_img') AS header_img
+FROM posts p
+         JOIN public.categories c on c.id = p.category
+WHERE p.id = ANY ($1)
+ORDER BY p.date_created DESC;

backend/server/src/modules/blog/api/posts/mod.rs

@@ -1,2 +1,3 @@
 pub mod get;
+pub mod get_identifier;
 pub mod pagination;

backend/server/src/modules/blog/api/posts/pagination/mod.rs

@@ -1,24 +1,34 @@
-use crate::{
-    constants::blog::PAGE_SIZE,
-    utils::axum_response::{err_resp, succ_resp},
-};
+use crate::{constants::blog::PAGE_SIZE, err_resp_log, utils::axum_response::succ_resp};
 
 use axum::{extract::State, http::StatusCode, response::Response};
-use serde::Serialize;
 use serde_json::{Value, json};
-use sqlx::{FromRow, PgPool, Row, query_as};
+use sqlx::{FromRow, PgPool, query_as};
 
-#[derive(FromRow, Serialize)]
+#[derive(FromRow)]
 struct DBPaginationRow {
     page_count: i32,
-    total_count: i64,
+    post_count: i64,
 }
 
-impl From<DBPaginationRow> for Value {
+struct PaginationResponse {
+    page_count: i32,
+    post_count: i64,
+}
+
+impl From<DBPaginationRow> for PaginationResponse {
     fn from(value: DBPaginationRow) -> Self {
+        Self {
+            page_count: value.page_count,
+            post_count: value.post_count,
+        }
+    }
+}
+
+impl From<PaginationResponse> for Value {
+    fn from(value: PaginationResponse) -> Self {
         json!({
             "page_count": value.page_count,
-            "total_count": value.total_count
+            "post_count": value.post_count
         })
     }
 }
@@ -28,7 +38,7 @@ pub async fn handler(State(db_connection): State<PgPool>) -> Response<String> {
         r#"
         SELECT
             cast(ceil(count(*) / cast($1 AS FLOAT)) AS INTEGER) AS page_count,
-            count(*) AS total_count
+            count(*) AS post_count
         FROM posts;
     "#,
     )
@@ -36,7 +46,7 @@ pub async fn handler(State(db_connection): State<PgPool>) -> Response<String> {
     .fetch_one(&db_connection)
     .await
     {
-        Ok(res) => succ_resp(StatusCode::OK, res.into()),
-        Err(e) => err_resp(StatusCode::INTERNAL_SERVER_ERROR, e.to_string()),
+        Ok(res) => succ_resp(StatusCode::OK, PaginationResponse::from(res).into()),
+        Err(e) => err_resp_log!(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
     }
 }

backend/server/src/modules/blog/mod.rs

@@ -5,7 +5,7 @@ use crate::{
     modules::{
         Module,
         blog::{
-            api::{posts, posts::pagination},
+            api::{posts, posts::get, posts::pagination},
             components::{check_update, consistency_guard},
         },
     },
@@ -27,11 +27,9 @@ impl Module for Blog {
         // todo: move resource init to new func
         // todo: remove debug comment
         Router::new()
-            // .route("/get_post_list", get(get_post_list))
-            // .route("/posts/pagination", get(...))
-            // .route("/posts", get(...)) // get posts
+            .route("/posts", get(get::handler))
+            .route("/posts/{identifier}", get(posts::get_identifier::handler))
             .route("/posts/pagination", get(pagination::handler))
-            .route("/posts/{identifier}", get(posts::get::handler))
             .with_state(db_handler)
     }
 

backend/server/src/modules/blog/schema.sql

@@ -60,6 +60,7 @@ CREATE INDEX idx_categories_name ON categories (name);
 CREATE INDEX idx_posts_identifier ON posts (identifier);
 CREATE INDEX idx_posts_status ON posts (status);
 CREATE INDEX idx_posts_category ON posts (category);
+CREATE INDEX idx_posts_date_created ON posts (date_created);
 CREATE INDEX idx_post_tag_post ON post_tag (post);
 CREATE INDEX idx_post_tag_tag ON post_tag (tag);
 CREATE INDEX idx_metadata_pid ON metadata (pid);

backend/server/src/utils/axum_response.rs

@@ -4,13 +4,33 @@ use axum::{
 };
 use serde_json::{Value, json};
 
-pub fn err_resp(code: StatusCode, err_msg: String) -> Response<String> {
-    let payload = json!({
-        "status": "error",
-        "data": {
-            "msg": err_msg,
+#[macro_export]
+macro_rules! err_resp_log {
+    ($code:expr, $msg:expr) => {{
+        use tracing::error;
+        use $crate::utils::axum_response::err_resp;
+
+        error!("{}", $msg);
+        err_resp($code, $msg, None)
+    }};
+    ($code:expr, $msg:expr, $body:expr) => {{
+        use tracing::error;
+        use $crate::utils::axum_response::err_resp;
+
+        error!("{}", $msg);
+        err_resp($code, $msg, Some($body))
+    }};
 }
+
+pub fn err_resp(code: StatusCode, err_msg: &str, body: Option<Value>) -> Response<String> {
+    let mut payload = json!({
+        "status": "error",
+        "msg": err_msg,
     });
+    if let Some(body) = body {
+        payload["data"] = body;
+    }
+
     resp_json(code, payload)
 }
 

client/.gitignore

@@ -9,3 +9,4 @@ __pycache__
 .cache
 
 content/*
+/content/

frontend/app/(pages)/blog/BlogPostCard.tsx

@@ -5,41 +5,42 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { MdCalendarMonth, MdNorthEast } from 'react-icons/md';
 
+interface Post {
+    id: string,
+    identifier: string,
+    title: string,
+    subtitle: string,
+    tags: string[]
+    category: string,
+    date_created: Date,
+    date_updated: Date | null,
+    header_img: string | null
+}
+
 type Props = {
-    post: JSON
+    post: Post
 }
 
 function BlogPostCard({ post }: Props) {
-    let title = (post as any)['title'];
-    let sub_title = (post as any)['sub_title'];
-    // let summary = (post as any)['summary'];
-    let category = (post as any)['category'];
-    let tags = (post as any)['tags'];
-    // let last_update = new Date((post as any)['last_update']);
-    let first_update = new Date((post as any)['first_update']);
-    let post_id = (post as any)['post_id'];
-    let header_img = ((post as any)['header_img'] as string | null);
-
     return (
-
         <div className={ `w-full` }>
-            <Card as={ Link } href={ `/blog/post/${ post_id }` }
+            <Card as={ Link } href={ `/blog/post/${ post.id }` }
                   className={ `group` }
                   isPressable
                   isHoverable
             >
 
-                { header_img && <div className={ `w-full overflow h-80 relative` }>
+                { post.header_img && <div className={ `w-full overflow h-80 relative` }>
                     <Image
                         alt={ 'cover picture' }
-                        src={ header_img }
+                        src={ post.header_img }
                         className={ `w-full object-cover rounded-b-none z-10` }
                         loading={ 'eager' }
                         fill
                     ></Image>
                     <Image
                         alt={ 'cover picture shadow' }
-                        src={ header_img }
+                        src={ post.header_img }
                         loading={ 'eager' }
                         className={ `w-full object-cover rounded-b-none scale-y-110 blur-2xl` }
                         fill
@@ -48,11 +49,11 @@ function BlogPostCard({ post }: Props) {
 
                 <CardBody className={ `overflow-visible` }>
                     <div className={ `flex flex-row justify-between` }>
-                        <div className={ `mx-2 ${ header_img ? '-mt-6' : 'mt-2' }` }>
+                        <div className={ `mx-2 ${ post.header_img ? '-mt-6' : 'mt-2' }` }>
                             <Chip className={ `mb-2 z-30 text-lg` } radius={ `sm` } size={ 'lg' } color={ `secondary` }
-                                  variant={ `solid` }>{ category }</Chip>
-                            <p className={ `text-4xl font-bold` }> { title }</p>
-                            <p className={ `text-xl` }> { sub_title }</p>
+                                  variant={ `solid` }>{ post.category }</Chip>
+                            <p className={ `text-4xl font-bold` }> { post.title }</p>
+                            <p className={ `text-xl` }> { post.subtitle }</p>
                         </div>
                         <MdNorthEast className={ `mt-1 mr-2` } size={ `40px` } />
                     </div>
@@ -63,7 +64,7 @@ function BlogPostCard({ post }: Props) {
                         <div>
                             <ul className={ `flex flex-row flex-wrap` }>
                                 {
-                                    tags.map((tag: string, key: any) => (
+                                    post.tags.map((tag: string, key: any) => (
                                         <li key={ key } className={ `mx-1 mb-1` }>
                                             <Chip>{ tag }</Chip>
                                         </li>
@@ -74,7 +75,7 @@ function BlogPostCard({ post }: Props) {
                         <div className={ `flex flex-row place-content-end mb-1 items-center mx-1` }>
                             <MdCalendarMonth />
                             <p className={ `text-zinc-500 dark:text-zinc-400 ml-1` }>
-                                { first_update.toLocaleString('default', {
+                                { post.date_created.toLocaleString('default', {
                                     month: `long`,
                                     day: `numeric`,
                                     year: `numeric`

frontend/app/(pages)/blog/PostList.tsx

@@ -1,21 +1,21 @@
 'use server';
 
 import React from 'react';
-import { fetchNocturneApi } from '@/app/(pages)/blog/api';
 import BlogPostCard from '@/app/(pages)/blog/BlogPostCard';
-import { Card, CardBody } from '@nextui-org/card';
 
 import * as motion from 'motion/react-client';
+import { fetchPostList } from '@/src/api/blog/post';
 
 const PostList = async ({ page }: { page: number }) => {
     try {
-        const res = await fetchNocturneApi(`/blog/get_post_list?page=${ page }`);
-        const posts = await res.json();
+        const postListResponse = await fetchPostList(page);
+
+        const posts = postListResponse.data.posts;
         return (
             // blog list
             <div className={ 'w-full' }>
                 <ul className={ 'flex flex-col items-center w-full space-y-7' }>
-                    { posts.map((post: JSON, key: number) => (
+                    { posts.map((post, key: number) => (
                         <li key={ key } className={ 'w-full' }>
                             <motion.div
                                 initial={ { y: 20, opacity: 0 } }
@@ -32,12 +32,20 @@ const PostList = async ({ page }: { page: number }) => {
         );
     } catch (e: any) {
         return (
-            // todo:  use Error.tsx
-            <Card className={ `w-full` }>
-                <CardBody>
-                    Fatal: { e.toString() }
-                </CardBody>
-            </Card>);
+            <>
+                <div className={ `flex h-full min-h-dvh w-full justify-center items-center` }>
+                    <div className={ `flex-row` }>
+                        <p className={ `text-xl font-bold` }>
+                            { 'Unexpected Error:' }
+                        </p>
+                        <p className={ `font-bold` }>
+                            { e.message }
+                        </p>
+                    </div>
+                </div>
+            </>
+        );
+
     }
 };
 export default PostList;

frontend/app/(pages)/blog/api.ts

@@ -1,21 +0,0 @@
-const LOCAL_ENDPOINT = process.env.API_LOCAL_URL;
-const REMOTE_ENDPOINT = process.env.API_REMOTE_URL;
-
-const NOCTURNE_ENDPOINT = ((isServerSide = true) => {
-    if (process.env.NODE_ENV === 'production') {
-        if (isServerSide) {
-            return LOCAL_ENDPOINT;
-        } else {
-            return REMOTE_ENDPOINT;
-        }
-    } else {
-        return LOCAL_ENDPOINT;
-    }
-});
-
-export async function fetchNocturneApi(path: string, isServerSideRequest = true) {
-    return await fetch(`${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`, {
-        cache: 'no-cache'
-    });
-}
-

frontend/app/(pages)/blog/page.tsx

@@ -1,17 +1,21 @@
 import PostList from '@/app/(pages)/blog/PostList';
 import Pagination from '@/app/(pages)/blog/Pagination';
-import { fetchNocturneApi } from '@/app/(pages)/blog/api';
+import { fetchPostListPagination } from '@/src/api/blog/post';
+
 
 async function Blog({
     searchParams
 }: {
-    searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+    searchParams: Promise<{ [_: string]: string | string[] | undefined }>
 }) {
 
     const parsePage = Number((await searchParams)?.page);
     const currPage = parsePage > 0 ? parsePage : 1;
-    const ret = await fetchNocturneApi(`/blog/get_page_count`);
-    const pageCount = (await ret.json() as any)['res'] as number;
+
+
+    try {
+        const pagination = await fetchPostListPagination();
+        const pageCount = pagination.data.page_count;
 
         return (
             <div className={ 'w-full min-w-full space-y-4' }>
@@ -19,6 +23,22 @@ async function Blog({
                 <Pagination total={ pageCount } />
             </div>
         );
+    } catch (e: any) {
+        return (
+            <div className={ `flex h-full min-h-dvh w-full justify-center items-center` }>
+                <div className={ `flex-row` }>
+                    <p className={ `text-xl font-bold` }>
+                        { 'Unexpected Error [loading pagination]:' }
+                    </p>
+                    <p className={ `font-bold` }>
+                        { e.message }
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+
 }
 
 export default Blog;

frontend/app/(pages)/blog/post/[id]/Footer.tsx

@@ -3,27 +3,28 @@ import MinifyPostCard from '@/app/(pages)/blog/post/[id]/MinifyPostCard';
 import Link from 'next/link';
 import { FaCreativeCommons } from 'react-icons/fa6';
 
+interface AdjacentPosts {
+    prev: any;
+    next: any;
+}
+
 type Props = {
-    // post: any
-    post_id: string;
-    adjacent_posts: any
-    perm_link: string | undefined;
-    author: string | undefined;
-    author_link: string | undefined;
+    adjacent_posts: AdjacentPosts
+    perm_link: string;
+    author: string;
+    author_link: string;
     first_update: string;
-    last_update: string | undefined;
+    last_update: string | null;
     cc: string | undefined;
     title: string;
 }
 
 const Footer = (props: Props) => {
-    const { adjacent_posts, perm_link, post_id, first_update, last_update, title } = props;
+    const { adjacent_posts, perm_link, author_link, author, first_update, last_update, title } = props;
 
     const prev_post = adjacent_posts.prev;
     const next_post = adjacent_posts.next;
-    const link = perm_link ?? `https://lumither.com/blog/post/${ post_id }`;
-    const author = props.author ?? 'Tao';
-    const author_link = props.author_link ?? '/about/me';
+    const link = perm_link;
     const post_date = new Date(first_update);
     const update_date: Date | undefined = last_update ? new Date(last_update) : undefined;
     const cc = props.cc ?? 'by-nc-sa';

frontend/app/(pages)/blog/post/[id]/Headers.tsx

@@ -3,14 +3,9 @@ import Image from 'next/image';
 import { Chip } from '@nextui-org/react';
 import { MdCalendarMonth } from 'react-icons/md';
 
-// type Props = {
-//     post: any
-// };
-
 type Props = {
     title: string;
     subtitle: string;
-    summary: string | undefined;
     category: string;
     tags: string[];
     first_update: string;

frontend/app/(pages)/blog/post/[id]/MinifyPostCard.tsx

@@ -36,7 +36,7 @@ const MinifyPostCard = (props: Props) => {
                             className="absolute transition-colors bg-zinc-300/80 dark:bg-gray-600/25 dark:backdrop-brightness-75 bottom-0  justify-between rounded-none">
                             <div>
                                 <p className="text-2xl font-bold">{ post['title'] }</p>
-                                <p className="">{ post['sub_title'] }</p>
+                                <p className="">{ post.subtitle }</p>
                             </div>
                         </CardFooter>
                     </div>
@@ -46,7 +46,7 @@ const MinifyPostCard = (props: Props) => {
                         <div className={ 'flex flex-col max-h-fit text-left' }>
                             <p className={ 'text-3xl font-bold text-balance' }>{ post['title'] }</p>
                             <div className={ 'w-1/4 h-[2px] my-2 bg-zinc-500 dark:bg-zinc-400' }></div>
-                            <p className={ 'text-xl text-pretty break-words' }>{ post['sub_title'] }</p>
+                            <p className={ 'text-xl text-pretty break-words' }>{ post.subtitle }</p>
                         </div>
                     </div>
                 }

frontend/app/(pages)/blog/post/[id]/PostCard.tsx

@@ -3,25 +3,28 @@ import { Card, CardBody } from '@nextui-org/card';
 import Headers from '@/app/(pages)/blog/post/[id]/Headers';
 import Footer from '@/app/(pages)/blog/post/[id]/Footer';
 import MarkdownRenderer from '@/app/(pages)/public/MarkdownRenderer';
+import { FetchPostResponseData } from '@/src/api/blog/post';
 
 type Props = {
-    post: any
+    post: FetchPostResponseData
 }
 
 async function PostCard(props: Props) {
-    let post = props.post;
+    const post = props.post.post;
+    const metadata: any | null = post.metadata;
+    const adj = props.post.adjacent;
+
     return (
         <div>
             <Card className={ `max-w-full relative` }>
 
                 {/* card headers */ }
                 <Headers title={ post.title }
-                         subtitle={ post.sub_title }
-                         summary={ post.summary }
+                         subtitle={ post.subtitle }
                          category={ post.category }
                          tags={ post.tags }
-                         first_update={ post.first_update }
-                         header_img={ post.meta.header_img }
+                         first_update={ post.date_created }
+                         header_img={ metadata?.header_img }
                 />
 
                 {/* card body */ }
@@ -36,14 +39,13 @@ async function PostCard(props: Props) {
 
                 {/* card footer */ }
                 <Footer
-                    adjacent_posts={ post.adj }
-                    perm_link={ post.meta.link }
-                    author={ post.meta.author }
-                    author_link={ post.meta.author_link }
-                    first_update={ post.first_update }
-                    last_update={ post.last_update }
-                    cc={ post.meta.cc }
-                    post_id={ post.meta.id }
+                    adjacent_posts={ adj }
+                    perm_link={ metadata?.perm_link ?? `https://lumither.com/blog/post/${ post.id }` }
+                    author={ metadata?.author ?? 'Tao' }
+                    author_link={ metadata?.author_link ?? '/about/me' }
+                    first_update={ post.date_created }
+                    last_update={ post.date_updated }
+                    cc={ metadata?.cc }
                     title={ post.title }
                 />
 

frontend/app/(pages)/blog/post/[id]/page.tsx

@@ -1,22 +1,17 @@
-import React, { cache } from 'react';
+import React from 'react';
 import PostCard from '@/app/(pages)/blog/post/[id]/PostCard';
 import ButtonGoBack from '@/app/(pages)/blog/post/[id]/ButtonGoBack';
 import * as motion from 'motion/react-client';
-import { fetchNocturneApi } from '@/app/(pages)/blog/api';
 import { Metadata } from 'next';
 import { SITE_CONFIG } from '@/src/constants';
-
-const fetchPost = cache(async (id: string) => {
-    const res = await fetchNocturneApi(`/blog/get_post/${ id }`);
-    // throw Error('Not Found');
-    return await res.json();
-});
+import { fetchPost } from '@/src/api/blog/post';
 
 export async function generateMetadata(
     { params }: { params: Promise<{ id: string }> })
     : Promise<Metadata> {
     try {
-        const title = (await fetchPost((await params).id)).title as string;
+        const response = await fetchPost((await params).id);
+        const title = response.data.post.title;
         return {
             title: `${ title } - ${ SITE_CONFIG.name }`
         };
@@ -33,7 +28,7 @@ async function BlogReader({
     params: Promise<{ id: string }>
 }) {
     try {
-        let post = await fetchPost((await params).id);
+        let post = (await fetchPost((await params).id)).data;
 
         return (
             <motion.div

frontend/app/page.tsx

@@ -5,14 +5,13 @@ import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
 import { Button } from '@nextui-org/react';
 import { entries } from '@/app/entries';
 import Link from 'next/link';
-import { useLocalStorage } from 'react-use';
 
 export default function Home() {
 
     const isMobile = useScreenSizeTrigger('lg');
 
-    const [ test, setTest, removeTest ] = useLocalStorage('test', 'test_value');
-    console.log(test);
+    // const [ test, setTest, removeTest ] = useLocalStorage('test', 'test_value');
+    // console.log(test);
     // setTest('test value 2');
     // console.log(test);
     // removeTest();

frontend/package.json

@@ -13,13 +13,13 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "lxgw-wenkai-webfont": "^1.7.0",
     "motion": "^12.3.1",
-    "next": "^15.0.3",
+    "next": "^15.3.2",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
-    "react-syntax-highlighter": "^15.5.0",
+    "react-syntax-highlighter": "^15.6.1",
     "react-use": "^17.6.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -34,7 +34,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.2",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.9",

frontend/src/api/blog/post.ts

@@ -0,0 +1,96 @@
+import { fetchNocturneJson } from '@/src/api/endpoint';
+
+const DEFAULT_PAGE_SIZE = 6;
+
+export interface PostListResponse {
+    data: {
+        posts: {
+            id: string,
+            identifier: string,
+            title: string,
+            subtitle: string,
+            tags: string[]
+            category: string,
+            date_created: Date,
+            date_updated: Date | null,
+            header_img: string | null
+        }[],
+        pagination: {
+            page: number,
+            page_count: number,
+            page_size: number
+        }
+    },
+    status: string
+}
+
+
+export async function fetchPostList(page: number, page_size: number = DEFAULT_PAGE_SIZE): Promise<PostListResponse> {
+    const url = `/blog/posts?page=${ page }&page_size=${ page_size }`;
+    return await fetchNocturneJson(url);
+}
+
+
+export interface PostListPaginationResponseData {
+    page_count: number,
+    post_count: number,
+}
+
+export interface PostListPaginationResponse {
+    data: PostListPaginationResponseData;
+    status: string;
+}
+
+export async function fetchPostListPagination(): Promise<PostListPaginationResponse> {
+    const url = `/blog/posts/pagination`;
+    return await fetchNocturneJson(url);
+}
+
+
+export interface FetchPostResponseData {
+    post: {
+        id: string,
+        identifier: string,
+        title: string,
+        subtitle: string,
+        status: string,
+        date_created: string,
+        date_updated: string | null,
+        category: string,
+        tags: string[],
+        content: string,
+        metadata: any | null,
+    },
+    adjacent: {
+        prev: {
+            id: string,
+            identifier: string,
+            title: string,
+            subtitle: string,
+            date_created: string,
+            category: string,
+            tags: string[],
+            header_img: string | null,
+        } | null,
+        next: {
+            id: string,
+            identifier: string,
+            title: string,
+            subtitle: string,
+            date_created: string,
+            category: string,
+            tags: string[],
+            header_img: string | null,
+        } | null,
+    }
+}
+
+export interface FetchPostResponse {
+    data: FetchPostResponseData;
+    status: string;
+}
+
+export async function fetchPost(id: string): Promise<FetchPostResponse> {
+    const url = `/blog/posts/${ id }`;
+    return await fetchNocturneJson(url);
+}

frontend/src/api/endpoint.ts

@@ -0,0 +1,40 @@
+const LOCAL_ENDPOINT = process.env.API_LOCAL_URL;
+const REMOTE_ENDPOINT = process.env.API_REMOTE_URL;
+const FALLBACK_ENDPOINT = 'http://localhost:3001';
+
+const NOCTURNE_ENDPOINT = ((isServerSide = true) => {
+    const get_endpoint = () => {
+        if (process.env.NODE_ENV === 'production') {
+            if (isServerSide) {
+                return LOCAL_ENDPOINT;
+            } else {
+                return REMOTE_ENDPOINT;
+            }
+        } else {
+            return LOCAL_ENDPOINT;
+        }
+    };
+
+    return get_endpoint() ?? FALLBACK_ENDPOINT;
+});
+
+export async function fetchNocturneJson<T>(
+    path: string,
+    isServerSideRequest = true,
+    method: string = 'GET'
+): Promise<T> {
+    const url = `${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`;
+
+    const future = fetch(url, {
+        cache: 'no-cache',
+        method: method
+    });
+
+    const res = (await future);
+
+    if (!res.ok) {
+        throw new Error(`Failed to fetch "${ url }" [${ res.status }]: ${ res.statusText }`);
+    }
+
+    return (await res.json()) as T;
+}

frontend/src/lang/_result.ts

@@ -0,0 +1,89 @@
+export type Result<T, E> = Ok<T, E> | Err<T, E>;
+
+class Ok<T, E> {
+    readonly value: T;
+
+    constructor(value: T) {
+        this.value = value;
+    }
+
+    isOk(): this is Ok<T, E> {
+        return true;
+    }
+
+    isErr(): this is Err<T, E> {
+        return false;
+    }
+
+    map<U>(fn: (val: T) => U): Result<U, E> {
+        return new Ok(fn(this.value));
+    }
+
+    mapErr<F>(_fn: (err: E) => F): Result<T, F> {
+        return new Ok(this.value);
+    }
+
+    unwrap(): T {
+        return this.value;
+    }
+
+    unwrapOr(_default: T): T {
+        return this.value;
+    }
+
+    match<U>(handlers: { ok: (val: T) => U, err: (err: E) => U }): U {
+        return handlers.ok(this.value);
+    }
+
+    andThen<U>(fn: (val: T) => Result<U, E>): Result<U, E> {
+        return fn(this.value);
+    }
+}
+
+class Err<T, E> {
+    readonly error: E;
+
+    constructor(error: E) {
+        this.error = error;
+    }
+
+    isOk(): this is Ok<T, E> {
+        return false;
+    }
+
+    isErr(): this is Err<T, E> {
+        return true;
+    }
+
+    map<U>(_fn: (val: T) => U): Result<U, E> {
+        return new Err(this.error);
+    }
+
+    mapErr<F>(fn: (err: E) => F): Result<T, F> {
+        return new Err(fn(this.error));
+    }
+
+    unwrap(): T {
+        throw new Error('Tried to unwrap Err: ' + this.error);
+    }
+
+    unwrapOr(defaultValue: T): T {
+        return defaultValue;
+    }
+
+    match<U>(handlers: { ok: (val: T) => U, err: (err: E) => U }): U {
+        return handlers.err(this.error);
+    }
+
+    andThen<U>(_fn: (val: T) => Result<U, E>): Result<U, E> {
+        return new Err(this.error);
+    }
+}
+
+export function ok<T, E = never>(value: T): Result<T, E> {
+    return new Ok(value);
+}
+
+export function err<T = never, E = unknown>(error: E): Result<T, E> {
+    return new Err(error);
+}

frontend/src/lang/todo.ts

@@ -0,0 +1,3 @@
+export function todo(message: string = 'Not yet implemented'): never {
+    throw new Error(`TODO: ${ message }`);
+}