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

Introduce env-driven accent color system and apply to links, icons, and tags

Browse Source
This commit is contained in:
gbanyan
2025-11-17 22:46:55 +08:00
parent e7a9d89cfc
commit 4cb3e7627b
10 changed files with 83 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.env.local.example
View File

@@ -12,6 +12,12 @@ NEXT_PUBLIC_POSTS_PER_PAGE="5"
NEXT_PUBLIC_DEFAULT_LOCALE="zh-TW" NEXT_PUBLIC_DEFAULT_LOCALE="zh-TW"
NEXT_PUBLIC_SITE_AVATAR_URL="https://www.gravatar.com/avatar/yourhash?s=160&d=identicon" NEXT_PUBLIC_SITE_AVATAR_URL="https://www.gravatar.com/avatar/yourhash?s=160&d=identicon"
# Color scheme / accents
NEXT_PUBLIC_COLOR_ACCENT="#2563eb"
NEXT_PUBLIC_COLOR_ACCENT_SOFT="#dbeafe"
NEXT_PUBLIC_COLOR_ACCENT_TEXT_LIGHT="#1d4ed8"
NEXT_PUBLIC_COLOR_ACCENT_TEXT_DARK="#93c5fd"
# Social and profile # Social and profile
NEXT_PUBLIC_TWITTER_HANDLE="@yourhandle" NEXT_PUBLIC_TWITTER_HANDLE="@yourhandle"
NEXT_PUBLIC_GITHUB_URL="https://github.com/yourname" NEXT_PUBLIC_GITHUB_URL="https://github.com/yourname"

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

@@ -55,28 +55,17 @@ 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, i) => { {post.tags.map((t) => (
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'
];
const color =
tagColorClasses[i % tagColorClasses.length];
return (
<Link <Link
key={t} key={t}
href={`/tags/${encodeURIComponent( href={`/tags/${encodeURIComponent(
t.toLowerCase().replace(/\s+/g, '-') t.toLowerCase().replace(/\s+/g, '-')
)}`} )}`}
className={`rounded-full px-2 py-0.5 text-xs transition ${color}`} className="rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight transition hover:bg-accent dark:text-accent-textDark"
> >
#{t} #{t}
</Link> </Link>
); ))}
})}
</div> </div>
)} )}
</header> </header>

15
app/layout.tsx
View File

@@ -32,9 +32,24 @@ export default function RootLayout({
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const theme = siteConfig.theme;
return ( return (
<html lang={siteConfig.defaultLocale} suppressHydrationWarning> <html lang={siteConfig.defaultLocale} suppressHydrationWarning>
<body> <body>
<style
// Set CSS variables for accent colors (light + dark variants)
dangerouslySetInnerHTML={{
__html: `
:root {
--color-accent: ${theme.accent};
--color-accent-soft: ${theme.accentSoft};
--color-accent-text-light: ${theme.accentTextLight};
--color-accent-text-dark: ${theme.accentTextDark};
}
`
}}
/>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem> <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<LayoutShell>{children}</LayoutShell> <LayoutShell>{children}</LayoutShell>
</ThemeProvider> </ThemeProvider>

17
app/pages/[slug]/page.tsx
View File

@@ -55,28 +55,17 @@ export default function StaticPage({ params }: Props) {
</h1> </h1>
{page.tags && ( {page.tags && (
<div className="flex flex-wrap gap-2 pt-1"> <div className="flex flex-wrap gap-2 pt-1">
{page.tags.map((t, i) => { {page.tags.map((t) => (
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'
];
const color =
tagColorClasses[i % tagColorClasses.length];
return (
<Link <Link
key={t} key={t}
href={`/tags/${encodeURIComponent( href={`/tags/${encodeURIComponent(
t.toLowerCase().replace(/\s+/g, '-') t.toLowerCase().replace(/\s+/g, '-')
)}`} )}`}
className={`rounded-full px-2 py-0.5 text-xs transition ${color}`} className="rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight transition hover:bg-accent dark:text-accent-textDark"
> >
#{t} #{t}
</Link> </Link>
); ))}
})}
</div> </div>
)} )}
</header> </header>

4
components/hero.tsx
View File

@@ -78,9 +78,9 @@ export function Hero() {
href={item.href} href={item.href}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex items-center gap-2 rounded-full bg-white/80 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/80 dark:ring-slate-700" className="flex items-center gap-2 rounded-full bg-white/80 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-accent-soft dark:bg-slate-900/80 dark:ring-slate-700"
> >
<FontAwesomeIcon icon={item.icon} className="h-3.5 w-3.5" /> <FontAwesomeIcon icon={item.icon} className="h-3.5 w-3.5 text-accent" />
<span>{item.label}</span> <span>{item.label}</span>
</a> </a>
))} ))}

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

@@ -15,14 +15,6 @@ 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>
<article className="group flex gap-4 rounded-lg border border-slate-200/70 bg-white/80 p-4 transition hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900/80 dark:hover:bg-slate-900"> <article className="group flex gap-4 rounded-lg border border-slate-200/70 bg-white/80 p-4 transition hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900/80 dark:hover:bg-slate-900">
@@ -44,26 +36,22 @@ export function PostListItem({ post }: Props) {
)} )}
</p> </p>
)} )}
<h2 className="text-base font-semibold leading-snug text-slate-900 group-hover:text-blue-600 sm:text-lg dark:text-slate-50 dark:group-hover:text-blue-400"> <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> <Link href={post.url}>{post.title}</Link>
</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, i) => { {post.tags.slice(0, 4).map((t) => (
const color =
tagColorClasses[i % tagColorClasses.length];
return (
<Link <Link
key={t} key={t}
href={`/tags/${encodeURIComponent( href={`/tags/${encodeURIComponent(
t.toLowerCase().replace(/\s+/g, '-') t.toLowerCase().replace(/\s+/g, '-')
)}`} )}`}
className={`rounded-full px-2 py-0.5 text-[11px] transition ${color}`} className="rounded-full bg-accent-soft px-2 py-0.5 text-[11px] text-accent-textLight transition hover:bg-accent dark:text-accent-textDark"
> >
#{t} #{t}
</Link> </Link>
); ))}
})}
</div> </div>
)} )}
{excerpt && ( {excerpt && (

6
components/right-sidebar.tsx
View File

@@ -59,7 +59,7 @@ export function RightSidebar() {
)} )}
</Link> </Link>
{socialItems.length > 0 && ( {socialItems.length > 0 && (
<div className="flex items-center gap-3 text-base text-slate-500 dark:text-slate-400"> <div className="flex items-center gap-3 text-base text-accent-textLight dark:text-accent-textDark">
{socialItems.map((item) => ( {socialItems.map((item) => (
<a <a
key={item.key} key={item.key}
@@ -67,7 +67,7 @@ export function RightSidebar() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label={item.label} aria-label={item.label}
className="transition hover:text-slate-800 dark:hover:text-slate-100" className="transition hover:text-accent"
> >
<FontAwesomeIcon icon={item.icon} className="h-4 w-4" /> <FontAwesomeIcon icon={item.icon} className="h-4 w-4" />
</a> </a>
@@ -121,7 +121,7 @@ export function RightSidebar() {
<div className="mt-2 text-right text-[11px]"> <div className="mt-2 text-right text-[11px]">
<Link <Link
href="/tags" href="/tags"
className="text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-400" className="text-slate-500 hover:text-accent dark:text-slate-400 dark:hover:text-accent"
> >
查看全部標籤 → 查看全部標籤 →
</Link> </Link>

2
components/theme-toggle.tsx
View File

@@ -20,7 +20,7 @@ export function ThemeToggle() {
return ( return (
<button <button
type="button" type="button"
className="inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100" className="inline-flex h-8 w-8 items-center justify-center rounded-full text-accent-textLight transition hover:bg-accent-soft hover:text-accent dark:text-accent-textDark dark:hover:bg-slate-800 dark:hover:text-accent"
onClick={() => setTheme(next)} onClick={() => setTheme(next)}
aria-label={theme === 'dark' ? '切換為淺色主題' : '切換為深色主題'} aria-label={theme === 'dark' ? '切換為淺色主題' : '切換為深色主題'}
> >

8
lib/config.ts
View File

@@ -23,6 +23,14 @@ export const siteConfig = {
mastodon: process.env.NEXT_PUBLIC_MASTODON_URL || '', mastodon: process.env.NEXT_PUBLIC_MASTODON_URL || '',
gitea: process.env.NEXT_PUBLIC_GITEA_URL || '' gitea: process.env.NEXT_PUBLIC_GITEA_URL || ''
}, },
theme: {
accent: process.env.NEXT_PUBLIC_COLOR_ACCENT || '#2563eb',
accentSoft: process.env.NEXT_PUBLIC_COLOR_ACCENT_SOFT || '#dbeafe',
accentTextLight:
process.env.NEXT_PUBLIC_COLOR_ACCENT_TEXT_LIGHT || '#1d4ed8',
accentTextDark:
process.env.NEXT_PUBLIC_COLOR_ACCENT_TEXT_DARK || '#93c5fd'
},
ogImage: process.env.NEXT_PUBLIC_OG_DEFAULT_IMAGE || '/assets/og-default.jpg', ogImage: process.env.NEXT_PUBLIC_OG_DEFAULT_IMAGE || '/assets/og-default.jpg',
twitterCard: twitterCard:
(process.env.NEXT_PUBLIC_TWITTER_CARD_TYPE as (process.env.NEXT_PUBLIC_TWITTER_CARD_TYPE as

20
tailwind.config.js
View File

@@ -8,14 +8,22 @@ module.exports = {
], ],
theme: { theme: {
extend: { extend: {
colors: {
accent: {
DEFAULT: 'var(--color-accent)',
soft: 'var(--color-accent-soft)',
textLight: 'var(--color-accent-text-light)',
textDark: 'var(--color-accent-text-dark)'
}
},
typography: (theme) => ({ typography: (theme) => ({
DEFAULT: { DEFAULT: {
css: { css: {
color: theme('colors.slate.700'), color: theme('colors.slate.700'),
a: { a: {
color: theme('colors.blue.600'), color: 'var(--color-accent-text-light)',
'&:hover': { '&:hover': {
color: theme('colors.blue.700') color: 'var(--color-accent)'
} }
}, },
h1: { h1: {
@@ -28,7 +36,7 @@ module.exports = {
}, },
blockquote: { blockquote: {
fontStyle: 'normal', fontStyle: 'normal',
borderLeftColor: theme('colors.blue.200'), borderLeftColor: 'var(--color-accent-soft)',
color: theme('colors.slate.700'), color: theme('colors.slate.700'),
backgroundColor: theme('colors.slate.50') backgroundColor: theme('colors.slate.50')
}, },
@@ -44,9 +52,9 @@ module.exports = {
// Slightly softer than pure white for body text // Slightly softer than pure white for body text
color: theme('colors.slate.200'), color: theme('colors.slate.200'),
a: { a: {
color: theme('colors.blue.400'), color: 'var(--color-accent-text-dark)',
'&:hover': { '&:hover': {
color: theme('colors.blue.300') color: 'var(--color-accent)'
} }
}, },
strong: { strong: {
@@ -67,7 +75,7 @@ module.exports = {
color: theme('colors.slate.50') color: theme('colors.slate.50')
}, },
blockquote: { blockquote: {
borderLeftColor: theme('colors.blue.500'), borderLeftColor: 'var(--color-accent)',
backgroundColor: theme('colors.slate.800'), backgroundColor: theme('colors.slate.800'),
color: theme('colors.slate.200'), color: theme('colors.slate.200'),
p: { p: {