Migrate to HeroUI v3 and Tailwind CSS v4
- Upgrade from Tailwind CSS v3 to v4 with CSS-first configuration - Install HeroUI v3 beta packages (@heroui/react, @heroui/styles) - Migrate PostCSS config to new @tailwindcss/postcss plugin - Convert tailwind.config.cjs to CSS @theme directive in globals.css - Replace @tailwindcss/typography with custom prose styles Component migrations: - theme-toggle, back-to-top: HeroUI Button with onPress - post-card, post-list-item: HeroUI Card compound components - right-sidebar: HeroUI Card, Avatar, Chip - search-modal: HeroUI Modal with compound structure - nav-menu: HeroUI Button for mobile controls - post-list-with-controls: HeroUI Button for sorting/pagination Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button } from '@heroui/react';
|
||||
|
||||
export function BackToTop() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
@@ -22,16 +23,16 @@ export function BackToTop() {
|
||||
if (!visible) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="secondary"
|
||||
className="fixed bottom-6 right-4 z-40 h-9 w-9 rounded-full bg-slate-900 text-slate-50 shadow-md ring-1 ring-slate-800/70 transition hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:ring-slate-300/70 dark:hover:bg-slate-300"
|
||||
onPress={() => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
aria-label="回到頁面頂部"
|
||||
className="fixed bottom-6 right-4 z-40 inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-900 text-slate-50 shadow-md ring-1 ring-slate-800/70 transition hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:ring-slate-300/70 dark:hover:bg-slate-300"
|
||||
>
|
||||
<span className="text-lg leading-none">↑</span>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
} from 'react-icons/fi';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Button } from '@heroui/react';
|
||||
|
||||
export type IconKey =
|
||||
| 'home'
|
||||
@@ -35,7 +36,7 @@ export type IconKey =
|
||||
| 'device'
|
||||
| 'menu';
|
||||
|
||||
const ICON_MAP: Record<IconKey, any> = {
|
||||
const ICON_MAP: Record<IconKey, React.ComponentType<{ className?: string }>> = {
|
||||
home: FiHome,
|
||||
blog: FiFileText,
|
||||
file: FiFile,
|
||||
@@ -128,7 +129,7 @@ export function NavMenu({ items }: NavMenuProps) {
|
||||
<Link
|
||||
key={item.key}
|
||||
href={item.href}
|
||||
className="motion-link inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
className="motion-link inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 hover:text-[var(--color-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/40 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={close}
|
||||
>
|
||||
<Icon className="h-4 w-4 text-slate-400" />
|
||||
@@ -145,8 +146,9 @@ export function NavMenu({ items }: NavMenuProps) {
|
||||
if (hasChildren) {
|
||||
return (
|
||||
<div key={item.key} className="flex flex-col">
|
||||
<button
|
||||
onClick={() => toggleMobileItem(item.key)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
onPress={() => toggleMobileItem(item.key)}
|
||||
className="flex w-full items-center justify-between rounded-xl px-4 py-3 text-base font-medium text-slate-700 transition-colors active:bg-slate-100 dark:text-slate-200 dark:active:bg-slate-800"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -156,7 +158,7 @@ export function NavMenu({ items }: NavMenuProps) {
|
||||
<FiChevronRight
|
||||
className={`h-5 w-5 text-slate-400 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
<div
|
||||
className={`grid transition-all duration-200 ease-in-out ${isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
|
||||
}`}
|
||||
@@ -187,48 +189,50 @@ export function NavMenu({ items }: NavMenuProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Menu Trigger */}
|
||||
<button
|
||||
type="button"
|
||||
className="relative z-50 inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800 sm:hidden"
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="ghost"
|
||||
className="relative z-50 h-10 w-10 rounded-full text-slate-600 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800 sm:hidden"
|
||||
aria-label={open ? '關閉選單' : '開啟選單'}
|
||||
aria-expanded={open}
|
||||
onClick={toggle}
|
||||
onPress={toggle}
|
||||
>
|
||||
<div className="relative h-5 w-5">
|
||||
<span
|
||||
className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? 'rotate-45' : '-translate-y-1.5'
|
||||
className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ${open ? 'rotate-45' : '-translate-y-1.5'
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? 'opacity-0' : 'opacity-100'
|
||||
className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ${open ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? '-rotate-45' : 'translate-y-1.5'
|
||||
className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ${open ? '-rotate-45' : 'translate-y-1.5'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{/* Mobile Menu Overlay - Portaled */}
|
||||
{mounted && createPortal(
|
||||
<div
|
||||
className={`fixed inset-0 z-[100] flex flex-col bg-white/95 backdrop-blur-xl transition-all duration-300 ease-snappy dark:bg-gray-950/95 sm:hidden ${open ? 'visible opacity-100' : 'invisible opacity-0 pointer-events-none'
|
||||
className={`fixed inset-0 z-[100] flex flex-col bg-white/95 backdrop-blur-xl transition-all duration-300 dark:bg-gray-950/95 sm:hidden ${open ? 'visible opacity-100' : 'invisible opacity-0 pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
{/* Close button area */}
|
||||
<div className="flex items-center justify-end px-4 py-3">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={close}
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="ghost"
|
||||
className="h-10 w-10 rounded-full text-slate-600 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onPress={close}
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<div className="relative h-5 w-5">
|
||||
<span className="absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 rotate-45 bg-current" />
|
||||
<span className="absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 -rotate-45 bg-current" />
|
||||
</div>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto flex flex-1 flex-col px-4 pb-8">
|
||||
@@ -261,17 +265,17 @@ export function NavMenu({ items }: NavMenuProps) {
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="motion-link type-nav inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
|
||||
className="motion-link type-nav inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-[var(--color-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/40 dark:text-slate-200"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<Icon className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-accent" />
|
||||
<Icon className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-[var(--color-accent)]" />
|
||||
<span>{item.label}</span>
|
||||
<FiChevronDown className="h-3 w-3 text-slate-400 transition group-hover:text-accent" />
|
||||
<FiChevronDown className="h-3 w-3 text-slate-400 transition group-hover:text-[var(--color-accent)]" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={`absolute left-0 top-full z-50 hidden min-w-[12rem] rounded-2xl border border-slate-200 bg-white p-2 shadow-lg transition duration-200 ease-snappy dark:border-slate-800 dark:bg-slate-900 sm:block ${isOpen ? 'pointer-events-auto translate-y-2 opacity-100' : 'pointer-events-none translate-y-1 opacity-0'
|
||||
className={`absolute left-0 top-full z-50 hidden min-w-[12rem] rounded-2xl border border-slate-200 bg-white p-2 shadow-lg transition duration-200 dark:border-slate-800 dark:bg-slate-900 sm:block ${isOpen ? 'pointer-events-auto translate-y-2 opacity-100' : 'pointer-events-none translate-y-1 opacity-0'
|
||||
}`}
|
||||
role="menu"
|
||||
aria-label={item.label}
|
||||
@@ -290,12 +294,12 @@ export function NavMenu({ items }: NavMenuProps) {
|
||||
<Link
|
||||
key={item.key}
|
||||
href={item.href}
|
||||
className="motion-link type-nav group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
|
||||
className="motion-link type-nav group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-[var(--color-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/40 dark:text-slate-200"
|
||||
onClick={close}
|
||||
>
|
||||
<Icon className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-accent" />
|
||||
<Icon className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-[var(--color-accent)]" />
|
||||
<span>{item.label}</span>
|
||||
<span className="absolute inset-x-3 -bottom-0.5 h-px origin-left scale-x-0 bg-accent transition duration-180 ease-snappy group-hover:scale-x-100" aria-hidden="true" />
|
||||
<span className="absolute inset-x-3 -bottom-0.5 h-px origin-left scale-x-0 bg-[var(--color-accent)] transition duration-180 group-hover:scale-x-100" aria-hidden="true" />
|
||||
</Link>
|
||||
) : null;
|
||||
})}
|
||||
|
||||
@@ -4,6 +4,7 @@ import type { Post } from 'contentlayer2/generated';
|
||||
import { siteConfig } from '@/lib/config';
|
||||
import { FiCalendar, FiTag } from 'react-icons/fi';
|
||||
import { MetaItem } from './meta-item';
|
||||
import { Card } from '@heroui/react';
|
||||
|
||||
interface PostCardProps {
|
||||
post: Post;
|
||||
@@ -17,7 +18,8 @@ export function PostCard({ post, showTags = true }: PostCardProps) {
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<article className="motion-card group relative overflow-hidden rounded-xl border bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||
<article>
|
||||
<Card className="motion-card group relative overflow-hidden rounded-xl border dark:border-slate-800">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
|
||||
{cover && (
|
||||
<div className="relative w-full bg-slate-100 dark:bg-slate-800">
|
||||
@@ -32,7 +34,7 @@ export function PostCard({ post, showTags = true }: PostCardProps) {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-3 px-4 py-4">
|
||||
<Card.Content className="space-y-3 px-4 py-4">
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs">
|
||||
{post.published_at && (
|
||||
<MetaItem icon={FiCalendar}>
|
||||
@@ -47,20 +49,23 @@ export function PostCard({ post, showTags = true }: PostCardProps) {
|
||||
</MetaItem>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-lg font-semibold leading-snug">
|
||||
<Link
|
||||
href={post.url}
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
</h2>
|
||||
<Card.Header className="p-0">
|
||||
<Card.Title className="text-lg font-semibold leading-snug">
|
||||
<Link
|
||||
href={post.url}
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
{post.description && (
|
||||
<p className="line-clamp-3 text-sm text-slate-700 dark:text-slate-100">
|
||||
<Card.Description className="line-clamp-3 text-sm text-slate-700 dark:text-slate-100">
|
||||
{post.description}
|
||||
</p>
|
||||
</Card.Description>
|
||||
)}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Post } from 'contentlayer2/generated';
|
||||
import { siteConfig } from '@/lib/config';
|
||||
import { FiCalendar, FiTag } from 'react-icons/fi';
|
||||
import { MetaItem } from './meta-item';
|
||||
import { Card } from '@heroui/react';
|
||||
|
||||
interface Props {
|
||||
post: Post;
|
||||
@@ -19,7 +20,11 @@ export function PostListItem({ post }: Props) {
|
||||
post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
|
||||
|
||||
return (
|
||||
<article className="motion-card group relative flex gap-4 rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60">
|
||||
<article>
|
||||
<Card
|
||||
variant="transparent"
|
||||
className="motion-card group relative flex gap-4 rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60"
|
||||
>
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
|
||||
{cover && (
|
||||
<div className="relative flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40">
|
||||
@@ -34,7 +39,7 @@ export function PostListItem({ post }: Props) {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<Card.Content className="flex-1 space-y-1.5 p-0">
|
||||
<div className="flex flex-wrap gap-3 text-xs">
|
||||
{post.published_at && (
|
||||
<MetaItem icon={FiCalendar}>
|
||||
@@ -49,15 +54,18 @@ export function PostListItem({ post }: Props) {
|
||||
</MetaItem>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-base font-semibold leading-snug text-slate-900 hover:text-accent sm:text-lg dark:text-slate-50 dark:hover:text-accent">
|
||||
<Link href={post.url}>{post.title}</Link>
|
||||
</h2>
|
||||
<Card.Header className="p-0">
|
||||
<Card.Title className="text-base font-semibold leading-snug text-slate-900 hover:text-[var(--color-accent)] sm:text-lg dark:text-slate-50 dark:hover:text-[var(--color-accent)]">
|
||||
<Link href={post.url}>{post.title}</Link>
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
{excerpt && (
|
||||
<p className="line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
|
||||
<Card.Description className="line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
|
||||
{excerpt}
|
||||
</p>
|
||||
</Card.Description>
|
||||
)}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Post, Page } from 'contentlayer2/generated';
|
||||
import { Post } from 'contentlayer2/generated';
|
||||
import { FiArrowDown, FiArrowUp, FiSearch, FiList } from 'react-icons/fi';
|
||||
import { siteConfig } from '@/lib/config';
|
||||
import { PostListItem } from './post-list-item';
|
||||
import { TimelineWrapper } from './timeline-wrapper';
|
||||
import { Button, Input } from '@heroui/react';
|
||||
|
||||
interface Props {
|
||||
posts: Post[];
|
||||
@@ -79,28 +80,30 @@ export function PostListWithControls({ posts, pageSize }: Props) {
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-slate-100/70 px-2 py-1 text-slate-600 dark:bg-slate-800/70 dark:text-slate-300">
|
||||
<FiList className="h-3.5 w-3.5" />
|
||||
<span>排序</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleChangeSort('new')}
|
||||
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${sortOrder === 'new'
|
||||
<Button
|
||||
size="sm"
|
||||
variant={sortOrder === 'new' ? 'primary' : 'ghost'}
|
||||
onPress={() => handleChangeSort('new')}
|
||||
className={`h-auto rounded-full px-2 py-0.5 text-xs ${sortOrder === 'new'
|
||||
? 'bg-blue-600 text-white dark:bg-blue-500'
|
||||
: 'bg-white text-slate-600 hover:bg-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
<FiArrowDown className="h-3 w-3" />
|
||||
新到舊
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleChangeSort('old')}
|
||||
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${sortOrder === 'old'
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={sortOrder === 'old' ? 'primary' : 'ghost'}
|
||||
onPress={() => handleChangeSort('old')}
|
||||
className={`h-auto rounded-full px-2 py-0.5 text-xs ${sortOrder === 'old'
|
||||
? 'bg-blue-600 text-white dark:bg-blue-500'
|
||||
: 'bg-white text-slate-600 hover:bg-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
<FiArrowUp className="h-3 w-3" />
|
||||
舊到新
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex w-full items-center text-sm sm:w-auto">
|
||||
<label htmlFor="post-search" className="sr-only">
|
||||
@@ -108,7 +111,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
|
||||
</label>
|
||||
<div className="relative w-full sm:w-64">
|
||||
<FiSearch
|
||||
className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400"
|
||||
className="pointer-events-none absolute left-3 top-1/2 z-10 h-3.5 w-3.5 -translate-y-1/2 text-slate-400"
|
||||
/>
|
||||
<input
|
||||
id="post-search"
|
||||
@@ -116,7 +119,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
|
||||
placeholder="標題、標籤、摘要關鍵字"
|
||||
value={searchTerm}
|
||||
onChange={(event) => setSearchTerm(event.target.value)}
|
||||
className="w-full rounded-full border border-slate-200 bg-white py-1.5 pl-9 pr-3 text-sm text-slate-700 shadow-sm transition duration-180 ease-snappy focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:ring-blue-500"
|
||||
className="w-full rounded-full border border-slate-200 bg-white py-1.5 pl-9 pr-3 text-sm text-slate-700 shadow-sm transition duration-180 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,13 +131,14 @@ export function PostListWithControls({ posts, pageSize }: Props) {
|
||||
{normalizedQuery && `（搜尋「${searchTerm}」）`}
|
||||
</p>
|
||||
{normalizedQuery && sortedPosts.length === 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchTerm('')}
|
||||
className="text-blue-600 underline-offset-2 hover:underline dark:text-blue-400"
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onPress={() => setSearchTerm('')}
|
||||
className="h-auto p-0 text-blue-600 underline-offset-2 hover:underline dark:text-blue-400"
|
||||
>
|
||||
清除搜尋
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -152,41 +156,44 @@ export function PostListWithControls({ posts, pageSize }: Props) {
|
||||
|
||||
{totalPages > 1 && currentPosts.length > 0 && (
|
||||
<nav className="flex items-center justify-center gap-3 text-xs text-slate-600 dark:text-slate-300">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => goToPage(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="rounded border border-slate-200 px-2 py-1 disabled:opacity-40 dark:border-slate-700"
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onPress={() => goToPage(currentPage - 1)}
|
||||
isDisabled={currentPage === 1}
|
||||
className="h-auto rounded border border-slate-200 px-2 py-1 text-xs disabled:opacity-40 dark:border-slate-700"
|
||||
>
|
||||
上一頁
|
||||
</button>
|
||||
</Button>
|
||||
<div className="flex items-center gap-1">
|
||||
{Array.from({ length: totalPages }).map((_, i) => {
|
||||
const p = i + 1;
|
||||
const isActive = p === currentPage;
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={p}
|
||||
type="button"
|
||||
onClick={() => goToPage(p)}
|
||||
className={`h-7 w-7 rounded text-xs ${isActive
|
||||
variant={isActive ? 'primary' : 'ghost'}
|
||||
size="sm"
|
||||
onPress={() => goToPage(p)}
|
||||
className={`h-7 w-7 min-w-0 rounded p-0 text-xs ${isActive
|
||||
? 'bg-blue-600 text-white dark:bg-blue-500'
|
||||
: 'hover:bg-slate-100 dark:hover:bg-slate-800'
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => goToPage(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="rounded border border-slate-200 px-2 py-1 disabled:opacity-40 dark:border-slate-700"
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onPress={() => goToPage(currentPage + 1)}
|
||||
isDisabled={currentPage === totalPages}
|
||||
className="h-auto rounded border border-slate-200 px-2 py-1 text-xs disabled:opacity-40 dark:border-slate-700"
|
||||
>
|
||||
下一頁
|
||||
</button>
|
||||
</Button>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { FaGithub, FaMastodon, FaLinkedin } from 'react-icons/fa';
|
||||
@@ -6,6 +8,7 @@ import { siteConfig } from '@/lib/config';
|
||||
import { getAllTagsWithCount } from '@/lib/posts';
|
||||
import { allPages } from 'contentlayer2/generated';
|
||||
import { MastodonFeed } from './mastodon-feed';
|
||||
import { Card, Avatar, Chip } from '@heroui/react';
|
||||
|
||||
export function RightSidebar() {
|
||||
const tags = getAllTagsWithCount().slice(0, 5);
|
||||
@@ -35,38 +38,41 @@ export function RightSidebar() {
|
||||
icon: FaLinkedin,
|
||||
label: 'LinkedIn'
|
||||
}
|
||||
].filter(Boolean) as { key: string; href: string; icon: any; label: string }[];
|
||||
].filter(Boolean) as { key: string; href: string; icon: React.ComponentType<{ className?: string }>; label: string }[];
|
||||
|
||||
return (
|
||||
<aside className="hidden lg:block">
|
||||
<div className="sticky top-20 flex flex-col gap-4">
|
||||
<section className="motion-card group relative overflow-hidden rounded-xl border bg-white px-4 py-4 shadow-sm hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
|
||||
<Card className="motion-card group relative overflow-hidden rounded-xl border px-4 py-4 dark:border-slate-800">
|
||||
<div className="pointer-events-none absolute -left-10 -top-10 h-24 w-24 rounded-full bg-sky-300/35 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-sky-500/25" />
|
||||
<div className="pointer-events-none absolute -bottom-12 right-[-2.5rem] h-28 w-28 rounded-full bg-indigo-300/30 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-indigo-500/20" />
|
||||
|
||||
<div className="relative flex flex-col items-center">
|
||||
<Card.Content className="relative flex flex-col items-center p-0">
|
||||
<Link
|
||||
href={aboutPage?.url || '/pages/關於作者'}
|
||||
aria-label="關於作者"
|
||||
className="mb-2 inline-block transition-transform duration-300 ease-out group-hover:-translate-y-0.5"
|
||||
>
|
||||
{avatarSrc ? (
|
||||
<Image
|
||||
src={avatarSrc}
|
||||
alt={siteConfig.name}
|
||||
width={96}
|
||||
height={96}
|
||||
unoptimized
|
||||
className="h-24 w-24 rounded-full border border-slate-200 object-cover shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-24 w-24 items-center justify-center rounded-full bg-slate-900 text-lg font-semibold text-slate-50 shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:bg-slate-100 dark:text-slate-900">
|
||||
<Avatar className="h-24 w-24 border border-slate-200 shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700">
|
||||
{avatarSrc ? (
|
||||
<Avatar.Image asChild>
|
||||
<Image
|
||||
src={avatarSrc}
|
||||
alt={siteConfig.name}
|
||||
width={96}
|
||||
height={96}
|
||||
unoptimized
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</Avatar.Image>
|
||||
) : null}
|
||||
<Avatar.Fallback className="text-lg font-semibold">
|
||||
{siteConfig.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
</Avatar.Fallback>
|
||||
</Avatar>
|
||||
</Link>
|
||||
{socialItems.length > 0 && (
|
||||
<div className="mt-2 flex items-center gap-3 text-lg text-accent-textLight dark:text-accent-textDark">
|
||||
<div className="mt-2 flex items-center gap-3 text-lg text-[var(--color-accent-text-light)] dark:text-[var(--color-accent-text-dark)]">
|
||||
{socialItems.map((item) => (
|
||||
<a
|
||||
key={item.key}
|
||||
@@ -74,7 +80,7 @@ export function RightSidebar() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={item.label}
|
||||
className="motion-link inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:-translate-y-0.5 hover:bg-accent-soft hover:text-accent dark:bg-slate-800 dark:text-slate-200"
|
||||
className="motion-link inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:-translate-y-0.5 hover:bg-[var(--color-accent-soft)] hover:text-[var(--color-accent)] dark:bg-slate-800 dark:text-slate-200"
|
||||
>
|
||||
<item.icon className="h-4 w-4" />
|
||||
</a>
|
||||
@@ -88,48 +94,55 @@ export function RightSidebar() {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* Mastodon Feed */}
|
||||
<MastodonFeed />
|
||||
|
||||
{tags.length > 0 && (
|
||||
<section className="motion-card rounded-xl border bg-white px-4 py-3 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
|
||||
<h2 className="type-small flex items-center gap-2 font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
|
||||
<FiTrendingUp className="h-3 w-3 text-orange-400" />
|
||||
熱門標籤
|
||||
</h2>
|
||||
<div className="mt-2 flex flex-wrap gap-2 text-base">
|
||||
{tags.map(({ tag, slug, count }) => {
|
||||
let sizeClass = '';
|
||||
if (count >= 5) sizeClass = 'font-semibold';
|
||||
else if (count >= 3) sizeClass = 'font-medium';
|
||||
<Card className="motion-card rounded-xl border px-4 py-3 dark:border-slate-800">
|
||||
<Card.Header className="p-0">
|
||||
<Card.Title className="type-small flex items-center gap-2 font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
|
||||
<FiTrendingUp className="h-3 w-3 text-orange-400" />
|
||||
熱門標籤
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content className="p-0">
|
||||
<div className="mt-2 flex flex-wrap gap-2 text-base">
|
||||
{tags.map(({ tag, slug, count }) => {
|
||||
let fontWeight = 'font-normal';
|
||||
if (count >= 5) fontWeight = 'font-semibold';
|
||||
else if (count >= 3) fontWeight = 'font-medium';
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tag}
|
||||
href={`/tags/${slug}`}
|
||||
className={`${sizeClass} tag-chip rounded-full bg-accent-soft px-2 py-0.5 text-accent-textLight transition hover:bg-accent hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700`}
|
||||
>
|
||||
{tag}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-3 flex items-center justify-between type-small text-slate-500 dark:text-slate-400">
|
||||
return (
|
||||
<Link key={tag} href={`/tags/${slug}`}>
|
||||
<Chip
|
||||
color="accent"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
className={`${fontWeight} tag-chip cursor-pointer rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-[var(--color-accent-text-light)] transition hover:bg-[var(--color-accent)] hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700`}
|
||||
>
|
||||
{tag}
|
||||
</Chip>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card.Content>
|
||||
<Card.Footer className="mt-3 flex items-center justify-between p-0 type-small text-slate-500 dark:text-slate-400">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<FiArrowRight className="h-3 w-3" />
|
||||
一覽所有標籤
|
||||
</span>
|
||||
<Link
|
||||
href="/tags"
|
||||
className="motion-link text-accent-textLight hover:text-accent dark:text-accent-textDark"
|
||||
className="motion-link text-[var(--color-accent-text-light)] hover:text-[var(--color-accent)] dark:text-[var(--color-accent-text-dark)]"
|
||||
>
|
||||
前往
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { FiSearch, FiX } from 'react-icons/fi';
|
||||
import { Modal, Button, Spinner } from '@heroui/react';
|
||||
|
||||
interface SearchModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -95,87 +95,58 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
return () => document.removeEventListener('keydown', handleEscape);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
// Prevent body scroll when modal is open
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
// Use portal to render modal at document body level to avoid z-index stacking context issues
|
||||
if (typeof window === 'undefined') return null;
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-[9999] flex items-start justify-center bg-black/50 backdrop-blur-sm pt-20 px-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-3xl rounded-2xl border border-white/40 bg-white/95 shadow-2xl backdrop-blur-md dark:border-white/10 dark:bg-slate-900/95"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
|
||||
<div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
|
||||
<FiSearch className="h-5 w-5" />
|
||||
<span className="text-sm font-medium">全站搜尋</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
|
||||
aria-label="關閉搜尋"
|
||||
>
|
||||
<FiX className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Container */}
|
||||
<div className="max-h-[60vh] overflow-y-auto p-6">
|
||||
<div
|
||||
ref={searchContainerRef}
|
||||
className="pagefind-search"
|
||||
data-pagefind-ui
|
||||
/>
|
||||
{!isLoaded && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent"></div>
|
||||
<p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
|
||||
載入搜尋引擎...
|
||||
</p>
|
||||
return (
|
||||
<Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<Modal.Backdrop variant="blur">
|
||||
<Modal.Container placement="top" size="lg" className="pt-20">
|
||||
<Modal.Dialog className="w-full max-w-3xl rounded-2xl border border-white/40 bg-white/95 shadow-2xl backdrop-blur-md dark:border-white/10 dark:bg-slate-900/95">
|
||||
{/* Header */}
|
||||
<Modal.Header className="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
|
||||
<div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
|
||||
<FiSearch className="h-5 w-5" />
|
||||
<Modal.Heading className="text-sm font-medium">全站搜尋</Modal.Heading>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="ghost"
|
||||
onPress={onClose}
|
||||
className="h-8 w-8 rounded-full text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
|
||||
aria-label="關閉搜尋"
|
||||
>
|
||||
<FiX className="h-5 w-5" />
|
||||
</Button>
|
||||
</Modal.Header>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-slate-200 px-6 py-3 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>按 ESC 關閉</span>
|
||||
<span className="text-right">支援中英文全文搜尋</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
{/* Search Container */}
|
||||
<Modal.Body className="max-h-[60vh] overflow-y-auto p-6">
|
||||
<div
|
||||
ref={searchContainerRef}
|
||||
className="pagefind-search"
|
||||
data-pagefind-ui
|
||||
/>
|
||||
{!isLoaded && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<Spinner size="lg" color="accent" />
|
||||
<p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
|
||||
載入搜尋引擎...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal.Body>
|
||||
|
||||
{/* Footer */}
|
||||
<Modal.Footer className="border-t border-slate-200 px-6 py-3 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span>按 ESC 關閉</span>
|
||||
<span className="text-right">支援中英文全文搜尋</span>
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -193,9 +164,10 @@ export function SearchButton({ onClick }: { onClick: () => void }) {
|
||||
}, [onClick]);
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="motion-link inline-flex h-9 items-center gap-2 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-600 transition hover:bg-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
|
||||
<Button
|
||||
variant="ghost"
|
||||
onPress={onClick}
|
||||
className="motion-link h-9 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
|
||||
aria-label="搜尋 (Cmd+K)"
|
||||
>
|
||||
<FiSearch className="h-3.5 w-3.5" />
|
||||
@@ -203,6 +175,6 @@ export function SearchButton({ onClick }: { onClick: () => void }) {
|
||||
<kbd className="hidden rounded bg-white px-1.5 py-0.5 text-xs font-semibold text-slate-500 shadow-sm dark:bg-slate-900 dark:text-slate-400 sm:inline-block">
|
||||
⌘K
|
||||
</kbd>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { FiMoon, FiSun } from 'react-icons/fi';
|
||||
import { Button } from '@heroui/react';
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
@@ -20,17 +21,18 @@ export function ThemeToggle() {
|
||||
const isDark = theme === 'dark';
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-full text-accent-textLight transition duration-180 ease-snappy hover:-translate-y-0.5 hover:bg-accent-soft hover:text-accent active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-accent-textDark dark:hover:bg-slate-800 dark:hover:text-accent"
|
||||
onClick={() => setTheme(next)}
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="ghost"
|
||||
className="h-9 w-9 rounded-full text-[var(--color-accent-text-light)] transition duration-180 hover:-translate-y-0.5 hover:bg-[var(--color-accent-soft)] hover:text-[var(--color-accent)] active:scale-95 dark:text-[var(--color-accent-text-dark)] dark:hover:bg-slate-800 dark:hover:text-[var(--color-accent)]"
|
||||
onPress={() => setTheme(next)}
|
||||
aria-label={theme === 'dark' ? '切換為淺色主題' : '切換為深色主題'}
|
||||
>
|
||||
{isDark ? (
|
||||
<FiSun className="h-4 w-4 rotate-0 text-amber-400 transition-transform duration-260 ease-snappy" />
|
||||
<FiSun className="h-4 w-4 rotate-0 text-amber-400 transition-transform duration-260" />
|
||||
) : (
|
||||
<FiMoon className="h-4 w-4 rotate-180 text-blue-500 transition-transform duration-260 ease-snappy" />
|
||||
<FiMoon className="h-4 w-4 rotate-180 text-blue-500 transition-transform duration-260" />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user