mirror of
https://github.com/Lumither/nocturne.git
synced 2026-10-17 10:26:21 +00:00
feat(frontend) add Activities.tsx
This commit is contained in:
44 files changed
+501
-253
No files matched your search
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
Reference in new issue
Block a user