feat: complete newspaperui component library with docs site

- 18 React components (Layout/Section/Article/Layer/Masthead/Rule + Headline/Subhead/Kicker/BodyText/Quote/Byline/Dateline/Caption + Image/Figure/Video/PullQuote) - Theme: warm off-white palette, Source Serif 4 / Cormorant Garamond / Inter / Noto Serif SC/JP, visual weight mapping, dark mode - Docs: Landing page, 6 Blocks (zh/en/jp), component API docs - GitHub Pages deployment via static export Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
2026-05-20 14:22:14 +08:00
parent 610805a374
commit 1f09bba3ef
57 changed files with 2662 additions and 1127 deletions
@@ -0,0 +1,89 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const navItems = [
+  { label: 'Docs', href: '/grid-system' },
+  { label: 'Components', href: '/components/article' },
+  { label: 'Themes', href: '/theme' },
+  { label: 'Blocks', href: '/blocks' },
+];
+
+export function Header() {
+  const pathname = usePathname();
+  return (
+    <header
+      style={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 50,
+        background: 'var(--nui-bg-page)',
+        borderBottom: '1px solid var(--nui-rule-hairline)',
+        backdropFilter: 'blur(8px)',
+      }}
+    >
+      <div
+        style={{
+          maxWidth: '1400px',
+          margin: '0 auto',
+          padding: '1rem 2rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: '2rem',
+        }}
+      >
+        <Link
+          href="/"
+          style={{
+            fontFamily: 'var(--font-family-masthead)',
+            fontSize: '24px',
+            fontWeight: 700,
+            color: 'var(--nui-text-primary)',
+            textDecoration: 'none',
+            letterSpacing: '0.02em',
+          }}
+        >
+          NewspaperUI
+        </Link>
+        <nav style={{ display: 'flex', gap: '2rem' }}>
+          {navItems.map((item) => {
+            const active =
+              pathname === item.href ||
+              (item.href !== '/' && pathname.startsWith(item.href));
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                style={{
+                  fontFamily: 'var(--font-family-meta)',
+                  fontSize: '14px',
+                  fontWeight: 500,
+                  color: active
+                    ? 'var(--nui-accent-primary)'
+                    : 'var(--nui-text-secondary)',
+                  textDecoration: 'none',
+                }}
+              >
+                {item.label}
+              </Link>
+            );
+          })}
+          <a
+            href="https://github.com"
+            target="_blank"
+            rel="noreferrer"
+            style={{
+              fontFamily: 'var(--font-family-meta)',
+              fontSize: '14px',
+              color: 'var(--nui-text-muted)',
+              textDecoration: 'none',
+            }}
+          >
+            GitHub
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}