From 9f36e2c0ef6a4d6e07d9914b30e49a11eb0abd30 Mon Sep 17 00:00:00 2001 From: sunzhongyi Date: Thu, 21 May 2026 13:38:34 +0800 Subject: [PATCH] feat: landing page shows full demos inline, sidebar lists all components --- packages/docs/app/page.tsx | 812 +++++++++++++++++++++------ packages/docs/components/Sidebar.tsx | 49 +- 2 files changed, 694 insertions(+), 167 deletions(-) diff --git a/packages/docs/app/page.tsx b/packages/docs/app/page.tsx index 221668a..78be1d9 100644 --- a/packages/docs/app/page.tsx +++ b/packages/docs/app/page.tsx @@ -1,219 +1,709 @@ 'use client'; + import { - Layout, Section, Article, Masthead, Rule, Folio, IndexBox, Factbox, - Headline, Subhead, Kicker, BodyText, Byline, Dateline, - Figure, PullQuote, Footer, BreakingNewsBanner, + Layout, Section, Article, Rule, BodyText, Figure, + Masthead, Headline, Subhead, Kicker, Byline, Dateline, + PullQuote, } from 'newspaperui'; import Link from 'next/link'; export default function LandingPage() { return ( - - {/* Breaking News Banner */} - - v0.1.0 released — 24 components, multi-language blocks, responsive grid, theme customization - +
+ {/* Hero */} +
+
Production Newspaper Components
+

NewspaperUI

+

+ 24 React components · CSS Grid + Multi-column · 中文 / English / 日本語 +

+
+ Documentation → + Create Theme + All Blocks + GitHub +
+
- {/* Masthead */} + {/* Demo 1: Chinese */} + + + + + {/* Demo 2: English */} + + + + + {/* Demo 3: Japanese */} + + + +
+ ); +} + +function DemoSection({ label, sublabel, children }: { label: string; sublabel: string; children: React.ReactNode }) { + return ( +
+
+ {label} + {sublabel} +
+
+ {children} +
+
+ ); +} + +/* ============================================================ + * DEMO: Chinese Front Page (人民周报) + * ============================================================ */ +const cn = { fontFamily: 'var(--font-family-cjk-serif)' }; +const cnRed = { color: 'var(--nui-accent-cjk-red)' }; + +function ZhFrontpageDemo() { + return ( + + {/* 报头 */} +
+
RENMIN ZHOUBAO · 中国第一周报
+

人民周报

+
+ 第 2026 期 · 总第 5891 期 + 2026 年 5 月 19 日 · 星期二 · 农历四月初三 + 每份 5 元 · 全年 260 元 +
+
+ + {/* 版面导航条 */} +
+ {['01版 要闻', '02版 经济', '03版 国际', '04版 文化', '05版 体育', '06版 副刊'].map((v, i) => ( +
{v}
+ ))} +
+ + {/* 头条区 */} +
+
+
【本报北京电】
+

+ 历史性贸易协定昨日签署 +

+

+ ——二十三国代表历经十一日谈判 达成关税、劳工、减排三大领域综合框架 +

+
+ 本报记者 王思源 李明 · 联合报道 +
+
+ +

本报布鲁塞尔电 经过连续十一天紧张磋商，二十三国代表于昨日深夜就一项涵盖关税、劳工标准与减排目标的综合框架协议达成最终一致。该协议尚需各成员国议会批准，但分析人士普遍认为，这是近一代人以来最具深远意义的国际经济协调成果。

+

协议核心条款涵盖三个层面：一是统一关税表，二是设立共同劳工最低标准，三是约束各方至 2040 年前的减排路径。重工业领域将自 2028 年起执行阶梯碳费，所得款项注入大陆投资基金，专项支持低碳制造业升级。

+

消息公布后，市场反应温和乐观。大陆综合指数收涨 1.2%，欧元兑美元上涨 0.7%。债券收益率从协议谈判期间高位回落至会前水平。资本货物板块领涨，被视为最大受益者。

+

国内政界反应不一。协议关于带薪休假和集体谈判权的劳工条款获工会联盟支持，但商会担忧中小企业难以承担合规成本。工业联合会主席表示，需要过渡期支持以缓解冲击。

+

三国议会领袖暗示，可能在夏季休会前完成批准程序。但另有两国政府表示将先行举行公投，预计审议过程将延续至秋季。贸易研究中心估算，即便按最快时间表，全面落实仍需至少十八个月。

+

对普通旅客和消费者而言，短期内变化有限。边境流程和产品标准在批准前仍按现行规定执行。但更深远的意义在于：历史上彼此分裂的邻国，正首次就最关键十年的共同规则达成一致。

+

分析人士指出，本次协议的最大突破在于建立了具有约束力的争端解决机制。九人仲裁小组由三个区域分别提名三人组成，对超过两千万单位的商业纠纷具有最终裁决权。这是过去多边协议中罕见的硬性条款。

+

环境团体对碳费机制表示谨慎乐观，但担忧 2028 年的起始时间过晚。多家环保组织联合声明称，将持续监督各国国内立法，确保不被既得利益集团淡化。

+

劳工议题方面，最低假期天数从原方案的 18 天上调至 20 天，这一调整被视为工会方的实质让步换得。集体谈判权的扩展则覆盖了中小企业，超过最初保守派的预期。

+ +
+
+ + {/* 二条区：3 栏并列 */} +
+
+
要 闻
+

气候立法获参议院全票通过

+ +

历经数月党争与多轮修正，参议院昨晚以全票通过气候资源法案。法案设立专项基金，加强对低碳产业的财政支持。

+

支持者称，这是数十年来最重要的环境立法之一；反对者则担忧地方财政承压。法案将于下月一日起施行，覆盖工业、交通、建筑等重点领域。

+ + +

城市轨道交通三线获批

+ +

市议会批准价值二十四亿的轨道交通扩展计划，将新增三条快线并延长既有线路服务时间。详见 A8 版。

+ + +

港口治理项目正式启动

+ +

工程师将在三年内完成沉积物清淤与海堤重建。地方版 A10。

+ +
+ +
+
经 济
+

制造业 PMI 创年内新高

+ +

统计局今日发布数据显示，五月制造业采购经理指数升至 52.4，连续第五个月位于扩张区间，新订单与生产指数双双走强。

+

分析人士指出，外需回暖与库存周期共同支撑制造业复苏。但中小企业景气度仍弱于大型企业，结构性矛盾尚未根本缓解。

+ + +

科技板块单日涨 3.7%

+ +

受人工智能商业化预期推动，科技股集体走强。半导体、云计算板块涨幅领先。

+ + +

大宗商品市场普遍下行

+ +

受美元走强影响，原油、铜、铁矿石主力合约日内回调，部分品种创近月新低。

+ +
+ +
+
文 化 · 教 育
+

故宫博物院新展开幕

+ +

「丝路千年——中亚出土文物特展」于今日在故宫博物院文华殿开幕，展出来自八国博物馆的二百二十件珍贵文物，覆盖公元前二世纪至公元十四世纪。

+

策展人介绍，展览分为「商路」「信仰」「艺术」「日常」四个单元，多件文物为首次出境展出。展期至九月三十日结束。

+ + +

大学申请人数创新高

+ +

全国统招报名人数较去年增长 18%，创历史新高。教育部表示将相应扩大录取规模。

+ + +

国家交响乐团新任音乐总监

+ +

经过两年的全球遴选，乐团昨日宣布由旅欧指挥家张明远接任音乐总监。

+ +
+
+ + {/* 简讯 + 要点提示 */} +
+
+
本期要点
+
    +
  • 贸易协定核心要点解读 · A2
    • +
  • 气候法案全文及解读 · A4
    • +
  • 制造业数据深度分析 · B1
    • +
  • 故宫新展专题与图集 · C3
    • +
  • 文化评论：丝路新解读 · C5
    • +
  • 读者来信精选 · D2
    • +
  • 体坛快报：联赛战报 · E1
    • +
  • 天气预报与生活信息 · F4
    • +
+
+ +
+
简 讯 · 国 际 国 内
+ +

北京 交通部发布新一轮高速公路建设规划，未来五年新增里程 8000 公里，重点覆盖中西部欠发达地区。

+

上海 自贸区扩区方案获批，新增的金融服务业开放清单将于下月发布，涵盖跨境支付、保险、证券等领域。

+

深圳 创业板新规修订草案征求意见，重点完善退市机制与投资者保护制度。

+

广州 粤港澳大湾区联合科创基金正式成立，首期规模 500 亿元，重点投向人工智能、生物医药、新能源汽车三大领域。

+

东京 日本央行维持利率不变，但下调全年通胀预期，市场对宽松政策延续抱有预期。

+

布鲁塞尔 欧盟峰会就援助方案达成一致，规模较此前预案扩大三成。

+

华盛顿 联邦储备委员会会议纪要显示，多数官员支持在年内启动降息周期，但具体时点仍存分歧。

+

新德里 印度公布新一年财政预算，重点向基础设施和清洁能源倾斜。

+

首尔 韩国央行宣布技术性下调政策利率 25 个基点，为今年首次降息。

+ +
+
+ + ); +} + +/* ============================================================ + * DEMO: English Front Page (The Daily Chronicle) + * ============================================================ */ +function EnFrontpageDemo() { + return ( + - {/* Main Content: 5 + 14 + 5 layout */} -
- - {/* Left sidebar: Index + Quick links */} -
- +
+
+ Inside Today + + Senate Approves Climate Resolution After Months of Debate + + +

The unanimous vote concludes a contentious legislative session marked by partisan disputes + and last-minute amendments. Page A6.

+ - - Install -
- pnpm add newspaperui-components newspaperui-theme -
+ Tech Sector Gains as Inflation Eases + +

Major indices climbed for a fifth consecutive session as new data showed price growth + slowing across consumer goods. Business B1.

+ + Drought Conditions Worsen Across the Plains + +

Officials in seven states have requested federal disaster relief as reservoir levels reach + historic lows. National A12.

+ - -
    -
  • 24 React components
    • -
  • CSS Grid + Multi-column
    • -
  • 4 font families
    • -
  • Warm off-white palette
    • -
  • Dark mode support
    • -
  • CJK ready (中/日)
    • -
  • 51 tests passing
    • -
- + + New Exhibit Opens at the Metropolitan + +

A retrospective of mid-century textile design draws record opening crowds. Arts C3.

+ + + + City Council Approves Transit Expansion + +

The $2.4 billion plan adds three new rail lines and extends service hours on existing routes. Metro A8.

+ + + + University Announces Record Enrollment + +

Applications rose 18 percent this cycle, driven by expanded financial aid programs. Education B4.

+ + + + Harbor Restoration Project Begins + +

Engineers will dredge sediment and rebuild seawalls over a three-year timeline. Local A10.

+ + + + Orchestra Names New Music Director + +

The appointment ends a two-year search following the previous director’s retirement. Arts C1.

+
{/* Center: Lead story */}
- Design System · Open Source +
Capitol · Breaking
- Print-Grade Typography Meets the Modern Web + Historic Accord Reshapes Continental Trade After Marathon Session - 24 components inspired by InDesign, built for React. Real multi-column flow, drop caps, small caps, old-style figures — the full newspaper toolkit. + Negotiators emerge with sweeping framework on tariffs, labor, and emissions; ratification expected within weeks -
- By the NewspaperUI Team +
+ By Eleanor Whitcombe and Marcus Reyes + · + 5 min read
-

Open Source — NewspaperUI brings the precision of professional newspaper typesetting to web development. Built on a 24-column CSS Grid foundation with CSS Multi-column text flow, it reproduces the dense, information-rich layouts that have defined print journalism for centuries.

-

The library's visual weight system — borrowed from InDesign's paragraph styles — drives all typography from a single data source. Change one value in the visual-weights mapping, and every Headline, Subhead, and BodyText component updates globally. This is design-token architecture taken to its logical conclusion.

-

Typography details that most web frameworks ignore are first-class citizens here: true OpenType small caps (not faked with text-transform), old-style figures that blend with body text, hanging punctuation, proper paragraph indentation (no space between paragraphs, first-line indent from paragraph two), and drop caps that actually work with CSS ::first-letter.

-

The multi-column flow is real CSS columns — text reflows naturally across 2, 3, or 4 columns with hairline rules between them. Pull quotes span all columns. Figures break cleanly. Orphans and widows are controlled. This is how InDesign works, translated to the browser.

-

Four preset themes ship out of the box: Classic NYT (warm off-white, Cormorant Garamond masthead), The Times (ink-blue accent), Modern Dark (warm brown-black), and Swiss Modern (Helvetica-clean). The Create page lets you customize every token and export a CSS file for your project.

+

Brussels — 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.

+ +

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.”

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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.”

 - - Components should be few, precise, and unambiguous. Every prop maps to a real newspaper concept. + + A long argument that finally became a conversation. - -

Multi-language support is built in from day one. Chinese layouts use Noto Serif SC with restrained red accents (masthead and kickers only). Japanese layouts support both horizontal (yokogumi) and traditional vertical (tategumi) writing modes. German blackletter mastheads use UnifrakturMaguntia.

-

The responsive system uses CSS media queries injected per-Section, so column counts adapt to viewport width without JavaScript. Font sizes use clamp() for fluid scaling between mobile and desktop. No runtime overhead, no layout shift.

+ +

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.

+ +

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.
- {/* Right sidebar: Demo previews */} -
- Live Blocks - Multi-language Demos +
+ Foreign Desk + + Coastal Nations Pledge Joint Action on Maritime Pollution + + + Pact follows years of stalled regional talks and a cascade of recent shipping accidents. + + By Tomás Almeida - {/* Mini Chinese preview */} - -
-
人民周报
-
历史性贸易协定昨日签署…
-
View Chinese Block →
-
- + +

Lisbon — 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.

- {/* Mini English preview */} - -
-
The Quiet Collapse of the Middle Shelf
-
How a generation of mid-list authors lost their publishers…
-
View English Block →
-
- +

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.

- {/* Mini Japanese preview */} - -
-
朝日新聞
-
歴史的通商協定が成立…
-
View Japanese Block →
-
- +

The compact takes effect on January 1, pending technical annexes. Environmental observers + described the pact as the most consequential maritime accord in a decade.

+ + Fisheries Report Warns of Declining Stocks + +

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.

+ - {/* Quick links */} - More -
    -
  • All 6 Blocks →
    • -
  • NYT Front Page →
    • -
  • Blackletter →
    • -
  • Theme Creator →
    • -
  • Documentation →
    • -
+ + Rail Strike Averted After Late-Night Deal + +

Workers accepted a revised pay offer minutes before the midnight deadline. Services + resume on normal schedules. Transport B2.

+
- {/* Bottom section: Component showcase strip */} -
+
- -
+ National · Investigation + + Records Reveal Years of Overlooked Warnings at Aging Reservoirs + + + Internal inspection memoranda, obtained through public records requests, suggest that + structural concerns flagged repeatedly by field engineers were not escalated to senior staff. + + By Ravi Nair, Anita Kowalski, and Charles Weston -
- -
    -
  • Layout
    • -
  • Section
    • -
  • Article
    • -
  • Layer
    • -
  • Masthead
    • -
  • Rule
    • -
  • Footer
    • -
  • Sidebar
    • -
  • BreakingNewsBanner
    • -
- -
+ +

Sacramento — 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.

-
- -
    -
  • Headline
    • -
  • Subhead
    • -
  • Kicker
    • -
  • BodyText
    • -
  • Quote
    • -
  • Byline
    • -
  • Dateline
    • -
  • Caption
    • -
  • AuthorCard
    • -
  • JumpLine
    • -
- -
+

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.

-
- -
    -
  • Image
    • -
  • Figure
    • -
  • Video
    • -
  • PullQuote
    • -
- -
+

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.

-
- -
    -
  • IndexBox
    • -
  • Factbox
    • -
  • RelatedArticles
    • -
- +

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.

+ +

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.

+ +

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.

+ +
+
+ + ); +} + +/* ============================================================ + * DEMO: Japanese Front Page (朝日新聞 · 横組み) + * ============================================================ */ +const jp = { fontFamily: 'var(--font-family-cjk-jp)' }; +const jpAccent = { color: 'var(--nui-accent-ink-blue)' }; + +function JpFrontpageDemo() { + return ( + + {/* 報頭 */} +
+

朝日新聞

+
+ 第48721号 + 令和8年（2026年）5月19日 火曜日 + 朝刊 · 14版 +
+
+ + {/* 一面トップ */} +
+
+
【速報】
+

+ 歴史的通商協定が成立　23カ国が署名 +

+

+ 関税・労働・排出削減の包括枠組み　批准手続きへ +

+
+ ブリュッセル＝山田太郎、佐藤花子 +
+ +
+ + +

【ブリュッセル＝山田太郎】11日間にわたる交渉の末、23カ国の代表団は19日未明、関税、労働基準、温室効果ガス排出削減を包括する通商枠組み協定に署名した。各国議会の批准を経て発効する見通しで、分析筋は「一世代で最も重要な国際経済協調の成果」と評価している。

+

協定の柱は三つ。第一に関税表の統一、第二に共通の労働最低基準の設定、第三に2040年までの排出削減経路への拘束力ある約束だ。重工業分野では2028年から段階的炭素賦課金が導入され、その収入は低炭素製造業への投資基金に充てられる。

+

市場は穏やかな楽観で反応した。大陸総合指数は1.2％上昇し、通貨は対ドルで0.7％高。交渉期間中に上昇していた債券利回りは、交渉開始前の水準に戻った。資本財セクターが上昇を主導した。

+

国内政治の反応は分かれた。協定の労働条項——有給休暇と団体交渉権の最低基準を定める——は労働組合連合から即座に歓迎されたが、商工会議所からは中小企業のコンプライアンス負担への懸念が示された。

+

3カ国の議会指導者は夏季休会前の批准を示唆した。しかし2カ国の政府は事前に国民投票を実施する意向を示しており、手続きは秋まで延びる可能性がある。貿易研究センターは、最も楽観的なシナリオでも完全実施には少なくとも18カ月を要すると試算している。

+

一般の旅行者や消費者にとって、当面の影響は限定的だ。国境手続きや製品基準は批准まで現行規定が適用される。しかし交渉担当者らは、より長い射程こそが重要だと主張する——歴史的に対立してきた隣国同士が、最も重要な10年間の共通ルールに合意したことの意義を。

+
- {/* Footer */} -