feat(global) update multiple components

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

Makefile

@@ -3,7 +3,21 @@ ifeq ($(ARCH), arm64)
     ARCH := aarch64
 endif
 
-.PHONY: up
+.PHONY: all
-clean:
+all:up
-	echo "todo"
 
+.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 chrono::Utc;
-use git2::Repository;
+// use git2::Repository;
 
 fn main() {
-    let repo = Repository::open("../..").expect("failed to open repository");
+    // let repo = Repository::open("../..").expect("failed to open repository");
-    let commit = repo
+    // let commit = repo
-        .head()
+    //     .head()
-        .expect("failed to get HEAD")
+    //     .expect("failed to get HEAD")
-        .peel_to_commit()
+    //     .peel_to_commit()
-        .expect("failed to get HEAD commit");
+    //     .expect("failed to get HEAD commit");
-    let hash = commit.id().to_string();
+    // let hash = commit.id().to_string();
-    let utc_timestamp = Utc::now().date_naive().format("%Y%m%d").to_string();
+    // let utc_timestamp = Utc::now().date_naive().format("%Y%m%d").to_string();
-    let pkg_version = env!("CARGO_PKG_VERSION");
+    // let pkg_version = env!("CARGO_PKG_VERSION");
-    let build_id = format!("{}:{}@{}", pkg_version, &hash[..8], utc_timestamp);
+    // let build_id = format!("{}:{}@{}", pkg_version, &hash[..8], utc_timestamp);
-    println!("cargo:rustc-env=BUILD_ID={}", build_id);
+    // 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

@@ -4,17 +4,65 @@ use crate::{
     utils::axum_response::{err_resp, succ_resp},
 };
 
-use axum::{
+use std::collections::HashSet;
-    extract::{Query, State},
+
-    http::StatusCode,
+use axum::{extract::State, http::StatusCode, response::IntoResponse};
-    response::IntoResponse,
+use axum_extra::extract::Query;
-};
 use chrono::NaiveDate;
 use serde::{Deserialize, Serialize};
 use serde_json::json;
-use sqlx::{FromRow, PgPool, query_as};
+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,
@@ -29,9 +77,15 @@ struct PostBriefModel {
 }
 
 #[derive(Deserialize, Serialize)]
-pub struct Pagination {
+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)]
@@ -52,15 +106,25 @@ 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(pagination): Query<Pagination>,
+    Query(search_params): Query<SearchParams>,
 ) -> impl IntoResponse {
-    let page = pagination.page.unwrap_or(1);
+    let page = search_params.page.unwrap_or(1);
-    let page_size = pagination.page_size.unwrap_or(PAGE_SIZE);
+    let page_size = search_params.page_size.unwrap_or(PAGE_SIZE);
-    let page_count = match sqlx::query_scalar::<_, i64>("SELECT COUNT(*) FROM posts")
+
+    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
     {
@@ -84,13 +148,13 @@ pub async fn handler(
 
     let offset = page_size * (page - 1);
 
-    let ids = match query_as::<_, UuidRow>(
+    let ids = match query_as::<_, UuidRow>(SELECT_POST_WITH_TAG_FILTER_PAGINATED)
-        "SELECT id FROM posts ORDER BY date_created DESC LIMIT $1 OFFSET $2",
+        .bind(search_params.tags)
-    )
+        .bind(page_size as i32)
-    .bind(page_size as i32)
+        .bind(offset as i32)
-    .bind(offset as i32)
+        .bind(search_params.match_all)
-    .fetch_all(&db)
+        .fetch_all(&db)
-    .await
+        .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()),

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;

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"]

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,6 +4,8 @@ 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';
 
 interface Post {
     id: string,
@@ -19,15 +21,20 @@ interface Post {
 
 type Props = {
     post: Post
+
+    highlightSelector: HighlightSelector,
 }
 
-function BlogPostCard({ post }: Props) {
+function BlogPostCard({ post, highlightSelector }: Props) {
+    const highlightTags = highlightSelector?.tags;
+
     return (
         <div className={ `w-full` }>
-            <Card as={ Link } href={ `/blog/post/${ post.identifier }` }
+            <Card
-                  className={ `group` }
+                as={ Link } href={ `/blog/post/${ post.identifier }` }
-                  isPressable
+                className={ `group w-full` }
-                  isHoverable
+                isPressable
+                isHoverable
             >
 
                 { post.header_img && <div className={ `w-full overflow h-80 relative` }>
@@ -63,12 +70,26 @@ function BlogPostCard({ post }: Props) {
                     <div className={ `flex flex-row flex-wrap justify-between w-full` }>
                         <div>
                             <ul className={ `flex flex-row flex-wrap` }>
-                                {
+                                {/*highlight*/
-                                    post.tags.map((tag: string, key: any) => (
+                                    post.tags
-                                        <li key={ key } className={ `mx-1 mb-1` }>
+                                        .filter((tag) => highlightTags?.includes(tag))
-                                            <Chip>{ tag }</Chip>
+                                        .sort()
-                                        </li>
+                                        .map((tag: string, key: any) => (
-                                    ))
+                                            <li key={ key } className={ `mx-1 mb-1` }>
+                                                <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>
+                                        ))
                                 }
                             </ul>
                         </div>

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,19 +1,19 @@
-'use server';
-
 import React from 'react';
-import { fetchPostList } from '@/src/api/blog/post';
+import { Post } from '@/src/api/blog/post';
-import AnimationPostList from '@/app/(pages)/blog/post/components/AnimationPostList';
+import AnimationPostList, { HighlightSelector } from '@/app/(pages)/blog/post/components/AnimationPostList';
 
-const PostList = async ({ page }: { page: number }) => {
+interface Props {
+    posts: Post[],
+    tags: string[] | undefined
+}
+
+const PostList = async ({ posts, tags }: Props) => {
     try {
-        const postListResponse = await fetchPostList(page);
-
-        const posts = postListResponse.data.posts;
-
         return (
-            // blog list
             <div className={ 'w-full' }>
-                <AnimationPostList posts={ posts } />
+                <AnimationPostList posts={ posts } highlight={ {
+                    tags: tags
+                } } />
             </div>
         );
     } catch (e: any) {

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/page.tsx

@@ -1,6 +1,7 @@
 import PostList from '@/app/(pages)/blog/PostList';
 import Pagination from '@/app/(pages)/blog/Pagination';
-import { fetchPostListPagination } from '@/src/api/blog/post';
+import { fetchPostList } from '@/src/api/blog/post';
+import ToolBar from '@/app/(pages)/blog/ToolBar';
 
 
 async function Blog({
@@ -9,18 +10,40 @@ async function Blog({
     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 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 pagination = await fetchPostListPagination();
+        const postListResponse = await fetchPostList({
-        const pageCount = pagination.data.page_count;
+            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 } />
+                <ToolBar />
-                <Pagination total={ pageCount } />
+                <PostList posts={ posts } tags={ tags } />
+                <Pagination total={ pagination.page_count } />
             </div>
         );
     } catch (e: any) {
@@ -28,7 +51,7 @@ async function Blog({
             <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]:' }
+                        { 'Unexpected Error [loading blog posts]:' }
                     </p>
                     <p className={ `font-bold` }>
                         { e.message }

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

@@ -2,6 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import { Chip } from '@nextui-org/react';
 import { MdCalendarMonth } from 'react-icons/md';
+import TagChip from '@/app/(pages)/blog/post/[id]/TagChip';
 
 type Props = {
     title: string;
@@ -50,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]/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/components/AnimationPostList.tsx

@@ -7,7 +7,16 @@ import * as motion from 'motion/react-client';
 import { AnimatePresence } from 'motion/react';
 import { Post } from '@/src/api/blog/post';
 
-const PostList = ({ posts }: { posts: 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' }>
@@ -19,7 +28,7 @@ const PostList = ({ posts }: { posts: Post[] }) => {
                             transition={ { ease: 'easeOut', duration: 0.5, delay: key * .1 + .1 } }
                             key={ key }
                             className={ 'w-full' }>
-                            <BlogPostCard post={ post } />
+                            <BlogPostCard post={ post } highlightSelector={ highlight } />
                         </motion.li>)
                     ) }
                 </AnimatePresence>

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/layout.tsx

@@ -21,9 +21,6 @@ export default function RootLayout({
         <html lang="en" suppressHydrationWarning>
         <body className={ `transition duration-300 dark:bg-[#282830] min-h-screen` }>
         <NextThemesProvider attribute="class" defaultTheme="system">
-            <div className={ 'fixed top-0 w-full h-15 bg-yellow-600 z-50' }>
-                <p className={ 'font-bold text-2xl text-center' }>*System Under Construction*</p>
-            </div>
             { children }
         </NextThemesProvider>
         </body>

frontend/app/page.tsx

@@ -5,63 +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 BoxesGL from '@/components/BackgroundBoxGL';
+import * as motion from 'motion/react-client';
-import { BoxesCore } from '@/components/BackgroundBox';
+import { cn } from '@/src/utils';
 
 export default function Home() {
 
-    const isMobile = useScreenSizeTrigger('sm');
+    const isSm = useScreenSizeTrigger('sm');
+    const isXs = useScreenSizeTrigger('xs');
 
     return (
         <div className={ 'h-dvh w-full overflow-hidden relative' }>
-            {/*<BoxesGL />*/ }
+            <motion.div
-            <BoxesCore />
+                initial={ { opacity: 0 } }
-
+                animate={ { opacity: 1 } }
-            <div className={ `min-h-dvh h-min content-center z-20` }>
+                transition={ { ease: 'easeInOut', duration: 0.3, delay: 0.0 } }
-                <p className={ 'text-center text-4xl' }>Atelier Lumiaethor</p>
-            </div>
-
-            <div
-                // className={ 'absolute bottom-0 w-full h-60 bg-yellow-500 p-12' }
-                className={ 'absolute bottom-0 w-full h-60 p-12' }
             >
-                <div
+                <div className={ `min-h-dvh h-min content-center z-20 p-10` }>
-                    // className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
+                    <p className={ 'text-center text-4xl' }>Atelier Lumiaethor</p>
-                    className={ 'h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
+                    <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={ 'w-full flex justify-between' }>
+                <div
-                        <div className={ 'p-16' }>
+                    className={ 'absolute left-1/2 -translate-x-1/2 bottom-0 w-full h-60 p-12 max-w-[1536px] justify-center' }
-                            test
+                >
+                    <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 } className={ cn(isXs && 'w-fit', !isXs && 'w-full') }>
+                                            <Button
+                                                as={ Link }
+                                                variant={ `light` }
+                                                color={ `default` }
+                                                fullWidth
+                                                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 }
+                                                { !isXs && <p className={ `font-bold` }>{ meta.display_name }</p> }
+                                            </Button>
+                                        </li>
+                                    ))
+                                }
+                            </ul>
                         </div>
 
-                        <div className={ 'w-0.5 h-full bg-neutral-400' }></div>
-                    </div>
 
-                    <div className={ 'h-full content-center p-4 pr-3' }>
-                        <ul className={ `grid grid-cols-2 w-full` }>
-                            {
-                                entries.map((meta, key) => (
-                                    <li key={ key }>
-                                        <Button
-                                            as={ Link }
-                                            variant={ `light` }
-                                            color={ `default` }
-                                            fullWidth
-                                            isIconOnly={ isMobile }
-                                            className={ 'flex lg:justify-start w-fit lg:w-full' }
-                                            aria-label={ `navbar: ${ meta.display_name }` }
-                                            href={ meta.href }
-                                        >
-                                            { meta.icon }
-                                            <p className={ `font-bold hidden sm:block` }>{ meta.display_name }</p>
-                                        </Button>
-                                    </li>
-                                ))
-                            }
-                        </ul>
                     </div>
                 </div>
-            </div>
+            </motion.div>
         </div>
     );
 }

frontend/components/BackgroundBox.tsx

@@ -1,76 +0,0 @@
-'use client';
-import React from 'react';
-import { motion } from 'motion/react';
-import { cn } from '@/src/utils';
-
-export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
-    const rows = new Array(250).fill(1);
-    const cols = new Array(200).fill(1);
-    let colors = [
-        '#93c5fd',
-        '#f9a8d4',
-        '#86efac',
-        '#fde047',
-        '#fca5a5',
-        '#d8b4fe',
-        '#93c5fd',
-        '#a5b4fc',
-        '#c4b5fd'
-    ];
-    const getRandomColor = () => {
-        return colors[Math.floor(Math.random() * colors.length)];
-    };
-
-    return (
-        <div
-            style={ {
-                transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`
-            } }
-            className={ cn(
-                'absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4',
-                className
-            ) }
-            { ...rest }
-        >
-            { rows.map((_, i) => (
-                <motion.div
-                    key={ `row` + i }
-                    className="relative h-8 w-16 border-l border-slate-700"
-                >
-                    { cols.map((_, j) => (
-                        <motion.div
-                            whileHover={ {
-                                backgroundColor: `${ getRandomColor() }`,
-                                transition: { duration: 0 }
-                            } }
-                            animate={ {
-                                transition: { duration: 2 }
-                            } }
-                            key={ `col` + j }
-                            className="relative h-8 w-16 border-t border-r border-slate-700"
-                        >
-                            { j % 2 === 0 && i % 2 === 0 ? (
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    strokeWidth="1.5"
-                                    stroke="currentColor"
-                                    className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        d="M12 6v12m6-6H6"
-                                    />
-                                </svg>
-                            ) : null }
-                        </motion.div>
-                    )) }
-                </motion.div>
-            )) }
-        </div>
-    );
-};
-
-export const Boxes = React.memo(BoxesCore);

frontend/components/BackgroundBoxGL.tsx

@@ -1,266 +0,0 @@
-'use client';
-import React, { useEffect, useRef } from 'react';
-
-// WebGL-based rewrite of the grid/hover effect originally implemented with many DOM nodes.
-// Key design goals:
-//  - zero per-cell DOM; a single full-screen draw with a fragment shader
-//  - hover color derived deterministically from a small palette
-//  - optional CSS transform to match the original perspective/skew
-//  - high-DPI aware; resizes with container
-
-export default function BoxesGL({
-    className,
-    style,
-    rows = 250,
-    cols = 200,
-    lineWidth = 1.0, // device pixels
-    transformLikeOriginal = true
-}: {
-    className?: string
-    style?: React.CSSProperties
-    rows?: number
-    cols?: number
-    lineWidth?: number
-    transformLikeOriginal?: boolean
-}) {
-    const canvasRef = useRef<HTMLCanvasElement | null>(null);
-    const rafRef = useRef<number | null>(null);
-    const mouseRef = useRef<{ x: number; y: number } | null>(null);
-
-    useEffect(() => {
-        const canvas = canvasRef.current!;
-        const gl = canvas.getContext('webgl2', { antialias: false, premultipliedAlpha: true });
-        if (!gl) {
-            console.warn('WebGL2 not available');
-            // Fail closed; nothing to do if WebGL2 is unavailable
-            return;
-        }
-
-        // Create program (fullscreen triangle)
-        const vs = gl.createShader(gl.VERTEX_SHADER)!;
-        gl.shaderSource(
-            vs,
-            `#version 300 es\n
-      const vec2 verts[3] = vec2[3](
-        vec2(-1.0, -1.0),
-        vec2(3.0, -1.0),
-        vec2(-1.0, 3.0)
-      );
-      void main(){
-        gl_Position = vec4(verts[gl_VertexID], 0.0, 1.0);
-      }
-    `
-        );
-        gl.compileShader(vs);
-
-        const fs = gl.createShader(gl.FRAGMENT_SHADER)!;
-        gl.shaderSource(
-            fs,
-            `#version 300 es\n
-      precision highp float;
-      out vec4 o;
-
-      uniform vec2 u_resolution;      // canvas size in device pixels
-      uniform vec2 u_mouse;           // mouse in device pixels, (-1,-1) if outside
-      uniform float u_time;           // seconds
-      uniform float u_rows;
-      uniform float u_cols;
-      uniform float u_lineWidth;      // in device pixels
-
-      // Border color and plus sign color (matches tailwind slate-700-ish)
-      const vec3 BORDER = vec3(0.22, 0.27, 0.33);
-      const vec3 PLUS   = vec3(0.22, 0.27, 0.33);
-
-      // A small pastel palette like the original
-      vec3 palette(int idx){
-        // 9-color palette
-        if(idx==0) return vec3(0.576,0.773,0.992);
-        if(idx==1) return vec3(0.976,0.659,0.831);
-        if(idx==2) return vec3(0.525,0.937,0.675);
-        if(idx==3) return vec3(0.992,0.878,0.278);
-        if(idx==4) return vec3(0.988,0.648,0.648);
-        if(idx==5) return vec3(0.847,0.706,0.996);
-        if(idx==6) return vec3(0.576,0.773,0.992);
-        if(idx==7) return vec3(0.647,0.706,0.988);
-        return             vec3(0.769,0.710,0.992);
-      }
-
-      // Hash helpers for stable per-cell randomness
-      float hash11(float x){
-        x = fract(x * 0.1031);
-        x *= x + 33.33;
-        return fract(1e4 * x * (x + 0.33));
-      }
-      float hash21(vec2 p){
-        vec3 p3 = fract(vec3(p.xyx) * 0.1031);
-        p3 += dot(p3, p3.yzx + 33.33);
-        return fract((p3.x + p3.y) * p3.z);
-      }
-
-      void main(){
-        vec2 frag = gl_FragCoord.xy;               // device pixels
-        vec2 gridSize = vec2(u_cols, u_rows);
-        vec2 cellSize = u_resolution / gridSize;   // pixels per cell
-
-        // Compute integer cell coordinates and local position within cell [0,1)
-        vec2 uvGrid = frag / u_resolution * gridSize;
-        vec2 cellId = floor(uvGrid);
-        vec2 cellUV = fract(uvGrid);
-
-        // Grid lines: draw top+right borders to mimic original (border-t, border-r, border-l on first col)
-        float lw = u_lineWidth / max(cellSize.x, 1.0); // convert to relative width in [0,1] axis
-        float lwY = u_lineWidth / max(cellSize.y, 1.0);
-
-        float lineTop  = step(1.0 - lwY, cellUV.y);
-        float lineRight= step(1.0 - lw , cellUV.x);
-        float lineLeft = step(cellUV.x, lw) * step(0.5, step(0.0, cellId.x)); // left border for all cols via small bias
-
-        float lineMask = max(lineTop, max(lineRight, lineLeft));
-
-        // Determine hovered cell index
-        vec2 hoverCell = vec2(-1.0);
-        bool hovering = u_mouse.x >= 0.0 && u_mouse.y >= 0.0;
-        if(hovering){
-          vec2 hoverUVGrid = u_mouse / u_resolution * gridSize;
-          hoverCell = floor(hoverUVGrid);
-        }
-        bool isHover = hovering && all(equal(hoverCell, cellId));
-
-        // Background: transparent unless hovered. On hover, fill with palette color chosen by cell hash.
-        vec3 bg = vec3(0.0);
-        float alpha = 0.0;
-        if(isHover){
-          // Stable color per cell, with slight time wobble to avoid banding on long hovers
-          float h = hash21(cellId + vec2(floor(u_time*0.25)));
-          int idx = int(floor(h * 9.0)) % 9;
-          bg = palette(idx);
-          alpha = 1.0;
-        }
-
-        // Plus sign for even-even cells: thin cross centered
-        bool evenEven = mod(cellId.x, 2.0) < 0.5 && mod(cellId.y, 2.0) < 0.5;
-        float plusThicknessX = 0.5 * u_lineWidth / max(cellSize.x, 1.0);
-        float plusThicknessY = 0.5 * u_lineWidth / max(cellSize.y, 1.0);
-        float cross = 0.0;
-        if(evenEven){
-          float vert = step(0.5 - plusThicknessX, abs(cellUV.x - 0.5));
-          float hori = step(0.5 - plusThicknessY, abs(cellUV.y - 0.5));
-          cross = 1.0 - max(vert, hori);
-        }
-
-        vec3 color = mix(bg, BORDER, max(lineMask, 0.0));
-        color = mix(color, PLUS, cross);
-        float a = max(alpha, max(lineMask, cross));
-
-        o = vec4(color, a);
-      }
-    `
-        );
-        gl.compileShader(fs);
-
-        const prog = gl.createProgram()!;
-        gl.attachShader(prog, vs);
-        gl.attachShader(prog, fs);
-        gl.linkProgram(prog);
-
-        // Check compile/link for diagnostics (silent in prod; could surface to console in dev)
-        if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
-            console.warn('WebGL program link error:', gl.getProgramInfoLog(prog));
-        }
-
-        gl.useProgram(prog);
-
-        const uResolution = gl.getUniformLocation(prog, 'u_resolution');
-        const uMouse = gl.getUniformLocation(prog, 'u_mouse');
-        const uTime = gl.getUniformLocation(prog, 'u_time');
-        const uRows = gl.getUniformLocation(prog, 'u_rows');
-        const uCols = gl.getUniformLocation(prog, 'u_cols');
-        const uLineWidth = gl.getUniformLocation(prog, 'u_lineWidth');
-
-        // Single draw call state
-        gl.disable(gl.DEPTH_TEST);
-        gl.disable(gl.CULL_FACE);
-        gl.viewport(0, 0, canvas.width, canvas.height);
-
-        // Resize handling (devicePixelRatio-aware)
-        const resize = () => {
-            const dpr = Math.max(window.devicePixelRatio || 1, 1);
-            const { clientWidth, clientHeight } = canvas;
-            const w = Math.max(1, Math.floor(clientWidth * dpr));
-            const h = Math.max(1, Math.floor(clientHeight * dpr));
-            if (canvas.width !== w || canvas.height !== h) {
-                canvas.width = w;
-                canvas.height = h;
-                gl.viewport(0, 0, w, h);
-            }
-        };
-
-        const observer = new ResizeObserver(resize);
-        observer.observe(canvas);
-        resize();
-
-        // Mouse tracking in device pixels
-        const onMove = (e: PointerEvent) => {
-            const rect = canvas.getBoundingClientRect();
-            const dpr = Math.max(window.devicePixelRatio || 1, 1);
-            const x = (e.clientX - rect.left) * dpr;
-            const y = (rect.bottom - e.clientY) * dpr; // flip Y to GL coords
-            mouseRef.current = { x, y };
-        };
-        const onLeave = () => {
-            mouseRef.current = null;
-        };
-        canvas.addEventListener('pointermove', onMove);
-        canvas.addEventListener('pointerleave', onLeave);
-
-        const t0 = performance.now();
-        const tick = () => {
-            const t = (performance.now() - t0) / 1000;
-            gl.useProgram(prog);
-            gl.uniform2f(uResolution, canvas.width, canvas.height);
-            const m = mouseRef.current;
-            if (m) gl.uniform2f(uMouse, m.x, m.y);
-            else gl.uniform2f(uMouse, -1, -1);
-            gl.uniform1f(uTime, t);
-            gl.uniform1f(uRows, rows);
-            gl.uniform1f(uCols, cols);
-            gl.uniform1f(uLineWidth, lineWidth);
-
-            gl.drawArrays(gl.TRIANGLES, 0, 3);
-            rafRef.current = requestAnimationFrame(tick);
-        };
-        tick();
-
-        return () => {
-            if (rafRef.current) cancelAnimationFrame(rafRef.current);
-            observer.disconnect();
-            canvas.removeEventListener('pointermove', onMove);
-            canvas.removeEventListener('pointerleave', onLeave);
-            gl.deleteProgram(prog);
-            gl.deleteShader(vs);
-            gl.deleteShader(fs);
-        };
-    }, [ rows, cols, lineWidth ]);
-
-    return (
-        <div
-            className={ [
-                'absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4',
-                className || ''
-            ].join(' ') }
-            style={ style }
-        >
-            <canvas
-                ref={ canvasRef }
-                style={ {
-                    width: '100%',
-                    height: '100%',
-                    // apply the same visual transform as the original DOM version
-                    transform: transformLikeOriginal
-                        ? 'translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)'
-                        : undefined
-                } }
-            />
-        </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/src/api/blog/post.ts

@@ -26,9 +26,26 @@ export interface PostListResponse {
     status: string
 }
 
+interface FetchPostListParams {
+    page: number;
+    page_size?: number;
+    tag_filter?: string[];
+    match_all?: boolean;
+}
 
-export async function fetchPostList(page: number, page_size: number = DEFAULT_PAGE_SIZE): Promise<PostListResponse> {
+export async function fetchPostList({
-    const url = `/blog/posts?page=${ page }&page_size=${ page_size }`;
+        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);
 }
 

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'
 };

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:
+        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:16.3
+    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