ref(frontend) several minor updates

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

@@ -24,7 +24,7 @@ type Props = {
 function BlogPostCard({ post }: Props) {
     return (
         <div className={ `w-full` }>
-            <Card as={ Link } href={ `/blog/post/${ post.id }` }
+            <Card as={ Link } href={ `/blog/post/${ post.identifier }` }
                   className={ `group` }
                   isPressable
                   isHoverable

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

@@ -1,33 +1,19 @@
 'use server';
 
 import React from 'react';
-import BlogPostCard from '@/app/(pages)/blog/BlogPostCard';
-
-import * as motion from 'motion/react-client';
 import { fetchPostList } from '@/src/api/blog/post';
+import AnimationPostList from '@/app/(pages)/blog/post/components/AnimationPostList';
 
 const PostList = async ({ page }: { page: number }) => {
     try {
         const postListResponse = await fetchPostList(page);
 
         const posts = postListResponse.data.posts;
+
         return (
             // blog list
             <div className={ 'w-full' }>
-                <ul className={ 'flex flex-col items-center w-full space-y-7' }>
-                    { posts.map((post, 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 } />
             </div>
         );
     } catch (e: any) {

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>

frontend/app/(pages)/blog/post/components/AnimationPostList.tsx

@@ -0,0 +1,31 @@
+'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';
+
+const PostList = ({ posts }: { posts: Post[] }) => {
+    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 } />
+                        </motion.li>)
+                    ) }
+                </AnimatePresence>
+            </ul>
+
+        </div>
+    );
+};
+export default PostList;

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,14 +5,19 @@ 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 { BoxesCore } from '@/components/BackgroundBox';
 
 export default function Home() {
 
     const isMobile = useScreenSizeTrigger('sm');
 
     return (
-        <div>
-            <div className={ `min-h-dvh h-min content-center` }>
+        <div className={ 'h-dvh w-full overflow-hidden relative' }>
+            {/*<BoxesGL />*/ }
+            <BoxesCore />
+
+            <div className={ `min-h-dvh h-min content-center z-20` }>
                 <p className={ 'text-center text-4xl' }>Atelier Lumiaethor</p>
             </div>
 
@@ -21,7 +26,8 @@ export default function Home() {
                 className={ 'absolute bottom-0 w-full h-60 p-12' }
             >
                 <div
-                    className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
+                    // className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
+                    className={ 'h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
 
                     <div className={ 'w-full flex justify-between' }>
                         <div className={ 'p-16' }>

frontend/components/BackgroundBox.tsx

@@ -0,0 +1,76 @@
+'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

@@ -0,0 +1,266 @@
+'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/package.json

@@ -11,8 +11,9 @@
   "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",
+    "motion": "^12.23.12",
     "next": "^15.3.2",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
@@ -26,7 +27,9 @@
     "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",

frontend/src/api/blog/post.ts

@@ -1,10 +1,8 @@
 import { fetchNocturneJson } from '@/src/api/endpoint';
 
-const DEFAULT_PAGE_SIZE = 6;
+const DEFAULT_PAGE_SIZE = 8;
 
-export interface PostListResponse {
-    data: {
-        posts: {
+export interface Post {
     id: string,
     identifier: string,
     title: string,
@@ -14,7 +12,11 @@ export interface PostListResponse {
     date_created: Date,
     date_updated: Date | null,
     header_img: string | null
-        }[],
+}
+
+export interface PostListResponse {
+    data: {
+        posts: Post[],
         pagination: {
             page: number,
             page_count: number,

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