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_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
NEXT_PUBLIC_TWITTER_HANDLE="@yourhandle"
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>
{post.tags && (
<div className="flex flex-wrap gap-2 pt-1">
{post.tags.map((t, i) => {
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 (
{post.tags.map((t) => (
<Link
key={t}
href={`/tags/${encodeURIComponent(
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}
</Link>
);
})}
))}
</div>
)}
</header>

15
app/layout.tsx
View File

@@ -32,9 +32,24 @@ export default function RootLayout({
}: {
children: React.ReactNode;
}) {
const theme = siteConfig.theme;
return (
<html lang={siteConfig.defaultLocale} suppressHydrationWarning>
<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>
<LayoutShell>{children}</LayoutShell>
</ThemeProvider>

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

@@ -55,28 +55,17 @@ export default function StaticPage({ params }: Props) {
</h1>
{page.tags && (
<div className="flex flex-wrap gap-2 pt-1">
{page.tags.map((t, i) => {
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 (
{page.tags.map((t) => (
<Link
key={t}
href={`/tags/${encodeURIComponent(
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}
</Link>
);
})}
))}
</div>
)}
</header>

4
components/hero.tsx
View File

@@ -78,9 +78,9 @@ export function Hero() {
href={item.href}
target="_blank"
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>
</a>
))}

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

@@ -15,14 +15,6 @@ export function PostListItem({ post }: Props) {
const excerpt =
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 (
<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">
@@ -44,26 +36,22 @@ export function PostListItem({ post }: Props) {
)}
</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>
</h2>
{post.tags && post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 pt-0.5">
{post.tags.slice(0, 4).map((t, i) => {
const color =
tagColorClasses[i % tagColorClasses.length];
return (
{post.tags.slice(0, 4).map((t) => (
<Link
key={t}
href={`/tags/${encodeURIComponent(
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}
</Link>
);
})}
))}
</div>
)}
{excerpt && (

6
components/right-sidebar.tsx
View File

@@ -59,7 +59,7 @@ export function RightSidebar() {
)}
</Link>
{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) => (
<a
key={item.key}
@@ -67,7 +67,7 @@ export function RightSidebar() {
target="_blank"
rel="noopener noreferrer"
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" />
</a>
@@ -121,7 +121,7 @@ export function RightSidebar() {
<div className="mt-2 text-right text-[11px]">
<Link
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>

2
components/theme-toggle.tsx
View File

@@ -20,7 +20,7 @@ export function ThemeToggle() {
return (
<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)}
aria-label={theme === 'dark' ? '切換為淺色主題' : '切換為深色主題'}
>

8
lib/config.ts
View File

@@ -23,6 +23,14 @@ export const siteConfig = {
mastodon: process.env.NEXT_PUBLIC_MASTODON_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',
twitterCard:
(process.env.NEXT_PUBLIC_TWITTER_CARD_TYPE as

20
tailwind.config.js
View File

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