gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce colorful accents for tags, tag cloud, and hero

Browse Source
This commit is contained in:
gbanyan
2025-11-17 20:23:45 +08:00
parent bede4a2f3e
commit 3b1a3eb6e1
4 changed files with 58 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/blog/[slug]/page.tsx
View File

@@ -55,17 +55,28 @@ export default function BlogPostPage({ params }: Props) {
</h1> </h1>
{post.tags && ( {post.tags && (
<div className="flex flex-wrap gap-2 pt-1"> <div className="flex flex-wrap gap-2 pt-1">
{post.tags.map((t) => ( {post.tags.map((t, i) => {
<Link const tagColorClasses = [
key={t} 'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
href={`/tags/${encodeURIComponent( 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
t.toLowerCase().replace(/\s+/g, '-') 'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
)}`} 'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700" 'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
> ];
#{t} const color =
</Link> tagColorClasses[i % tagColorClasses.length];
))} return (
<Link
key={t}
href={`/tags/${encodeURIComponent(
t.toLowerCase().replace(/\s+/g, '-')
)}`}
className={`rounded-full px-2 py-0.5 text-xs transition ${color}`}
>
#{t}
</Link>
);
})}
</div> </div>
)} )}
</header> </header>

2
components/hero.tsx
View File

@@ -58,7 +58,7 @@ export function Hero() {
}[]; }[];
return ( return (
<section className="mb-8 rounded-xl border bg-gradient-to-r from-slate-50 to-slate-100 px-6 py-6 shadow-sm dark:border-slate-800 dark:from-slate-900 dark:to-slate-950"> <section className="mb-8 rounded-xl border bg-gradient-to-r from-sky-50 via-indigo-50 to-slate-50 px-6 py-6 shadow-sm dark:border-slate-800 dark:from-slate-900 dark:via-slate-950 dark:to-slate-900">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-900 text-2xl font-semibold text-slate-50 dark:bg-slate-100 dark:text-slate-900"> <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-900 text-2xl font-semibold text-slate-50 dark:bg-slate-100 dark:text-slate-900">
{initial} {initial}

34
components/post-list-item.tsx
View File

@@ -15,6 +15,14 @@ export function PostListItem({ post }: Props) {
const excerpt = const excerpt =
post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120); post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
const tagColorClasses = [
'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
];
return ( return (
<li> <li>
<Link href={post.url}> <Link href={post.url}>
@@ -42,17 +50,21 @@ export function PostListItem({ post }: Props) {
</h2> </h2>
{post.tags && post.tags.length > 0 && ( {post.tags && post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 pt-0.5"> <div className="flex flex-wrap gap-2 pt-0.5">
{post.tags.slice(0, 4).map((t) => ( {post.tags.slice(0, 4).map((t, i) => {
<Link const color =
key={t} tagColorClasses[i % tagColorClasses.length];
href={`/tags/${encodeURIComponent( return (
t.toLowerCase().replace(/\s+/g, '-') <Link
)}`} key={t}
className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700" href={`/tags/${encodeURIComponent(
> t.toLowerCase().replace(/\s+/g, '-')
#{t} )}`}
</Link> className={`rounded-full px-2 py-0.5 text-[11px] transition ${color}`}
))} >
#{t}
</Link>
);
})}
</div> </div>
)} )}
{excerpt && ( {excerpt && (

14
components/right-sidebar.tsx
View File

@@ -41,16 +41,26 @@ export function RightSidebar() {
標籤雲 標籤雲
</h2> </h2>
<div className="mt-2 flex flex-wrap gap-2 text-xs"> <div className="mt-2 flex flex-wrap gap-2 text-xs">
{tags.map(({ tag, slug, count }) => { {tags.map(({ tag, slug, count }, index) => {
let sizeClass = 'text-[11px]'; let sizeClass = 'text-[11px]';
if (count >= 5) sizeClass = 'text-sm font-semibold'; if (count >= 5) sizeClass = 'text-sm font-semibold';
else if (count >= 3) sizeClass = 'text-xs font-medium'; else if (count >= 3) sizeClass = 'text-xs font-medium';
const colorClasses = [
'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
];
const color =
colorClasses[index % colorClasses.length];
return ( return (
<Link <Link
key={tag} key={tag}
href={`/tags/${slug}`} href={`/tags/${slug}`}
className={`${sizeClass} rounded-full bg-slate-100 px-2 py-0.5 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700`} className={`${sizeClass} rounded-full px-2 py-0.5 transition ${color}`}
> >
{tag} {tag}
</Link> </Link>