diff --git a/packages/docs/.source/index.d.ts b/packages/docs/.source/index.d.ts new file mode 100644 index 0000000..3eca4d1 --- /dev/null +++ b/packages/docs/.source/index.d.ts @@ -0,0 +1,3 @@ +import type { GetOutput } from "fumadocs-mdx/config" +export declare const docs: GetOutput +export declare const meta: GetOutput \ No newline at end of file diff --git a/packages/docs/.source/index.js b/packages/docs/.source/index.js new file mode 100644 index 0000000..5ee4320 --- /dev/null +++ b/packages/docs/.source/index.js @@ -0,0 +1,17 @@ +import { toRuntime, toRuntimeAsync } from "fumadocs-mdx" +import * as docs_0 from "../content/docs/grid-system.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as docs_1 from "../content/docs/components/article.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as docs_2 from "../content/docs/components/masthead.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as docs_3 from "../content/docs/components/media.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as docs_4 from "../content/docs/components/rule.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as docs_5 from "../content/docs/examples/responsive.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as docs_6 from "../content/docs/examples/spanning.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as docs_7 from "../content/docs/text/index.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as docs_8 from "../content/docs/theme/index.mdx?collection=docs&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as meta_0 from "../content/docs/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as meta_1 from "../content/docs/examples/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as meta_2 from "../content/docs/components/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as meta_3 from "../content/docs/text/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +import * as meta_4 from "../content/docs/theme/meta.json?collection=meta&hash=4f3bc6e48351eef47611191451d86bf2ebc0c4238119c3a0c8870a549ef72ca3" +export const docs = [toRuntime("doc", docs_0, {"path":"grid-system.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/grid-system.mdx"}), toRuntime("doc", docs_1, {"path":"components/article.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/article.mdx"}), toRuntime("doc", docs_2, {"path":"components/masthead.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/masthead.mdx"}), toRuntime("doc", docs_3, {"path":"components/media.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/media.mdx"}), toRuntime("doc", docs_4, {"path":"components/rule.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/rule.mdx"}), toRuntime("doc", docs_5, {"path":"examples/responsive.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/responsive.mdx"}), toRuntime("doc", docs_6, {"path":"examples/spanning.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/spanning.mdx"}), toRuntime("doc", docs_7, {"path":"text/index.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/index.mdx"}), toRuntime("doc", docs_8, {"path":"theme/index.mdx","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/theme/index.mdx"})]; +export const meta = [toRuntime("meta", meta_0, {"path":"meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/meta.json"}), toRuntime("meta", meta_1, {"path":"examples/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/examples/meta.json"}), toRuntime("meta", meta_2, {"path":"components/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/components/meta.json"}), toRuntime("meta", meta_3, {"path":"text/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/text/meta.json"}), toRuntime("meta", meta_4, {"path":"theme/meta.json","absolutePath":"/Users/joi-com/Desktop/space/newspaperui/packages/docs/content/docs/theme/meta.json"})]; \ No newline at end of file diff --git a/packages/docs/.source/source.config.mjs b/packages/docs/.source/source.config.mjs new file mode 100644 index 0000000..1cd3d53 --- /dev/null +++ b/packages/docs/.source/source.config.mjs @@ -0,0 +1,11 @@ +// source.config.ts +import { defineDocs, defineConfig } from "fumadocs-mdx/config"; +var { docs, meta } = defineDocs({ + dir: "content/docs" +}); +var source_config_default = defineConfig(); +export { + source_config_default as default, + docs, + meta +}; diff --git a/packages/docs/app/(docs)/components/article/page.tsx b/packages/docs/app/(docs)/components/article/page.tsx deleted file mode 100644 index 71d9aa2..0000000 --- a/packages/docs/app/(docs)/components/article/page.tsx +++ /dev/null @@ -1,219 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Layer, - Headline, - Subhead, - BodyText, -} from 'newspaperui'; -import { Demo } from '@/components/Demo'; -import { PropsTable } from '@/components/PropsTable'; - -export default function ArticlePage() { - return ( - -
-
- - Article + Layer - - - Article 是栅格内的文章块，通过 grid-column span 跨栏。Layer 是脱离文档流的浮动层。 - - - - Article API - - - - - 跨栏 Demo - - -
-
- 短讯 - ... -
-
- 主稿 - ... -
-
-`} - > - -
-
- - 短讯 - - -

- Markets responded cautiously through the morning session. The pound - traded sideways against the dollar, gilts firmed by three basis points. -

- -
-
- - 主稿 - - -

- Whitehall officials confirmed late Tuesday that the long-anticipated - review of national infrastructure funding will be tabled before the - recess. The 248-page document, drafted across three departments, - recommends a recalibration of regional priorities and a measured shift - toward rail electrification. -

-

- Critics inside the cabinet caution that the timing risks overshadowing - the chancellor’s autumn statement, while supporters describe the - proposals as the most coherent strategic blueprint in a generation. -

- -
-
- - - - - Layer API - - -

- Layer 脱离栅格流，使用 CSS position 定位。适合浮动拉引、浮动广告、sticky 导航等场景。 -

- - - - -
- 主要文章 - ... -
- - - -`} - > - -
-
-
- - 主要文章 - - -

- In Manchester, regional officials greeted the announcement with - measured optimism. The mayor’s office is expected to issue a - formal response by week’s end. -

- -
- - - -
-
- - -
-
- - ); -} diff --git a/packages/docs/app/(docs)/components/masthead/page.tsx b/packages/docs/app/(docs)/components/masthead/page.tsx deleted file mode 100644 index 1ad56c0..0000000 --- a/packages/docs/app/(docs)/components/masthead/page.tsx +++ /dev/null @@ -1,148 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Headline, - Subhead, - BodyText, - Masthead, -} from 'newspaperui'; -import { Demo } from '@/components/Demo'; -import { PropsTable } from '@/components/PropsTable'; - -export default function MastheadPage() { - return ( - -
-
- - Masthead 报头 - - - 报头是报纸的门面。三个 variant 覆盖经典双线居中、哥特体、现代左对齐三种风格。 - - - - API - - - - - Classic - - `} - > - - - - - Blackletter - - `} - > - - - - - Modern - - `} - > - - - - - 使用建议 - - -

- Masthead 默认 gridColumn: 1 / -1，在 Section 内自动全宽。 - 通常放在 Layout 的第一个 Section 中，后接 Rule 分隔线。 -

- -
-
- - ); -} diff --git a/packages/docs/app/(docs)/components/media/page.tsx b/packages/docs/app/(docs)/components/media/page.tsx deleted file mode 100644 index 8d18839..0000000 --- a/packages/docs/app/(docs)/components/media/page.tsx +++ /dev/null @@ -1,166 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Headline, - Subhead, - BodyText, - Figure, - PullQuote, -} from 'newspaperui'; -import { Demo } from '@/components/Demo'; -import { PropsTable } from '@/components/PropsTable'; - -export default function MediaPage() { - return ( - -
-
- - 媒体组件 - - - Image、Figure、Video、PullQuote — 报纸版面中的视觉元素。 - - - - Image - - -

- 基础图片组件。display: block; width: 100%，在 Section 栅格内通过 - span 跨栏。 -

- - - - - Figure - - -

- 组合 Image + Caption + Credit 的语义容器。自动渲染 figcaption。 -

- - - `} - > -
- - - - Video - - - -

- Video 组件与 Figure 结构类似，包裹 <video> 标签并附带 - caption/credit。 -

- - - - PullQuote - - -

- 上下双 hairline + Display 字体的拉引组件。在多栏 BodyText 内设置 - spanAllColumns 可跨所有栏（通过 column-span: all）。 -

- - - - - We have lobbied for this kind of clarity for the better part of a decade. -`} - > - - We have lobbied for this kind of clarity for the better part of a decade. - - - - -

...

- ... -

...

-`} - > - -

- Whitehall officials confirmed late Tuesday that the long-anticipated review - of national infrastructure funding will be tabled before the recess. The - 248-page document, drafted across three departments, recommends a - recalibration of regional priorities and a measured shift toward rail - electrification. -

- - The most coherent strategic blueprint in a generation. - -

- Markets responded cautiously through the morning session. The pound traded - sideways against the dollar, gilts firmed by three basis points, and the - FTSE 100 closed marginally lower as defensive sectors absorbed the - day’s modest outflows. -

-

- In Manchester, regional officials greeted the announcement with measured - optimism. The mayor’s office is expected to issue a formal response by - week’s end, focusing on commitments to the trans-Pennine corridor. -

- - -
-
- - ); -} diff --git a/packages/docs/app/(docs)/components/rule/page.tsx b/packages/docs/app/(docs)/components/rule/page.tsx deleted file mode 100644 index a22e658..0000000 --- a/packages/docs/app/(docs)/components/rule/page.tsx +++ /dev/null @@ -1,134 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Headline, - Subhead, - BodyText, - Rule, -} from 'newspaperui'; -import { Demo } from '@/components/Demo'; -import { PropsTable } from '@/components/PropsTable'; - -export default function RulePage() { - return ( - -
-
- - Rule 分隔线 - - - 显式分隔线组件。三个 variant 覆盖 hairline、double、thick，支持水平和垂直方向。 - - - - API - - - - - 水平方向三种 variant - - -
-
- -

hairline

- - -
-
- -

double

- - -
-
- -

thick

- - -
-
- - - - 垂直方向 - - -
左栏内容
- -
右栏内容
-`} - > -
-
- -

- Markets responded cautiously through the morning session. The pound - traded sideways against the dollar. -

- -
- -
- -

- Analysts at three of the City’s largest houses framed the move as - a holding pattern. -

- -
-
- - - - 使用建议 - - -

- Rule 在 Section 栅格内默认 gridColumn: 1 / -1 全跨。 - 如果只需要跨部分列，传入 span prop。垂直 Rule 适合放在 - flex 容器中作为栏间分隔。 -

- -
-
- - ); -} diff --git a/packages/docs/app/(docs)/examples/responsive/page.tsx b/packages/docs/app/(docs)/examples/responsive/page.tsx deleted file mode 100644 index b287519..0000000 --- a/packages/docs/app/(docs)/examples/responsive/page.tsx +++ /dev/null @@ -1,258 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Headline, - Subhead, - BodyText, - Rule, -} from 'newspaperui'; -import { CodeBlock } from '@/components/CodeBlock'; - -export default function ResponsivePage() { - return ( - -
-
- - 响应式设计 - - - NewspaperUI 的响应式策略完全基于 CSS media query + container query， - 不依赖 JavaScript 运行时计算。 - - - - 断点说明 - - -

- 三个核心断点覆盖移动、平板、桌面： -

- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
断点宽度栏数建议说明
Mobile< 768px1 栏（全宽）单栏堆叠，BodyText columns=1
Tablet768px - 1024px12 列两栏布局，BodyText columns=2
Desktop> 1024px24 列完整多栏布局
-
- - - 实施手法 - - -

- NewspaperUI 不再使用 JavaScript responsive 函数。所有响应式行为通过 CSS - media query 和 container query 实现，零运行时开销。 -

-

- Section 的 gridTemplateColumns 是 inline style，因此需要在 - 消费侧用 CSS 覆盖。推荐做法： -

- - - - - -

- 或者使用 container query 让 Section 根据自身宽度自适应： -

- - - - - - - - 视口效果预览 - - -

- 下面三个区块模拟桌面、平板、移动端的视觉效果。实际项目中建议使用浏览器 - DevTools 的 responsive mode 进行测试。 -

- - -
-
-
- Desktop (1024px+) — 24 列完整布局 -
-
- -
-
- Briefing -

Short news items.

 -
-
- Lead Story -

Main article content with full detail.

 -
-
- Markets -

FTSE, gilts, sterling.

 -
-
- -
-
- -
-
- Tablet (768-1024px) — 12 列简化 -
-
- -
-
- Lead Story -

Main article.

 -
-
- Secondary -

Supporting content.

 -
-
- -
-
- -
-
- Mobile (<768px) — 单栏堆叠 -
-
- -
-
- Lead Story -

Full-width single column.

 -
-
- Secondary -

Stacked below.

 -
-
- -
-
-
-
-
- - ); -} diff --git a/packages/docs/app/(docs)/examples/spanning/page.tsx b/packages/docs/app/(docs)/examples/spanning/page.tsx deleted file mode 100644 index e5b01d4..0000000 --- a/packages/docs/app/(docs)/examples/spanning/page.tsx +++ /dev/null @@ -1,236 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Headline, - Subhead, - BodyText, - Rule, -} from 'newspaperui'; -import { Demo } from '@/components/Demo'; - -export default function SpanningPage() { - return ( - -
-
- - 跨栏布局示例 - - - 五种常见栏宽组合，演示 24 列栅格的灵活性。 - -
-
- - - -
-
- - 8 + 16 - -
-
- - -
-
- - Briefing - - -

- Markets responded cautiously through the morning session. The pound - traded sideways against the dollar. -

- -
-
- - Infrastructure Review Tabled - - -

- Whitehall officials confirmed late Tuesday that the long-anticipated - review of national infrastructure funding will be tabled before the - recess. The 248-page document recommends a recalibration of regional - priorities. -

- -
-
- - - -
-
- - 6 + 12 + 6 - -
-
- - -
-
- - Weather - - -

Partly cloudy, 18C. Wind NW 12 mph. Sunset 20:47.

- -
-
- - Chancellor Outlines Spending Envelope - - -

- The chancellor confirmed a three-year spending envelope that prioritizes - rail electrification and regional connectivity. The announcement was - greeted with cautious optimism across the House. -

- -
-
- - Markets - - -

FTSE 100: 7,842 (-0.2%). Gilts +3bp. Sterling flat.

- -
-
- - - -
-
- - 12 + 12 - -
-
- - -
-
- - View from Westminster - - -

- Critics inside the cabinet caution that the timing risks overshadowing - the chancellor’s autumn statement. The opposition has called for a - full debate before any commitments are made. -

- -
-
- - View from the Regions - - -

- In Manchester, regional officials greeted the announcement with measured - optimism. The mayor’s office is expected to issue a formal response - by week’s end. -

- -
-
- - - -
-
- - 4 + 16 + 4 - -
-
- - -
-
- -

- Editor’s note: This report was filed before the evening session. -

- -
-
- - A Standing Technical Commission - - -

- Beyond the immediate fiscal arithmetic, the review’s most - consequential proposal may be its quietest: a standing technical - commission, modeled on Australia’s Infrastructure Australia, to - depoliticize project sequencing. -

- -
-
- -

- Related: “How Australia reformed infrastructure planning” - — p. 12 -

- -
-
- - - -
-
- - 24 全宽 - -
-
- - -
-
- - The Quiet Revolution in Treasury Forecasting - - -

- Whitehall officials confirmed late Tuesday that the long-anticipated - review of national infrastructure funding will be tabled before the - recess. The 248-page document, drafted across three departments, - recommends a recalibration of regional priorities and a measured shift - toward rail electrification. -

-

- Markets responded cautiously through the morning session. The pound - traded sideways against the dollar, gilts firmed by three basis points, - and the FTSE 100 closed marginally lower as defensive sectors absorbed - the day’s modest outflows. -

-

- In Manchester, regional officials greeted the announcement with measured - optimism. The mayor’s office is expected to issue a formal response - by week’s end, focusing on commitments to the trans-Pennine - corridor and the long-deferred upgrade of suburban tram capacity. -

-

- Beyond the immediate fiscal arithmetic, the review’s most - consequential proposal may be its quietest: a standing technical - commission to depoliticize project sequencing. Whether that body acquires - teeth will be determined by the legislation expected in the spring. -

- -
-
- - - - ); -} diff --git a/packages/docs/app/(docs)/grid-system/page.tsx b/packages/docs/app/(docs)/grid-system/page.tsx deleted file mode 100644 index b5664ef..0000000 --- a/packages/docs/app/(docs)/grid-system/page.tsx +++ /dev/null @@ -1,225 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Headline, - Subhead, - BodyText, -} from 'newspaperui'; -import { Demo } from '@/components/Demo'; -import { PropsTable } from '@/components/PropsTable'; - -export default function GridSystemPage() { - return ( - -
-
- - 栅格系统 - - - 24 列由 Layout 提供上下文，Section 在栅格内分配 grid-template-columns， - Article 用 grid-column span 跨栏。所有跨栏统一通过 CSS Grid 完成。 - - - - 24 列可视化 - - -

- 下面的网格演示了 24 列的等宽分布。每个数字标签对应一列。报纸排版偏好 24 - 列是因为它能整除 2 / 3 / 4 / 6 / 8 / 12，足够灵活地实现 1/3、2/3、1/4、3/4 - 这类常见栏宽组合。 -

- - -
- {Array.from({ length: 24 }, (_, i) => ( -
- {i + 1} -
- ))} -
- - - Layout API - - -

- Layout 是顶层容器，提供 LayoutContext。Section 通过 - useLayout 读取列数上限并自动 clamp。 -

- - - - - Section API - - -

- Section 是栅格容器， - display: grid; grid-template-columns: repeat(N, 1fr) - 。子 Article 通过 grid-column span 占位。 -

- - - - - Article API - - -

- Article 在 Section 栅格内用 grid-column span N 占位。 - span 缺省时占满 Section 全宽。 -

- - - - - 实例 - - -
-
- 短讯 - ... -
-
- 主稿 - ... -
-
-`} - > - -
-
- - 短讯 - - -

占 8 列。短讯栏适合放编辑选编、精选事件、快速通读型小段。

- -
-
- - 主稿 - - -

- 占 16 列。主稿区域承载头版头条、深度报道，可启用 - 多栏文字流以增强阅读节奏。 -

- -
-
- - -
-
- - ); -} diff --git a/packages/docs/app/(docs)/layout.tsx b/packages/docs/app/(docs)/layout.tsx deleted file mode 100644 index 7313d0d..0000000 --- a/packages/docs/app/(docs)/layout.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Sidebar } from '../../components/Sidebar'; - -export default function DocsLayout({ children }: { children: React.ReactNode }) { - return ( -
- -
- {children} -
-
- ); -} diff --git a/packages/docs/app/(docs)/text/page.tsx b/packages/docs/app/(docs)/text/page.tsx deleted file mode 100644 index 6a9ae4a..0000000 --- a/packages/docs/app/(docs)/text/page.tsx +++ /dev/null @@ -1,266 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Headline, - Subhead, - Kicker, - BodyText, - Quote, - Byline, - Dateline, - Caption, -} from 'newspaperui'; -import { visualWeights, resolveFontSize } from 'newspaperui-theme'; -import { Demo } from '@/components/Demo'; - -const longText = `Whitehall officials confirmed late Tuesday that the long-anticipated review of national infrastructure funding will be tabled before the recess. The 248-page document, drafted across three departments, recommends a recalibration of regional priorities and a measured shift toward rail electrification. Critics inside the cabinet caution that the timing risks overshadowing the chancellor's autumn statement, while supporters describe the proposals as the most coherent strategic blueprint in a generation.`; - -const longText2 = `Markets responded cautiously through the morning session. The pound traded sideways against the dollar, gilts firmed by three basis points, and the FTSE 100 closed marginally lower as defensive sectors absorbed the day's modest outflows. Analysts at three of the City's largest houses framed the move as a holding pattern, awaiting further detail on the spending envelope rather than a verdict on its substance.`; - -const longText3 = `In Manchester, regional officials greeted the announcement with measured optimism. "We have lobbied for this kind of clarity for the better part of a decade," said one senior figure who requested anonymity to discuss internal deliberations. The mayor's office is expected to issue a formal response by week's end, focusing on commitments to the trans-Pennine corridor and the long-deferred upgrade of suburban tram capacity.`; - -const longText4 = `Beyond the immediate fiscal arithmetic, the review's most consequential proposal may be its quietest: a standing technical commission, modeled on Australia's Infrastructure Australia, to depoliticize project sequencing. Whether that body acquires teeth — or settles into the advisory torpor that has consumed earlier attempts — will be determined by the legislation expected in the spring.`; - -interface WeightRow { - component: string; - weight: string; - fontFamily: string; - fontSize: string; - fontWeight: number; - lineHeight: number; - color: string; -} - -function buildWeightRows(): WeightRow[] { - const rows: WeightRow[] = []; - for (const [comp, weights] of Object.entries(visualWeights)) { - for (const [w, cfg] of Object.entries(weights)) { - if (!cfg) continue; - rows.push({ - component: comp, - weight: w, - fontFamily: cfg.fontFamily, - fontSize: resolveFontSize(cfg.fontSize), - fontWeight: cfg.fontWeight, - lineHeight: cfg.lineHeight, - color: cfg.color, - }); - } - } - return rows; -} - -export default function TextPage() { - const weightRows = buildWeightRows(); - - return ( - -
-
- - 文本组件 - - - 从 Headline 到 Caption 的完整文本谱系。每个组件按视觉权重映射到字体、字号、字重、 - 行高与颜色 token，避免硬编码样式。 - - - - Headline 三档 - - -
-
- weight="High" - - A Quiet Revolution in the Treasury Forecast - -
-
- weight="Medium" - - Whitehall Confirms Infrastructure Review - -
-
- weight="Low" - - Briefing: regional rail commitments - -
-
- - - - Subhead 两档 - - -
- - A measured recalibration of regional priorities is expected to define the - chancellor’s autumn agenda. - - - Officials emphasized that the headline figures should be read as a planning - envelope rather than a binding allocation. - -
- - - - Kicker - - -
- POLITICS · WHITEHALL - - A Standing Technical Commission, Quietly Proposed - -
- - - - BodyText 多栏文字流 - - - - -

{longText}

-

{longText2}

- - - - -

...

-

...

-`} - > - -

{longText}

-

{longText2}

-

{longText3}

-

{longText4}

- - - - - -

{longText}

-

{longText2}

-

{longText3}

- - - - - Quote 引用 - - -
- - We have lobbied for this kind of clarity for the better part of a decade. - - -

- 按一位资深内阁人士的说法，这份评估 - - 是一个时代以来最连贯的战略蓝图 - - ，但能否落地仍取决于春季立法。 -

- -
- - - - Byline / Dateline / Caption - - -
-
- BY ALICE SMITH - LONDON — -
-
-
- - A view of the Treasury terrace at dusk; the new commission will report - here from May. - -
-
- - - - 视觉权重映射表 - - -

- 下表从 visualWeights 数据动态生成，反映组件实际渲染时所用的 - token。修改 theme 后表格自动同步。 -

- -
- - - - - - - - - - - - - - {weightRows.map((row, idx) => ( - - - - - - - - - - ))} - -
组件权重字体字号字重行高颜色
{row.component}{row.weight} - {row.fontFamily} - {row.fontSize}{row.fontWeight}{row.lineHeight} - {row.color} -
-
-
-
- - ); -} diff --git a/packages/docs/app/(docs)/theme/page.tsx b/packages/docs/app/(docs)/theme/page.tsx deleted file mode 100644 index 60338a6..0000000 --- a/packages/docs/app/(docs)/theme/page.tsx +++ /dev/null @@ -1,216 +0,0 @@ -'use client'; -import { - Layout, - Section, - Article, - Headline, - Subhead, - BodyText, -} from 'newspaperui'; -import { ThemeToggle } from '@/components/ThemeToggle'; - -interface Swatch { - token: string; - hex: string; - label?: string; -} - -const textSwatches: Swatch[] = [ - { token: '--nui-text-primary', hex: '#1A1A1A', label: '标题、主文本' }, - { token: '--nui-text-body', hex: '#22201C', label: '正文' }, - { token: '--nui-text-secondary', hex: '#4A4742', label: 'Subhead、次级' }, - { token: '--nui-text-muted', hex: '#6E6A63', label: 'Caption、注释' }, - { token: '--nui-text-quote', hex: '#2E2A24', label: 'Quote 主体' }, -]; - -const surfaceSwatches: Swatch[] = [ - { token: '--nui-bg-page', hex: '#F7F4ED', label: 'Warm off-white 页面底' }, - { token: '--nui-bg-surface', hex: '#FBF9F4', label: '次级面板背景' }, - { token: '--nui-rule-hairline', hex: '#C9C2B2', label: '细线分隔' }, - { token: '--nui-rule-decorative', hex: '#1A1A1A', label: '强调线' }, - { token: '--nui-highlight', hex: '#F2E9C8', label: '旧报纸黄' }, -]; - -const accentSwatches: Swatch[] = [ - { token: '--nui-accent-primary', hex: '#7A1F1F', label: 'Brick red, Kicker / Masthead 强调' }, - { token: '--nui-accent-ink-blue', hex: '#1B2A4A', label: 'The Times 蓝' }, - { token: '--nui-highlight', hex: '#F2E9C8', label: '高亮底色' }, -]; - -interface FontFamily { - token: string; - sample: string; - description: string; -} - -const families: FontFamily[] = [ - { - token: '--font-family-masthead', - sample: 'The Daily Chronicle', - description: 'Cormorant Garamond — 报头', - }, - { - token: '--font-family-blackletter', - sample: 'The Daily Chronicle', - description: 'UnifrakturMaguntia — Blackletter preset', - }, - { - token: '--font-family-display', - sample: 'A Quiet Revolution', - description: 'Source Serif 4 — Display 大字头条', - }, - { - token: '--font-family-headline', - sample: 'Whitehall confirms review', - description: 'Source Serif 4 — Headline / Subhead', - }, - { - token: '--font-family-body', - sample: 'In Manchester, regional officials greeted the announcement.', - description: 'Source Serif 4 — 正文', - }, - { - token: '--font-family-meta', - sample: 'BY ALICE SMITH · LONDON', - description: 'Inter — small-caps 元信息', - }, -]; - -function SwatchGrid({ swatches }: { swatches: Swatch[] }) { - return ( -
- {swatches.map((s) => ( -
-
-
- {s.token} -
- {s.hex} - {s.label ? ` · ${s.label}` : ''} -
-
-
- ))} -
- ); -} - -export default function ThemePage() { - return ( - -
-
- - 主题与颜色 - - - 设计哲学：暖灰系 + warm off-white。不使用纯黑（#000）也不使用纯白（#FFF）， - 把屏幕配色带回纸面的温度。 - - - - 主题切换 - - -

- 点击切换深色模式。深色基调采用暖深棕黑（#14110D）而非冷蓝黑，保持报纸的纸性触感。 -

- -
- -
- - - 文字色 token - - - - - 背景与分隔线 token - - - - - 强调色 token - - - - - 字体家族 - - -

- 全部经典严肃风字体：Cormorant Garamond 承担报头与展示，Source Serif 4 - 贯穿正文与标题，Inter 处理 small-caps 元信息。Blackletter preset 通过 - UnifrakturMaguntia 切入哥特报头。 -

- -
- {families.map((f) => ( -
-
- {f.token} · {f.description} -
-
- {f.sample} -
-
- ))} -
-
-
- - ); -} diff --git a/packages/docs/app/docs/[[...slug]]/page.tsx b/packages/docs/app/docs/[[...slug]]/page.tsx new file mode 100644 index 0000000..fa24209 --- /dev/null +++ b/packages/docs/app/docs/[[...slug]]/page.tsx @@ -0,0 +1,22 @@ +import { source } from '@/lib/source'; +import { DocsPage, DocsBody } from 'fumadocs-ui/page'; +import { notFound } from 'next/navigation'; + +export default async function Page(props: { params: Promise<{ slug?: string[] }> }) { + const params = await props.params; + const page = source.getPage(params.slug); + if (!page) notFound(); + + const MDX = page.data.body; + return ( + + + + + + ); +} + +export function generateStaticParams() { + return source.generateParams(); +} diff --git a/packages/docs/app/docs/layout.tsx b/packages/docs/app/docs/layout.tsx new file mode 100644 index 0000000..7042d07 --- /dev/null +++ b/packages/docs/app/docs/layout.tsx @@ -0,0 +1,11 @@ +import { DocsLayout } from 'fumadocs-ui/layouts/docs'; +import { source } from '@/lib/source'; +import type { ReactNode } from 'react'; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} diff --git a/packages/docs/app/layout.tsx b/packages/docs/app/layout.tsx index ae8f29c..fc329f9 100644 --- a/packages/docs/app/layout.tsx +++ b/packages/docs/app/layout.tsx @@ -1,5 +1,7 @@ import './globals.css'; +import 'fumadocs-ui/style.css'; import type { Metadata } from 'next'; +import { RootProvider } from 'fumadocs-ui/provider'; import { Header } from '../components/Header'; export const metadata: Metadata = { @@ -9,10 +11,12 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - -
- {children} + + + +
+ {children} + ); diff --git a/packages/docs/app/page.tsx b/packages/docs/app/page.tsx index 78be1d9..d2d8638 100644 --- a/packages/docs/app/page.tsx +++ b/packages/docs/app/page.tsx @@ -45,7 +45,7 @@ export default function LandingPage() { 24 React components · CSS Grid + Multi-column · 中文 / English / 日本語

- Documentation → + Documentation → Create Theme All Blocks GitHub diff --git a/packages/docs/components/Header.tsx b/packages/docs/components/Header.tsx index 551c668..28fd0cb 100644 --- a/packages/docs/components/Header.tsx +++ b/packages/docs/components/Header.tsx @@ -3,9 +3,9 @@ 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: 'Docs', href: '/docs/grid-system' }, + { label: 'Components', href: '/docs/components/article' }, + { label: 'Themes', href: '/docs/theme' }, { label: 'Blocks', href: '/blocks' }, { label: 'Create', href: '/create' }, ]; diff --git a/packages/docs/components/Sidebar.tsx b/packages/docs/components/Sidebar.tsx deleted file mode 100644 index 60e64cf..0000000 --- a/packages/docs/components/Sidebar.tsx +++ /dev/null @@ -1,174 +0,0 @@ -'use client'; -import Link from 'next/link'; -import { usePathname } from 'next/navigation'; - -function cx(...args: (string | false | null | undefined)[]): string { - return args.filter(Boolean).join(' '); -} - -interface NavItem { - label: string; - href: string; - children?: NavItem[]; -} - -const nav: NavItem[] = [ - { label: '概览', href: '/' }, - { label: '栅格系统', href: '/grid-system' }, - { - label: '布局组件', - href: '/components/article', - children: [ - { label: 'Layout', href: '/components/article' }, - { label: 'Section', href: '/components/article' }, - { label: 'Article', href: '/components/article' }, - { label: 'Layer', href: '/components/article' }, - { label: 'Masthead', href: '/components/masthead' }, - { label: 'Rule', href: '/components/rule' }, - { label: 'Footer', href: '/components/rule' }, - { label: 'Sidebar', href: '/components/rule' }, - { label: 'BreakingNewsBanner', href: '/components/rule' }, - { label: 'Folio', href: '/components/rule' }, - { label: 'IndexBox', href: '/components/rule' }, - { label: 'Factbox', href: '/components/rule' }, - ], - }, - { - label: '文本组件', - href: '/text', - children: [ - { label: 'Headline', href: '/text' }, - { label: 'Subhead', href: '/text' }, - { label: 'Kicker', href: '/text' }, - { label: 'BodyText', href: '/text' }, - { label: 'Quote', href: '/text' }, - { label: 'Byline', href: '/text' }, - { label: 'Dateline', href: '/text' }, - { label: 'Caption', href: '/text' }, - { label: 'AuthorCard', href: '/text' }, - { label: 'JumpLine', href: '/text' }, - ], - }, - { - label: '媒体组件', - href: '/components/media', - children: [ - { label: 'Image', href: '/components/media' }, - { label: 'Figure', href: '/components/media' }, - { label: 'Video', href: '/components/media' }, - { label: 'PullQuote', href: '/components/media' }, - { label: 'RelatedArticles', href: '/components/media' }, - ], - }, - { label: '主题与颜色', href: '/theme' }, - { label: 'Create 主题', href: '/create' }, - { label: 'Blocks', href: '/blocks' }, - { - label: '示例', - href: '/examples/spanning', - children: [ - { label: '跨栏布局', href: '/examples/spanning' }, - { label: '响应式', href: '/examples/responsive' }, - { label: 'NYT 头版', href: '/examples/nyt-frontpage' }, - { label: 'Blackletter', href: '/examples/blackletter-frontpage' }, - ], - }, -]; - -export function Sidebar() { - const pathname = usePathname(); - return ( - - ); -} diff --git a/packages/docs/content/docs/components/article.mdx b/packages/docs/content/docs/components/article.mdx new file mode 100644 index 0000000..a84eba5 --- /dev/null +++ b/packages/docs/content/docs/components/article.mdx @@ -0,0 +1,67 @@ +--- +title: Article + Layer +description: 栅格内的文章块与浮动层组件 +--- + +## Article + +Article 是栅格内的文章块，通过 `grid-column span` 跨栏。 + +### Article API + +| 属性 | 类型 | 默认值 | 说明 | +|---|---|---|---| +| `span` | `number` | - | 跨多少列（≤ Section.columns）。缺省时占满全宽。 | +| `breakable` | `boolean` | `true` | 允许打印时跨页断开。 | +| `className` | `string` | - | 自定义 CSS 类名。 | +| `style` | `CSSProperties` | - | 自定义内联样式。 | +| `children` | `ReactNode` | **必填** | 文章内容。 | + +### 跨栏示例 + +```tsx + +
+
+ 短讯 + ... +
+
+ 主稿 + ... +
+
+ +``` + +## Layer + +Layer 脱离栅格流，使用 CSS position 定位。适合浮动拉引、浮动广告、sticky 导航等场景。 + +### Layer API + +| 属性 | 类型 | 默认值 | 说明 | +|---|---|---|---| +| `position` | `'absolute' \| 'fixed' \| 'sticky'` | `'absolute'` | CSS position 属性。 | +| `top` | `string \| number` | - | 距离顶部的距离。 | +| `left` | `string \| number` | - | 距离左侧的距离。 | +| `right` | `string \| number` | - | 距离右侧的距离。 | +| `bottom` | `string \| number` | - | 距离底部的距离。 | +| `zIndex` | `number` | - | z-index 层级。 | +| `children` | `ReactNode` | **必填** | 浮动层内容。 | + +### Layer 浮动拉引示例 + +在文章旁边添加浮动的拉引文字。父容器需要 `position: relative`。 + +```tsx +
+
+ 主要文章 + ... +
+ + + +
+``` diff --git a/packages/docs/content/docs/components/masthead.mdx b/packages/docs/content/docs/components/masthead.mdx new file mode 100644 index 0000000..89af2c7 --- /dev/null +++ b/packages/docs/content/docs/components/masthead.mdx @@ -0,0 +1,65 @@ +--- +title: Masthead 报头 +description: 报纸门面组件，三种视觉风格 +--- + +## 概述 + +报头是报纸的门面。三个 variant 覆盖经典双线居中、哥特体、现代左对齐三种风格。 + +## API + +| 属性 | 类型 | 默认值 | 说明 | +|---|---|---|---| +| `title` | `string` | **必填** | 报名文字。 | +| `variant` | `'classic' \| 'blackletter' \| 'modern'` | `'classic'` | 视觉风格。 | +| `kicker` | `string` | - | 报名上方的小标（如 "All the News That's Fit to Print"）。 | +| `edition` | `string` | - | 版次（如 "Vol. CLXXII No. 59,678"）。 | +| `date` | `string` | - | 日期（如 "Monday, May 19, 2026"）。 | +| `price` | `string` | - | 售价（如 "$3.00"）。 | + +## Classic + +双线居中，Cormorant Garamond 衬线。 + +```tsx + +``` + +## Blackletter + +UnifrakturMaguntia 哥特体，The Times 风格。 + +```tsx + +``` + +## Modern + +左对齐 + accent 强调色，适合数字优先的出版物。 + +```tsx + +``` + +## 使用建议 + +Masthead 默认 `gridColumn: 1 / -1`，在 Section 内自动全宽。通常放在 Layout 的第一个 Section 中，后接 Rule 分隔线。 diff --git a/packages/docs/content/docs/components/media.mdx b/packages/docs/content/docs/components/media.mdx new file mode 100644 index 0000000..6cab793 --- /dev/null +++ b/packages/docs/content/docs/components/media.mdx @@ -0,0 +1,78 @@ +--- +title: 媒体组件 +description: Image、Figure、Video、PullQuote — 报纸版面中的视觉元素 +--- + +## Image + +基础图片组件。`display: block; width: 100%`，在 Section 栅格内通过 span 跨栏。 + +| 属性 | 类型 | 默认值 | 说明 | +|---|---|---|---| +| `src` | `string` | **必填** | 图片 URL。 | +| `alt` | `string` | **必填** | 替代文本。 | +| `span` | `number` | - | 跨栏数。 | + +## Figure + +组合 Image + Caption + Credit 的语义容器。自动渲染 figcaption。 + +| 属性 | 类型 | 默认值 | 说明 | +|---|---|---|---| +| `src` | `string` | **必填** | 图片 URL。 | +| `alt` | `string` | **必填** | 替代文本。 | +| `caption` | `string` | - | 图片说明。 | +| `credit` | `string` | - | 摄影师/来源（small-caps 渲染）。 | +| `span` | `number` | - | 跨栏数。 | + +```tsx +
+``` + +## Video + +| 属性 | 类型 | 默认值 | 说明 | +|---|---|---|---| +| `src` | `string` | **必填** | 视频 URL。 | +| `poster` | `string` | - | 封面图 URL。 | +| `caption` | `string` | - | 视频说明。 | +| `credit` | `string` | - | 来源。 | +| `controls` | `boolean` | `true` | 显示播放控件。 | +| `span` | `number` | - | 跨栏数。 | + +Video 组件与 Figure 结构类似，包裹 `