feat(frontend) new tag filter, new landing page

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