lumither/nocturne
1
0 Fork 0
mirror of https://github.com/Lumither/nocturne.git synced 2026-10-17 10:26:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(navbar) new style, better performance

Browse Source
This commit is contained in:
lumither committed 2024-05-25 23:20:12 +08:00
1 parent 60a4a88246
commit d855df0d6e
7 files changed
+88 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/blog/BlogPostCard.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ function BlogPostCard({ post }: Props) {
return (
<div>
<div className={ `w-full` }>
<Card as={ Link } href={ `/blog/post/${ post_id }` }
className={ `mx-7 group` }
isPressable
app/blog/page.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ async function Blog() {
let posts = res['posts'];
return (
// blog list
<ul className={ 'flex flex-col items-center w-full max-w-[1024px]' }>
<ul className={ 'flex flex-col items-center w-full' }>
{ posts.map((post: JSON, key: React.Key | null | undefined) => (
<li key={ key } className={ 'my-7 w-full' }>
<BlogPostCard post={ post } />
app/blog/post/[id]/generate.tsx
+3 -3
View File
@@ -19,7 +19,7 @@ async function Generate(props: Props) {
const response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post/${ props.id }`);
if (response.status !== 200) {
return (
<Card className={ `w-full max-w-[1024px]` }>
<Card className={ `w-full` }>
<CardBody>
Fatal: Failed to load the post.
</CardBody>
@@ -31,10 +31,10 @@ async function Generate(props: Props) {
return (
<div>
<Card className={ `w-full max-w-[1024px]` }>
<Card className={ `w-full` }>
<CardBody>
<Markdown
className={ `mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-sm lg:prose-lg` }
className={ `mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-md lg:prose-lg` }
remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
rehypePlugins={ [ rehypeHighlight, rehypeRaw, rehypeSanitize ] }
>{ (post_data as any)['content'] }</Markdown>
app/blog/post/[id]/page.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import Generate from '@/app/blog/post/[id]/generate';
function BlogReader({ params }: { params: { id: string } }) {
return (
<div className={ `mx-7 my-7 w-full max-w-[1024px]` }>
<div className={ `mx-7 my-7 w-full` }>
<Generate id={ params.id } />
</div>
);
app/layout.tsx
+5 -1
View File
@@ -17,10 +17,14 @@ export default function RootLayout({
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`dark:bg-[#282830]`}>
<body className={ `dark:bg-[#282830] min-h-screen` }>
<NextThemesProvider attribute="class" defaultTheme="dark">
<div className={ `justify-center flex flex-row w-full` }>
<Navbar />
<div className={ `flex-auto max-w-[1024px]` }>
{ children }
</div>
</div>
</NextThemesProvider>
</body>
</html>
components/Navbar.tsx
+76 -64
View File
@@ -1,33 +1,50 @@
'use client';
import React, { useEffect, useState } from 'react';
import { Button, Image } from '@nextui-org/react';
import {
Image,
Navbar as NextUINavbar,
NavbarBrand,
NavbarContent,
NavbarItem,
NavbarMenu,
NavbarMenuItem,
NavbarMenuToggle
} from '@nextui-org/react';
IoFileTrayFull,
IoHome,
IoInformationCircle,
IoLogoGithub,
IoMail,
IoPencil,
IoPricetags,
IoSearch
} from 'react-icons/io5';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import ThemeSwitcher from '@/components/ThemeSwitcher';
const entries: { display_name: string; href: string; }[] = [
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: <IoPricetags size={ `20px` }></IoPricetags>,
display_name: 'Tags',
href: '/tags'
},
{
icon: <IoFileTrayFull size={ `20px` }></IoFileTrayFull>,
display_name: 'Archive',
href: '/Archive'
},
{
icon: <IoSearch size={ `20px` }></IoSearch>,
display_name: 'Search',
href: '/search'
}
];
@@ -48,67 +65,62 @@ function Navbar() {
return (
<>
<NextUINavbar isBlurred isBordered>
<NavbarContent className="sm:hidden" justify="start">
<NavbarMenuToggle />
</NavbarContent>
<NavbarContent className="sm:hidden pr-3" justify="center">
<div className={ `flex flex-col w-full max-w-[256px] mr-2 ml-8 min-h-screen pt-8 sticky` }>
<div className={ `flex justify-center items-center my-7` }>
<Image
src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' }
alt={ 'avatar' }
className={ 'rounded-full h-[3rem]' }
width={ 200 }
height={ 200 }
className={ 'rounded-full justify-self-center' }
removeWrapper
></Image>
</div>
<NavbarBrand>
<p className="font-bold text-inherit">{ 'Lumither\'s site' }</p>
</NavbarBrand>
</NavbarContent>
<p className={ `font-bold text-2xl` }>Lumither Tao</p>
<p className={ `text-xl text-zinc-500 dark:text-zinc-400` }>Ad Astra</p>
<NavbarContent className="hidden sm:flex gap-4" justify="center">
<Image
src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' }
alt={ 'avatar' }
className={ 'rounded-full h-[3rem]' }
></Image>
<NavbarBrand>
<p className="font-bold text-inherit">{ 'Lumither\'s site' }</p>
</NavbarBrand>
{ entries.map((item, index) => (
// eslint-disable-next-line react-hooks/rules-of-hooks
<NavbarItem key={ index } isActive={ usePathname() === item.href }>
<Link
className="w-full"
href={ item.href }
>
{ item.display_name }
<div className={ `flex flex-row items-center my-4 space-x-2` }>
<Link href={ 'https://github.com/Lumither' } aria-label={ `GitHub` }>
<IoLogoGithub size={ `30px` } />
</Link>
</NavbarItem>
)) }
</NavbarContent>
<Link href={ 'mailto:lumither@outlook.com' } aria-label={ `email` }>
<IoMail size={ `30px` } />
</Link>
</div>
<NavbarContent justify="end">
<NavbarItem>
<div
className={ `mt-8 -ml-3` }>
<ul className={ `flex flex-col space-y-2` }>
{
entries.map((meta, key) => (
<li key={ key }>
<Button startContent={ meta.icon }
as={ Link }
variant={ `light` }
color={ `default` }
fullWidth
className={ 'flex justify-start' }
// className={ `w-full` }
aria-label={ `navbar: ${ meta.display_name }` }
href={ meta.href }>
<p className={ `font-bold` }>{ meta.display_name }</p>
</Button>
</li>
))
}
</ul>
</div>
<div
className={ `absolute bottom-0 mb-8` }
>
<div className={ `flex flex-row justify-center` }>
<ThemeSwitcher />
</NavbarItem>
</NavbarContent>
<NavbarMenu>
{ entries.map((item, index) => (
<NavbarMenuItem key={ index }>
<Link
className="w-full"
href={ item.href }
>
{ item.display_name }
</Link>
</NavbarMenuItem>
)) }
</NavbarMenu>
</NextUINavbar>
<p className={ `font-bold` }>{ `Toggle Theme` }</p>
</div>
</div>
</div>
</>
);
}
components/ThemeSwitcher.tsx
+1
View File
@@ -21,6 +21,7 @@ function ThemeSwitcher() {
<div>
<Switch
color={ 'default' }
aria-label={ `theme switch` }
startContent={ <MdOutlineLightMode /> }
endContent={ <MdOutlineDarkMode /> }
onValueChange={ (isSelected) => {