feat(frontend) add Activities.tsx

frontend/app/(pages)/about/layout.tsx

@@ -1,4 +1,10 @@
 import React from 'react';
+import { Metadata } from 'next';
+import { SITE_CONFIG } from '@/src/constants';
+
+export const metadata: Metadata = {
+    title: `About - ${ SITE_CONFIG.name }`
+};
 
 function Layout({
     children

frontend/app/(pages)/about/me/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownRenderer from '@/app/public/MarkdownRenderer';
+import MarkdownRenderer from '@/app/(pages)/public/MarkdownRenderer';
 import { fetchText } from '@/app/fetch';
 
 const Me = async () => {

frontend/app/(pages)/about/website/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import MarkdownRenderer from '@/app/public/MarkdownRenderer';
+import MarkdownRenderer from '@/app/(pages)/public/MarkdownRenderer';
 import { fetchText } from '@/app/fetch';
 
 const Website = async () => {

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

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Pagination as NextUIPagination } from '@nextui-org/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useScreenSizeTrigger } from '@/app/public/screenSizeTrigger';
+import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
 
 const Pagination = ({ total }: {
     total: number,

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

@@ -1,11 +1,12 @@
 'use server';
 
 import React from 'react';
-import { fetchNocturneApi } from '@/app/blog/api';
-import { MotionDiv } from '@/app/public/MotionDiv';
-import BlogPostCard from '@/app/blog/BlogPostCard';
+import { fetchNocturneApi } from '@/app/(pages)/blog/api';
+import BlogPostCard from '@/app/(pages)/blog/BlogPostCard';
 import { Card, CardBody } from '@nextui-org/card';
 
+import * as motion from 'motion/react-client';
+
 const PostList = async ({ page }: { page: number }) => {
     try {
         const res = await fetchNocturneApi(`/blog/get_post_list?page=${ page }`);
@@ -16,13 +17,13 @@ const PostList = async ({ page }: { page: number }) => {
                 <ul className={ 'flex flex-col items-center w-full space-y-7' }>
                     { posts.map((post: JSON, key: number) => (
                         <li key={ key } className={ 'w-full' }>
-                            <MotionDiv
+                            <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 } />
-                            </MotionDiv>
+                            </motion.div>
                         </li>)
                     ) }
                 </ul>

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

@@ -1,4 +1,10 @@
 import React from 'react';
+import { Metadata } from 'next';
+import { SITE_CONFIG } from '@/src/constants';
+
+export const metadata: Metadata = {
+    title: `Blog - ${ SITE_CONFIG.name }`
+};
 
 function Layout({
     children

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

@@ -1,6 +1,6 @@
-import PostList from '@/app/blog/PostList';
-import Pagination from '@/app/blog/Pagination';
-import { fetchNocturneApi } from '@/app/blog/api';
+import PostList from '@/app/(pages)/blog/PostList';
+import Pagination from '@/app/(pages)/blog/Pagination';
+import { fetchNocturneApi } from '@/app/(pages)/blog/api';
 
 async function Blog({
     searchParams

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

@@ -1,24 +1,32 @@
 import React from 'react';
-import MinifyPostCard from '@/app/blog/post/[id]/MinifyPostCard';
+import MinifyPostCard from '@/app/(pages)/blog/post/[id]/MinifyPostCard';
 import Link from 'next/link';
 import { FaCreativeCommons } from 'react-icons/fa6';
 
 type Props = {
-    post: any
+    // post: any
+    post_id: string;
+    adjacent_posts: any
+    perm_link: string | undefined;
+    author: string | undefined;
+    author_link: string | undefined;
+    first_update: string;
+    last_update: string | undefined;
+    cc: string | undefined;
+    title: string;
 }
 
 const Footer = (props: Props) => {
-    const { post } = props;
+    const { adjacent_posts, perm_link, post_id, first_update, last_update, title } = props;
 
-    const adjacent_posts = post['adj'];
-    const prev_post = adjacent_posts['prev'];
-    const next_post = adjacent_posts['next'];
-    const link = post['meta']['link'] ?? `https://lumither.com/blog/post/${ post['meta']['id'] }`;
-    const author = post['meta']['author'] ?? 'Tao';
-    const author_link = post['meta']['author_link'] ?? '/about';
-    const post_date = new Date(post['first_update']);
-    const update_date: Date | undefined = post['last_update'] ? new Date(post['last_update']) : undefined;
-    const cc = post['meta']['cc'] ?? 'by-nc-sa';
+    const prev_post = adjacent_posts.prev;
+    const next_post = adjacent_posts.next;
+    const link = perm_link ?? `https://lumither.com/blog/post/${ post_id }`;
+    const author = props.author ?? 'Tao';
+    const author_link = props.author_link ?? '/about/me';
+    const post_date = new Date(first_update);
+    const update_date: Date | undefined = last_update ? new Date(last_update) : undefined;
+    const cc = props.cc ?? 'by-nc-sa';
 
 
     return (
@@ -35,7 +43,7 @@ const Footer = (props: Props) => {
 
                     <div className={ 'flex flex-col space-y-4 relative' }>
                         <div className={ 'z-[2]' }>
-                            <p className={ 'text-xl font-bold' }>{ post['meta']['title'] }</p>
+                            <p className={ 'text-xl font-bold' }>{ title }</p>
                             <Link href={ link }>
                                 <p className={ 'text-sm underline decoration-indigo-500 dark:decoration-sky-500' }>{ link }</p>
                             </Link>

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

@@ -3,57 +3,57 @@ import Image from 'next/image';
 import { Chip } from '@nextui-org/react';
 import { MdCalendarMonth } from 'react-icons/md';
 
+// type Props = {
+//     post: any
+// };
+
 type Props = {
-    post: any
-};
+    title: string;
+    subtitle: string;
+    summary: string | undefined;
+    category: string;
+    tags: string[];
+    first_update: string;
+    header_img: string | undefined;
+}
 
 
-const Headers = (props: Props) => {
-    let post = props.post;
-    let title = post['title'];
-    let sub_title = post['sub_title'];
-    // let summary = (post as any)['summary'];
-    let category = post['category'];
-    let tags = post['tags'];
-    // let last_update = new Date((post as any)['last_update']);
-    let first_update = new Date(post['first_update']);
-    // let post_id = (post as any)['post_id'];
-    let header_img = post['meta']['header_img'] as string | null;
+const Headers = (post: Props) => {
 
     return (
         <>
-            { header_img && <div className={ `w-full overflow h-96 relative` }>
+            { post.header_img && <div className={ `w-full overflow h-96 relative` }>
                 <Image
                     alt={ 'cover picture' }
-                    src={ header_img }
+                    src={ post.header_img }
                     className={ `w-full object-cover rounded-b-none z-[5]` }
                     fill
                 ></Image>
                 <Image
                     alt={ 'cover picture' }
-                    src={ header_img }
+                    src={ post.header_img }
                     className={ `w-full relative scale-110 blur-3xl object-cover rounded-b-none` }
                     fill
                 ></Image>
             </div> }
 
             <div
-                className={ header_img ?
+                className={ post.header_img ?
                     '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={ header_img ? `p-4` : 'p-4 pt-2' }>
+                <div className={ post.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>
-                    <p className={ `text-xl` }> { sub_title }</p>
+                          variant={ `solid` }>{ post.category }</Chip>
+                    <p className={ `text-4xl font-bold` }> { post.title }</p>
+                    <p className={ `text-xl` }> { post.subtitle }</p>
                 </div>
 
                 <div className={ `mx-2 -mt-2 mb-2 flex flex-row flex-wrap justify-between w-full` }>
                     <div>
                         <ul className={ `flex flex-row flex-wrap` }>
                             {
-                                tags.map((tag: string, key: any) => (
+                                post.tags.map((tag: string, key: any) => (
                                     <li key={ key } className={ `mx-1 mb-1` }>
                                         <Chip>{ tag }</Chip>
                                     </li>
@@ -64,7 +64,7 @@ const Headers = (props: Props) => {
                     <div className={ `flex flex-row place-content-end mb-1 mr-6 items-center mx-1` }>
                         <MdCalendarMonth />
                         <p className={ `text-zinc-500 dark:text-zinc-400 ml-1` }>
-                            { first_update.toLocaleString('default', {
+                            { (new Date(post.first_update)).toLocaleString('default', {
                                 month: `long`,
                                 day: `numeric`,
                                 year: `numeric`

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

@@ -43,10 +43,10 @@ const MinifyPostCard = (props: Props) => {
                 }
                 { !img_url &&
                     <div className={ 'h-full grid p-6 place-content-center' }>
-                        <div className={ 'flex flex-row  items-center text-center max-h-fit' }>
-                            <p className={ 'text-3xl font-bold' }>{ post['title'] }</p>
-                            <div className={ 'h-full w-1 mx-2 bg-zinc-500 dark:bg-zinc-400' }></div>
-                            <p className={ 'text-xl' }>{ post['sub_title'] }</p>
+                        <div className={ 'flex flex-col max-h-fit text-left' }>
+                            <p className={ 'text-3xl font-bold text-balance' }>{ post['title'] }</p>
+                            <div className={ 'w-1/4 h-[2px] my-2 bg-zinc-500 dark:bg-zinc-400' }></div>
+                            <p className={ 'text-xl text-pretty break-words' }>{ post['sub_title'] }</p>
                         </div>
                     </div>
                 }

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Card, CardBody } from '@nextui-org/card';
+import Headers from '@/app/(pages)/blog/post/[id]/Headers';
+import Footer from '@/app/(pages)/blog/post/[id]/Footer';
+import MarkdownRenderer from '@/app/(pages)/public/MarkdownRenderer';
+
+type Props = {
+    post: any
+}
+
+async function PostCard(props: Props) {
+    let post = props.post;
+    return (
+        <div>
+            <Card className={ `max-w-full relative` }>
+
+                {/* card headers */ }
+                <Headers title={ post.title }
+                         subtitle={ post.sub_title }
+                         summary={ post.summary }
+                         category={ post.category }
+                         tags={ post.tags }
+                         first_update={ post.first_update }
+                         header_img={ post.meta.header_img }
+                />
+
+                {/* card body */ }
+                <CardBody>
+                    <div className={ 'p-5' }>
+                        <MarkdownRenderer>
+                            { post.content }
+                        </MarkdownRenderer>
+                    </div>
+                </CardBody>
+
+
+                {/* card footer */ }
+                <Footer
+                    adjacent_posts={ post.adj }
+                    perm_link={ post.meta.link }
+                    author={ post.meta.author }
+                    author_link={ post.meta.author_link }
+                    first_update={ post.first_update }
+                    last_update={ post.last_update }
+                    cc={ post.meta.cc }
+                    post_id={ post.meta.id }
+                    title={ post.title }
+                />
+
+            </Card>
+        </div>
+    );
+}
+
+export default PostCard;

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

@@ -0,0 +1,70 @@
+import React, { cache } from 'react';
+import PostCard from '@/app/(pages)/blog/post/[id]/PostCard';
+import ButtonGoBack from '@/app/(pages)/blog/post/[id]/ButtonGoBack';
+import * as motion from 'motion/react-client';
+import { fetchNocturneApi } from '@/app/(pages)/blog/api';
+import { Metadata } from 'next';
+import { SITE_CONFIG } from '@/src/constants';
+
+const fetchPost = cache(async (id: string) => {
+    const res = await fetchNocturneApi(`/blog/get_post/${ id }`);
+    // throw Error('Not Found');
+    return await res.json();
+});
+
+export async function generateMetadata(
+    { params }: { params: Promise<{ id: string }> })
+    : Promise<Metadata> {
+    try {
+        const title = (await fetchPost((await params).id)).title as string;
+        return {
+            title: `${ title } - ${ SITE_CONFIG.name }`
+        };
+    } catch (e) {
+        return {
+            title: 'Unexpected Error'
+        };
+    }
+}
+
+async function BlogReader({
+    params
+}: {
+    params: Promise<{ id: string }>
+}) {
+    try {
+        let post = await fetchPost((await params).id);
+
+        return (
+            <motion.div
+                className={ `max-w-full` }
+                initial={ { y: 20, opacity: 0 } }
+                animate={ { y: 0, opacity: 1 } }
+                transition={ { ease: 'easeInOut', duration: 0.5 } }
+            >
+                <div className={ `max-w-full` }>
+                    <PostCard post={ post } />
+                </div>
+                <div className={ 'mt-3' }>
+                    <ButtonGoBack />
+                </div>
+            </motion.div>
+        );
+    } catch (e: any) {
+        return (
+            <div className={ `flex h-full w-full justify-center items-center` }>
+                <div className={ `flex-row` }>
+                    <p className={ `text-xl font-bold` }>
+                        { 'Unexpected Error:' }
+                    </p>
+                    <p className={ `font-bold` }>
+                        { e.message }
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+}
+
+export default BlogReader;

frontend/app/(pages)/friends/layout.tsx

@@ -1,4 +1,10 @@
 import React from 'react';
+import { Metadata } from 'next';
+import { SITE_CONFIG } from '@/src/constants';
+
+export const metadata: Metadata = {
+    title: `Friends - ${ SITE_CONFIG.name }`
+};
 
 function Layout({
     children

frontend/app/(pages)/layout.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+
+import * as motion from 'motion/react-client';
+
+function Layout({
+    children
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <div>
+            <motion.div
+                initial={ { opacity: 0 } }
+                animate={ { opacity: 1 } }
+                transition={ { ease: 'easeInOut', duration: 0.3, delay: 0.5 } }
+                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` }>
+                    { children }
+                    <Footer />
+                </div>
+            </motion.div>
+        </div>
+    )
+        ;
+}
+
+export default Layout;

frontend/app/Activities.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+import { Activity } from '@/src/HomePageActivities/activity';
+import { getGhActivities } from '@/src/HomePageActivities/ghActivity';
+import * as motion from 'motion/react-client';
+
+const Activities = () => {
+
+    const [ activities, setActivities ] = useState<Activity[] | null>(null);
+
+    useEffect(() => {
+        getGhActivities().then(data => setActivities(data));
+    }, []);
+
+    if (!activities) {
+        return (
+            <div>
+                <p>loading</p>
+            </div>
+        );
+    } else {
+        return (
+            <div>
+                <ul className={ 'flex flex-col gap-y-3 items-end' }>
+                    { activities.map((activity, key) => (
+                        <motion.div
+                            key={ key }
+                            initial={ { opacity: 0, y: 20 } }
+                            animate={ { opacity: 1, y: 0 } }
+                            transition={ { ease: 'easeInOut', duration: 0.2 } }
+                        >
+                            <li className={ 'backdrop-blur bg-white/75 dark:bg-black/45 rounded-xl w-fit' }>
+                                { activity.toElement() }
+                            </li>
+                        </motion.div>
+                    )) }
+                </ul>
+            </div>
+        );
+    }
+
+};
+
+export default Activities;

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

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Card, CardBody } from '@nextui-org/card';
-import Headers from '@/app/blog/post/[id]/Headers';
-import Footer from '@/app/blog/post/[id]/Footer';
-import { fetchNocturneApi } from '@/app/blog/api';
-import MarkdownRenderer from '@/app/public/MarkdownRenderer';
-
-type Props = {
-    id: string
-}
-
-async function PostCard(props: Props) {
-
-
-    try {
-        const res = await fetchNocturneApi(`/blog/get_post/${ props.id }`);
-        const ret: any = await res.json();
-        return (
-            <div>
-                <Card className={ `max-w-full relative` }>
-
-                    {/* card headers */ }
-                    <Headers post={ ret } />
-
-                    {/* card body */ }
-                    <CardBody>
-                        <div className={ 'p-5' }>
-                            <MarkdownRenderer>
-                                { ret['content'] }
-                            </MarkdownRenderer>
-                        </div>
-                    </CardBody>
-
-
-                    {/* card footer */ }
-                    <Footer post={ ret } />
-
-                </Card>
-            </div>
-        );
-    } catch (e: any) {
-        return <div>
-            <Card className={ `w-full` }>
-                <CardBody>
-                    Fatal: { e.toString() }
-                </CardBody>
-            </Card>
-        </div>;
-    }
-
-}
-
-export default PostCard;

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import PostCard from '@/app/blog/post/[id]/PostCard';
-import { MotionDiv } from '@/app/public/MotionDiv';
-import ButtonGoBack from '@/app/blog/post/[id]/ButtonGoBack';
-
-async function BlogReader({
-    params
-}: {
-    params: Promise<{ id: string }>
-}) {
-
-    return (
-        <MotionDiv
-            className={ `max-w-full` }
-            initial={ { y: 20, opacity: 0 } }
-            animate={ { y: 0, opacity: 1 } }
-            transition={ { ease: 'easeInOut', duration: 0.5 } }
-        >
-            <div className={ `max-w-full` }>
-                <PostCard id={ (await params).id } />
-            </div>
-            <div className={ 'mt-3' }>
-                <ButtonGoBack />
-            </div>
-        </MotionDiv>
-    );
-}
-
-export default BlogReader;

frontend/app/entries.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+    IoFlask,
+    IoHome,
+    IoInformationCircle,
+    IoLink,
+    IoLogoGithub,
+    IoMail,
+    IoPencil,
+    IoSearch
+} from 'react-icons/io5';
+
+export const entries: { display_name: string; href: string; icon: React.ReactNode }[] = [
+    {
+        icon: <IoHome size={ `20px` }></IoHome>,
+        display_name: 'Home',
+        href: '/'
+    },
+    {
+        icon: <IoInformationCircle size={ `20px` }></IoInformationCircle>,
+        display_name: 'About',
+        href: '/about'
+    },
+    {
+        icon: <IoPencil size={ `20px` }></IoPencil>,
+        display_name: 'Blog',
+        href: '/blog'
+    },
+    {
+        icon: <IoLink size={ `20px` }></IoLink>,
+        display_name: 'Friends',
+        href: '/friends'
+    },
+    {
+        icon: <IoSearch size={ `20px` }></IoSearch>,
+        display_name: 'Search',
+        href: '/search'
+    }, {
+        icon: <IoFlask size={ '20px' } />,
+        display_name: 'Lab',
+        href: 'https://lab.lmt.moe'
+    }
+];
+
+export const connections: { label: string, href: string, icon: React.ReactNode }[] = [
+    {
+        label: 'Github',
+        href: 'https://github.com/Lumither',
+        icon: <IoLogoGithub size={ `30px` } />
+    },
+    {
+        label: 'email',
+        href: 'mailto:lumither@outlook.com',
+        icon: <IoMail size={ `30px` } />
+    }
+];

frontend/app/layout.tsx

@@ -2,13 +2,14 @@ import type { Metadata } from 'next';
 import './globals.css';
 import React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import Navbar from '@/components/Navbar';
-import Footer from '@/components/Footer';
-
+import { SITE_CONFIG } from '@/src/constants';
 
 export const metadata: Metadata = {
-    title: 'Lumitherの酒馆',
-    description: '一间位于时间夹缝中的酒馆，静候下一位旅者的到来...'
+    openGraph: {
+        siteName: SITE_CONFIG.name
+    },
+    title: SITE_CONFIG.name,
+    description: SITE_CONFIG.desc
 };
 
 export default function RootLayout({
@@ -20,13 +21,7 @@ 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={ `justify-center flex flex-row w-full max-w-full` }>
-                <Navbar />
-                <div className={ `flex flex-col flex-1 max-w-[1024px] min-w-0` }>
-                    { children }
-                    <Footer />
-                </div>
-            </div>
+            { children }
         </NextThemesProvider>
         </body>
         </html>

frontend/app/page.tsx

@@ -1,10 +1,51 @@
-import ConstructionPlaceHolder from '@/components/ConstructionPlaceHolder';
+'use client';
+
 import React from 'react';
+import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
+import { Button } from '@nextui-org/react';
+import { entries } from '@/app/entries';
+import Link from 'next/link';
+import { useLocalStorage } from 'react-use';
 
 export default function Home() {
+
+    const isMobile = useScreenSizeTrigger('lg');
+
+    const [ test, setTest, removeTest ] = useLocalStorage('test', 'test_value');
+    console.log(test);
+    // setTest('test value 2');
+    // console.log(test);
+    // removeTest();
+    // console.log(test);
+
     return (
-        <div className={ `h-dvh` }>
-            <ConstructionPlaceHolder />
+        <div className={ `h-dvh relative` }>
+            <ul className={ `flex flex-col space-y-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 lg:block` }>{ meta.display_name }</p>
+                            </Button>
+                        </li>
+                    ))
+                }
+            </ul>
+            <div
+                className={ 'absolute bottom-0 w-full h-60 bg-yellow-500 p-12' }
+            >
+                <div className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur' }></div>
+            </div>
         </div>
     );
 }

frontend/app/public/MotionDiv.tsx

@@ -1,5 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-export const MotionDiv = motion.div;