feat(frontend) add Activities.tsx

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Card, CardBody, CardFooter } from '@nextui-org/card';
+import { Chip } from '@nextui-org/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { MdCalendarMonth, MdNorthEast } from 'react-icons/md';
+
+type Props = {
+    post: JSON
+}
+
+function BlogPostCard({ post }: Props) {
+    let title = (post as any)['title'];
+    let sub_title = (post as any)['sub_title'];
+    // let summary = (post as any)['summary'];
+    let category = (post as any)['category'];
+    let tags = (post as any)['tags'];
+    // let last_update = new Date((post as any)['last_update']);
+    let first_update = new Date((post as any)['first_update']);
+    let post_id = (post as any)['post_id'];
+    let header_img = ((post as any)['header_img'] as string | null);
+
+    return (
+
+        <div className={ `w-full` }>
+            <Card as={ Link } href={ `/blog/post/${ post_id }` }
+                  className={ `group` }
+                  isPressable
+                  isHoverable
+            >
+
+                { header_img && <div className={ `w-full overflow h-80 relative` }>
+                    <Image
+                        alt={ 'cover picture' }
+                        src={ header_img }
+                        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-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>
+                        </div>
+                        <MdNorthEast className={ `mt-1 mr-2` } size={ `40px` } />
+                    </div>
+                </CardBody>
+
+                <CardFooter className={ 'pt-0' }>
+                    <div className={ `flex flex-row flex-wrap justify-between w-full` }>
+                        <div>
+                            <ul className={ `flex flex-row flex-wrap` }>
+                                {
+                                    tags.map((tag: string, key: any) => (
+                                        <li key={ key } className={ `mx-1 mb-1` }>
+                                            <Chip>{ tag }</Chip>
+                                        </li>
+                                    ))
+                                }
+                            </ul>
+                        </div>
+                        <div className={ `flex flex-row place-content-end mb-1 items-center mx-1` }>
+                            <MdCalendarMonth />
+                            <p className={ `text-zinc-500 dark:text-zinc-400 ml-1` }>
+                                { first_update.toLocaleString('default', {
+                                    month: `long`,
+                                    day: `numeric`,
+                                    year: `numeric`
+                                }) }
+                            </p>
+                        </div>
+                    </div>
+                </CardFooter>
+            </Card>
+        </div>
+    );
+
+}
+
+export default BlogPostCard;

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

@@ -0,0 +1 @@
+// todo: create component

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

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Pagination as NextUIPagination } from '@nextui-org/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
+
+const Pagination = ({ total }: {
+    total: number,
+}) => {
+    const parsePage = Number(useSearchParams().get('page'));
+    const currPage = parsePage > 0 ? parsePage : 1;
+
+    const router = useRouter();
+
+    const isMobile = useScreenSizeTrigger('md');
+
+    return (
+        <div className={ 'w-full p-4 pt-6 flex justify-center' }>
+            <NextUIPagination
+                initialPage={ currPage }
+                total={ total }
+                siblings={ isMobile ? 0 : 1 }
+                size={ isMobile ? 'sm' : 'md' }
+                showControls
+                showShadow
+                color={ 'default' }
+                variant={ 'light' }
+                onChange={ (page) => {
+                    router.push(`?page=${ page }`, { scroll: false });
+                } }
+            />
+        </div>
+
+    );
+};
+export default Pagination;

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

@@ -0,0 +1,43 @@
+'use server';
+
+import React from 'react';
+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 }`);
+        const posts = await res.json();
+        return (
+            // blog list
+            <div className={ 'w-full' }>
+                <ul className={ 'flex flex-col items-center w-full space-y-7' }>
+                    { posts.map((post: JSON, 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>
+
+            </div>
+        );
+    } catch (e: any) {
+        return (
+            // todo:  use Error.tsx
+            <Card className={ `w-full` }>
+                <CardBody>
+                    Fatal: { e.toString() }
+                </CardBody>
+            </Card>);
+    }
+};
+export default PostList;

frontend/app/(pages)/blog/api.ts

@@ -0,0 +1,21 @@
+const LOCAL_ENDPOINT = process.env.API_LOCAL_URL;
+const REMOTE_ENDPOINT = process.env.API_REMOTE_URL;
+
+const NOCTURNE_ENDPOINT = ((isServerSide = true) => {
+    if (process.env.NODE_ENV === 'production') {
+        if (isServerSide) {
+            return LOCAL_ENDPOINT;
+        } else {
+            return REMOTE_ENDPOINT;
+        }
+    } else {
+        return LOCAL_ENDPOINT;
+    }
+});
+
+export async function fetchNocturneApi(path: string, isServerSideRequest = true) {
+    return await fetch(`${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`, {
+        cache: 'no-cache'
+    });
+}
+

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

@@ -0,0 +1,23 @@
+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
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <div className={ 'flex flex-auto p-7 pl-2 lg:pl-7 w-full justify-center' }>
+            <main className={ 'w-full' }>
+                { children }
+            </main>
+        </div>
+    );
+}
+
+export default Layout;

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

@@ -0,0 +1,24 @@
+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
+}: {
+    searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}) {
+
+    const parsePage = Number((await searchParams)?.page);
+    const currPage = parsePage > 0 ? parsePage : 1;
+    const ret = await fetchNocturneApi(`/blog/get_page_count`);
+    const pageCount = (await ret.json() as any)['res'] as number;
+
+    return (
+        <div className={ 'w-full min-w-full space-y-4' }>
+            <PostList page={ currPage } />
+            <Pagination total={ pageCount } />
+        </div>
+    );
+}
+
+export default Blog;

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

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@nextui-org/react';
+import { IoArrowBackOutline } from 'react-icons/io5';
+
+const ButtonGoBack = () => {
+    const router = useRouter();
+
+    return (
+        <Button
+            startContent={ <IoArrowBackOutline /> }
+            variant={ 'light' }
+            onClick={ () => router.back() }
+        >
+            { 'Back' }
+        </Button>
+    );
+};
+export default ButtonGoBack;

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

@@ -0,0 +1,104 @@
+import React from 'react';
+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_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 { adjacent_posts, perm_link, post_id, first_update, last_update, title } = props;
+
+    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 (
+        <div className={ `w-full` }>
+
+            <div className={ 'flex transition bg-zinc-300/80 dark:bg-gray-600/25' }>
+                <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' }>{ title }</p>
+                            <Link href={ link }>
+                                <p className={ 'text-sm underline decoration-indigo-500 dark:decoration-sky-500' }>{ link }</p>
+                            </Link>
+                        </div>
+                        <div className={ 'z-[2] flex flex-row flex-wrap gap-x-7 gap-y-2' }>
+                            <div>
+                                <p className={ 'text-lg font-bold' }>Author</p>
+                                <Link href={ author_link }>
+                                    <p className={ 'underline decoration-indigo-500 dark:decoration-sky-500' }>{ author }</p>
+                                </Link>
+                            </div>
+                            <div>
+                                <p className={ 'text-lg font-bold' }>Posted on</p>
+                                <p>{ post_date.toLocaleString('default', {
+                                    month: `long`,
+                                    day: `numeric`,
+                                    year: `numeric`
+                                }) }</p>
+                            </div>
+                            { update_date &&
+                                <div>
+                                    <p className={ 'text-lg font-bold' }>Updated on</p>
+                                    <p>{ update_date.toLocaleString('default', {
+                                        month: `long`,
+                                        day: `numeric`,
+                                        year: `numeric`
+                                    }) }</p>
+                                </div>
+                            }
+                            <div>
+                                <p className={ 'text-lg font-bold' }>Published under</p>
+                                <Link href={ `https://creativecommons.org/licenses/${ cc }/4.0/` }>
+                                    <p className={ 'underline decoration-indigo-500 dark:decoration-sky-500' }>{ `CC ${ cc.toUpperCase() } 4.0` }</p>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className={ `flex justify-center` }>
+                <div className={ `w-full shadow-2xl ` }>
+                    <div className={ `flex flex-col md:flex-row w-full` }>
+                        {
+                            next_post &&
+                            <MinifyPostCard post={ next_post } desc={ 'prev' }></MinifyPostCard>
+                        }
+                        {
+                            prev_post &&
+                            <MinifyPostCard post={ prev_post } desc={ 'next' }></MinifyPostCard>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default Footer;

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import Image from 'next/image';
+import { Chip } from '@nextui-org/react';
+import { MdCalendarMonth } from 'react-icons/md';
+
+// type Props = {
+//     post: any
+// };
+
+type Props = {
+    title: string;
+    subtitle: string;
+    summary: string | undefined;
+    category: string;
+    tags: string[];
+    first_update: string;
+    header_img: string | undefined;
+}
+
+
+const Headers = (post: Props) => {
+
+    return (
+        <>
+            { post.header_img && <div className={ `w-full overflow h-96 relative` }>
+                <Image
+                    alt={ 'cover picture' }
+                    src={ post.header_img }
+                    className={ `w-full object-cover rounded-b-none z-[5]` }
+                    fill
+                ></Image>
+                <Image
+                    alt={ 'cover picture' }
+                    src={ post.header_img }
+                    className={ `w-full relative scale-110 blur-3xl object-cover rounded-b-none` }
+                    fill
+                ></Image>
+            </div> }
+
+            <div
+                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={ post.header_img ? `p-4` : 'p-4 pt-2' }>
+                    <Chip className={ `mb-2` } radius={ `sm` } color={ `secondary` }
+                          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` }>
+                            {
+                                post.tags.map((tag: string, key: any) => (
+                                    <li key={ key } className={ `mx-1 mb-1` }>
+                                        <Chip>{ tag }</Chip>
+                                    </li>
+                                ))
+                            }
+                        </ul>
+                    </div>
+                    <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` }>
+                            { (new Date(post.first_update)).toLocaleString('default', {
+                                month: `long`,
+                                day: `numeric`,
+                                year: `numeric`
+                            }) }
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    );
+};
+export default Headers;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Card, CardFooter, CardHeader } from '@nextui-org/card';
+import Image from 'next/image';
+import Link from 'next/link';
+
+type Props = {
+    post: any
+    desc: string
+}
+
+const MinifyPostCard = (props: Props) => {
+    const { post, desc } = props;
+    const img_url = post['header_img'] as string;
+    return (
+        <div className={ 'w-full transition hover:brightness-75' }>
+            <Card isFooterBlurred
+                  className="w-full h-[300px] shadow-none border-0 rounded-none overflow-hidden"
+                  as={ Link }
+                  isPressable
+                  href={ `/blog/post/${ post['id'] }` }
+            >
+                <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>
+                </CardHeader>
+                { img_url &&
+                    <div className={ 'h-full' }>
+                        <div className={ 'relative h-[300px] overflow-hidden' }>
+                            <Image
+                                className={ 'object-cover object-center ' }
+                                src={ img_url }
+                                alt={ post.title }
+                                fill
+                            />
+                        </div>
+                        <CardFooter
+                            className="absolute transition-colors bg-zinc-300/80 dark:bg-gray-600/25 dark:backdrop-brightness-75 bottom-0  justify-between rounded-none">
+                            <div>
+                                <p className="text-2xl font-bold">{ post['title'] }</p>
+                                <p className="">{ post['sub_title'] }</p>
+                            </div>
+                        </CardFooter>
+                    </div>
+                }
+                { !img_url &&
+                    <div className={ 'h-full grid p-6 place-content-center' }>
+                        <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>
+                }
+            </Card>
+
+        </div>
+    );
+};
+export default MinifyPostCard;

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;