feat(global) update multiple components

PBS - feat(global) new main page, tag filter system, docker compose deployment

.gitignore

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

Makefile

@@ -3,7 +3,21 @@ ifeq ($(ARCH), arm64)
     ARCH := aarch64
 endif
 
-.PHONY: up
-clean:
-	echo "todo"
+.PHONY: all
+all:up
 
+.PHONY: build
+build:
+	ARCH=$(ARCH) docker compose -f prod.compose.yaml build
+
+.PHONY: up
+up:
+	ARCH=$(ARCH) docker compose -f prod.compose.yaml up -d
+
+.PHONY: down
+down:
+	ARCH=$(ARCH) docker compose -f prod.compose.yaml down
+
+.PHONY: rm
+rm:
+	ARCH=$(ARCH) docker compose -f prod.compose.yaml rm

backend/server/Cargo.toml

@@ -8,6 +8,7 @@ macros = { path = "../macros" }
 markdown = { path = "../markdown" }
 
 axum = { version = "0.8.1", features = ["macros"] }
+axum-extra = { version = "0.10.3", features = ["query"] }
 tracing = { version = "0.1.41", features = ["log"] }
 git2 = "0.20.0"
 chrono = { version = "0.4.39", features = ["serde"] }

backend/server/build.rs

@@ -1,16 +1,17 @@
-use chrono::Utc;
-use git2::Repository;
+// use chrono::Utc;
+// use git2::Repository;
 
 fn main() {
-    let repo = Repository::open("../..").expect("failed to open repository");
-    let commit = repo
-        .head()
-        .expect("failed to get HEAD")
-        .peel_to_commit()
-        .expect("failed to get HEAD commit");
-    let hash = commit.id().to_string();
-    let utc_timestamp = Utc::now().date_naive().format("%Y%m%d").to_string();
-    let pkg_version = env!("CARGO_PKG_VERSION");
-    let build_id = format!("{}:{}@{}", pkg_version, &hash[..8], utc_timestamp);
-    println!("cargo:rustc-env=BUILD_ID={}", build_id);
+    // let repo = Repository::open("../..").expect("failed to open repository");
+    // let commit = repo
+    //     .head()
+    //     .expect("failed to get HEAD")
+    //     .peel_to_commit()
+    //     .expect("failed to get HEAD commit");
+    // let hash = commit.id().to_string();
+    // let utc_timestamp = Utc::now().date_naive().format("%Y%m%d").to_string();
+    // let pkg_version = env!("CARGO_PKG_VERSION");
+    // let build_id = format!("{}:{}@{}", pkg_version, &hash[..8], utc_timestamp);
+    // println!("cargo:rustc-env=BUILD_ID={}", build_id);
+    println!("cargo:rustc-env=BUILD_ID=undefined");
 }

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

@@ -0,0 +1,20 @@
+WITH filtered_posts AS
+         (SELECT p.id, p.date_created
+          FROM posts p
+          WHERE $1::text[] IS NULL
+             OR (
+              CASE
+                  WHEN $4 THEN (SELECT COUNT(DISTINCT t.name)
+                                FROM post_tag pt
+                                         JOIN tags t ON pt.tag = t.id
+                                WHERE pt.post = p.id
+                                  AND t.name = ANY ($1::text[])) = cardinality($1)
+                  ELSE EXISTS (SELECT 1
+                               FROM post_tag pt
+                                        JOIN tags t ON pt.tag = t.id
+                               WHERE pt.post = p.id
+                                 AND t.name = ANY ($1::text[]))
+                  END
+              ))
+SELECT COUNT(*) AS total_count
+FROM filtered_posts;

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

@@ -1,5 +1,174 @@
-use axum::response::IntoResponse;
+use crate::{
+    constants::blog::PAGE_SIZE,
+    err_resp_log,
+    utils::axum_response::{err_resp, succ_resp},
+};
 
-pub async fn handler() -> impl IntoResponse {
-    ()
+use std::collections::HashSet;
+
+use axum::{extract::State, http::StatusCode, response::IntoResponse};
+use axum_extra::extract::Query;
+use chrono::NaiveDate;
+use serde::{Deserialize, Serialize};
+use serde_json::json;
+use sqlx::{query_as, FromRow, PgPool};
+use uuid::Uuid;
+
+fn tags_deserializer<'de, D>(deserializer: D) -> Result<Option<Vec<String>>, D::Error>
+where
+    D: serde::Deserializer<'de>,
+{
+    let deserialize_each = |input: String| -> Result<Vec<String>, D::Error> {
+        Ok(input.split(',').map(|s| s.to_string()).collect())
+    };
+
+    #[derive(Deserialize)]
+    #[serde(untagged)]
+    enum Cardinality {
+        One(String),
+        Many(Vec<String>),
+    }
+    let cardinality: Option<Cardinality> = Deserialize::deserialize(deserializer)?;
+
+    let mut tags = HashSet::new();
+
+    match cardinality {
+        Some(Cardinality::One(s)) => {
+            for item in deserialize_each(s)? {
+                let item = item.trim().to_string();
+                if !item.is_empty() {
+                    tags.insert(item);
+                }
+            }
+            let ret = tags.into_iter().collect::<Vec<_>>();
+            Ok(if ret.is_empty() { None } else { Some(ret) })
+        }
+        Some(Cardinality::Many(v)) => {
+            for items in v
+                .into_iter()
+                .map(deserialize_each)
+                .collect::<Result<Vec<_>, _>>()?
+            {
+                for item in items {
+                    let item = item.trim().to_string();
+                    if !item.is_empty() {
+                        tags.insert(item);
+                    }
+                }
+            }
+            let ret = tags.into_iter().collect::<Vec<_>>();
+            Ok(if ret.is_empty() { None } else { Some(ret) })
+        }
+        None => Ok(None),
+    }
+}
+
+#[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 SearchParams {
+    page: Option<u32>,
+    page_size: Option<u32>,
+
+    #[serde(default, deserialize_with = "tags_deserializer")]
+    tags: Option<Vec<String>>,
+
+    #[serde(default)]
+    match_all: bool,
+}
+
+#[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 I32_PLACEHOLDER: i32 = 0;
+
+const COUNT_TAG_FILTERED_POSTS: &str = include_str!("count_tag_filtered_posts.sql");
+const SELECT_POST_WITH_TAG_FILTER_PAGINATED: &str =
+    include_str!("select_post_with_tag_filter_paginated.sql");
+const GET_POST_WITH_BRIEF_MODEL: &str = include_str!("get_post_with_brief_model.sql");
+
+pub async fn handler(
+    State(db): State<PgPool>,
+    Query(search_params): Query<SearchParams>,
+) -> impl IntoResponse {
+    let page = search_params.page.unwrap_or(1);
+    let page_size = search_params.page_size.unwrap_or(PAGE_SIZE);
+
+    let page_count = match sqlx::query_scalar::<_, i64>(COUNT_TAG_FILTERED_POSTS)
+        .bind(&search_params.tags)
+        .bind(I32_PLACEHOLDER) // not used, but help sqlx/psql hit cache
+        .bind(I32_PLACEHOLDER)
+        .bind(search_params.match_all)
+        .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()),
+    };
+
+    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})),
+        );
+    }
+
+    let offset = page_size * (page - 1);
+
+    let ids = match query_as::<_, UuidRow>(SELECT_POST_WITH_TAG_FILTER_PAGINATED)
+        .bind(search_params.tags)
+        .bind(page_size as i32)
+        .bind(offset as i32)
+        .bind(search_params.match_all)
+        .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

@@ -1,4 +1,4 @@
-use crate::utils::axum_response::{err_resp, succ_resp};
+use crate::{err_resp_log, utils::axum_response::succ_resp};
 
 use axum::{
     extract::{Path, State},
@@ -28,7 +28,7 @@ struct SelectedPost {
     category: String,
     tags: Vec<String>,
     content: String,
-    metadata: Value,
+    metadata: Option<Value>,
 }
 
 #[derive(serde::Serialize, FromRow)]
@@ -73,8 +73,10 @@ pub async fn handler(
         Ok(post) => post,
         Err(e) => {
             return match e {
-                sqlx::Error::RowNotFound => err_resp(StatusCode::NOT_FOUND, "no matching post"),
-                _ => err_resp(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
+                sqlx::Error::RowNotFound => {
+                    err_resp_log!(StatusCode::NOT_FOUND, "no matching post")
+                }
+                _ => err_resp_log!(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
             };
         }
     };

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/pagination/mod.rs

@@ -1,7 +1,4 @@
-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_json::{Value, json};
@@ -10,19 +7,19 @@ use sqlx::{FromRow, PgPool, query_as};
 #[derive(FromRow)]
 struct DBPaginationRow {
     page_count: i32,
-    total_count: i64,
+    post_count: i64,
 }
 
 struct PaginationResponse {
     page_count: i32,
-    total_count: i64,
+    post_count: i64,
 }
 
 impl From<DBPaginationRow> for PaginationResponse {
     fn from(value: DBPaginationRow) -> Self {
         Self {
             page_count: value.page_count,
-            total_count: value.total_count,
+            post_count: value.post_count,
         }
     }
 }
@@ -31,7 +28,7 @@ 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
         })
     }
 }
@@ -41,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;
     "#,
     )
@@ -50,6 +47,6 @@ pub async fn handler(State(db_connection): State<PgPool>) -> Response<String> {
     .await
     {
         Ok(res) => succ_resp(StatusCode::OK, PaginationResponse::from(res).into()),
-        Err(e) => err_resp(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
+        Err(e) => err_resp_log!(StatusCode::INTERNAL_SERVER_ERROR, &e.to_string()),
     }
 }

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

@@ -0,0 +1,22 @@
+WITH filtered_posts AS
+         (SELECT p.id, p.date_created
+          FROM posts p
+          WHERE $1::text[] IS NULL
+             OR (
+              CASE
+                  WHEN $4 THEN (SELECT COUNT(DISTINCT t.name)
+                                FROM post_tag pt
+                                         JOIN tags t ON pt.tag = t.id
+                                WHERE pt.post = p.id
+                                  AND t.name = ANY ($1::text[])) = cardinality($1)
+                  ELSE EXISTS (SELECT 1
+                               FROM post_tag pt
+                                        JOIN tags t ON pt.tag = t.id
+                               WHERE pt.post = p.id
+                                 AND t.name = ANY ($1::text[]))
+                  END
+              ))
+SELECT id
+FROM filtered_posts
+ORDER BY date_created DESC
+LIMIT $2 OFFSET $3;

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: &str) -> Response<String> {
-    let payload = json!({
+#[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",
-        "data": {
         "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/

container/release/backend.containerfile

@@ -5,6 +5,6 @@ RUN ["cargo", "build", "-r"]
 
 FROM gcr.io/distroless/cc AS production
 ARG ARCH
-COPY --from=builder /app/target/release/api_server ./api_server
+COPY --from=builder /app/target/release/server ./server
 COPY --from=builder /usr/lib/${ARCH}-linux-gnu/libz.so.1 /usr/lib/${ARCH}-linux-gnu/
-ENTRYPOINT ["./api_server"]
+ENTRYPOINT ["./server"]

daemon/.gitignore

@@ -0,0 +1,3 @@
+target/
+
+Cargo.lock

daemon/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "daemon"
+version = "0.1.0"
+edition = "2024"
+
+[dependencies]
+clap = { version = "4.5.47", features = ["derive"] }
+containerd-client = "0.8.0"
+tokio = { version = "1.45.1", features = ["macros", "rt-multi-thread"] }

daemon/Makefile

@@ -0,0 +1,13 @@
+.PHONY: rebuild
+rebuild:
+	cargo clean
+	cargo build
+
+.PHONY: rebuild-release
+rebuild-release:
+	cargo clean
+	cargo build -r
+
+.PHONY: run
+run:
+	sudo ./target/debug/daemon

daemon/src/actions/mod.rs

@@ -0,0 +1 @@
+mod pull;

daemon/src/config/default.json

@@ -0,0 +1,8 @@
+{
+  "images": [
+    {
+      "id": "",
+      "image": ""
+    }
+  ]
+}

daemon/src/main.rs

@@ -0,0 +1,89 @@
+mod actions;
+mod config;
+
+use clap::Parser;
+use containerd_client::tonic::Request;
+use containerd_client::{
+    connect,
+    services::v1::{transfer_client::TransferClient, TransferOptions, TransferRequest},
+    to_any,
+    types::transfer::OciRegistry,
+    types::transfer::{ImageStore, UnpackConfiguration},
+    types::Platform,
+    with_namespace,
+};
+use std::env::consts;
+
+#[derive(Parser, Debug)]
+struct Args {
+    /// containerd namespace
+    #[arg(short, long, default_value = "nocturne")]
+    namespace: String,
+
+    /// containerd socket
+    #[arg(short, long, default_value = "/run/containerd/containerd.sock")]
+    socket: String,
+}
+
+const IMAGE: &str = "docker.io/library/alpine:latest";
+
+#[tokio::main]
+async fn main() {
+    let args = Args::parse();
+
+    let arch = match consts::ARCH {
+        "x86_64" => "amd64",
+        "aarch64" => "arm64",
+        _ => consts::ARCH,
+    };
+
+    dbg!(&args);
+
+    let channel = connect(&args.socket).await.expect("failed to bind socket");
+    let mut client = TransferClient::new(channel.clone());
+
+    let registry = OciRegistry {
+        reference: IMAGE.to_string(),
+        resolver: Default::default(),
+    };
+
+    let platform = Platform {
+        os: "linux".to_string(),
+        architecture: arch.to_string(),
+        variant: "".to_string(),
+        os_version: "".to_string(),
+    };
+
+    let destination = ImageStore {
+        name: IMAGE.to_string(),
+        platforms: vec![platform.clone()],
+        unpacks: vec![UnpackConfiguration {
+            platform: Some(platform),
+            ..Default::default()
+        }],
+        ..Default::default()
+    };
+
+    let anys = to_any(&registry);
+    let anyd = to_any(&destination);
+
+    println!(
+        "Pulling image for linux/{} from source: {:?}",
+        arch, registry
+    );
+
+    let request = TransferRequest {
+        source: Some(anys),
+        destination: Some(anyd),
+        options: Some(TransferOptions {
+            ..Default::default()
+        }),
+    };
+    // let request = Request::new(request);
+    let req = with_namespace!(request, args.namespace);
+
+    client
+        .transfer(req)
+        .await
+        .expect("unable to transfer image");
+}

frontend/Makefile

@@ -0,0 +1,8 @@
+
+.PHONY:all
+all: standalone
+
+.PHONY: standalone
+standalone:
+	npm run build
+	cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/

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

@@ -4,42 +4,50 @@ import { Chip } from '@nextui-org/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { MdCalendarMonth, MdNorthEast } from 'react-icons/md';
+import { HighlightSelector } from '@/app/(pages)/blog/post/components/AnimationPostList';
+import TagChip from '@/app/(pages)/blog/TagChip';
 
-type Props = {
-    post: JSON
+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
 }
 
-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);
+type Props = {
+    post: Post
+
+    highlightSelector: HighlightSelector,
+}
+
+function BlogPostCard({ post, highlightSelector }: Props) {
+    const highlightTags = highlightSelector?.tags;
 
     return (
-
         <div className={ `w-full` }>
-            <Card as={ Link } href={ `/blog/post/${ post_id }` }
-                  className={ `group` }
+            <Card
+                as={ Link } href={ `/blog/post/${ post.identifier }` }
+                className={ `group w-full` }
                 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 +56,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>
@@ -62,10 +70,24 @@ function BlogPostCard({ post }: Props) {
                     <div className={ `flex flex-row flex-wrap justify-between w-full` }>
                         <div>
                             <ul className={ `flex flex-row flex-wrap` }>
-                                {
-                                    tags.map((tag: string, key: any) => (
+                                {/*highlight*/
+                                    post.tags
+                                        .filter((tag) => highlightTags?.includes(tag))
+                                        .sort()
+                                        .map((tag: string, key: any) => (
                                             <li key={ key } className={ `mx-1 mb-1` }>
-                                            <Chip>{ tag }</Chip>
+                                                <TagChip tagName={ tag } isHighlighted={ true } />
+                                            </li>
+                                        ))
+                                }
+
+                                {/*normal */
+                                    post.tags
+                                        .filter((tag) => !highlightTags?.includes(tag))
+                                        .sort()
+                                        .map((tag: string, key: any) => (
+                                            <li key={ key } className={ `mx-1 mb-1` }>
+                                                <TagChip tagName={ tag } isHighlighted={ false } />
                                             </li>
                                         ))
                                 }
@@ -74,7 +96,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/Pagination.tsx

@@ -8,7 +8,9 @@ import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
 const Pagination = ({ total }: {
     total: number,
 }) => {
-    const parsePage = Number(useSearchParams().get('page'));
+    const searchParams = useSearchParams();
+
+    const parsePage = Number(searchParams.get('page'));
     const currPage = parsePage > 0 ? parsePage : 1;
 
     const router = useRouter();
@@ -27,7 +29,10 @@ const Pagination = ({ total }: {
                 color={ 'default' }
                 variant={ 'light' }
                 onChange={ (page) => {
-                    router.push(`?page=${ page }`, { scroll: false });
+                    const params = new URLSearchParams(searchParams.toString());
+                    params.set('page', page.toString());
+                    const queryString = params.toString();
+                    router.push(`?${ queryString }`, { scroll: false });
                 } }
             />
         </div>

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

@@ -1,43 +1,37 @@
-'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 { Post } from '@/src/api/blog/post';
+import AnimationPostList, { HighlightSelector } from '@/app/(pages)/blog/post/components/AnimationPostList';
 
-import * as motion from 'motion/react-client';
+interface Props {
+    posts: Post[],
+    tags: string[] | undefined
+}
 
-const PostList = async ({ page }: { page: number }) => {
+const PostList = async ({ posts, tags }: Props) => {
     try {
-        const res = await fetchNocturneApi(`/blog/get_post_list?page=${ page }`);
-        const posts = await res.json();
         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) => (
-                        <li key={ key } className={ 'w-full' }>
-                            <motion.div
-                                initial={ { y: 20, opacity: 0 } }
-                                animate={ { y: 0, opacity: 1 } }
-                                transition={ { ease: 'easeInOut', duration: 0.5, delay: key * .2 + .25 } }
-                            >
-                                <BlogPostCard post={ post } />
-                            </motion.div>
-                        </li>)
-                    ) }
-                </ul>
-
+                <AnimationPostList posts={ posts } highlight={ {
+                    tags: tags
+                } } />
             </div>
         );
     } 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/TagChip.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+import { Chip } from '@nextui-org/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+interface TagChipProps {
+    tagName: string,
+    isHighlighted: boolean
+}
+
+const TagChip = ({ tagName, isHighlighted }: TagChipProps) => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    const toggleTag = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        const params = new URLSearchParams(searchParams.toString());
+        const tags = params.getAll('tags');
+
+        if (tags.includes(tagName)) {
+            const newTags = tags.filter(t => t !== tagName);
+            params.delete('tags');
+            newTags.forEach(t => params.append('tags', t));
+        } else {
+            params.append('tags', tagName);
+        }
+
+        const queryString = params.toString();
+        router.push(`?${ queryString }`, { scroll: false });
+    };
+    return (
+        <div
+            onClick={ toggleTag }
+            className="cursor-pointer relative"
+        >
+            <Chip
+                className={ 'hover:border-amber-400 hover:dark:border-amber-700  transition-all' }
+                variant={ 'bordered' }
+                color={ isHighlighted ? 'warning' : 'default' }
+            >{ tagName }</Chip>
+        </div>
+    );
+};
+
+export default TagChip;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ToolBar = () => {
+    return (
+        <div className={ 'w-full' }>
+
+        </div>
+    );
+};
+
+export default ToolBar;

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,24 +1,67 @@
 import PostList from '@/app/(pages)/blog/PostList';
 import Pagination from '@/app/(pages)/blog/Pagination';
-import { fetchNocturneApi } from '@/app/(pages)/blog/api';
+import { fetchPostList } from '@/src/api/blog/post';
+import ToolBar from '@/app/(pages)/blog/ToolBar';
+
 
 async function Blog({
     searchParams
 }: {
-    searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+    searchParams: Promise<{ [_: string]: string | string[] | undefined }>
 }) {
 
-    const parsePage = Number((await searchParams)?.page);
+    const sp = await searchParams;
+
+    const parsePage = Number(sp?.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;
+
+    const matchAll = Boolean(sp?.match_all);
+
+    const ensureList = (input: string | string[] | undefined): string[] | undefined => {
+        if (!input) {
+            return undefined;
+        }
+        if (typeof input === 'string') {
+            return [ input ];
+        } else {
+            return input;
+        }
+    };
+    const tags = ensureList(sp?.tags);
+
+    try {
+        const postListResponse = await fetchPostList({
+            page: currPage,
+            match_all: matchAll,
+            tag_filter: tags
+        });
+
+        const pagination = postListResponse.data.pagination;
+        const posts = postListResponse.data.posts;
 
         return (
             <div className={ 'w-full min-w-full space-y-4' }>
-            <PostList page={ currPage } />
-            <Pagination total={ pageCount } />
+                <ToolBar />
+                <PostList posts={ posts } tags={ tags } />
+                <Pagination total={ pagination.page_count } />
             </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 blog posts]:' }
+                    </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

@@ -2,15 +2,11 @@ import React from 'react';
 import Image from 'next/image';
 import { Chip } from '@nextui-org/react';
 import { MdCalendarMonth } from 'react-icons/md';
-
-// type Props = {
-//     post: any
-// };
+import TagChip from '@/app/(pages)/blog/post/[id]/TagChip';
 
 type Props = {
     title: string;
     subtitle: string;
-    summary: string | undefined;
     category: string;
     tags: string[];
     first_update: string;
@@ -55,7 +51,7 @@ const Headers = (post: Props) => {
                             {
                                 post.tags.map((tag: string, key: any) => (
                                     <li key={ key } className={ `mx-1 mb-1` }>
-                                        <Chip>{ tag }</Chip>
+                                        <TagChip tag={ tag } />
                                     </li>
                                 ))
                             }

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

@@ -17,7 +17,7 @@ const MinifyPostCard = (props: Props) => {
                   className="w-full h-[300px] shadow-none border-0 rounded-none overflow-hidden"
                   as={ Link }
                   isPressable
-                  href={ `/blog/post/${ post['id'] }` }
+                  href={ `/blog/post/${ post['identifier'] }` }
             >
                 <CardHeader className="absolute z-10 top-1 flex-col items-start">
                     <p className={ `text-tiny uppercase font-bold ${ img_url ? 'text-white/60' : 'text-black/60 dark:text-white/60' }` }>{ desc }</p>
@@ -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]/TagChip.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import React from 'react';
+import { Chip } from '@nextui-org/react';
+import { useRouter } from 'next/navigation';
+
+const TagChip = ({ tag }: { tag: string }) => {
+    const router = useRouter();
+
+    return (
+        <div onClick={ () => router.push(`/blog?tags=${ tag }`) }>
+            <Chip
+                className={ 'hover:border-amber-400 hover:dark:border-amber-700  transition-all' }
+                variant={ 'faded' }
+            >{ tag }</Chip>
+        </div>
+    );
+};
+
+export default TagChip;

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/(pages)/blog/post/components/AnimationPostList.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+import BlogPostCard from '@/app/(pages)/blog/BlogPostCard';
+
+import * as motion from 'motion/react-client';
+import { AnimatePresence } from 'motion/react';
+import { Post } from '@/src/api/blog/post';
+
+export interface HighlightSelector {
+    tags?: string[];
+}
+
+interface Props {
+    posts: Post[];
+    highlight: HighlightSelector;
+}
+
+const PostList = ({ posts, highlight }: Props) => {
+    return (
+        <div className={ 'w-full' }>
+            <ul className={ 'flex flex-col items-center w-full space-y-7' }>
+                <AnimatePresence mode={ 'wait' }>
+                    { posts.map((post, key: number) => (
+                        <motion.li
+                            initial={ { y: 20, opacity: 0 } }
+                            animate={ { y: 0, opacity: 1 } }
+                            transition={ { ease: 'easeOut', duration: 0.5, delay: key * .1 + .1 } }
+                            key={ key }
+                            className={ 'w-full' }>
+                            <BlogPostCard post={ post } highlightSelector={ highlight } />
+                        </motion.li>)
+                    ) }
+                </AnimatePresence>
+            </ul>
+
+        </div>
+    );
+};
+export default PostList;

frontend/app/(pages)/layout.tsx

@@ -14,7 +14,7 @@ function Layout({
             <motion.div
                 initial={ { opacity: 0 } }
                 animate={ { opacity: 1 } }
-                transition={ { ease: 'easeInOut', duration: 0.3, delay: 0.5 } }
+                transition={ { ease: 'easeInOut', duration: 0.3, delay: 0.1 } }
                 className={ `justify-center flex flex-row w-full max-w-full` }>
                 <Navbar />
                 <div className={ `flex flex-col flex-1 max-w-[1024px] min-w-0` }>

frontend/app/(pages)/public/screenSizeTrigger.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 const screenSize = new Map<string, number>(
     [
+        [ 'xs', 480 ],
         [ 'sm', 640 ],
         [ 'md', 768 ],
         [ 'lg', 1024 ],

frontend/app/globals.css

@@ -1,4 +1,4 @@
-@import "lxgw-wenkai-webfont/style.css";
+@import "lxgw-wenkai-webfont/lxgwwenkai-light.css";
 
 @tailwind base;
 @tailwind components;
@@ -6,8 +6,10 @@
 
 body {
     font-family: "LXGW WenKai", sans-serif;
+    /*font-family: "Arial", "monospace", sans-serif;*/
 }
 
 pre, code {
-    font-family: "LXGW WenKai Mono", sans-serif;
+    /*font-family: "monospace", sans-serif;*/
+    font-family: "monospace", sans-serif;
 }

frontend/app/page.tsx

@@ -5,47 +5,79 @@ 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';
+import * as motion from 'motion/react-client';
+import { cn } from '@/src/utils';
 
 export default function Home() {
 
-    const isMobile = useScreenSizeTrigger('lg');
-
-    const [ test, setTest, removeTest ] = useLocalStorage('test', 'test_value');
-    console.log(test);
-    // setTest('test value 2');
-    // console.log(test);
-    // removeTest();
-    // console.log(test);
+    const isSm = useScreenSizeTrigger('sm');
+    const isXs = useScreenSizeTrigger('xs');
 
     return (
-        <div className={ `h-dvh relative` }>
-            <ul className={ `flex flex-col space-y-2 w-full` }>
+        <div className={ 'h-dvh w-full overflow-hidden relative' }>
+            <motion.div
+                initial={ { opacity: 0 } }
+                animate={ { opacity: 1 } }
+                transition={ { ease: 'easeInOut', duration: 0.3, delay: 0.0 } }
+            >
+                <div className={ `min-h-dvh h-min content-center z-20 p-10` }>
+                    <p className={ 'text-center text-4xl' }>Atelier Lumiaethor</p>
+                    <p className={ 'text-center text-gray-700 font-bold dark:text-gray-400' }>In pursuit of absolute
+                        simplicity and ultimate
+                        sophistication</p>
+                </div>
+
+                <div
+                    className={ 'absolute left-1/2 -translate-x-1/2 bottom-0 w-full h-60 p-12 max-w-[1536px] justify-center' }
+                >
+                    <div
+                        className={ 'h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-1 sm:grid-cols-2 content-center' }>
+
+                        { !isSm &&
+                            <div className={ 'w-full grid content-center' }>
+                                <div
+                                    className={ 'p-2 h-fit brightness-50 lg:brightness-75 lg:p-8 xl:p-16 transition-all' }>
+                                    <p>
+                                        © 2024-{ new Date().getFullYear() } <Link href={ `/about` }>Lumither Tao</Link>
+                                    </p>
+                                    <p>Powered by Next.js and Rust, built with passion and love</p>
+                                    <p>LMTCloud ecosystem</p>
+                                </div>
+                            </div>
+                        }
+
+                        <div className={ 'h-full content-center p-4' }>
+                            <ul className={ `grid grid-cols-3 sm:grid-cols-2 justify-items-center sm:justify-items-start w-full` }>
                                 {
                                     entries.map((meta, key) => (
-                        <li key={ key }>
+                                        <li key={ key } className={ cn(isXs && 'w-fit', !isXs && 'w-full') }>
                                             <Button
                                                 as={ Link }
                                                 variant={ `light` }
                                                 color={ `default` }
                                                 fullWidth
-                                isIconOnly={ isMobile }
-                                className={ 'flex lg:justify-start w-fit lg:w-full' }
+                                                isIconOnly={ isXs }
+                                                className={ cn(
+                                                    'flex justify-center',
+                                                    isXs && 'w-fit',
+                                                    !isXs && 'sm:justify-start'
+                                                ) }
                                                 aria-label={ `navbar: ${ meta.display_name }` }
                                                 href={ meta.href }
                                             >
                                                 { meta.icon }
-                                <p className={ `font-bold hidden lg:block` }>{ meta.display_name }</p>
+                                                { !isXs && <p className={ `font-bold` }>{ meta.display_name }</p> }
                                             </Button>
                                         </li>
                                     ))
                                 }
                             </ul>
-            <div
-                className={ 'absolute bottom-0 w-full h-60 bg-yellow-500 p-12' }
-            >
-                <div className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur' }></div>
                         </div>
+
+
+                    </div>
+                </div>
+            </motion.div>
         </div>
     );
 }

frontend/components/ConstructionPlaceHolder.tsx

@@ -4,7 +4,7 @@ const ConstructionPlaceHolder = () => {
     return (
         <div className={ `flex h-full w-full justify-center items-center` }>
             <p className={ `text-2xl font-bold` }>
-                正在施工中...
+                * Under Construction *
             </p>
         </div>
     );

frontend/components/Footer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import Link from 'next/link';
 import { IoLogoGithub } from 'react-icons/io5';

frontend/next.config.mjs

@@ -8,7 +8,7 @@ const nextConfig = {
             },
             {
                 protocol: 'https',
-                hostname: 'pic.re'
+                hostname: 'cdn.jsdelivr.net'
             }
         ]
     },

frontend/package.json

@@ -11,22 +11,25 @@
   "dependencies": {
     "@nextui-org/react": "^2.4.6",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "clsx": "^2.1.1",
     "lxgw-wenkai-webfont": "^1.7.0",
-    "motion": "^12.3.1",
-    "next": "^15.0.3",
+    "motion": "^12.23.12",
+    "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",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-toc": "^9.0.0",
-    "sharp": "^0.33.4"
+    "sharp": "^0.33.4",
+    "tailwind-merge": "^3.3.1",
+    "ts-pattern": "^5.8.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.14",
@@ -34,7 +37,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,115 @@
+import { fetchNocturneJson } from '@/src/api/endpoint';
+
+const DEFAULT_PAGE_SIZE = 8;
+
+export 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
+}
+
+export interface PostListResponse {
+    data: {
+        posts: Post[],
+        pagination: {
+            page: number,
+            page_count: number,
+            page_size: number
+        }
+    },
+    status: string
+}
+
+interface FetchPostListParams {
+    page: number;
+    page_size?: number;
+    tag_filter?: string[];
+    match_all?: boolean;
+}
+
+export async function fetchPostList({
+        page,
+        page_size = DEFAULT_PAGE_SIZE,
+        tag_filter = [],
+        match_all = false
+    }: FetchPostListParams
+): Promise<PostListResponse> {
+    const pagination_string = `page=${ page }&page_size=${ page_size }`;
+    const tag_filter_string = tag_filter.length != 0
+        ? `&tags=${ tag_filter.join(',') }&match_all=${ match_all }`
+        : '';
+
+    const url = `/blog/posts?${ pagination_string }${ tag_filter_string }`;
+    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/constants.ts

@@ -1,4 +1,4 @@
 export const SITE_CONFIG = {
     name: 'Atelier Lumiaethor',
-    desc: ''
+    desc: 'In pursuit of absolute simplicity and ultimate sophistication'
 };

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 }`);
+}

frontend/src/utils.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

gateway/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "gateway"
 version = "0.1.0"
-edition = "2021"
+edition = "2024"
 
 [dependencies]

gateway/src/main.rs

@@ -1,3 +1 @@
-fn main() {
-    println!("Hello, world!");
-}
+fn main() {}

migration/migration.sh

@@ -0,0 +1,18 @@
+#!/bin/sh
+set -e
+
+PGPASSFILE="/root/.pgpass"
+echo "postgres:5432:${POSTGRES_DB}:${POSTGRES_USER}:${POSTGRES_PASSWORD}" > "$PGPASSFILE"
+chmod 600 "$PGPASSFILE"
+
+echo "waiting for postgres"
+until pg_isready -h postgres -U "$POSTGRES_USER" -d "$POSTGRES_DB"; do
+   echo "retrying, sleep 2s"
+   sleep 2
+done
+echo "db ready, running migrations"
+for file in /migrations/*.sql; do
+  echo "applying $file"
+  psql -h postgres -U "$POSTGRES_USER" -d "$POSTGRES_DB" -f "$file"
+done
+echo "migration complete"

prod.compose.yaml

@@ -14,7 +14,7 @@ services:
 
   backend:
     depends_on:
-      - postgres
+      - migrate
     build:
       context: ./backend
       dockerfile: ../container/release/backend.containerfile
@@ -29,10 +29,31 @@ services:
     dns:
       - 1.1.1.1
 
+
+  migrate:
+    image: postgres:17
+    depends_on:
       postgres:
-    image: postgres:16.3
+        condition: service_healthy
+    env_file:
+      - ./.env
+      - ./.env.local
+    volumes:
+      - ./migration/ddl:/migrations:ro
+      - ./migration/migration.sh:/migration.sh:ro
+    entrypoint: [ "/bin/sh", "/migration.sh" ]
+
+
+  postgres:
+    image: postgres:17
     ports:
       - "5432:5432"
     env_file:
       - ./.env
       - ./.env.local
+    healthcheck:
+      test: [ "CMD-SHELL", "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB" ]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+      start_period: 5s