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>
This commit is contained in:
sunzhongyi
@@ -2,7 +2,7 @@ import { Sidebar } from '../../components/Sidebar';
|
||||
|
||||
export default function DocsLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', minHeight: '100vh' }}>
|
||||
<div style={{ display: 'flex', minHeight: 'calc(100vh - 65px)' }}>
|
||||
<Sidebar />
|
||||
<main
|
||||
style={{
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client';
|
||||
import { Layout, Section, Article, Rule, Headline, Subhead, Kicker, BodyText, Byline, Dateline, Figure, PullQuote } from '@newspaperui/components';
|
||||
|
||||
export default function EnFeature() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="750px" padding="3rem 2rem 4rem">
|
||||
<Section columns={24}>
|
||||
<Article span={24}>
|
||||
<div style={{ textAlign: 'center', marginBottom: '3rem' }}>
|
||||
<Kicker>Long-form · Investigation</Kicker>
|
||||
<Headline weight="High" align="center" style={{ marginTop: '0.5rem' }}>
|
||||
The Quiet Collapse of the Middle Shelf
|
||||
</Headline>
|
||||
<Subhead weight="High" style={{ textAlign: 'center', marginTop: '0.5rem' }}>
|
||||
How a generation of mid-list authors lost their publishers, their readers, and their livelihoods — while bestseller lists grew longer than ever.
|
||||
</Subhead>
|
||||
<div style={{ marginTop: '1.5rem' }}>
|
||||
<Byline>By Catherine Ashworth</Byline>
|
||||
</div>
|
||||
<div style={{ fontFamily: 'var(--font-family-meta)', fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
|
||||
May 19, 2026 · 18 min read
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Figure
|
||||
src="https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=1400&q=80"
|
||||
alt="Empty bookshelves in a closing bookstore"
|
||||
caption="A former independent bookstore in Portland, Oregon, photographed the week before its final closing. The middle shelves — where debut novels and second books once lived — were the first to empty."
|
||||
credit="Photograph by Daniel Voss for The Chronicle"
|
||||
/>
|
||||
|
||||
<BodyText weight="High" dropCap style={{ marginTop: '2rem' }}>
|
||||
<p><Dateline>Portland, Ore. —</Dateline> The bookstore on Southeast Hawthorne had been open for thirty-one years when its owner, Margaret Liu, decided she could no longer make the numbers work. It was not a dramatic collapse. There was no single catastrophe, no flood, no fire, no pandemic-era pivot that failed. It was, she said, more like a long exhalation.</p>
|
||||
<p>"The books that used to sell two thousand copies now sell four hundred," she told me, standing behind a counter stacked with returns. "And the books that sell a hundred thousand still sell a hundred thousand. The middle just — left."</p>
|
||||
<p>Liu's observation, echoed by dozens of booksellers, agents, and editors I spoke with over six months of reporting, describes a structural shift in American publishing that has accelerated sharply since 2022. The "middle shelf" — the physical and metaphorical space where literary fiction, serious nonfiction, and debut authors once found their audience — has contracted to a degree that many in the industry describe as existential.</p>
|
||||
<p>The data bears this out. According to figures compiled by the Association of American Publishers and cross-referenced with BookScan point-of-sale data, the number of titles selling between 2,000 and 20,000 copies annually has declined by 34 percent since 2019. Over the same period, the number of titles selling more than 100,000 copies has increased by 11 percent. The top is growing; the middle is vanishing.</p>
|
||||
</BodyText>
|
||||
|
||||
<PullQuote weight="High" author="Margaret Liu, bookseller" align="center" style={{ margin: '2.5rem 0' }}>
|
||||
The books that used to sell two thousand copies now sell four hundred. The middle just — left.
|
||||
</PullQuote>
|
||||
|
||||
<BodyText weight="High">
|
||||
<p>For readers, the consequences are subtle but cumulative. The debut novel that might have found ten thousand readers in 2015 now finds three thousand — or never gets published at all. The second book, historically the most precarious moment in a literary career, has become a cliff edge. Agents report that "second book syndrome" has evolved from a creative challenge into an economic one: publishers increasingly decline to offer contracts for follow-up works unless the debut exceeded expectations.</p>
|
||||
<p>"I had three clients last year whose publishers simply said no to book two," said Rachel Mendelson, a literary agent in New York. "Not because the books were bad. Because the sales data from book one didn't justify the advance. These are talented writers with good reviews and real readers. But 'real readers' now means something different to a P&L spreadsheet."</p>
|
||||
<p>The causes are multiple and mutually reinforcing. The consolidation of major publishers into four global conglomerates has concentrated decision-making power among fewer acquiring editors, each under greater pressure to justify investments with projected returns. The rise of algorithmic recommendation — on Amazon, on social media, on podcast charts — has created winner-take-all dynamics that reward existing visibility over literary merit. And the economic pressures on readers themselves, facing higher costs of living and competing demands on attention, have made the "safe bet" of a known author or a viral recommendation more attractive than the gamble of an unfamiliar name.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '2rem 0' }} />
|
||||
|
||||
<BodyText weight="High">
|
||||
<p>The human cost is difficult to quantify but impossible to ignore. I spoke with fourteen mid-career authors — writers with two to five published books, strong reviews, and modest but loyal readerships — about their financial situations. Twelve reported that their writing income had declined in real terms over the past five years. Nine had taken on additional employment. Four had effectively stopped writing new books, though none had publicly announced retirement.</p>
|
||||
<p>"I don't want to sound self-pitying," said one novelist, who asked not to be named because she feared alienating her publisher. "I knew this wasn't going to make me rich. But I thought it would let me keep doing it. That's what's changed. It's not about wealth. It's about viability."</p>
|
||||
<p>The phrase "viability" recurred in nearly every conversation. Not the viability of literature as an art form — no one doubted that — but the viability of a life organized around producing it. The distinction matters. Great books will continue to be written. But the ecosystem that once supported a broad class of working writers, allowing them to develop over multiple books and find their audience gradually, is contracting faster than anyone predicted.</p>
|
||||
</BodyText>
|
||||
|
||||
<PullQuote weight="Medium" author="Anonymous novelist" align="center" style={{ margin: '2.5rem 0' }}>
|
||||
I knew this wasn't going to make me rich. But I thought it would let me keep doing it. That's what's changed.
|
||||
</PullQuote>
|
||||
|
||||
<BodyText weight="High">
|
||||
<p>Independent publishers have partially filled the gap. Small presses like Graywolf, Coffee House, Tin House, and Catapult have expanded their lists and taken on authors who might previously have published with major houses. But their advances are smaller, their marketing budgets thinner, and their distribution reach narrower. An author moving from a Big Four imprint to an independent press typically sees their print run cut by half or more.</p>
|
||||
<p>"We're doing important work," said one independent publisher, "but we can't replace what's been lost. We're a lifeboat, not a cruise ship."</p>
|
||||
<p>The question facing American letters is whether this contraction is cyclical or structural — whether the middle shelf will eventually recover as reading habits shift, or whether the current configuration represents a new permanent state. Most industry observers I spoke with leaned toward the latter view, though several noted that predictions about publishing have a long history of being wrong.</p>
|
||||
<p>What seems clear is that the current moment demands new thinking about how literary culture sustains itself. The old model — in which publishers cross-subsidized risky literary work with profitable commercial titles — depended on a middle tier that generated modest but reliable returns. Without that middle, the cross-subsidy breaks down, and each book must justify itself independently. In such a world, the incentive to publish only sure things becomes overwhelming.</p>
|
||||
<p>Margaret Liu closed her bookstore on a Tuesday in March. The middle shelves, she noted, were the first to empty. The bestsellers went last.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="double" style={{ margin: '3rem 0 1rem' }} />
|
||||
<div style={{ fontFamily: 'var(--font-family-meta)', fontSize: '12px', color: 'var(--nui-text-muted)', fontStyle: 'italic' }}>
|
||||
Catherine Ashworth is a staff writer covering publishing and literary culture. Additional reporting by James Okafor.
|
||||
</div>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
'use client';
|
||||
import { Layout, Section, Article, Rule, BodyText, Figure } from '@newspaperui/components';
|
||||
|
||||
const jp = { fontFamily: 'var(--font-family-cjk-jp)' };
|
||||
const jpAccent = { color: 'var(--nui-accent-ink-blue)' };
|
||||
|
||||
export default function JpHorizontal() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="1280px" padding="1.5rem 1rem">
|
||||
{/* 報頭 */}
|
||||
<header style={{
|
||||
textAlign: 'center',
|
||||
borderTop: '3px solid var(--nui-text-primary)',
|
||||
borderBottom: '1px solid var(--nui-rule-decorative)',
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '0.5rem',
|
||||
}}>
|
||||
<h1 style={{
|
||||
...jp,
|
||||
fontSize: '72px',
|
||||
fontWeight: 900,
|
||||
margin: 0,
|
||||
letterSpacing: '0.15em',
|
||||
lineHeight: 1,
|
||||
color: 'var(--nui-text-primary)',
|
||||
}}>朝日新聞</h1>
|
||||
<div style={{
|
||||
...jp,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
fontSize: '11px',
|
||||
color: 'var(--nui-text-secondary)',
|
||||
padding: '0.5rem 1rem',
|
||||
borderTop: '1px solid var(--nui-rule-hairline)',
|
||||
marginTop: '0.5rem',
|
||||
}}>
|
||||
<span>第48721号</span>
|
||||
<span>令和8年（2026年）5月19日 火曜日</span>
|
||||
<span>朝刊 · 14版</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 一面トップ */}
|
||||
<Section columns={24} gap="1rem" style={{ marginTop: '1rem', paddingBottom: '1rem', borderBottom: '2px solid var(--nui-rule-decorative)' }}>
|
||||
<Article span={24}>
|
||||
<div style={{ ...jp, ...jpAccent, fontSize: '13px', fontWeight: 700, marginBottom: '0.5rem', textAlign: 'center' }}>【速報】</div>
|
||||
<h2 style={{ ...jp, fontSize: '48px', fontWeight: 900, lineHeight: 1.15, color: 'var(--nui-text-primary)', textAlign: 'center', margin: 0 }}>
|
||||
歴史的通商協定が成立 23カ国が署名
|
||||
</h2>
|
||||
<h3 style={{ ...jp, fontSize: '20px', fontWeight: 500, lineHeight: 1.5, color: 'var(--nui-text-secondary)', textAlign: 'center', margin: '0.5rem 0 1rem 0' }}>
|
||||
関税・労働・排出削減の包括枠組み 批准手続きへ
|
||||
</h3>
|
||||
<div style={{ ...jp, textAlign: 'center', fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
|
||||
ブリュッセル＝山田太郎、佐藤花子
|
||||
</div>
|
||||
|
||||
<Figure
|
||||
src="https://images.unsplash.com/photo-1577962917302-cd874c4e31d2?auto=format&fit=crop&w=1200&q=80"
|
||||
alt="署名式の様子"
|
||||
caption="協定に署名する各国代表。ブリュッセルの会議場で19日未明。"
|
||||
credit="AP"
|
||||
/>
|
||||
|
||||
<BodyText weight="High" columns={3} style={{ ...jp, marginTop: '1rem' }}>
|
||||
<p>【ブリュッセル＝山田太郎】11日間にわたる交渉の末、23カ国の代表団は19日未明、関税、労働基準、温室効果ガス排出削減を包括する通商枠組み協定に署名した。各国議会の批准を経て発効する見通しで、分析筋は「一世代で最も重要な国際経済協調の成果」と評価している。</p>
|
||||
<p>協定の柱は三つ。第一に関税表の統一、第二に共通の労働最低基準の設定、第三に2040年までの排出削減経路への拘束力ある約束だ。重工業分野では2028年から段階的炭素賦課金が導入され、その収入は低炭素製造業への投資基金に充てられる。</p>
|
||||
<p>市場は穏やかな楽観で反応した。大陸総合指数は1.2％上昇し、通貨は対ドルで0.7％高。交渉期間中に上昇していた債券利回りは、交渉開始前の水準に戻った。資本財セクターが上昇を主導した。</p>
|
||||
<p>国内政治の反応は分かれた。協定の労働条項——有給休暇と団体交渉権の最低基準を定める——は労働組合連合から即座に歓迎されたが、商工会議所からは中小企業のコンプライアンス負担への懸念が示された。</p>
|
||||
<p>3カ国の議会指導者は夏季休会前の批准を示唆した。しかし2カ国の政府は事前に国民投票を実施する意向を示しており、手続きは秋まで延びる可能性がある。貿易研究センターは、最も楽観的なシナリオでも完全実施には少なくとも18カ月を要すると試算している。</p>
|
||||
<p>一般の旅行者や消費者にとって、当面の影響は限定的だ。国境手続きや製品基準は批准まで現行規定が適用される。しかし交渉担当者らは、より長い射程こそが重要だと主張する——歴史的に対立してきた隣国同士が、最も重要な10年間の共通ルールに合意したことの意義を。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
{/* 二面：3栏 */}
|
||||
<Section columns={24} gap="1rem" style={{ marginTop: '1rem', paddingBottom: '1rem', borderBottom: '1px solid var(--nui-rule-decorative)' }}>
|
||||
<Article span={8} style={{ background: 'var(--nui-bg-surface)', padding: '1rem', borderLeft: '3px solid var(--nui-accent-ink-blue)' }}>
|
||||
<div style={{ ...jp, ...jpAccent, fontSize: '12px', fontWeight: 700, marginBottom: '0.75rem', paddingLeft: '0.75rem', borderLeft: '3px solid var(--nui-accent-ink-blue)' }}>政治</div>
|
||||
<h3 style={{ ...jp, fontSize: '20px', fontWeight: 700, lineHeight: 1.35, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>気候法案が参院で全会一致可決</h3>
|
||||
<BodyText weight="Low" style={jp}>
|
||||
<p>数カ月の党派対立と複数回の修正を経て、参議院は昨夜、気候資源法案を全会一致で可決した。法案は低炭素産業への財政支援を強化する専用基金を設立する。</p>
|
||||
<p>支持者はこれを数十年で最も重要な環境立法と評価。反対派は地方財政への圧迫を懸念している。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...jp, fontSize: '16px', fontWeight: 600, lineHeight: 1.35, margin: '0 0 0.4rem 0' }}>都市鉄道3路線が認可</h4>
|
||||
<BodyText weight="Low" style={jp}>
|
||||
<p>市議会は24億ドル規模の都市鉄道拡張計画を承認。新たに3路線を追加し、既存路線のサービス時間を延長する。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...jp, fontSize: '16px', fontWeight: 600, lineHeight: 1.35, margin: '0 0 0.4rem 0' }}>港湾整備事業が着工</h4>
|
||||
<BodyText weight="Low" style={jp}>
|
||||
<p>3年計画で堆積物の浚渫と護岸の再建を実施。地方面。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={8} style={{ background: 'var(--nui-bg-surface)', padding: '1rem', borderLeft: '3px solid var(--nui-accent-ink-blue)' }}>
|
||||
<div style={{ ...jp, ...jpAccent, fontSize: '12px', fontWeight: 700, marginBottom: '0.75rem', paddingLeft: '0.75rem', borderLeft: '3px solid var(--nui-accent-ink-blue)' }}>経済</div>
|
||||
<h3 style={{ ...jp, fontSize: '20px', fontWeight: 700, lineHeight: 1.35, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>製造業PMI、年初来高値を更新</h3>
|
||||
<BodyText weight="Low" style={jp}>
|
||||
<p>統計局が本日発表したデータによると、5月の製造業購買担当者景気指数は52.4に上昇し、5カ月連続で拡大圏内を維持。新規受注と生産指数がともに改善した。</p>
|
||||
<p>アナリストは外需回復と在庫サイクルが製造業の回復を支えていると指摘。ただし中小企業の景況感は大企業に比べ依然弱い。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...jp, fontSize: '16px', fontWeight: 600, lineHeight: 1.35, margin: '0 0 0.4rem 0' }}>テック株が一日で3.7％上昇</h4>
|
||||
<BodyText weight="Low" style={jp}>
|
||||
<p>AI商用化への期待を背景にテクノロジー株が全面高。半導体、クラウドコンピューティング関連が上昇を主導。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={8} style={{ background: 'var(--nui-bg-surface)', padding: '1rem', borderLeft: '3px solid var(--nui-accent-ink-blue)' }}>
|
||||
<div style={{ ...jp, ...jpAccent, fontSize: '12px', fontWeight: 700, marginBottom: '0.75rem', paddingLeft: '0.75rem', borderLeft: '3px solid var(--nui-accent-ink-blue)' }}>文化</div>
|
||||
<h3 style={{ ...jp, fontSize: '20px', fontWeight: 700, lineHeight: 1.35, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>故宮博物院で新展覧会が開幕</h3>
|
||||
<BodyText weight="Low" style={jp}>
|
||||
<p>「シルクロード千年——中央アジア出土文物特別展」が本日、故宮博物院文華殿で開幕。8カ国の博物館から220点の貴重な文物を展示し、紀元前2世紀から14世紀までをカバーする。</p>
|
||||
<p>キュレーターによると、展覧会は「交易路」「信仰」「芸術」「日常」の4セクションに分かれ、多くの文物が初の海外展示となる。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...jp, fontSize: '16px', fontWeight: 600, lineHeight: 1.35, margin: '0 0 0.4rem 0' }}>大学志願者数が過去最高</h4>
|
||||
<BodyText weight="Low" style={jp}>
|
||||
<p>全国統一入試の出願者数が前年比18％増で過去最高を記録。文部科学省は定員拡大で対応する方針。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
{/* 短信欄 */}
|
||||
<Section columns={24} gap="1rem" style={{ marginTop: '1rem' }}>
|
||||
<Article span={24}>
|
||||
<div style={{ ...jp, ...jpAccent, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', paddingLeft: '0.75rem', borderLeft: '3px solid var(--nui-accent-ink-blue)' }}>短信 · 国内外</div>
|
||||
<BodyText weight="Low" columns={4} style={jp}>
|
||||
<p>▶ 日銀は政策金利を据え置いたが、通年のインフレ見通しを下方修正。市場は緩和政策の継続を織り込む。</p>
|
||||
<p>▶ FRB議事要旨で大半の当局者が年内利下げ開始を支持していることが判明。ただし具体的な時期については意見が分かれた。</p>
|
||||
<p>▶ 韓国中央銀行が政策金利を25bp引き下げ。今年初の利下げとなる。</p>
|
||||
<p>▶ インドが新年度予算を発表。インフラとクリーンエネルギーに重点配分。</p>
|
||||
<p>▶ EU首脳会議が支援パッケージで合意。規模は当初案から3割拡大。</p>
|
||||
<p>▶ 交通部が新たな高速道路建設計画を発表。今後5年で8000キロを新設、中西部を重点整備。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
|
||||
const jp = { fontFamily: 'var(--font-family-cjk-jp)' };
|
||||
const jpAccent = { color: 'var(--nui-accent-ink-blue)' };
|
||||
|
||||
export default function JpVertical() {
|
||||
return (
|
||||
<div style={{
|
||||
background: 'var(--nui-bg-page)',
|
||||
color: 'var(--nui-text-body)',
|
||||
padding: '2rem',
|
||||
minHeight: '100vh',
|
||||
}}>
|
||||
{/* 竖排容器 */}
|
||||
<div style={{
|
||||
writingMode: 'vertical-rl',
|
||||
...jp,
|
||||
height: '85vh',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* 報頭（竖排中在最右侧） */}
|
||||
<div style={{
|
||||
borderLeft: '3px solid var(--nui-text-primary)',
|
||||
paddingLeft: '1rem',
|
||||
marginLeft: '2rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
gap: '1rem',
|
||||
}}>
|
||||
<h1 style={{
|
||||
...jp,
|
||||
fontSize: '56px',
|
||||
fontWeight: 900,
|
||||
letterSpacing: '0.2em',
|
||||
lineHeight: 1.2,
|
||||
margin: 0,
|
||||
color: 'var(--nui-text-primary)',
|
||||
}}>朝日新聞</h1>
|
||||
<div style={{ fontSize: '12px', color: 'var(--nui-text-muted)', lineHeight: 1.8 }}>
|
||||
<div>令和八年</div>
|
||||
<div>五月十九日</div>
|
||||
<div>火曜日</div>
|
||||
<div>第48721号</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 一面トップ記事 */}
|
||||
<div style={{
|
||||
borderLeft: '1px solid var(--nui-rule-hairline)',
|
||||
paddingLeft: '1.5rem',
|
||||
marginLeft: '1.5rem',
|
||||
maxHeight: '100%',
|
||||
}}>
|
||||
<div style={{ ...jpAccent, fontSize: '13px', fontWeight: 700, marginBottom: '1rem' }}>【速報】</div>
|
||||
<h2 style={{
|
||||
...jp,
|
||||
fontSize: '36px',
|
||||
fontWeight: 900,
|
||||
lineHeight: 1.4,
|
||||
color: 'var(--nui-text-primary)',
|
||||
margin: '0 0 1rem 0',
|
||||
}}>
|
||||
歴史的通商協定が成立
|
||||
</h2>
|
||||
<h3 style={{
|
||||
...jp,
|
||||
fontSize: '18px',
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.6,
|
||||
color: 'var(--nui-text-secondary)',
|
||||
margin: '0 0 1.5rem 0',
|
||||
}}>
|
||||
二十三カ国が署名 関税・労働・排出削減の包括枠組み
|
||||
</h3>
|
||||
<div style={{ fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
|
||||
ブリュッセル＝山田太郎
|
||||
</div>
|
||||
<div style={{ fontSize: '15px', lineHeight: 2.0, color: 'var(--nui-text-body)' }}>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>十一日間にわたる交渉の末、二十三カ国の代表団は十九日未明、関税、労働基準、温室効果ガス排出削減を包括する通商枠組み協定に署名した。各国議会の批准を経て発効する見通しで、分析筋は「一世代で最も重要な国際経済協調の成果」と評価している。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>協定の柱は三つ。第一に関税表の統一、第二に共通の労働最低基準の設定、第三に二〇四〇年までの排出削減経路への拘束力ある約束だ。重工業分野では二〇二八年から段階的炭素賦課金が導入される。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>市場は穏やかな楽観で反応した。大陸総合指数は一・二パーセント上昇し、通貨は対ドルで〇・七パーセント高。交渉期間中に上昇していた債券利回りは、交渉開始前の水準に戻った。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>国内政治の反応は分かれた。協定の労働条項は労働組合連合から即座に歓迎されたが、商工会議所からは中小企業のコンプライアンス負担への懸念が示された。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>三カ国の議会指導者は夏季休会前の批准を示唆した。しかし二カ国の政府は事前に国民投票を実施する意向を示しており、手続きは秋まで延びる可能性がある。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 二面記事 */}
|
||||
<div style={{
|
||||
borderLeft: '1px solid var(--nui-rule-hairline)',
|
||||
paddingLeft: '1.5rem',
|
||||
marginLeft: '1.5rem',
|
||||
maxHeight: '100%',
|
||||
}}>
|
||||
<div style={{ ...jpAccent, fontSize: '12px', fontWeight: 700, marginBottom: '0.75rem' }}>政治</div>
|
||||
<h3 style={{ ...jp, fontSize: '22px', fontWeight: 700, lineHeight: 1.4, color: 'var(--nui-text-primary)', margin: '0 0 0.75rem 0' }}>
|
||||
気候法案が参院で全会一致可決
|
||||
</h3>
|
||||
<div style={{ fontSize: '14px', lineHeight: 2.0, color: 'var(--nui-text-body)' }}>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>数カ月の党派対立と複数回の修正を経て、参議院は昨夜、気候資源法案を全会一致で可決した。法案は低炭素産業への財政支援を強化する専用基金を設立する。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>支持者はこれを数十年で最も重要な環境立法と評価する一方、反対派は地方財政への圧迫を懸念している。法案は来月一日から施行される。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 三面記事 */}
|
||||
<div style={{
|
||||
borderLeft: '1px solid var(--nui-rule-hairline)',
|
||||
paddingLeft: '1.5rem',
|
||||
marginLeft: '1.5rem',
|
||||
maxHeight: '100%',
|
||||
}}>
|
||||
<div style={{ ...jpAccent, fontSize: '12px', fontWeight: 700, marginBottom: '0.75rem' }}>経済</div>
|
||||
<h3 style={{ ...jp, fontSize: '22px', fontWeight: 700, lineHeight: 1.4, color: 'var(--nui-text-primary)', margin: '0 0 0.75rem 0' }}>
|
||||
製造業ＰＭＩ年初来高値
|
||||
</h3>
|
||||
<div style={{ fontSize: '14px', lineHeight: 2.0, color: 'var(--nui-text-body)' }}>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>統計局が本日発表したデータによると、五月の製造業購買担当者景気指数は五二・四に上昇し、五カ月連続で拡大圏内を維持した。新規受注と生産指数がともに改善。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>アナリストは外需回復と在庫サイクルが製造業の回復を支えていると指摘する。ただし中小企業の景況感は大企業に比べ依然として弱い状況が続いている。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 四面：文化 */}
|
||||
<div style={{
|
||||
borderLeft: '1px solid var(--nui-rule-hairline)',
|
||||
paddingLeft: '1.5rem',
|
||||
marginLeft: '1.5rem',
|
||||
maxHeight: '100%',
|
||||
}}>
|
||||
<div style={{ ...jpAccent, fontSize: '12px', fontWeight: 700, marginBottom: '0.75rem' }}>文化</div>
|
||||
<h3 style={{ ...jp, fontSize: '22px', fontWeight: 700, lineHeight: 1.4, color: 'var(--nui-text-primary)', margin: '0 0 0.75rem 0' }}>
|
||||
故宮博物院で新展覧会
|
||||
</h3>
|
||||
<div style={{ fontSize: '14px', lineHeight: 2.0, color: 'var(--nui-text-body)' }}>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>「シルクロード千年」特別展が本日開幕。八カ国の博物館から二百二十点の貴重な文物を展示し、紀元前二世紀から十四世紀までをカバーする大規模展覧会。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>キュレーターによると展覧会は「交易路」「信仰」「芸術」「日常」の四セクションに分かれ、多くの文物が初の海外展示となる。九月三十日まで。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 五面：短信 */}
|
||||
<div style={{
|
||||
borderLeft: '1px solid var(--nui-rule-hairline)',
|
||||
paddingLeft: '1.5rem',
|
||||
marginLeft: '1.5rem',
|
||||
maxHeight: '100%',
|
||||
}}>
|
||||
<div style={{ ...jpAccent, fontSize: '12px', fontWeight: 700, marginBottom: '0.75rem' }}>短信</div>
|
||||
<div style={{ fontSize: '13px', lineHeight: 2.0, color: 'var(--nui-text-body)' }}>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>▼日銀は政策金利を据え置き。通年インフレ見通しを下方修正。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>▼ＦＲＢ議事要旨で年内利下げ支持が多数と判明。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>▼韓国中銀が二五ｂｐ利下げ。今年初。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>▼インドが新年度予算発表。インフラ重点。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>▼ＥＵ首脳会議が支援策で合意。三割増額。</p>
|
||||
<p style={{ margin: '0 0 0.5em 0', textIndent: '1em' }}>▼大学志願者数が過去最高。前年比一八％増。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
import Link from 'next/link';
|
||||
import { Layout, Section, Article, Headline, Subhead, Kicker } from '@newspaperui/components';
|
||||
|
||||
const blocks = [
|
||||
{
|
||||
href: '/blocks/zh-frontpage',
|
||||
lang: 'CHINESE · 中文',
|
||||
title: '人民周报 · 头版',
|
||||
description: '思源宋体 + 克制朱红 + 紧凑排版。中文报纸传统视觉语言，板块密集，信息密度高。',
|
||||
color: '#CC2929',
|
||||
},
|
||||
{
|
||||
href: '/blocks/zh-feature',
|
||||
lang: 'CHINESE · 中文',
|
||||
title: '副刊 · 文化专题',
|
||||
description: '人物访谈与文化评论。深度内容排版，引用密集，多用 Quote 组件。',
|
||||
color: '#CC2929',
|
||||
},
|
||||
{
|
||||
href: '/blocks/en-feature',
|
||||
lang: 'ENGLISH',
|
||||
title: 'The Daily Chronicle · Long-form Feature',
|
||||
description: 'Atlantic / New Yorker style long-form editorial. Single-column reading mode with multiple PullQuotes.',
|
||||
color: '#1A1A1A',
|
||||
},
|
||||
{
|
||||
href: '/blocks/jp-horizontal',
|
||||
lang: 'JAPANESE · 日本語',
|
||||
title: '朝日新聞 · 横組み',
|
||||
description: 'Modern horizontal Japanese newspaper layout. Noto Serif JP, 24-column grid.',
|
||||
color: '#1B2A4A',
|
||||
},
|
||||
{
|
||||
href: '/blocks/jp-vertical',
|
||||
lang: 'JAPANESE · 日本語',
|
||||
title: '朝日新聞 · 縦組み',
|
||||
description: 'Traditional vertical writing-mode (vertical-rl) Japanese layout.',
|
||||
color: '#1B2A4A',
|
||||
},
|
||||
{
|
||||
href: '/blocks/zh-editorial',
|
||||
lang: 'CHINESE · 中文',
|
||||
title: '社论 · 时事评论',
|
||||
description: '双栏对开评论文章。引用密集，配以专家点评与读者来信。',
|
||||
color: '#CC2929',
|
||||
},
|
||||
];
|
||||
|
||||
export default function BlocksIndex() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="1400px" padding="3rem 2rem 4rem">
|
||||
<Section columns={24} gap="2rem">
|
||||
<Article span={24}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Kicker>Production-grade Blocks · Copy & Paste</Kicker>
|
||||
</div>
|
||||
<Headline weight="High" align="center">
|
||||
Newspaper Blocks
|
||||
</Headline>
|
||||
<Subhead weight="Medium" style={{ textAlign: 'center' }}>
|
||||
6 complete newspaper layouts in Chinese, English, and Japanese — ready to copy.
|
||||
</Subhead>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
<Section columns={24} gap="2rem" style={{ marginTop: '3rem' }}>
|
||||
{blocks.map((block, idx) => (
|
||||
<Article key={block.href} span={24} style={{ marginBottom: '1.5rem' }}>
|
||||
<Link href={block.href} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
|
||||
<div style={{
|
||||
border: '1px solid var(--nui-rule-hairline)',
|
||||
background: 'var(--nui-bg-surface)',
|
||||
padding: '2rem',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 3fr',
|
||||
gap: '2rem',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<div style={{ borderRight: '1px solid var(--nui-rule-hairline)', paddingRight: '2rem' }}>
|
||||
<div style={{
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
fontVariantCaps: 'small-caps',
|
||||
letterSpacing: '0.08em',
|
||||
color: block.color,
|
||||
marginBottom: '0.5rem',
|
||||
}}>
|
||||
{block.lang}
|
||||
</div>
|
||||
<div style={{
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '11px',
|
||||
color: 'var(--nui-text-muted)',
|
||||
}}>
|
||||
Block #{String(idx + 1).padStart(2, '0')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{
|
||||
fontFamily: 'var(--font-family-display)',
|
||||
fontSize: '28px',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.15,
|
||||
color: 'var(--nui-text-primary)',
|
||||
margin: '0 0 0.5rem 0',
|
||||
}}>
|
||||
{block.title}
|
||||
</h3>
|
||||
<p style={{
|
||||
fontFamily: 'var(--font-family-body)',
|
||||
fontSize: '15px',
|
||||
lineHeight: 1.5,
|
||||
color: 'var(--nui-text-body)',
|
||||
margin: 0,
|
||||
}}>
|
||||
{block.description}
|
||||
</p>
|
||||
<div style={{
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
color: 'var(--nui-accent-primary)',
|
||||
marginTop: '0.75rem',
|
||||
fontVariantCaps: 'small-caps',
|
||||
letterSpacing: '0.06em',
|
||||
}}>
|
||||
View block →
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Article>
|
||||
))}
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
'use client';
|
||||
import { Layout, Section, Article, Rule, BodyText, Quote } from '@newspaperui/components';
|
||||
|
||||
const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
|
||||
const cnRed = { color: 'var(--nui-accent-cjk-red)' };
|
||||
|
||||
export default function ZhEditorial() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="1200px" padding="2rem 1.5rem">
|
||||
{/* 社论报头 */}
|
||||
<header style={{
|
||||
borderTop: '3px solid var(--nui-text-primary)',
|
||||
borderBottom: '1px solid var(--nui-rule-hairline)',
|
||||
padding: '0.75rem 0',
|
||||
marginBottom: '2rem',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'baseline',
|
||||
}}>
|
||||
<h1 style={{ ...cn, fontSize: '28px', fontWeight: 900, margin: 0, letterSpacing: '0.1em' }}>社 论</h1>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '14px', fontWeight: 600 }}>· 时事评论 ·</div>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)' }}>2026 年 5 月 19 日 · A2 版</div>
|
||||
</header>
|
||||
|
||||
{/* 双栏对开 */}
|
||||
<Section columns={24} gap="2rem">
|
||||
{/* 左侧：主社论 */}
|
||||
<Article span={14} style={{ borderRight: '1px solid var(--nui-rule-hairline)', paddingRight: '2rem' }}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}>本报社论</div>
|
||||
<h2 style={{ ...cn, fontSize: '36px', fontWeight: 900, lineHeight: 1.2, color: 'var(--nui-text-primary)', margin: '0 0 0.75rem 0' }}>
|
||||
以规则之力重塑大陆经济秩序
|
||||
</h2>
|
||||
<h3 style={{ ...cn, fontSize: '18px', fontWeight: 500, lineHeight: 1.5, color: 'var(--nui-text-secondary)', margin: '0 0 1.5rem 0' }}>
|
||||
——论二十三国贸易框架协议的历史意义与现实挑战
|
||||
</h3>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1.5rem' }}>
|
||||
本报评论员
|
||||
</div>
|
||||
|
||||
<BodyText weight="High" columns={2} dropCap style={cn}>
|
||||
<p>昨日签署的二十三国贸易框架协议，是近一代人以来国际经济治理领域最具雄心的制度性尝试。它不仅仅是一份关税减让清单，更是一套涵盖劳工标准、碳排放约束和争端解决机制的综合规则体系。在全球化遭遇逆风、单边主义抬头的当下，这份协议的达成本身就是一个值得珍视的信号。</p>
|
||||
<p>然而，签署只是起点。从文本到实践，从承诺到执行，中间横亘着巨大的制度落差。过去二十年的国际协议史反复证：宏大的框架如果缺乏有效的执行机制和国内政治支撑，最终往往沦为外交辞令的堆砌。</p>
|
||||
<p>本次协议的最大亮点在于其争端解决机制的硬约束力。九人仲裁小组的设置、跨区域提名的平衡设计、对超过两千万单位商业纠纷的最终裁决权——这些条款赋予了协议真正的「牙齿」。但也正因如此，它将面临来自各国国内利益集团的最强烈抵制。</p>
|
||||
<p>碳费机制是另一个关键考验。2028 年的启动时间表给了产业界三年的准备期，这在政治上是必要的妥协，但在气候科学的时间尺度上可能过于宽裕。环境团体的担忧并非没有道理：每一年的延迟都意味着更高的累积排放和更陡峭的未来减排曲线。</p>
|
||||
<p>劳工条款的落地同样充满挑战。最低假期天数和集体谈判权的扩展在纸面上令人鼓舞，但在劳动力市场高度分化的现实中，如何确保这些标准不被变通规避，需要各国劳动监察体系的实质性升级。</p>
|
||||
<p>对中小企业的影响尤需关注。协议虽然设置了三年碳费豁免期，但劳工标准的即时生效意味着合规成本的前置。如果缺乏配套的技术援助和过渡支持，中企业可能成为制度转型的最大承压者。</p>
|
||||
<p>我们认为，这份协议的历史意义不在于它解决了所有问题，而在于它建立了一个可以持续解决问题的框架。规则的力量不在于完美，而在于可预期、可执行、可修正。在这个意义上，二十三国迈出的这一步，值得审慎的乐观。</p>
|
||||
<p>但乐观必须伴随清醒。未来十八个月的批准进程将是真正的考验。两国公投的不确定性、产业游说的压力、民粹政治的干扰——任何一个环节的失败都可能让整个框架功亏一篑。各国政府需要以远超签署仪式的政治勇气，去完成从承诺到法律的最后一公里。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
{/* 右侧：专家评论 + 读者来信 */}
|
||||
<Article span={10}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}>专家视点</div>
|
||||
<h3 style={{ ...cn, fontSize: '24px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>
|
||||
碳费机制的经济学逻辑
|
||||
</h3>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
|
||||
张明远 · 清华大学公共政策学院教授
|
||||
</div>
|
||||
<BodyText weight="Medium" style={cn}>
|
||||
<p>本次协议中的碳费机制采用了「阶梯式」设计，这在经济学上是合理的。它避免了一步到位可能带来的产业冲击，同时通过逐年递增的费率向市场传递了明确的长期信号。</p>
|
||||
<p>关键在于价格底线的设定。每吨四十五单位的底价高于当前多数国内碳市场的实际成交价，这意味着协议将实质性地推高高排放行业的生产成本。但如果配合投资基金的有效运作，这些成本可以转化为低碳转型的加速器。</p>
|
||||
<p>需要警惕的是碳泄漏风险。如果协议覆盖范围之外的经济体不采取类似措施，高排放产业可能向非签约国转移，导致全球排放总量不降反升。边境碳调节机制的设计将是下一阶段谈判的核心议题。</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1.5rem 0' }} />
|
||||
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}>专家视点</div>
|
||||
<h3 style={{ ...cn, fontSize: '24px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>
|
||||
劳工条款的政治经济学
|
||||
</h3>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
|
||||
李思琪 · 北京大学国际关系学院副教授
|
||||
</div>
|
||||
<BodyText weight="Medium" style={cn}>
|
||||
<p>劳工条款的纳入是本次协议最具政治敏感性的部分。它反映了一个深层趋势：贸易协议正从纯粹的市场准入工具，演变为社会标准的跨国协调平台。</p>
|
||||
<p>但这也带来了合法性问题。谁有权为另一个国家的工人设定最低标准？这个问题在发展水平差异显著的签约国之间尤为尖锐。协议的过渡条款试图缓解这一张力，但根本矛盾不会因为技术性安排而消失。</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1.5rem 0' }} />
|
||||
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em' }}>读者来信</div>
|
||||
<Quote variant="block" weight="Medium" style={cn}>
|
||||
<p>作为一名在制造业工作了二十年的工程师，我对协议中碳费条款既期待又担忧。期待的是它终于给了减排一个明确的价格信号；担忧的是我们工厂的设备更新周期至少需要五年，三年豁免期可能不够。希望政府在落实时能考虑到一线企业的实际困难。</p>
|
||||
</Quote>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
|
||||
—— 读者 刘建国 · 河北唐山
|
||||
</div>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Quote variant="block" weight="Medium" style={cn}>
|
||||
<p>作为一名大学生，我为这份协议感到振奋。它证明了多边主义在这个时代仍然是可能的。但我也想问：年轻人的声音在这些谈判中被听到了吗？气候问题最终影响的是我们这一代人的未来。</p>
|
||||
</Quote>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
|
||||
—— 读者 陈思远 · 上海
|
||||
</div>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Quote variant="block" weight="Medium" style={cn}>
|
||||
<p>社论说得好：「规则的力量不在于完美，而于可预期、可执行、可修正。」这句话同样适用于我们的国内改革。希望这份协议能成为推动国内制度建设的外部动力。</p>
|
||||
</Quote>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', marginTop: '0.5rem' }}>
|
||||
—— 读者 王芳 · 北京
|
||||
</div>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
'use client';
|
||||
import { Layout, Section, Article, BodyText, Quote, Figure, PullQuote } from '@newspaperui/components';
|
||||
|
||||
const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
|
||||
const cnRed = { color: 'var(--nui-accent-cjk-red)' };
|
||||
|
||||
export default function ZhFeature() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="1200px" padding="2rem 1.5rem">
|
||||
{/* 副刊报头 */}
|
||||
<header style={{
|
||||
borderTop: '2px solid var(--nui-text-primary)',
|
||||
borderBottom: '1px solid var(--nui-rule-hairline)',
|
||||
padding: '0.75rem 0',
|
||||
marginBottom: '2rem',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'baseline',
|
||||
}}>
|
||||
<h1 style={{ ...cn, fontSize: '32px', fontWeight: 900, margin: 0, letterSpacing: '0.05em' }}>副 刊</h1>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '14px', fontWeight: 600 }}>· 文化专题 ·</div>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)' }}>2026 年 5 月 19 日 · C 叠</div>
|
||||
</header>
|
||||
|
||||
{/* 专题主标题 */}
|
||||
<Section columns={24} gap="2rem" style={{ marginBottom: '2rem' }}>
|
||||
<Article span={24}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '13px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.15em', textAlign: 'center' }}>【人物访谈】</div>
|
||||
<h2 style={{ ...cn, fontSize: '52px', fontWeight: 900, lineHeight: 1.15, color: 'var(--nui-text-primary)', textAlign: 'center', margin: 0 }}>
|
||||
从敦煌到威尼斯：一位策展人的丝路三十年
|
||||
</h2>
|
||||
<h3 style={{ ...cn, fontSize: '20px', fontWeight: 500, lineHeight: 1.5, color: 'var(--nui-text-secondary)', textAlign: 'center', margin: '0.75rem 0 1rem 0', maxWidth: '900px', marginLeft: 'auto', marginRight: 'auto' }}>
|
||||
——专访故宫博物院特聘研究员、丝路特展总策展人 林文渊
|
||||
</h3>
|
||||
<div style={{ ...cn, textAlign: 'center', fontSize: '13px', color: 'var(--nui-text-muted)', marginBottom: '0.5rem' }}>
|
||||
本报记者 陈雪 · 摄影 黄翔
|
||||
</div>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
{/* 主图 + 介绍 */}
|
||||
<Section columns={24} gap="2rem" style={{ marginBottom: '2rem' }}>
|
||||
<Article span={12}>
|
||||
<Figure
|
||||
src="https://images.unsplash.com/photo-1582408921715-18e7806365c1?auto=format&fit=crop&w=1200&q=80"
|
||||
alt="林文渊在工作室"
|
||||
caption="林文渊在故宫博物院文华殿筹备中。"
|
||||
credit="摄影 黄翔"
|
||||
/>
|
||||
</Article>
|
||||
<Article span={12}>
|
||||
<BodyText weight="High" dropCap style={cn}>
|
||||
<p>五月初的北京，故宫文华殿外的玉兰已尽落，游客在午后的光线里缓步穿过太和门广场。林文渊背着帆布包穿过这条她走了三十年的路，停下来朝展厅深处望了一眼，脸上闪过一丝不易察觉的疲惫。</p>
|
||||
<p>「最难的不是把文物搬过来，」她说，「是让人看懂它们是怎么被人用过、被人爱过的。」</p>
|
||||
<p>这句话来自一位与丝绸之路打了三十年交道的研究者。她主持过敦煌、撒马尔罕、长安、君士坦丁堡的多次联合考古，参与过威尼斯比恩纳莱、大都会博物馆的中亚特展。本次故宫的「丝路千年」是她回国后主持的首个大型综合展。</p>
|
||||
<p>访谈在文华殿东侧的临时工作室进行，墙上贴满了文物清单和展柜布置图。她身后摆着一只复刻的唐代鎏金银壶，盖子半开，内壁还能看到当初为对照测量留下的标记线。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
{/* 访谈正文（双栏） */}
|
||||
<Section columns={24} gap="2rem" style={{ marginBottom: '2rem' }}>
|
||||
<Article span={24}>
|
||||
<BodyText weight="High" columns={2} style={cn}>
|
||||
<p style={{ ...cnRed, fontWeight: 700, marginBottom: '0.5rem' }}>记者：你最初是怎么走上这条路的？</p>
|
||||
<p>林文渊（笑）：很多人以为我是因为家里有什么传承。其实没有。我父亲是中学物理老师，母亲在邮局工作。我十八岁第一次去敦煌，是因为大学历史系的暑期考察。第一天进莫高窟，我在二百二十窟里站了两个小时没出来——壁画上画的胡商、骆驼、香料、织物，全是我从来没见过的世界。从那一刻起，我就决定这辈子要研究这些东西。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={24}>
|
||||
<PullQuote weight="High" align="center" author="林文渊" style={{ margin: '1rem 0 2rem' }}>
|
||||
真正的丝绸之路不是一条路，是一千条小路、一万次相遇、一亿次误解之后还能继续的对话。
|
||||
</PullQuote>
|
||||
</Article>
|
||||
|
||||
<Article span={24}>
|
||||
<BodyText weight="High" columns={2} style={cn}>
|
||||
<p style={{ ...cnRed, fontWeight: 700, marginBottom: '0.5rem' }}>记者：从敦煌到威尼斯，三十年间最大的变化是什么？</p>
|
||||
<p>林文渊：是「连接」的概念。九十年代我们做研究，很多东西要靠纸质书信跨大陆传递，一个细节核对要花半年。现在数据库共享了，三维扫描数据可以即时调用，二十国研究者可以同时在一个虚拟展厅里讨论同一件文物。但同时，我们也意识到——技术让我们更快接触到东西，却没让我们更慢地去理解它。</p>
|
||||
<p>过去看一件唐代鎏金银壶，研究者会用一周时间去琢磨它的纹样、铸造工艺、流转路径，今天可能五分钟读完一篇报告就「了解」了。这是个矛盾——我们拥有了从未有过的工具，却失去了过去那种与物体共处的耐心。</p>
|
||||
<p>所以我现在做展览，特别注意「停下来」的设计。每个主要展品前面都有座位，旁边墙面上是手写笔记体的释读文字，不是冷冰冰的标签。我希望观众在那里待二十分钟，而不是五秒。</p>
|
||||
|
||||
<p style={{ ...cnRed, fontWeight: 700, marginTop: '1rem', marginBottom: '0.5rem' }}>记者：本次展览中你最想推荐的一件文物？</p>
|
||||
<p>林文渊：是从乌兹别克斯坦借来的一件粟特银盘，公元七世纪的作品。盘心刻着一位骑马武士，但你仔细看，他的马具是萨珊样式，盔甲是拜占庭样式，旁边的装饰是中国唐代的卷草纹。一件器物身上汇集了三个文明的痕迹。这就是丝路的真正含义——不是从 A 到 B 的物流路线，而是文明之间从未停止的对话。</p>
|
||||
|
||||
<p style={{ ...cnRed, fontWeight: 700, marginTop: '1rem', marginBottom: '0.5rem' }}>记者：对年轻一代研究者，你有什么想说的？</p>
|
||||
<p>林文渊：愿意花笨功夫。这个领域诱惑很多——出国机会多、跨界合作多、被媒体关注的概率也比其他人文学科高。但所有真正有价值的研究，归根到底都是反复地、长时间地、安静地与材料相处。这是无法外包给任何工具的事情。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
{/* 尾声引语 */}
|
||||
<Section columns={24} gap="2rem" style={{ marginTop: '2rem', paddingTop: '2rem', borderTop: '1px solid var(--nui-rule-hairline)' }}>
|
||||
<Article span={24}>
|
||||
<Quote variant="block" weight="High" style={{ ...cn, textAlign: 'center', maxWidth: '700px', margin: '0 auto', borderLeft: 'none' }}>
|
||||
访谈结束时，文华殿的灯渐次熄灭。她最后看了一眼那只半开盖子的银壶。「它在等明天。」她说。
|
||||
</Quote>
|
||||
<div style={{ ...cn, fontSize: '12px', color: 'var(--nui-text-muted)', textAlign: 'center', marginTop: '1rem', letterSpacing: '0.1em' }}>
|
||||
「丝路千年」特展即日起至九月三十日 · 故宫博物院文华殿
|
||||
</div>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
'use client';
|
||||
import { Layout, Section, Article, Rule, BodyText, Figure } from '@newspaperui/components';
|
||||
|
||||
const cn = { fontFamily: 'var(--font-family-cjk-serif)' };
|
||||
const cnRed = { color: 'var(--nui-accent-cjk-red)' };
|
||||
|
||||
export default function ZhFrontPage() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="1280px" padding="1.5rem 1rem">
|
||||
{/* 报头 */}
|
||||
<header style={{
|
||||
textAlign: 'center',
|
||||
borderTop: '4px solid var(--nui-accent-cjk-red)',
|
||||
borderBottom: '1px solid var(--nui-rule-decorative)',
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '0.5rem',
|
||||
}}>
|
||||
<div style={{
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '11px',
|
||||
color: 'var(--nui-text-muted)',
|
||||
letterSpacing: '0.2em',
|
||||
marginBottom: '0.25rem',
|
||||
}}>RENMIN ZHOUBAO · 中国第一周报</div>
|
||||
<h1 style={{
|
||||
...cn,
|
||||
...cnRed,
|
||||
fontSize: '88px',
|
||||
fontWeight: 900,
|
||||
margin: 0,
|
||||
letterSpacing: '0.1em',
|
||||
lineHeight: 1,
|
||||
}}>人民周报</h1>
|
||||
<div style={{
|
||||
...cn,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
fontSize: '12px',
|
||||
color: 'var(--nui-text-secondary)',
|
||||
padding: '0.5rem 1rem',
|
||||
borderTop: '1px solid var(--nui-rule-hairline)',
|
||||
marginTop: '0.5rem',
|
||||
}}>
|
||||
<span>第 2026 期 · 总第 5891 期</span>
|
||||
<span>2026 年 5 月 19 日 · 星期二 · 农历四月初三</span>
|
||||
<span>每份 5 元 · 全年 260 元</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 版面导航条 */}
|
||||
<div style={{
|
||||
...cn,
|
||||
display: 'flex',
|
||||
gap: '0',
|
||||
fontSize: '12px',
|
||||
borderTop: '1px solid var(--nui-rule-hairline)',
|
||||
borderBottom: '1px solid var(--nui-rule-hairline)',
|
||||
marginTop: '1rem',
|
||||
}}>
|
||||
{['01版 要闻', '02版 经济', '03版 国际', '04版 文化', '05版 体育', '06版 副刊'].map((v, i) => (
|
||||
<div key={i} style={{
|
||||
padding: '0.4rem 1rem',
|
||||
borderRight: '1px solid var(--nui-rule-hairline)',
|
||||
color: i === 0 ? 'var(--nui-accent-cjk-red)' : 'var(--nui-text-secondary)',
|
||||
fontWeight: i === 0 ? 700 : 400,
|
||||
cursor: 'pointer',
|
||||
}}>{v}</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 头条区 */}
|
||||
<Section columns={24} gap="1rem" style={{ marginTop: '1rem', paddingBottom: '1rem', borderBottom: '2px solid var(--nui-rule-decorative)' }}>
|
||||
<Article span={24}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '13px', fontWeight: 700, marginBottom: '0.5rem', textAlign: 'center', letterSpacing: '0.1em' }}>【本报北京电】</div>
|
||||
<h2 style={{ ...cn, fontSize: '56px', fontWeight: 900, lineHeight: 1.1, color: 'var(--nui-text-primary)', textAlign: 'center', margin: 0 }}>
|
||||
历史性贸易协定昨日签署
|
||||
</h2>
|
||||
<h3 style={{ ...cn, fontSize: '24px', fontWeight: 500, lineHeight: 1.4, color: 'var(--nui-text-secondary)', textAlign: 'center', margin: '0.5rem 0 1rem 0' }}>
|
||||
——二十三国代表历经十一日谈判 达成关税、劳工、减排三大领域综合框架
|
||||
</h3>
|
||||
<div style={{ ...cn, textAlign: 'center', fontSize: '12px', color: 'var(--nui-text-muted)', marginBottom: '1rem' }}>
|
||||
本报记者 王思源 李明 · 联合报道
|
||||
</div>
|
||||
<Figure
|
||||
src="https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?auto=format&fit=crop&w=1200&q=80"
|
||||
alt="签署仪式现场"
|
||||
caption="各国代表在布鲁塞尔会议中心签署协定。"
|
||||
credit="新华社记者 摄"
|
||||
style={{ marginBottom: '1rem' }}
|
||||
/>
|
||||
<BodyText weight="Medium" columns={3} dropCap style={cn}>
|
||||
<p>本报布鲁塞尔电 经过连续十一天紧张磋商，二十三国代表于昨日深夜就一项涵盖关税、劳工标准与减排目标的综合框架协议达成最终一致。该协议尚需各成员国议会批准，但分析人士普遍认为，这是近一代人以来最具深远意义的国际经济协调成果。</p>
|
||||
<p>协议核心条款涵盖三个层面：一是统一关税表，二是设立共同劳工最低标准，三是约束各方至 2040 年前的减排路径。重工业领域将自 2028 年起执行阶梯碳费，所得款项注入大陆投资基金，专项支持低碳制造业升级。</p>
|
||||
<p>消息公布后，市场反应温和乐观。大陆综合指数收涨 1.2%，欧元兑美元上涨 0.7%。债券收益率从协议谈判期间高位回落至会前水平。资本货物板块领涨，被视为最大受益者。</p>
|
||||
<p>国内政界反应不一。协议关于带薪休假和集体谈判权的劳工条款获工会联盟支持，但商会担忧中小企业难以承担合规成本。工业联合会主席表示，需要过渡期支持以缓解冲击。</p>
|
||||
<p>三国议会领袖暗示，可能在夏季休会前完成批准程序。但另有两国政府表示将先行举行公投，预计审议过程将延续至秋季。贸易研究中心估算，即便按最快时间表，全面落实仍需至少十八个月。</p>
|
||||
<p>对普通旅客和消费者而言，短期内变化有限。边境流程和产品标准在批准前仍按现行规定执行。但更深远的意义在于：历史上彼此分裂的邻国，正首次就最关键十年的共同规则达成一致。</p>
|
||||
<p>分析人士指出，本次协议的最大突破在于建立了具有约束力的争端解决机制。九人仲裁小组由三个区域分别提名三人组成，对超过两千万单位的商业纠纷具有最终裁决权。这是过去多边协议中罕见的硬性条款。</p>
|
||||
<p>环境团体对碳费机制表示谨慎乐观，但担忧 2028 年的起始时间过晚。多家环保组织联合声明称，将持续监督各国国内立法，确保不被既得利益集团淡化。</p>
|
||||
<p>劳工议题方面，最低假期天数从原方案的 18 天上调至 20 天，这一调整被视为工会方的实质让步换得。集体谈判权的扩展则覆盖了中小企业，超过最初保守派的预期。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
{/* 二条区：3 栏并列 */}
|
||||
<Section columns={24} gap="1rem" style={{ marginTop: '1rem', paddingBottom: '1rem', borderBottom: '1px solid var(--nui-rule-decorative)' }}>
|
||||
<Article span={8} style={{ border: '1px solid var(--nui-rule-hairline)', padding: '1rem', background: 'var(--nui-bg-surface)' }}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem' }}>要 闻</div>
|
||||
<h3 style={{ ...cn, fontSize: '22px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>气候立法获参议院全票通过</h3>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>历经数月党争与多轮修正，参议院昨晚以全票通过气候资源法案。法案设立专项基金，加强对低碳产业的财政支持。</p>
|
||||
<p>支持者称，这是数十年来最重要的环境立法之一；反对者则担忧地方财政承压。法案将于下月一日起施行，覆盖工业、交通、建筑等重点领域。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...cn, fontSize: '17px', fontWeight: 600, lineHeight: 1.3, margin: '0 0 0.4rem 0' }}>城市轨道交通三线获批</h4>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>市议会批准价值二十四亿的轨道交通扩展计划，将新增三条快线并延长既有线路服务时间。详见 A8 版。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...cn, fontSize: '17px', fontWeight: 600, lineHeight: 1.3, margin: '0 0 0.4rem 0' }}>港口治理项目正式启动</h4>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>工程师将在三年内完成沉积物清淤与海堤重建。地方版 A10。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={8} style={{ border: '1px solid var(--nui-rule-hairline)', padding: '1rem', background: 'var(--nui-bg-surface)' }}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem' }}>经 济</div>
|
||||
<h3 style={{ ...cn, fontSize: '22px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>制造业 PMI 创年内新高</h3>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>统计局今日发布数据显示，五月制造业采购经理指数升至 52.4，连续第五个月位于扩张区间，新订单与生产指数双双走强。</p>
|
||||
<p>分析人士指出，外需回暖与库存周期共同支撑制造业复苏。但中小企业景气度仍弱于大型企业，结构性矛盾尚未根本缓解。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...cn, fontSize: '17px', fontWeight: 600, lineHeight: 1.3, margin: '0 0 0.4rem 0' }}>科技板块单日涨 3.7%</h4>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>受人工智能商业化预期推动，科技股集体走强。半导体、云计算板块涨幅领先。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...cn, fontSize: '17px', fontWeight: 600, lineHeight: 1.3, margin: '0 0 0.4rem 0' }}>大宗商品市场普遍下行</h4>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>受美元走强影响，原油、铜、铁矿石主力合约日内回调，部分品种创近月新低。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={8} style={{ border: '1px solid var(--nui-rule-hairline)', padding: '1rem', background: 'var(--nui-bg-surface)' }}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem' }}>文 化 · 教 育</div>
|
||||
<h3 style={{ ...cn, fontSize: '22px', fontWeight: 700, lineHeight: 1.3, color: 'var(--nui-text-primary)', margin: '0 0 0.5rem 0' }}>故宫博物院新展开幕</h3>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>「丝路千年——中亚出土文物特展」于今日在故宫博物院文华殿开幕，展出来自八国博物馆的二百二十件珍贵文物，覆盖公元前二世纪至公元十四世纪。</p>
|
||||
<p>策展人介绍，展览分为「商路」「信仰」「艺术」「日常」四个单元，多件文物为首次出境展出。展期至九月三十日结束。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...cn, fontSize: '17px', fontWeight: 600, lineHeight: 1.3, margin: '0 0 0.4rem 0' }}>大学申请人数创新高</h4>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>全国统招报名人数较去年增长 18%，创历史新高。教育部表示将相应扩大录取规模。</p>
|
||||
</BodyText>
|
||||
<Rule variant="hairline" style={{ margin: '0.75rem 0' }} />
|
||||
<h4 style={{ ...cn, fontSize: '17px', fontWeight: 600, lineHeight: 1.3, margin: '0 0 0.4rem 0' }}>国家交响乐团新任音乐总监</h4>
|
||||
<BodyText weight="Low" style={cn}>
|
||||
<p>经过两年的全球遴选，乐团昨日宣布由旅欧指挥家张明远接任音乐总监。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
{/* 简讯 + 要点提示 */}
|
||||
<Section columns={24} gap="1rem" style={{ marginTop: '1rem' }}>
|
||||
<Article span={6} style={{ background: 'var(--nui-bg-surface)', padding: '1rem', borderLeft: '3px solid var(--nui-accent-cjk-red)' }}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '11px', fontWeight: 700, marginBottom: '0.5rem', letterSpacing: '0.1em' }}>本期要点</div>
|
||||
<ul style={{ ...cn, fontSize: '14px', lineHeight: 1.7, paddingLeft: '1.2em', margin: 0, color: 'var(--nui-text-body)' }}>
|
||||
<li>贸易协定核心要点解读 · A2</li>
|
||||
<li>气候法案全文及解读 · A4</li>
|
||||
<li>制造业数据深度分析 · B1</li>
|
||||
<li>故宫新展专题与图集 · C3</li>
|
||||
<li>文化评论：丝路新解读 · C5</li>
|
||||
<li>读者来信精选 · D2</li>
|
||||
<li>体坛快报：联赛战报 · E1</li>
|
||||
<li>天气预报与生活信息 · F4</li>
|
||||
</ul>
|
||||
</Article>
|
||||
|
||||
<Article span={18}>
|
||||
<div style={{ ...cn, ...cnRed, fontSize: '12px', fontWeight: 700, marginBottom: '0.5rem' }}>简 讯 · 国 际 国 内</div>
|
||||
<BodyText weight="Low" columns={4} style={cn}>
|
||||
<p><strong>北京</strong> 交通部发布新一轮高速公路建设规划，未来五年新增里程 8000 公里，重点覆盖中西部欠发达地区。</p>
|
||||
<p><strong>上海</strong> 自贸区扩区方案获批，新增的金融服务业开放清单将于下月发布，涵盖跨境支付、保险、证券等领域。</p>
|
||||
<p><strong>深圳</strong> 创业板新规修订草案征求意见，重点完善退市机制与投资者保护制度。</p>
|
||||
<p><strong>广州</strong> 粤港澳大湾区联合科创基金正式成立，首期规模 500 亿元，重点投向人工智能、生物医药、新能源汽车三大领域。</p>
|
||||
<p><strong>东京</strong> 日本央行维持利率不变，但下调全年通胀预期，市场对宽松政策延续抱有预期。</p>
|
||||
<p><strong>布鲁塞尔</strong> 欧盟峰会就援助方案达成一致，规模较此前预案扩大三成。</p>
|
||||
<p><strong>华盛顿</strong> 联邦储备委员会会议纪要显示，多数官员支持在年内启动降息周期，但具体时点仍存分歧。</p>
|
||||
<p><strong>新德里</strong> 印度公布新一年财政预算，重点向基础设施和清洁能源倾斜。</p>
|
||||
<p><strong>首尔</strong> 韩国央行宣布技术性下调政策利率 25 个基点，为今年首次降息。</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -32,6 +32,33 @@ export default function BlackletterFrontPage() {
|
||||
<p>Verbände begrüßen die Pläne, mahnen aber Übergangsfristen für kleinere Betriebe an.
|
||||
Wirtschaft, Seite 9.</p>
|
||||
</BodyText>
|
||||
|
||||
<hr className="nui-rule-hairline" style={{ margin: '1rem 0' }} />
|
||||
<Headline weight="Low" as="h3">Haushaltsentwurf sorgt für Streit in der Koalition</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Die Fraktionsvorsitzenden konnten sich nicht auf Kürzungen im Sozialbereich einigen.
|
||||
Innenpolitik, Seite 3.</p>
|
||||
</BodyText>
|
||||
|
||||
<hr className="nui-rule-hairline" style={{ margin: '1rem 0' }} />
|
||||
<Headline weight="Low" as="h3">Neue Studie belegt Rückgang der Artenvielfalt</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Forscher der Universität Freiburg dokumentieren einen Verlust von 23 Prozent bei
|
||||
Insektenpopulationen seit 2015. Wissenschaft, Seite 7.</p>
|
||||
</BodyText>
|
||||
|
||||
<hr className="nui-rule-hairline" style={{ margin: '1rem 0' }} />
|
||||
<Headline weight="Low" as="h3">Frankfurter Buchmesse meldet Besucherrekord</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Über 300.000 Besucher kamen in diesem Jahr, ein Anstieg von zwölf Prozent gegenüber
|
||||
dem Vorjahr. Feuilleton, Seite 11.</p>
|
||||
</BodyText>
|
||||
|
||||
<hr className="nui-rule-hairline" style={{ margin: '1rem 0' }} />
|
||||
<Headline weight="Low" as="h3">Bahn plant Ausbau der Nachtzugverbindungen</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Ab Dezember sollen fünf neue Strecken das europäische Netz ergänzen. Wirtschaft, Seite 8.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={18}>
|
||||
@@ -66,6 +93,31 @@ export default function BlackletterFrontPage() {
|
||||
mit einem Plus von 1,2 Prozent. Die Währung legte gegenüber dem Dollar um 0,7 Prozent zu.
|
||||
Anleiherenditen, die während der Verhandlungen wegen fiskalischer Sorgen gestiegen waren, kehrten
|
||||
auf das Niveau vor Beginn der Gespräche zurück.</p>
|
||||
|
||||
<p>Die weitreichendsten Bestimmungen des Rahmenabkommens betreffen die Schwerindustrie.
|
||||
Zement-, Stahl- und Chemieproduzenten müssten ab 2028 eine gestaffelte CO₂-Abgabe
|
||||
entrichten, deren Einnahmen in einen kontinentalen Investitionsfonds für klimafreundliche
|
||||
Fertigung fließen sollen. Industrieverbände äußerten vorsichtige Zustimmung, während
|
||||
Umweltgruppen die verbindliche Architektur lobten, aber warnten, der Zeitplan gebe
|
||||
Verschmutzern zu viel Spielraum.</p>
|
||||
|
||||
<p>Die innenpolitischen Reaktionen fielen gemischt aus. Die Arbeitsbestimmungen des
|
||||
Abkommens, die Mindeststandards für bezahlten Urlaub und Tarifverhandlungen festlegen,
|
||||
stießen bei Gewerkschaften auf sofortige Zustimmung und bei Wirtschaftskammern auf
|
||||
ebenso sofortige Bedenken. Der Vorsitzende des Bundesverbandes der Industrie warnte,
|
||||
kleine Unternehmen würden ohne Übergangsunterstützung mit den Compliance-Kosten kämpfen.</p>
|
||||
|
||||
<p>Parlamentarische Führer in drei Hauptstädten signalisierten, dass die Ratifizierung
|
||||
noch vor der Sommerpause erfolgen könnte. Zwei Regierungen kündigten jedoch an, vorher
|
||||
Volksabstimmungen abhalten zu wollen — ein Prozess, der sich voraussichtlich bis in den
|
||||
Herbst hinziehen wird. Analysten des Zentrums für Handelsstudien schätzten, dass die
|
||||
vollständige Umsetzung selbst im günstigsten Fall mindestens achtzehn Monate erfordern würde.</p>
|
||||
|
||||
<p>Für gewöhnliche Reisende und Verbraucher werden die unmittelbaren Auswirkungen bescheiden
|
||||
sein. Grenzverfahren und Produktstandards unterliegen bis zur Ratifizierung weiterhin den
|
||||
bestehenden Regelungen. Der längere Bogen, so argumentierten die Verhandlungsführer, sei
|
||||
das Entscheidende: ein Kontinent historisch zerstrittener Nachbarn, der sich auf ein
|
||||
einheitliches Regelwerk für das folgenreichste Jahrzehnt seit Menschengedenken einigt.</p>
|
||||
</BodyText>
|
||||
|
||||
<PullQuote weight="High" author="Margarethe Lindqvist, Chefverhandlerin" align="left">
|
||||
@@ -79,6 +131,21 @@ export default function BlackletterFrontPage() {
|
||||
<p>Parlamentarische Führer in drei Hauptstädten signalisierten, dass die Ratifizierung noch vor
|
||||
der Sommerpause erfolgen könnte. Zwei Regierungen kündigten an, vorher Volksabstimmungen abhalten
|
||||
zu wollen.</p>
|
||||
|
||||
<p>Die Unterzeichnungszeremonie, ursprünglich für vergangenen Freitag geplant, wurde
|
||||
dreimal verschoben, während die Verfasser konkurrierende Texte zur Streitbeilegung
|
||||
abglichen. Der endgültige Kompromiss sieht ein Schiedsgericht aus neun Juristen vor,
|
||||
je drei ernannt von jeder der drei regionalen Gruppierungen des Blocks.</p>
|
||||
|
||||
<p>Kritiker von rechts verurteilten das Rahmenwerk als Erosion nationaler Souveränität,
|
||||
während Kritiker von links argumentierten, der Arbeitsstandard sei zu niedrig angesetzt,
|
||||
um Arbeitnehmer in strengeren Regulierungsregimen wirksam zu schützen. Beide Lager
|
||||
signalisierten, dass die Ratifizierungskämpfe heftig werden dürften.</p>
|
||||
|
||||
<p>Historiker der kontinentalen Integration merkten an, dass der Umfang des Abkommens
|
||||
jede einzelne Vereinbarung seit den Nachkriegs-Wiederaufbauverträgen übertrifft. Was
|
||||
dieses Abkommen anders mache, so Professor Elena Marchetti, sei dass es jeden Haushalt
|
||||
berühre — nicht nur durch den Handel, sondern durch die Luft und die Löhne.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Layout, Section, Article, Masthead, Rule,
|
||||
Headline, Subhead, Kicker, BodyText, Byline, Dateline,
|
||||
Figure, PullQuote,
|
||||
} from '@newspaperui/components';
|
||||
|
||||
export default function FrontPage() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="1200px" padding="2rem 1.5rem">
|
||||
<Masthead
|
||||
variant="classic"
|
||||
kicker="Late City Edition"
|
||||
title="The Daily Chronicle"
|
||||
edition="Vol. CXLIX · No. 51,895"
|
||||
date="Tuesday, May 19, 2026"
|
||||
price="$4.00"
|
||||
/>
|
||||
|
||||
<Section columns={24} divider="bottom" gap="2rem" style={{ marginTop: '2rem' }}>
|
||||
<Article span={5} style={{ borderRight: '1px solid var(--nui-rule-hairline)', paddingRight: '1.5rem' }}>
|
||||
<Kicker>Inside Today</Kicker>
|
||||
<Headline weight="Low" as="h3" style={{ marginTop: 0 }}>
|
||||
Senate Approves Climate Resolution After Months of Debate
|
||||
</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>The unanimous vote concludes a contentious legislative session marked by partisan disputes
|
||||
and last-minute amendments. Page A6.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">Tech Sector Gains as Inflation Eases</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Major indices climbed for a fifth consecutive session as new data showed price growth
|
||||
slowing across consumer goods. Business B1.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">Drought Conditions Worsen Across the Plains</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Officials in seven states have requested federal disaster relief as reservoir levels reach
|
||||
historic lows. National A12.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">New Exhibit Opens at the Metropolitan</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>A retrospective of mid-century textile design draws record opening crowds. Arts C3.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">City Council Approves Transit Expansion</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>The $2.4 billion plan adds three new rail lines and extends service hours on existing routes. Metro A8.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">University Announces Record Enrollment</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Applications rose 18 percent this cycle, driven by expanded financial aid programs. Education B4.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">Harbor Restoration Project Begins</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Engineers will dredge sediment and rebuild seawalls over a three-year timeline. Local A10.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">Orchestra Names New Music Director</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>The appointment ends a two-year search following the previous director’s retirement. Arts C1.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={14}>
|
||||
<div style={{ textAlign: 'center' }}><Kicker>Capitol · Breaking</Kicker></div>
|
||||
<Headline weight="High" align="center">
|
||||
Historic Accord Reshapes Continental Trade After Marathon Session
|
||||
</Headline>
|
||||
<Subhead weight="High" style={{ textAlign: 'center', marginTop: 0 }}>
|
||||
Negotiators emerge with sweeping framework on tariffs, labor, and emissions; ratification expected within weeks
|
||||
</Subhead>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', margin: '0.5rem 0 1rem', alignItems: 'baseline' }}>
|
||||
<Byline>By Eleanor Whitcombe and Marcus Reyes</Byline>
|
||||
<span style={{ color: 'var(--nui-text-muted)' }}>·</span>
|
||||
<span style={{ fontFamily: 'var(--font-family-meta)', fontSize: '12px', color: 'var(--nui-text-muted)' }}>5 min read</span>
|
||||
</div>
|
||||
|
||||
<Figure
|
||||
src="https://images.unsplash.com/photo-1572949645841-094f3a9c4c94?auto=format&fit=crop&w=1200&q=80"
|
||||
alt="Diplomats applaud after the final draft was approved"
|
||||
caption="Negotiators applaud after the final draft was approved Monday evening at the Continental Conference Center."
|
||||
credit="Photograph by Jane Doe / Pool"
|
||||
/>
|
||||
|
||||
<BodyText weight="High" columns={3} dropCap style={{ marginTop: '1.5rem' }}>
|
||||
<p><Dateline>Brussels —</Dateline> After eleven consecutive days of negotiation that several
|
||||
participants described as the most demanding in a generation, delegates from twenty-three nations
|
||||
announced on Monday a sweeping framework to reorganize commerce across the continent. The accord,
|
||||
which still requires ratification by member parliaments, would harmonize tariff schedules, set
|
||||
common labor standards, and bind signatories to a shared emissions pathway through 2040.</p>
|
||||
|
||||
<p>Officials briefed on the talks said the breakthrough came shortly before midnight, when a
|
||||
dispute over agricultural subsidies was resolved with a side letter granting transitional relief
|
||||
to producers in five smaller economies. The chief negotiator, Margarethe Lindqvist, called the
|
||||
outcome “a long argument that finally became a conversation.”</p>
|
||||
|
||||
<p>The framework’s most consequential provisions target heavy industry. Cement, steel, and
|
||||
chemical producers would face a graduated carbon levy beginning in 2028, with revenues recycled
|
||||
into a continental investment fund for low-carbon manufacturing. Industry associations expressed
|
||||
cautious support, while environmental groups praised the levy’s binding architecture but warned
|
||||
that the timeline gives polluters too much room to delay.</p>
|
||||
|
||||
<p>Markets reacted with measured optimism. The continental composite index closed up 1.2 percent,
|
||||
led by capital-goods makers expected to benefit from infrastructure investment. The currency
|
||||
strengthened against the dollar by 0.7 percent. Bond yields, which had climbed throughout the
|
||||
negotiations on fiscal-stability concerns, retreated to levels seen before the talks began.</p>
|
||||
|
||||
<p>Domestic political reaction was mixed. The accord’s labor provisions, which establish minimum
|
||||
standards for paid leave and collective bargaining, drew immediate praise from union federations
|
||||
and equally immediate concern from chambers of commerce. The chairman of the Federation of
|
||||
Industries warned that small firms would struggle with compliance costs absent transitional support.</p>
|
||||
|
||||
<p>Parliamentary leaders in three capitals signaled that ratification could occur before the
|
||||
summer recess. Two governments, however, indicated that they would seek public referenda before
|
||||
committing, a process likely to extend into the autumn. Analysts at the Centre for Trade Studies
|
||||
estimated that full implementation, even on the most expedited timeline, would require at least
|
||||
eighteen months.</p>
|
||||
|
||||
<p>For ordinary travelers and consumers, the immediate effects will be modest. Border procedures
|
||||
and product standards remain governed by existing arrangements pending ratification. The longer
|
||||
arc is what matters: a continent of historically fractious neighbors agreeing on a single set of
|
||||
rules for the most consequential decade in living memory.</p>
|
||||
|
||||
<p>The accord’s environmental chapter, which drew the most sustained opposition during
|
||||
negotiations, establishes a continental carbon market linked to existing national schemes.
|
||||
Permits would be tradeable across borders beginning in 2030, with a price floor set at
|
||||
forty-five units per ton of carbon dioxide equivalent. Economists at the Institute for
|
||||
Climate Economics estimated that the floor alone would reduce emissions by eight to twelve
|
||||
percent within the first five years of operation.</p>
|
||||
|
||||
<p>Labor unions in the industrial heartland expressed qualified support. The secretary-general
|
||||
of the Metalworkers’ Federation said the transition fund “acknowledges what we have argued
|
||||
for years: that decarbonization cannot be built on the backs of workers.” But she cautioned
|
||||
that the fund’s governance structure, which gives equal weight to employer and employee
|
||||
representatives, could slow disbursements at a moment when speed matters most.</p>
|
||||
|
||||
<p>Small and medium enterprises, which employ roughly sixty percent of the continental
|
||||
workforce, face a distinct set of challenges. The accord exempts firms below a revenue
|
||||
threshold from the carbon levy for three years, but compliance with the new labor standards
|
||||
is immediate. Business associations in four countries have already requested technical
|
||||
assistance programs to help smaller firms adapt their payroll and reporting systems.</p>
|
||||
|
||||
<p>Historians of continental integration noted that the accord’s scope exceeds any single
|
||||
agreement since the postwar reconstruction treaties. “What makes this different,” said
|
||||
Professor Elena Marchetti of the University of Turin, “is that it touches every household—
|
||||
not just through trade, but through the air they breathe and the wages they earn.”</p>
|
||||
</BodyText>
|
||||
|
||||
<PullQuote weight="High" author="Margarethe Lindqvist, Chief Negotiator" align="center" style={{ margin: '2rem 0' }}>
|
||||
A long argument that finally became a conversation.
|
||||
</PullQuote>
|
||||
|
||||
<BodyText weight="High" columns={2} style={{ marginTop: '1rem' }}>
|
||||
<p>The accord’s signing ceremony, originally scheduled for last Friday, was delayed three times
|
||||
as drafters reconciled competing texts on dispute resolution. The final compromise establishes
|
||||
an arbitration panel of nine jurists, three appointed by each of the bloc’s three regional
|
||||
groupings, with binding authority over commercial disputes exceeding twenty million units.</p>
|
||||
|
||||
<p>Critics on the populist right denounced the framework as an erosion of national sovereignty,
|
||||
while critics on the left argued that the labor floor was set too low to meaningfully protect
|
||||
workers in tighter regulatory regimes. Both camps signaled that ratification battles would be
|
||||
fierce, particularly in legislatures with narrow majorities.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={5} style={{ borderLeft: '1px solid var(--nui-rule-hairline)', paddingLeft: '1.5rem' }}>
|
||||
<Kicker>Foreign Desk</Kicker>
|
||||
<Headline weight="Medium" as="h2">
|
||||
Coastal Nations Pledge Joint Action on Maritime Pollution
|
||||
</Headline>
|
||||
<Subhead weight="Medium">
|
||||
Pact follows years of stalled regional talks and a cascade of recent shipping accidents.
|
||||
</Subhead>
|
||||
<Byline>By Tomás Almeida</Byline>
|
||||
|
||||
<BodyText weight="Medium" style={{ marginTop: '0.75rem' }}>
|
||||
<p><Dateline>Lisbon —</Dateline> Eleven coastal nations announced a binding compact to coordinate
|
||||
cleanup operations and harmonize liability rules for vessels exceeding fifty thousand tons. The
|
||||
agreement establishes a shared rapid-response fund and creates a regional inspectorate empowered
|
||||
to detain non-compliant ships in any signatory port.</p>
|
||||
|
||||
<p>Maritime industry groups received the news with caution. A spokesperson for the Continental
|
||||
Shipping Council acknowledged that “stronger common rules are overdue” but warned that
|
||||
implementation costs could fall disproportionately on smaller operators.</p>
|
||||
|
||||
<p>The compact takes effect on January 1, pending technical annexes. Environmental observers
|
||||
described the pact as the most consequential maritime accord in a decade.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">Fisheries Report Warns of Declining Stocks</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Annual survey data shows a 14 percent drop in key commercial species across the northern
|
||||
shelf. Scientists attribute the decline to warming waters and overfishing in adjacent
|
||||
unregulated zones. Environment A9.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">Rail Strike Averted After Late-Night Deal</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Workers accepted a revised pay offer minutes before the midnight deadline. Services
|
||||
resume on normal schedules. Transport B2.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
<Section columns={24} divider="top" gap="2rem" style={{ marginTop: '2rem', paddingTop: '2rem' }}>
|
||||
<Article span={24}>
|
||||
<Kicker>National · Investigation</Kicker>
|
||||
<Headline weight="Medium" as="h2">
|
||||
Records Reveal Years of Overlooked Warnings at Aging Reservoirs
|
||||
</Headline>
|
||||
<Subhead weight="Medium">
|
||||
Internal inspection memoranda, obtained through public records requests, suggest that
|
||||
structural concerns flagged repeatedly by field engineers were not escalated to senior staff.
|
||||
</Subhead>
|
||||
<Byline style={{ marginBottom: '1rem' }}>By Ravi Nair, Anita Kowalski, and Charles Weston</Byline>
|
||||
|
||||
<BodyText weight="High" columns={4}>
|
||||
<p><Dateline>Sacramento —</Dateline> A six-month review of more than four thousand pages of
|
||||
inspection records, interviews with twenty-three current and former engineers, and reconstructions
|
||||
of three near-failure incidents reveals a pattern of unheeded warnings about the structural
|
||||
integrity of mid-twentieth-century earthen dams across the western states.</p>
|
||||
|
||||
<p>The records show that field engineers documented concerns about seepage, erosion, and spillway
|
||||
capacity in repeated annual assessments dating back at least fifteen years. In several instances,
|
||||
those concerns were rated “moderate” in the field reports but downgraded to “low” by the time they
|
||||
reached senior officials. The pattern was particularly pronounced at three facilities serving
|
||||
regions of more than two million residents.</p>
|
||||
|
||||
<p>Officials at the Department of Water Resources, asked to review excerpts of the records, said
|
||||
in a written statement that “every reservoir under our oversight has been deemed safe for current
|
||||
operations” but did not specifically address the discrepancies between field and final ratings.
|
||||
The agency declined to make senior staff available for interviews.</p>
|
||||
|
||||
<p>The findings come amid renewed scrutiny of aging infrastructure following the partial collapse
|
||||
of an earthen embankment in March that displaced more than fifteen hundred residents. Federal
|
||||
inspectors who responded to that incident found the proximate cause to be precisely the type of
|
||||
seepage concern that field engineers had flagged in three of the past four annual assessments.</p>
|
||||
|
||||
<p>The investigative review found that of forty-seven reservoirs surveyed, sixteen had at least
|
||||
one instance in which a “moderate” or “high” field rating was downgraded before reaching senior
|
||||
management. In nine cases, the downgrades persisted for three or more consecutive years. None of
|
||||
the affected facilities have publicly disclosed the discrepancies.</p>
|
||||
|
||||
<p>Engineering professional associations have, in recent years, called for an independent review
|
||||
of inspection workflows in the western states. A spokesperson for the Society of Hydraulic
|
||||
Engineers said the Society was “deeply concerned” by the patterns described and would convene a
|
||||
working group to examine reform options.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +1,19 @@
|
||||
import './globals.css';
|
||||
import type { Metadata } from 'next';
|
||||
import { Header } from '../components/Header';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'NewspaperUI — Production Newspaper Components',
|
||||
description: '生产级报纸布局组件库，参考 InDesign 与经典严肃风排版传统，24 列栅格、跨栏、视觉权重和主题系统',
|
||||
description: '生产级报纸布局组件库',
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="zh">
|
||||
<body>{children}</body>
|
||||
<body>
|
||||
<Header />
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
+249
-178
@@ -1,205 +1,276 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Layout, Section, Article, Masthead, Rule,
|
||||
Headline, Subhead, Kicker, BodyText, Byline, Dateline,
|
||||
Figure, PullQuote,
|
||||
Layout,
|
||||
Section,
|
||||
Article,
|
||||
Masthead,
|
||||
Headline,
|
||||
Subhead,
|
||||
Kicker,
|
||||
BodyText,
|
||||
} from '@newspaperui/components';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function FrontPage() {
|
||||
const demos = [
|
||||
{
|
||||
href: '/blocks/zh-frontpage',
|
||||
lang: '中文 · Chinese',
|
||||
title: '人民周报 · 头版',
|
||||
description: '思源宋体 + 克制朱红 + 紧凑排版。中文报纸传统视觉语言。',
|
||||
color: '#CC2929',
|
||||
},
|
||||
{
|
||||
href: '/blocks/zh-feature',
|
||||
lang: '中文 · Chinese',
|
||||
title: '人民周报 · 副刊专题',
|
||||
description: '深度专题排版：访谈、人物、文化评论。',
|
||||
color: '#CC2929',
|
||||
},
|
||||
{
|
||||
href: '/examples/nyt-frontpage',
|
||||
lang: 'English',
|
||||
title: 'The Daily Chronicle · NYT Style',
|
||||
description:
|
||||
'Classic American serious newspaper. Cormorant Garamond masthead, multi-column flow with drop cap.',
|
||||
color: '#1A1A1A',
|
||||
},
|
||||
{
|
||||
href: '/blocks/en-feature',
|
||||
lang: 'English',
|
||||
title: 'The Daily Chronicle · Long-form Feature',
|
||||
description: 'Editorial long-form piece with pull quotes and editorial design.',
|
||||
color: '#1A1A1A',
|
||||
},
|
||||
{
|
||||
href: '/blocks/jp-horizontal',
|
||||
lang: '日本語 · Japanese',
|
||||
title: '朝日新聞 · 横組み',
|
||||
description: 'Modern horizontal Japanese newspaper layout. Noto Serif JP.',
|
||||
color: '#1B2A4A',
|
||||
},
|
||||
{
|
||||
href: '/blocks/jp-vertical',
|
||||
lang: '日本語 · Japanese',
|
||||
title: '朝日新聞 · 縦組み',
|
||||
description: 'Traditional vertical writing-mode Japanese layout.',
|
||||
color: '#1B2A4A',
|
||||
},
|
||||
{
|
||||
href: '/examples/blackletter-frontpage',
|
||||
lang: 'Deutsch',
|
||||
title: 'Die Frankfurter Zeitung',
|
||||
description: 'Blackletter masthead with UnifrakturMaguntia. German broadsheet tradition.',
|
||||
color: '#1A1A1A',
|
||||
},
|
||||
];
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="1200px" padding="2rem 1.5rem">
|
||||
<Layout columns={24} maxWidth="1400px" padding="3rem 2rem 4rem">
|
||||
<Masthead
|
||||
variant="classic"
|
||||
kicker="Late City Edition"
|
||||
title="The Daily Chronicle"
|
||||
edition="Vol. CXLIX · No. 51,895"
|
||||
date="Tuesday, May 19, 2026"
|
||||
price="$4.00"
|
||||
kicker="Production Newspaper Components"
|
||||
title="NewspaperUI"
|
||||
edition="Vol. 01 · No. 1"
|
||||
date="May 2026"
|
||||
price="MIT License"
|
||||
/>
|
||||
|
||||
<Section columns={24} divider="bottom" gap="2rem" style={{ marginTop: '2rem' }}>
|
||||
<Article span={5} style={{ borderRight: '1px solid var(--nui-rule-hairline)', paddingRight: '1.5rem' }}>
|
||||
<Kicker>Inside Today</Kicker>
|
||||
<Headline weight="Low" as="h3" style={{ marginTop: 0 }}>
|
||||
Senate Approves Climate Resolution After Months of Debate
|
||||
<Section columns={24} gap="2rem" style={{ marginTop: '3rem' }}>
|
||||
<Article span={6}>
|
||||
<Kicker>About</Kicker>
|
||||
<Headline weight="Low" as="h2" style={{ marginTop: 0 }}>
|
||||
生产级报纸布局组件库
|
||||
</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>The unanimous vote concludes a contentious legislative session marked by partisan disputes
|
||||
and last-minute amendments. Page A6.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">Tech Sector Gains as Inflation Eases</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Major indices climbed for a fifth consecutive session as new data showed price growth
|
||||
slowing across consumer goods. Business B1.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">Drought Conditions Worsen Across the Plains</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>Officials in seven states have requested federal disaster relief as reservoir levels reach
|
||||
historic lows. National A12.</p>
|
||||
</BodyText>
|
||||
|
||||
<Rule variant="hairline" style={{ margin: '1rem 0' }} />
|
||||
|
||||
<Headline weight="Low" as="h3">New Exhibit Opens at the Metropolitan</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>A retrospective of mid-century textile design draws record opening crowds. Arts C3.</p>
|
||||
<BodyText weight="Medium">
|
||||
<p>
|
||||
参考 InDesign 与经典严肃风排版传统（NYT / The Times / FAZ），基于 24 列栅格、CSS Grid +
|
||||
Multi-column 双层机制构建。
|
||||
</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={14}>
|
||||
<div style={{ textAlign: 'center' }}><Kicker>Capitol · Breaking</Kicker></div>
|
||||
<Headline weight="High" align="center">
|
||||
Historic Accord Reshapes Continental Trade After Marathon Session
|
||||
<Article span={12}>
|
||||
<Headline weight="Medium" align="center">
|
||||
Print-grade typography, on the modern web.
|
||||
</Headline>
|
||||
<Subhead weight="High" style={{ textAlign: 'center', marginTop: 0 }}>
|
||||
Negotiators emerge with sweeping framework on tariffs, labor, and emissions; ratification expected within weeks
|
||||
<Subhead
|
||||
weight="High"
|
||||
style={{ textAlign: 'center', marginTop: '0.5rem' }}
|
||||
>
|
||||
18 components, 24-column grid, classic serif typography, real multi-column flow.
|
||||
</Subhead>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', margin: '0.5rem 0 1rem', alignItems: 'baseline' }}>
|
||||
<Byline>By Eleanor Whitcombe and Marcus Reyes</Byline>
|
||||
<span style={{ color: 'var(--nui-text-muted)' }}>·</span>
|
||||
<span style={{ fontFamily: 'var(--font-family-meta)', fontSize: '12px', color: 'var(--nui-text-muted)' }}>5 min read</span>
|
||||
</Article>
|
||||
<Article span={6}>
|
||||
<Kicker>Quick Start</Kicker>
|
||||
<Headline weight="Low" as="h2" style={{ marginTop: 0 }}>
|
||||
Install
|
||||
</Headline>
|
||||
<BodyText weight="Medium">
|
||||
<p style={{ fontFamily: 'var(--font-family-meta)', fontSize: '13px' }}>
|
||||
<code>pnpm add @newspaperui/components @newspaperui/theme</code>
|
||||
</p>
|
||||
</BodyText>
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
<Link
|
||||
href="/grid-system"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '13px',
|
||||
color: 'var(--nui-accent-primary)',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Documentation →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Figure
|
||||
src="https://images.unsplash.com/photo-1572949645841-094f3a9c4c94?auto=format&fit=crop&w=1200&q=80"
|
||||
alt="Diplomats applaud after the final draft was approved"
|
||||
caption="Negotiators applaud after the final draft was approved Monday evening at the Continental Conference Center."
|
||||
credit="Photograph by Jane Doe / Pool"
|
||||
/>
|
||||
|
||||
<BodyText weight="High" columns={3} dropCap style={{ marginTop: '1.5rem' }}>
|
||||
<p><Dateline>Brussels —</Dateline> After eleven consecutive days of negotiation that several
|
||||
participants described as the most demanding in a generation, delegates from twenty-three nations
|
||||
announced on Monday a sweeping framework to reorganize commerce across the continent. The accord,
|
||||
which still requires ratification by member parliaments, would harmonize tariff schedules, set
|
||||
common labor standards, and bind signatories to a shared emissions pathway through 2040.</p>
|
||||
|
||||
<p>Officials briefed on the talks said the breakthrough came shortly before midnight, when a
|
||||
dispute over agricultural subsidies was resolved with a side letter granting transitional relief
|
||||
to producers in five smaller economies. The chief negotiator, Margarethe Lindqvist, called the
|
||||
outcome “a long argument that finally became a conversation.”</p>
|
||||
|
||||
<p>The framework’s most consequential provisions target heavy industry. Cement, steel, and
|
||||
chemical producers would face a graduated carbon levy beginning in 2028, with revenues recycled
|
||||
into a continental investment fund for low-carbon manufacturing. Industry associations expressed
|
||||
cautious support, while environmental groups praised the levy’s binding architecture but warned
|
||||
that the timeline gives polluters too much room to delay.</p>
|
||||
|
||||
<p>Markets reacted with measured optimism. The continental composite index closed up 1.2 percent,
|
||||
led by capital-goods makers expected to benefit from infrastructure investment. The currency
|
||||
strengthened against the dollar by 0.7 percent. Bond yields, which had climbed throughout the
|
||||
negotiations on fiscal-stability concerns, retreated to levels seen before the talks began.</p>
|
||||
|
||||
<p>Domestic political reaction was mixed. The accord’s labor provisions, which establish minimum
|
||||
standards for paid leave and collective bargaining, drew immediate praise from union federations
|
||||
and equally immediate concern from chambers of commerce. The chairman of the Federation of
|
||||
Industries warned that small firms would struggle with compliance costs absent transitional support.</p>
|
||||
|
||||
<p>Parliamentary leaders in three capitals signaled that ratification could occur before the
|
||||
summer recess. Two governments, however, indicated that they would seek public referenda before
|
||||
committing, a process likely to extend into the autumn. Analysts at the Centre for Trade Studies
|
||||
estimated that full implementation, even on the most expedited timeline, would require at least
|
||||
eighteen months.</p>
|
||||
|
||||
<p>For ordinary travelers and consumers, the immediate effects will be modest. Border procedures
|
||||
and product standards remain governed by existing arrangements pending ratification. The longer
|
||||
arc is what matters: a continent of historically fractious neighbors agreeing on a single set of
|
||||
rules for the most consequential decade in living memory.</p>
|
||||
</BodyText>
|
||||
|
||||
<PullQuote weight="High" author="Margarethe Lindqvist, Chief Negotiator" align="center" style={{ margin: '2rem 0' }}>
|
||||
A long argument that finally became a conversation.
|
||||
</PullQuote>
|
||||
|
||||
<BodyText weight="High" columns={2} style={{ marginTop: '1rem' }}>
|
||||
<p>The accord’s signing ceremony, originally scheduled for last Friday, was delayed three times
|
||||
as drafters reconciled competing texts on dispute resolution. The final compromise establishes
|
||||
an arbitration panel of nine jurists, three appointed by each of the bloc’s three regional
|
||||
groupings, with binding authority over commercial disputes exceeding twenty million units.</p>
|
||||
|
||||
<p>Critics on the populist right denounced the framework as an erosion of national sovereignty,
|
||||
while critics on the left argued that the labor floor was set too low to meaningfully protect
|
||||
workers in tighter regulatory regimes. Both camps signaled that ratification battles would be
|
||||
fierce, particularly in legislatures with narrow majorities.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
|
||||
<Article span={5} style={{ borderLeft: '1px solid var(--nui-rule-hairline)', paddingLeft: '1.5rem' }}>
|
||||
<Kicker>Foreign Desk</Kicker>
|
||||
<Headline weight="Medium" as="h2">
|
||||
Coastal Nations Pledge Joint Action on Maritime Pollution
|
||||
</Headline>
|
||||
<Subhead weight="Medium">
|
||||
Pact follows years of stalled regional talks and a cascade of recent shipping accidents.
|
||||
</Subhead>
|
||||
<Byline>By Tomás Almeida</Byline>
|
||||
|
||||
<BodyText weight="Medium" style={{ marginTop: '0.75rem' }}>
|
||||
<p><Dateline>Lisbon —</Dateline> Eleven coastal nations announced a binding compact to coordinate
|
||||
cleanup operations and harmonize liability rules for vessels exceeding fifty thousand tons. The
|
||||
agreement establishes a shared rapid-response fund and creates a regional inspectorate empowered
|
||||
to detain non-compliant ships in any signatory port.</p>
|
||||
|
||||
<p>Maritime industry groups received the news with caution. A spokesperson for the Continental
|
||||
Shipping Council acknowledged that “stronger common rules are overdue” but warned that
|
||||
implementation costs could fall disproportionately on smaller operators.</p>
|
||||
|
||||
<p>The compact takes effect on January 1, pending technical annexes. Environmental observers
|
||||
described the pact as the most consequential maritime accord in a decade.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
<Section columns={24} divider="top" gap="2rem" style={{ marginTop: '2rem', paddingTop: '2rem' }}>
|
||||
<Section
|
||||
columns={24}
|
||||
divider="top"
|
||||
gap="2rem"
|
||||
style={{ marginTop: '4rem', paddingTop: '3rem' }}
|
||||
>
|
||||
<Article span={24}>
|
||||
<Kicker>National · Investigation</Kicker>
|
||||
<Headline weight="Medium" as="h2">
|
||||
Records Reveal Years of Overlooked Warnings at Aging Reservoirs
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Kicker>Live Demos · Production-grade Examples</Kicker>
|
||||
</div>
|
||||
<Headline weight="High" align="center">
|
||||
Multi-language Newspaper Showcase
|
||||
</Headline>
|
||||
<Subhead weight="Medium">
|
||||
Internal inspection memoranda, obtained through public records requests, suggest that
|
||||
structural concerns flagged repeatedly by field engineers were not escalated to senior staff.
|
||||
<Subhead weight="Medium" style={{ textAlign: 'center' }}>
|
||||
7 complete newspaper layouts in Chinese, English, German, and Japanese
|
||||
</Subhead>
|
||||
<Byline style={{ marginBottom: '1rem' }}>By Ravi Nair, Anita Kowalski, and Charles Weston</Byline>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
<BodyText weight="High" columns={4}>
|
||||
<p><Dateline>Sacramento —</Dateline> A six-month review of more than four thousand pages of
|
||||
inspection records, interviews with twenty-three current and former engineers, and reconstructions
|
||||
of three near-failure incidents reveals a pattern of unheeded warnings about the structural
|
||||
integrity of mid-twentieth-century earthen dams across the western states.</p>
|
||||
<Section columns={24} gap="2rem" style={{ marginTop: '2rem' }}>
|
||||
{demos.map((demo, idx) => (
|
||||
<Article key={demo.href} span={24} style={{ marginBottom: '2rem' }}>
|
||||
<Link
|
||||
href={demo.href}
|
||||
style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--nui-rule-hairline)',
|
||||
background: 'var(--nui-bg-surface)',
|
||||
padding: '2rem',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 3fr',
|
||||
gap: '2rem',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid var(--nui-rule-hairline)',
|
||||
paddingRight: '2rem',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
fontVariantCaps: 'small-caps',
|
||||
letterSpacing: '0.08em',
|
||||
color: demo.color,
|
||||
marginBottom: '0.5rem',
|
||||
}}
|
||||
>
|
||||
{demo.lang}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '11px',
|
||||
color: 'var(--nui-text-muted)',
|
||||
}}
|
||||
>
|
||||
Demo #{String(idx + 1).padStart(2, '0')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-display)',
|
||||
fontSize: '28px',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.15,
|
||||
color: 'var(--nui-text-primary)',
|
||||
margin: '0 0 0.5rem 0',
|
||||
}}
|
||||
>
|
||||
{demo.title}
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-body)',
|
||||
fontSize: '15px',
|
||||
lineHeight: 1.5,
|
||||
color: 'var(--nui-text-body)',
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{demo.description}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
color: 'var(--nui-accent-primary)',
|
||||
marginTop: '0.75rem',
|
||||
fontVariantCaps: 'small-caps',
|
||||
letterSpacing: '0.06em',
|
||||
}}
|
||||
>
|
||||
View demo →
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Article>
|
||||
))}
|
||||
</Section>
|
||||
|
||||
<p>The records show that field engineers documented concerns about seepage, erosion, and spillway
|
||||
capacity in repeated annual assessments dating back at least fifteen years. In several instances,
|
||||
those concerns were rated “moderate” in the field reports but downgraded to “low” by the time they
|
||||
reached senior officials. The pattern was particularly pronounced at three facilities serving
|
||||
regions of more than two million residents.</p>
|
||||
|
||||
<p>Officials at the Department of Water Resources, asked to review excerpts of the records, said
|
||||
in a written statement that “every reservoir under our oversight has been deemed safe for current
|
||||
operations” but did not specifically address the discrepancies between field and final ratings.
|
||||
The agency declined to make senior staff available for interviews.</p>
|
||||
|
||||
<p>The findings come amid renewed scrutiny of aging infrastructure following the partial collapse
|
||||
of an earthen embankment in March that displaced more than fifteen hundred residents. Federal
|
||||
inspectors who responded to that incident found the proximate cause to be precisely the type of
|
||||
seepage concern that field engineers had flagged in three of the past four annual assessments.</p>
|
||||
|
||||
<p>The investigative review found that of forty-seven reservoirs surveyed, sixteen had at least
|
||||
one instance in which a “moderate” or “high” field rating was downgraded before reaching senior
|
||||
management. In nine cases, the downgrades persisted for three or more consecutive years. None of
|
||||
the affected facilities have publicly disclosed the discrepancies.</p>
|
||||
|
||||
<p>Engineering professional associations have, in recent years, called for an independent review
|
||||
of inspection workflows in the western states. A spokesperson for the Society of Hydraulic
|
||||
Engineers said the Society was “deeply concerned” by the patterns described and would convene a
|
||||
working group to examine reform options.</p>
|
||||
<Section
|
||||
columns={24}
|
||||
divider="top"
|
||||
gap="2rem"
|
||||
style={{ marginTop: '4rem', paddingTop: '2rem' }}
|
||||
>
|
||||
<Article span={12}>
|
||||
<Kicker>Design Philosophy</Kicker>
|
||||
<Headline weight="Low" as="h3" style={{ marginTop: 0 }}>
|
||||
Print Tradition, Web Implementation
|
||||
</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>
|
||||
NewspaperUI 借鉴 InDesign
|
||||
段落样式系统的设计 token 思想，把字体、字号、字重、行高、颜色、间距统一收敛到视觉权重映射表（visualWeights）。组件从单一数据源读取样式，修改一处即全局生效。
|
||||
</p>
|
||||
<p>
|
||||
排版机制采用 Hybrid 双层：CSS Grid 负责大块布局，CSS Multi-column 负责正文流。这是报纸排版传统在 Web
|
||||
上的最佳还原。
|
||||
</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
<Article span={12}>
|
||||
<Kicker>Tech Stack</Kicker>
|
||||
<Headline weight="Low" as="h3" style={{ marginTop: 0 }}>
|
||||
React 18 · TypeScript 5 · CSS Grid + Multi-column
|
||||
</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>
|
||||
4 packages：<code>@newspaperui/theme</code>、<code>@newspaperui/utils</code>、
|
||||
<code>@newspaperui/components</code>（18 components）、<code>@newspaperui/docs</code>。
|
||||
</p>
|
||||
<p>Built with pnpm workspaces + Turborepo. Vite for libraries, Next.js 15 for docs.</p>
|
||||
</BodyText>
|
||||
</Article>
|
||||
</Section>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -48,9 +48,9 @@ export function Sidebar() {
|
||||
fontFamily: 'var(--font-family-meta)',
|
||||
fontSize: '14px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
top: 65,
|
||||
alignSelf: 'flex-start',
|
||||
maxHeight: '100vh',
|
||||
maxHeight: 'calc(100vh - 65px)',
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -3,6 +3,9 @@ import rehypePrettyCode from 'rehype-pretty-code';
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
|
||||
images: { unoptimized: true },
|
||||
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
|
||||
transpilePackages: ['@newspaperui/components', '@newspaperui/theme', '@newspaperui/utils'],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user