82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
import Link from 'next/link';
|
|
import { ThemeToggle } from './theme-toggle';
|
|
import { NavMenu, NavLinkItem, IconKey } from './nav-menu';
|
|
import { siteConfig } from '@/lib/config';
|
|
import { allPages } from 'contentlayer/generated';
|
|
|
|
export function SiteHeader() {
|
|
const pages = allPages
|
|
.slice()
|
|
.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
|
|
|
|
const navItems: NavLinkItem[] = [
|
|
{ key: 'home', href: '/', label: '首頁', iconKey: 'home' },
|
|
{ key: 'blog', href: '/blog', label: 'Blog', iconKey: 'blog' },
|
|
...pages.map((page) => ({
|
|
key: page._id,
|
|
href: page.url,
|
|
label: page.title,
|
|
iconKey: getIconForPage(page.title, page.slug)
|
|
}))
|
|
];
|
|
|
|
return (
|
|
<header className="bg-white/80 backdrop-blur transition-colors duration-200 ease-snappy dark:bg-gray-950/80">
|
|
<div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
|
|
<Link
|
|
href="/"
|
|
className="motion-link group relative font-semibold tracking-tight text-lg text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100"
|
|
>
|
|
<span className="absolute -bottom-0.5 left-0 h-[2px] w-0 bg-accent transition-all duration-180 ease-snappy group-hover:w-full" aria-hidden="true" />
|
|
{siteConfig.title}
|
|
</Link>
|
|
<div className="flex items-center gap-3">
|
|
<NavMenu items={navItems} />
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
|
|
const titleOverrides = Object.fromEntries(
|
|
Object.entries(siteConfig.navIconOverrides?.titles ?? {}).map(([key, value]) => [
|
|
key.trim().toLowerCase(),
|
|
value as IconKey
|
|
])
|
|
);
|
|
|
|
const slugOverrides = Object.fromEntries(
|
|
Object.entries(siteConfig.navIconOverrides?.slugs ?? {}).map(([key, value]) => [
|
|
key.trim().toLowerCase(),
|
|
value as IconKey
|
|
])
|
|
);
|
|
|
|
function getIconForPage(title?: string, slug?: string): IconKey {
|
|
const normalizedTitle = title?.trim().toLowerCase();
|
|
if (normalizedTitle && titleOverrides[normalizedTitle]) {
|
|
return titleOverrides[normalizedTitle];
|
|
}
|
|
|
|
const normalizedSlug = slug?.trim().toLowerCase();
|
|
if (normalizedSlug && slugOverrides[normalizedSlug]) {
|
|
return slugOverrides[normalizedSlug];
|
|
}
|
|
|
|
if (!title) return 'file';
|
|
const lower = title.toLowerCase();
|
|
if (lower.includes('關於本站')) return 'menu';
|
|
if (lower.includes('關於') || lower.includes('about')) return 'user';
|
|
if (lower.includes('聯絡') || lower.includes('contact')) return 'contact';
|
|
if (lower.includes('位置') || lower.includes('map')) return 'location';
|
|
if (lower.includes('作品') || lower.includes('portfolio')) return 'pen';
|
|
if (lower.includes('標籤') || lower.includes('tags')) return 'tags';
|
|
if (lower.includes('homelab')) return 'server';
|
|
if (lower.includes('server') || lower.includes('伺服') || lower.includes('infrastructure')) return 'server';
|
|
if (lower.includes('開發工作環境')) return 'device';
|
|
if (lower.includes('device') || lower.includes('設備') || lower.includes('硬體') || lower.includes('hardware')) return 'device';
|
|
return 'file';
|
|
}
|