feat(nav, blog) new ThemeSwitcher, also several updates on ui

frontend/app/blog/BlogPostCard.tsx

@@ -33,19 +33,23 @@ function BlogPostCard({ post }: Props) {
                     <Image
                         alt={ 'cover picture' }
                         src={ header_img }
-                        className={ `w-full object-cover rounded-b-none` }
-                        style={ {
-                            'maskImage': 'linear-gradient(black 95%, transparent)',
-                            'backdropFilter': 'blur(20px)'
-                        } }
+                        className={ `w-full object-cover rounded-b-none z-10` }
+                        loading={ 'eager' }
+                        fill
+                    ></Image>
+                    <Image
+                        alt={ 'cover picture shadow' }
+                        src={ header_img }
+                        loading={ 'eager' }
+                        className={ `w-full object-cover rounded-b-none scale-y-110 blur-2xl` }
                         fill
                     ></Image>
                 </div> }
 
                 <CardBody className={ `overflow-visible` }>
                     <div className={ `flex flex-row justify-between` }>
-                        <div className={ `mx-2 ${ header_img !== '' ? '-mt-8' : 'mt-2' }` }>
-                            <Chip className={ `mb-2 z-30` } radius={ `sm` } color={ `secondary` }
+                        <div className={ `mx-2 ${ header_img !== '' ? '-mt-6' : 'mt-2' }` }>
+                            <Chip className={ `mb-2 z-30 text-lg` } radius={ `sm` } size={ 'lg' } color={ `secondary` }
                                   variant={ `solid` }>{ category }</Chip>
                             <p className={ `text-4xl font-bold` }> { title }</p>
                             <p className={ `text-xl` }> { sub_title }</p>
@@ -54,13 +58,7 @@ function BlogPostCard({ post }: Props) {
                     </div>
                 </CardBody>
 
-                {/*   <CardBody className={ `transition-all duration-300 hidden group-hover:block` }>
-                 <div className={ `mx-2` }>
-                 <p>{ summary }</p>
-                 </div>
-                 </CardBody>*/ }
-
-                <CardFooter>
+                <CardFooter className={ 'pt-0' }>
                     <div className={ `flex flex-row flex-wrap justify-between w-full` }>
                         <div>
                             <ul className={ `flex flex-row flex-wrap` }>

frontend/app/blog/Pagination.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Pagination as NextUIPagination } from '@nextui-org/react';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useScreenSizeTrigger } from '@/app/public/screenSizeTrigger';
 
 const Pagination = ({ total }: {
     total: number,
@@ -12,23 +13,7 @@ const Pagination = ({ total }: {
 
     const router = useRouter();
 
-    const maxMobileWidth: number = 768;
-    const [ isMobile, setIsMobile ] = useState(false);
-    useEffect(() => {
-        const updateMobileWidth = () => {
-            if (window.innerWidth <= maxMobileWidth) {
-                setIsMobile(true);
-            } else {
-                setIsMobile(false);
-            }
-        };
-        updateMobileWidth();
-        window.addEventListener('resize', updateMobileWidth);
-        return () => {
-            window.removeEventListener('resize', updateMobileWidth);
-        };
-
-    }, []);
+    const isMobile = useScreenSizeTrigger('md');
 
     return (
         <div className={ 'w-full p-4 pt-6 flex justify-center' }>

frontend/app/blog/post/[id]/Footer.tsx

@@ -25,7 +25,14 @@ const Footer = (props: Props) => {
         <div className={ `w-full` }>
 
             <div className={ 'flex transition bg-zinc-300/80 dark:bg-gray-600/25' }>
-                <div className={ `p-8 w-full` }>
+                <div className={ `p-8 w-full overflow-hidden` }>
+                    <div className={ 'relative' }>
+                        <FaCreativeCommons
+                            size={ '160px' }
+                            className={ 'absolute right-0 top-0 -mt-[4.8rem] -mr-16 opacity-30 brightness-50  ' }
+                        />
+                    </div>
+
                     <div className={ 'flex flex-col space-y-4 relative' }>
                         <div className={ 'z-[2]' }>
                             <p className={ 'text-xl font-bold' }>{ post['meta']['title'] }</p>
@@ -63,8 +70,6 @@ const Footer = (props: Props) => {
                                 </Link>
                             </div>
                         </div>
-                        <FaCreativeCommons size={ '80px' }
-                                           className={ 'absolute inset-y-0 right-0 opacity-50 brightness-75  z-0' } />
                     </div>
                 </div>
             </div>

frontend/app/blog/post/[id]/Headers.tsx

@@ -42,7 +42,7 @@ const Headers = (props: Props) => {
                     'mx-8 -mt-16 backdrop-blur transition bg-zinc-300/80 dark:bg-gray-600/25 rounded-2xl z-30'
                     : 'mx-6 mt-6'
                 }>
-                <div className={ `p-4` }>
+                <div className={ header_img !== '' ? `p-4` : 'p-4 pt-2' }>
                     <Chip className={ `mb-2` } radius={ `sm` } color={ `secondary` }
                           variant={ `solid` }>{ category }</Chip>
                     <p className={ `text-4xl font-bold` }> { title }</p>

frontend/app/layout.tsx

@@ -7,8 +7,8 @@ import Footer from '@/components/Footer';
 
 
 export const metadata: Metadata = {
-    title: 'Lumither\'s site',
-    description: 'a small corner on internet'
+    title: 'Lumitherの酒馆',
+    description: '一间位于时间夹缝中的旅馆，静候下一位旅者的到来...'
 };
 
 export default function RootLayout({
@@ -19,7 +19,7 @@ export default function RootLayout({
     return (
         <html lang="en" suppressHydrationWarning>
         <body className={ `transition duration-300 dark:bg-[#282830] min-h-screen` }>
-        <NextThemesProvider attribute="class" defaultTheme="dark">
+        <NextThemesProvider attribute="class" defaultTheme="system">
             <div 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/public/screenSizeTrigger.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const screenSize = new Map<string, number>(
+    [
+        [ 'sm', 640 ],
+        [ 'md', 768 ],
+        [ 'lg', 1024 ],
+        [ 'xl', 1280 ],
+        [ '2xl', 2536 ]
+    ]
+);
+
+export const useScreenSizeTrigger = (size: number | string) => {
+    const criticalSize = (typeof size === 'string') ? (screenSize.get(size) ?? 768) : size;
+
+    const [ isCritical, setIsCritical ] = useState(false);
+    useEffect(() => {
+        const updateMobileWidth = () => {
+            if (window.innerWidth < criticalSize) {
+                setIsCritical(true);
+            } else {
+                setIsCritical(false);
+            }
+        };
+        updateMobileWidth();
+        window.addEventListener('resize', updateMobileWidth);
+        return () => {
+            window.removeEventListener('resize', updateMobileWidth);
+        };
+
+    });
+
+    return isCritical;
+
+};