From e081198f95e3b5c626580d056fee797640cd7258 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Feb 2026 04:39:02 +0000 Subject: [PATCH 1/8] Initial plan From 6d5724b55e07334f340ab61121753141473847fa Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Feb 2026 04:43:58 +0000 Subject: [PATCH 2/8] Add interactive examples page to site with T8 Syntax viewer Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- site/.vitepress/config.mts | 1 + site/en/tutorial/examples.md | 229 +++++++++++++++++++++++++++++++++++ site/zh/tutorial/examples.md | 229 +++++++++++++++++++++++++++++++++++ 3 files changed, 459 insertions(+) create mode 100644 site/en/tutorial/examples.md create mode 100644 site/zh/tutorial/examples.md diff --git a/site/.vitepress/config.mts b/site/.vitepress/config.mts index 82f007f..b3cc0e8 100644 --- a/site/.vitepress/config.mts +++ b/site/.vitepress/config.mts @@ -21,6 +21,7 @@ const createLangConfig = (lang: string, label: string) => { text: 'Tutorial', items: [ { text: 'Quick Start', link: `/${lang}/tutorial/quick-start` }, + { text: 'Examples', link: `/${lang}/tutorial/examples` }, { text: 'Advanced', items: [ diff --git a/site/en/tutorial/examples.md b/site/en/tutorial/examples.md new file mode 100644 index 0000000..4aa552c --- /dev/null +++ b/site/en/tutorial/examples.md @@ -0,0 +1,229 @@ +--- +title: Interactive Examples +--- + +# Interactive Examples + +Explore comprehensive examples of T8 features and capabilities. Each example demonstrates different aspects of T8's text visualization power and includes the full T8 Syntax source code. + +## Example: 2024 Smartphone Market Analysis + +This comprehensive example showcases T8's capabilities for rendering data-driven narrative text with rich entity annotations and inline visualizations. The example includes: + +- Multiple entity types (metrics, dimensions, trends, ratios, etc.) +- Inline mini-charts (distributions, correlations, seasonality) +- Complex data relationships (rankings, proportions, comparisons) +- Structured markdown with sections and subsections + +### Streaming Render + +Watch the content render incrementally, simulating real-time data streaming or AI-generated content. Perfect for scenarios where data arrives progressively. + +::: my-sandbox {template=vanilla-ts} + +```ts index.ts +import { Text } from '@antv/t8'; + +const syntax = ` +# 2024 Smartphone Market Analysis + +## Market Overview + +Global [smartphone shipments](metric_name) reached [1.2 billion units](metric_value, origin=1200000000) in [2024](time_desc), showing a [modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative") year-over-year. + +The **premium segment** (devices over $800) showed *remarkable* [resilience](trend_desc, assessment="positive"), growing by [5.8%](ratio_value, origin=0.058, assessment="positive"). [Average selling price](other_metric_value) was [$420](metric_value, origin=420, unit="USD"). + +## Key Findings + +1. [Asia-Pacific](dim_value) remains the __largest market__ +2. [Premium devices](dim_value) showed **strong growth** +3. Budget segment faced *headwinds* + +### Asia-Pacific + +[Asia-Pacific](dim_value) remains the largest market with [680 million units](metric_value, origin=680000000) shipped, though this represents a [decline of 180 million units](delta_value, origin=-180000000, assessment="negative") from the previous year. + +Key markets: +- [China](dim_value): [320M units](metric_value, origin=320000000) - down [8.5%](ratio_value, origin=-0.085, assessment="negative"), [ranked 1st](rank, detail=[320, 180, 90, 65, 45]) globally, accounting for [47%](contribute_ratio, origin=0.47, assessment="positive") of regional sales +- [India](dim_value): [180M units](metric_value, origin=180000000) - up [12.3%](ratio_value, origin=0.123, assessment="positive"), [ranked 2nd](rank, detail=[320, 180, 90, 65, 45]), representing [3 out of 4](proportion, origin=0.45) of the budget segment +- [Southeast Asia](dim_value): [180M units](metric_value, origin=180000000) - [stable](trend_desc, assessment="equal") + +The [gap of 140M units](difference, detail=[200, 180, 160, 140]) between [China](dim_value) and [India](dim_value) is [narrowing](trend_desc, assessment="neutral"). + +### Market Dynamics + +Sales showed [strong correlation](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}]) with economic indicators. The [distribution](distribution, detail=[15, 25, 35, 15, 10]) was [uneven](anomaly, detail=[15, 18, 20, 65, 22]), with [unexpected concentration](anomaly, detail=[15, 18, 20, 65, 22]) in urban areas. + +We observed [clear seasonality](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]}) with [Q4 peaks](seasonality, detail={"data":[80, 90, 95, 135]}) driven by holiday shopping. + +For detailed methodology, visit [our research page](https://example.com/methodology). +`; + +// Streaming Render - renders content incrementally +const app = document.getElementById('app'); +const text = new Text(app!); + +(async () => { + let chunk = ''; + for (let i = 0; i < syntax.length; i += 10) { + chunk += syntax.slice(i, i + 10); + text.render(chunk); + await new Promise((resolve) => setTimeout(resolve, 160)); + } +})(); +``` + +::: + +### Dark Theme with Custom Settings + +The same content rendered with a dark theme and custom typography settings (12px font size, 20px line height). + +::: my-sandbox {template=vanilla-ts} + +```ts index.ts +import { Text } from '@antv/t8'; + +const syntax = ` +# 2024 Smartphone Market Analysis + +## Market Overview + +Global [smartphone shipments](metric_name) reached [1.2 billion units](metric_value, origin=1200000000) in [2024](time_desc), showing a [modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative") year-over-year. + +The **premium segment** (devices over $800) showed *remarkable* [resilience](trend_desc, assessment="positive"), growing by [5.8%](ratio_value, origin=0.058, assessment="positive"). [Average selling price](other_metric_value) was [$420](metric_value, origin=420, unit="USD"). + +## Key Findings + +1. [Asia-Pacific](dim_value) remains the __largest market__ +2. [Premium devices](dim_value) showed **strong growth** +3. Budget segment faced *headwinds* + +### Asia-Pacific + +[Asia-Pacific](dim_value) remains the largest market with [680 million units](metric_value, origin=680000000) shipped, though this represents a [decline of 180 million units](delta_value, origin=-180000000, assessment="negative") from the previous year. + +Key markets: +- [China](dim_value): [320M units](metric_value, origin=320000000) - down [8.5%](ratio_value, origin=-0.085, assessment="negative"), [ranked 1st](rank, detail=[320, 180, 90, 65, 45]) globally, accounting for [47%](contribute_ratio, origin=0.47, assessment="positive") of regional sales +- [India](dim_value): [180M units](metric_value, origin=180000000) - up [12.3%](ratio_value, origin=0.123, assessment="positive"), [ranked 2nd](rank, detail=[320, 180, 90, 65, 45]), representing [3 out of 4](proportion, origin=0.45) of the budget segment +- [Southeast Asia](dim_value): [180M units](metric_value, origin=180000000) - [stable](trend_desc, assessment="equal") + +The [gap of 140M units](difference, detail=[200, 180, 160, 140]) between [China](dim_value) and [India](dim_value) is [narrowing](trend_desc, assessment="neutral"). + +### Market Dynamics + +Sales showed [strong correlation](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}]) with economic indicators. The [distribution](distribution, detail=[15, 25, 35, 15, 10]) was [uneven](anomaly, detail=[15, 18, 20, 65, 22]), with [unexpected concentration](anomaly, detail=[15, 18, 20, 65, 22]) in urban areas. + +We observed [clear seasonality](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]}) with [Q4 peaks](seasonality, detail={"data":[80, 90, 95, 135]}) driven by holiday shopping. + +For detailed methodology, visit [our research page](https://example.com/methodology). +`; + +// Dark theme with custom settings +const app = document.getElementById('app'); +const text = new Text(app!); +text.theme('dark', { fontSize: 12, lineHeight: 20 }).render(syntax); +``` + +::: + +### Custom Plugin - Styled Dimension Values + +This example demonstrates how to customize entity rendering using plugins. Here, dimension values (like country/region names) are styled with custom colors and fonts. + +::: my-sandbox {template=vanilla-ts} + +```ts index.ts +import { Text } from '@antv/t8'; +import { createDimensionValue } from '@antv/t8/plugin'; + +const syntax = ` +# 2024 Smartphone Market Analysis + +## Market Overview + +Global [smartphone shipments](metric_name) reached [1.2 billion units](metric_value, origin=1200000000) in [2024](time_desc), showing a [modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative") year-over-year. + +The **premium segment** (devices over $800) showed *remarkable* [resilience](trend_desc, assessment="positive"), growing by [5.8%](ratio_value, origin=0.058, assessment="positive"). [Average selling price](other_metric_value) was [$420](metric_value, origin=420, unit="USD"). + +## Key Findings + +1. [Asia-Pacific](dim_value) remains the __largest market__ +2. [Premium devices](dim_value) showed **strong growth** +3. Budget segment faced *headwinds* + +### Asia-Pacific + +[Asia-Pacific](dim_value) remains the largest market with [680 million units](metric_value, origin=680000000) shipped, though this represents a [decline of 180 million units](delta_value, origin=-180000000, assessment="negative") from the previous year. + +Key markets: +- [China](dim_value): [320M units](metric_value, origin=320000000) - down [8.5%](ratio_value, origin=-0.085, assessment="negative"), [ranked 1st](rank, detail=[320, 180, 90, 65, 45]) globally, accounting for [47%](contribute_ratio, origin=0.47, assessment="positive") of regional sales +- [India](dim_value): [180M units](metric_value, origin=180000000) - up [12.3%](ratio_value, origin=0.123, assessment="positive"), [ranked 2nd](rank, detail=[320, 180, 90, 65, 45]), representing [3 out of 4](proportion, origin=0.45) of the budget segment +- [Southeast Asia](dim_value): [180M units](metric_value, origin=180000000) - [stable](trend_desc, assessment="equal") + +The [gap of 140M units](difference, detail=[200, 180, 160, 140]) between [China](dim_value) and [India](dim_value) is [narrowing](trend_desc, assessment="neutral"). + +### Market Dynamics + +Sales showed [strong correlation](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}]) with economic indicators. The [distribution](distribution, detail=[15, 25, 35, 15, 10]) was [uneven](anomaly, detail=[15, 18, 20, 65, 22]), with [unexpected concentration](anomaly, detail=[15, 18, 20, 65, 22]) in urban areas. + +We observed [clear seasonality](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]}) with [Q4 peaks](seasonality, detail={"data":[80, 90, 95, 135]}) driven by holiday shopping. + +For detailed methodology, visit [our research page](https://example.com/methodology). +`; + +// Create a custom plugin to style dimension values +const dimensionValueDescriptor = { + style: (value, _, themeSeedToken) => ({ + color: 'red', + fontSize: 19, + }), + tooltip: false, +}; + +const dimensionPlugin = createDimensionValue(dimensionValueDescriptor, 'overwrite'); + +// Apply custom plugin +const app = document.getElementById('app'); +const text = new Text(app!); +text.registerPlugin(dimensionPlugin); +text.render(syntax); +``` + +::: + +## Understanding T8 Syntax + +The examples above use **T8 Syntax** - a markdown-based declarative language for narrative text visualization. Key features demonstrated: + +### Entity Annotations + +Entities are marked using bracket notation: `[text](entity_type, properties)` + +- `[smartphone shipments](metric_name)` - Metric names +- `[1.2 billion units](metric_value, origin=1200000000)` - Metric values with raw data +- `[2024](time_desc)` - Time descriptions +- `[modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative")` - Ratios with sentiment +- `[Asia-Pacific](dim_value)` - Dimension values (categories, regions, etc.) +- `[resilience](trend_desc, assessment="positive")` - Trend descriptions +- `[ranked 1st](rank, detail=[320, 180, 90, 65, 45])` - Rankings with data + +### Inline Visualizations + +- `[distribution](distribution, detail=[15, 25, 35, 15, 10])` - Mini bar charts +- `[strong correlation](association, detail=[...])` - Scatter plots +- `[clear seasonality](seasonality, detail={...})` - Line charts +- `[gap of 140M units](difference, detail=[200, 180, 160, 140])` - Difference indicators + +### Markdown Formatting + +Standard markdown syntax is supported: + +- `**bold**` for emphasis +- `*italic*` for subtle emphasis +- `__underline__` for highlighting +- Headers (`#`, `##`, `###`) for structure +- Lists (numbered and bulleted) +- Links + +Learn more in the [T8 Syntax Documentation](../syntax/index.md). diff --git a/site/zh/tutorial/examples.md b/site/zh/tutorial/examples.md new file mode 100644 index 0000000..fba9b2d --- /dev/null +++ b/site/zh/tutorial/examples.md @@ -0,0 +1,229 @@ +--- +title: 交互式示例 +--- + +# 交互式示例 + +探索 T8 功能和特性的综合示例。每个示例展示了 T8 文本可视化能力的不同方面，并包含完整的 T8 语法源代码。 + +## 示例：2024 年智能手机市场分析 + +这个综合示例展示了 T8 在渲染具有丰富实体注释和内联可视化的数据驱动叙事文本方面的能力。该示例包括： + +- 多种实体类型（指标、维度、趋势、比率等） +- 内联迷你图表（分布、相关性、季节性） +- 复杂的数据关系（排名、比例、比较） +- 带有章节和小节的结构化 Markdown + +### 流式渲染 + +观看内容逐步渲染，模拟实时数据流或 AI 生成的内容。非常适合数据逐步到达的场景。 + +::: my-sandbox {template=vanilla-ts} + +```ts index.ts +import { Text } from '@antv/t8'; + +const syntax = ` +# 2024 年智能手机市场分析 + +## 市场概况 + +全球[智能手机出货量](metric_name)在 [2024 年](time_desc)达到 [12 亿台](metric_value, origin=1200000000)，同比显示出[适度下降 2.1%](ratio_value, origin=-0.021, assessment="negative")。 + +**高端市场**（800 美元以上设备）表现出*显著的*[韧性](trend_desc, assessment="positive")，增长了 [5.8%](ratio_value, origin=0.058, assessment="positive")。[平均售价](other_metric_value)为 [420 美元](metric_value, origin=420, unit="USD")。 + +## 主要发现 + +1. [亚太地区](dim_value)仍然是__最大的市场__ +2. [高端设备](dim_value)表现出**强劲增长** +3. 预算市场面临*阻力* + +### 亚太地区 + +[亚太地区](dim_value)仍然是最大的市场，出货量为 [6.8 亿台](metric_value, origin=680000000)，尽管这代表着比去年[下降了 1.8 亿台](delta_value, origin=-180000000, assessment="negative")。 + +主要市场： +- [中国](dim_value)：[3.2 亿台](metric_value, origin=320000000) - 下降 [8.5%](ratio_value, origin=-0.085, assessment="negative")，全球[排名第 1](rank, detail=[320, 180, 90, 65, 45])，占地区销售额的 [47%](contribute_ratio, origin=0.47, assessment="positive") +- [印度](dim_value)：[1.8 亿台](metric_value, origin=180000000) - 增长 [12.3%](ratio_value, origin=0.123, assessment="positive")，[排名第 2](rank, detail=[320, 180, 90, 65, 45])，占预算市场的 [四分之三](proportion, origin=0.45) +- [东南亚](dim_value)：[1.8 亿台](metric_value, origin=180000000) - [稳定](trend_desc, assessment="equal") + +[中国](dim_value)和[印度](dim_value)之间的 [1.4 亿台差距](difference, detail=[200, 180, 160, 140])正在[缩小](trend_desc, assessment="neutral")。 + +### 市场动态 + +销售额与经济指标显示出[强相关性](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}])。[分布](distribution, detail=[15, 25, 35, 15, 10])是[不均匀的](anomaly, detail=[15, 18, 20, 65, 22])，在城市地区有[意外集中](anomaly, detail=[15, 18, 20, 65, 22])。 + +我们观察到[明显的季节性](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]})，[第四季度高峰](seasonality, detail={"data":[80, 90, 95, 135]})由假日购物驱动。 + +有关详细方法，请访问[我们的研究页面](https://example.com/methodology)。 +`; + +// 流式渲染 - 逐步渲染内容 +const app = document.getElementById('app'); +const text = new Text(app!); + +(async () => { + let chunk = ''; + for (let i = 0; i < syntax.length; i += 10) { + chunk += syntax.slice(i, i + 10); + text.render(chunk); + await new Promise((resolve) => setTimeout(resolve, 160)); + } +})(); +``` + +::: + +### 暗色主题与自定义设置 + +使用暗色主题和自定义排版设置（12px 字体大小，20px 行高）渲染相同的内容。 + +::: my-sandbox {template=vanilla-ts} + +```ts index.ts +import { Text } from '@antv/t8'; + +const syntax = ` +# 2024 年智能手机市场分析 + +## 市场概况 + +全球[智能手机出货量](metric_name)在 [2024 年](time_desc)达到 [12 亿台](metric_value, origin=1200000000)，同比显示出[适度下降 2.1%](ratio_value, origin=-0.021, assessment="negative")。 + +**高端市场**（800 美元以上设备）表现出*显著的*[韧性](trend_desc, assessment="positive")，增长了 [5.8%](ratio_value, origin=0.058, assessment="positive")。[平均售价](other_metric_value)为 [420 美元](metric_value, origin=420, unit="USD")。 + +## 主要发现 + +1. [亚太地区](dim_value)仍然是__最大的市场__ +2. [高端设备](dim_value)表现出**强劲增长** +3. 预算市场面临*阻力* + +### 亚太地区 + +[亚太地区](dim_value)仍然是最大的市场，出货量为 [6.8 亿台](metric_value, origin=680000000)，尽管这代表着比去年[下降了 1.8 亿台](delta_value, origin=-180000000, assessment="negative")。 + +主要市场： +- [中国](dim_value)：[3.2 亿台](metric_value, origin=320000000) - 下降 [8.5%](ratio_value, origin=-0.085, assessment="negative")，全球[排名第 1](rank, detail=[320, 180, 90, 65, 45])，占地区销售额的 [47%](contribute_ratio, origin=0.47, assessment="positive") +- [印度](dim_value)：[1.8 亿台](metric_value, origin=180000000) - 增长 [12.3%](ratio_value, origin=0.123, assessment="positive")，[排名第 2](rank, detail=[320, 180, 90, 65, 45])，占预算市场的 [四分之三](proportion, origin=0.45) +- [东南亚](dim_value)：[1.8 亿台](metric_value, origin=180000000) - [稳定](trend_desc, assessment="equal") + +[中国](dim_value)和[印度](dim_value)之间的 [1.4 亿台差距](difference, detail=[200, 180, 160, 140])正在[缩小](trend_desc, assessment="neutral")。 + +### 市场动态 + +销售额与经济指标显示出[强相关性](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}])。[分布](distribution, detail=[15, 25, 35, 15, 10])是[不均匀的](anomaly, detail=[15, 18, 20, 65, 22])，在城市地区有[意外集中](anomaly, detail=[15, 18, 20, 65, 22])。 + +我们观察到[明显的季节性](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]})，[第四季度高峰](seasonality, detail={"data":[80, 90, 95, 135]})由假日购物驱动。 + +有关详细方法，请访问[我们的研究页面](https://example.com/methodology)。 +`; + +// 暗色主题与自定义设置 +const app = document.getElementById('app'); +const text = new Text(app!); +text.theme('dark', { fontSize: 12, lineHeight: 20 }).render(syntax); +``` + +::: + +### 自定义插件 - 样式化维度值 + +此示例展示了如何使用插件自定义实体渲染。在这里，维度值（如国家/地区名称）使用自定义颜色和字体进行样式化。 + +::: my-sandbox {template=vanilla-ts} + +```ts index.ts +import { Text } from '@antv/t8'; +import { createDimensionValue } from '@antv/t8/plugin'; + +const syntax = ` +# 2024 年智能手机市场分析 + +## 市场概况 + +全球[智能手机出货量](metric_name)在 [2024 年](time_desc)达到 [12 亿台](metric_value, origin=1200000000)，同比显示出[适度下降 2.1%](ratio_value, origin=-0.021, assessment="negative")。 + +**高端市场**（800 美元以上设备）表现出*显著的*[韧性](trend_desc, assessment="positive")，增长了 [5.8%](ratio_value, origin=0.058, assessment="positive")。[平均售价](other_metric_value)为 [420 美元](metric_value, origin=420, unit="USD")。 + +## 主要发现 + +1. [亚太地区](dim_value)仍然是__最大的市场__ +2. [高端设备](dim_value)表现出**强劲增长** +3. 预算市场面临*阻力* + +### 亚太地区 + +[亚太地区](dim_value)仍然是最大的市场，出货量为 [6.8 亿台](metric_value, origin=680000000)，尽管这代表着比去年[下降了 1.8 亿台](delta_value, origin=-180000000, assessment="negative")。 + +主要市场： +- [中国](dim_value)：[3.2 亿台](metric_value, origin=320000000) - 下降 [8.5%](ratio_value, origin=-0.085, assessment="negative")，全球[排名第 1](rank, detail=[320, 180, 90, 65, 45])，占地区销售额的 [47%](contribute_ratio, origin=0.47, assessment="positive") +- [印度](dim_value)：[1.8 亿台](metric_value, origin=180000000) - 增长 [12.3%](ratio_value, origin=0.123, assessment="positive")，[排名第 2](rank, detail=[320, 180, 90, 65, 45])，占预算市场的 [四分之三](proportion, origin=0.45) +- [东南亚](dim_value)：[1.8 亿台](metric_value, origin=180000000) - [稳定](trend_desc, assessment="equal") + +[中国](dim_value)和[印度](dim_value)之间的 [1.4 亿台差距](difference, detail=[200, 180, 160, 140])正在[缩小](trend_desc, assessment="neutral")。 + +### 市场动态 + +销售额与经济指标显示出[强相关性](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}])。[分布](distribution, detail=[15, 25, 35, 15, 10])是[不均匀的](anomaly, detail=[15, 18, 20, 65, 22])，在城市地区有[意外集中](anomaly, detail=[15, 18, 20, 65, 22])。 + +我们观察到[明显的季节性](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]})，[第四季度高峰](seasonality, detail={"data":[80, 90, 95, 135]})由假日购物驱动。 + +有关详细方法，请访问[我们的研究页面](https://example.com/methodology)。 +`; + +// 创建自定义插件来样式化维度值 +const dimensionValueDescriptor = { + style: (value, _, themeSeedToken) => ({ + color: 'red', + fontSize: 19, + }), + tooltip: false, +}; + +const dimensionPlugin = createDimensionValue(dimensionValueDescriptor, 'overwrite'); + +// 应用自定义插件 +const app = document.getElementById('app'); +const text = new Text(app!); +text.registerPlugin(dimensionPlugin); +text.render(syntax); +``` + +::: + +## 理解 T8 语法 + +以上示例使用 **T8 语法** - 一种基于 Markdown 的声明式语言，用于叙事文本可视化。演示的主要功能： + +### 实体注释 + +实体使用括号表示法标记：`[文本](entity_type, properties)` + +- `[智能手机出货量](metric_name)` - 指标名称 +- `[12 亿台](metric_value, origin=1200000000)` - 带有原始数据的指标值 +- `[2024 年](time_desc)` - 时间描述 +- `[适度下降 2.1%](ratio_value, origin=-0.021, assessment="negative")` - 带有情感的比率 +- `[亚太地区](dim_value)` - 维度值（类别、地区等） +- `[韧性](trend_desc, assessment="positive")` - 趋势描述 +- `[排名第 1](rank, detail=[320, 180, 90, 65, 45])` - 带有数据的排名 + +### 内联可视化 + +- `[分布](distribution, detail=[15, 25, 35, 15, 10])` - 迷你条形图 +- `[强相关性](association, detail=[...])` - 散点图 +- `[明显的季节性](seasonality, detail={...})` - 折线图 +- `[1.4 亿台差距](difference, detail=[200, 180, 160, 140])` - 差异指示器 + +### Markdown 格式 + +支持标准 Markdown 语法： + +- `**粗体**` 表示强调 +- `*斜体*` 表示轻微强调 +- `__下划线__` 表示突出显示 +- 标题（`#`、`##`、`###`）用于结构 +- 列表（编号和项目符号） +- 链接 + +在 [T8 语法文档](../syntax/index.md)中了解更多。 From 3e4dd7a77d78ba6da10e50870b30437c7290e443 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Feb 2026 04:45:31 +0000 Subject: [PATCH 3/8] Fix unused parameter in custom plugin example Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- site/en/tutorial/examples.md | 2 +- site/zh/tutorial/examples.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/en/tutorial/examples.md b/site/en/tutorial/examples.md index 4aa552c..203aaad 100644 --- a/site/en/tutorial/examples.md +++ b/site/en/tutorial/examples.md @@ -174,7 +174,7 @@ For detailed methodology, visit [our research page](https://example.com/methodol // Create a custom plugin to style dimension values const dimensionValueDescriptor = { - style: (value, _, themeSeedToken) => ({ + style: () => ({ color: 'red', fontSize: 19, }), diff --git a/site/zh/tutorial/examples.md b/site/zh/tutorial/examples.md index fba9b2d..b1120e9 100644 --- a/site/zh/tutorial/examples.md +++ b/site/zh/tutorial/examples.md @@ -174,7 +174,7 @@ const syntax = ` // 创建自定义插件来样式化维度值 const dimensionValueDescriptor = { - style: (value, _, themeSeedToken) => ({ + style: () => ({ color: 'red', fontSize: 19, }), From 718ada4e7c6d6de7a42160b3406882a59f09e51c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Feb 2026 04:51:59 +0000 Subject: [PATCH 4/8] Move Examples to top navigation menu as separate route Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- site/.vitepress/config.mts | 2 +- site/en/{tutorial => }/examples.md | 0 site/zh/{tutorial => }/examples.md | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename site/en/{tutorial => }/examples.md (100%) rename site/zh/{tutorial => }/examples.md (100%) diff --git a/site/.vitepress/config.mts b/site/.vitepress/config.mts index b3cc0e8..51ed8f6 100644 --- a/site/.vitepress/config.mts +++ b/site/.vitepress/config.mts @@ -12,6 +12,7 @@ const createLangConfig = (lang: string, label: string) => { nav: [ { text: 'AI', link: '/chat/index', target: 'chat' }, { text: 'Tutorial', link: `/${lang}/tutorial/quick-start` }, + { text: 'Examples', link: `/${lang}/examples` }, { text: 'Syntax', link: `/${lang}/syntax/index` }, { text: 'API', link: `/${lang}/api/` }, ], @@ -21,7 +22,6 @@ const createLangConfig = (lang: string, label: string) => { text: 'Tutorial', items: [ { text: 'Quick Start', link: `/${lang}/tutorial/quick-start` }, - { text: 'Examples', link: `/${lang}/tutorial/examples` }, { text: 'Advanced', items: [ diff --git a/site/en/tutorial/examples.md b/site/en/examples.md similarity index 100% rename from site/en/tutorial/examples.md rename to site/en/examples.md diff --git a/site/zh/tutorial/examples.md b/site/zh/examples.md similarity index 100% rename from site/zh/tutorial/examples.md rename to site/zh/examples.md From 5129eb598bfb2f9103523f9833b255224ac1724a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Feb 2026 05:12:04 +0000 Subject: [PATCH 5/8] Replace CodeSandbox with native T8 source code rendering Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- .../.vitepress/theme/components/T8Example.vue | 149 ++++++++++++++++ site/.vitepress/theme/index.ts | 2 + site/en/examples.md | 162 ++---------------- site/zh/examples.md | 162 ++---------------- 4 files changed, 189 insertions(+), 286 deletions(-) create mode 100644 site/.vitepress/theme/components/T8Example.vue diff --git a/site/.vitepress/theme/components/T8Example.vue b/site/.vitepress/theme/components/T8Example.vue new file mode 100644 index 0000000..2ecffab --- /dev/null +++ b/site/.vitepress/theme/components/T8Example.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/site/.vitepress/theme/index.ts b/site/.vitepress/theme/index.ts index 5d151df..cf42d82 100644 --- a/site/.vitepress/theme/index.ts +++ b/site/.vitepress/theme/index.ts @@ -4,6 +4,7 @@ import type { Theme } from 'vitepress'; import DefaultTheme from 'vitepress/theme'; import './style.css'; import CopyOrDownloadAsMarkdownButtons from './components/CopyOrDownloadAsMarkdownButtons.vue'; +import T8Example from './components/T8Example.vue'; import { Sandbox } from 'vitepress-plugin-sandpack'; import MySandbox from './components/MySandbox.vue'; import 'vitepress-plugin-sandpack/dist/style.css'; @@ -17,6 +18,7 @@ export default { }, enhanceApp({ app }) { app.component('CopyOrDownloadAsMarkdownButtons', CopyOrDownloadAsMarkdownButtons); + app.component('T8Example', T8Example); app.component('Sandbox', Sandbox); app.component('MySandbox', MySandbox); }, diff --git a/site/en/examples.md b/site/en/examples.md index 203aaad..20204e4 100644 --- a/site/en/examples.md +++ b/site/en/examples.md @@ -2,30 +2,8 @@ title: Interactive Examples --- -# Interactive Examples - -Explore comprehensive examples of T8 features and capabilities. Each example demonstrates different aspects of T8's text visualization power and includes the full T8 Syntax source code. - -## Example: 2024 Smartphone Market Analysis - -This comprehensive example showcases T8's capabilities for rendering data-driven narrative text with rich entity annotations and inline visualizations. The example includes: - -- Multiple entity types (metrics, dimensions, trends, ratios, etc.) -- Inline mini-charts (distributions, correlations, seasonality) -- Complex data relationships (rankings, proportions, comparisons) -- Structured markdown with sections and subsections - -### Streaming Render - -Watch the content render incrementally, simulating real-time data streaming or AI-generated content. Perfect for scenarios where data arrives progressively. - -::: my-sandbox {template=vanilla-ts} - -```ts index.ts -import { Text } from '@antv/t8'; - -const syntax = ` -# 2024 Smartphone Market Analysis + -// Streaming Render - renders content incrementally -const app = document.getElementById('app'); -const text = new Text(app!); - -(async () => { - let chunk = ''; - for (let i = 0; i < syntax.length; i += 10) { - chunk += syntax.slice(i, i + 10); - text.render(chunk); - await new Promise((resolve) => setTimeout(resolve, 160)); - } -})(); -``` - -::: - -### Dark Theme with Custom Settings - -The same content rendered with a dark theme and custom typography settings (12px font size, 20px line height). - -::: my-sandbox {template=vanilla-ts} - -```ts index.ts -import { Text } from '@antv/t8'; - -const syntax = ` -# 2024 Smartphone Market Analysis - -## Market Overview - -Global [smartphone shipments](metric_name) reached [1.2 billion units](metric_value, origin=1200000000) in [2024](time_desc), showing a [modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative") year-over-year. - -The **premium segment** (devices over $800) showed *remarkable* [resilience](trend_desc, assessment="positive"), growing by [5.8%](ratio_value, origin=0.058, assessment="positive"). [Average selling price](other_metric_value) was [$420](metric_value, origin=420, unit="USD"). - -## Key Findings - -1. [Asia-Pacific](dim_value) remains the __largest market__ -2. [Premium devices](dim_value) showed **strong growth** -3. Budget segment faced *headwinds* +# Interactive Examples -### Asia-Pacific +Explore comprehensive examples of T8 features and capabilities. Each example demonstrates different aspects of T8's text visualization power and includes the full T8 Syntax source code. -[Asia-Pacific](dim_value) remains the largest market with [680 million units](metric_value, origin=680000000) shipped, though this represents a [decline of 180 million units](delta_value, origin=-180000000, assessment="negative") from the previous year. +## Example: 2024 Smartphone Market Analysis -Key markets: -- [China](dim_value): [320M units](metric_value, origin=320000000) - down [8.5%](ratio_value, origin=-0.085, assessment="negative"), [ranked 1st](rank, detail=[320, 180, 90, 65, 45]) globally, accounting for [47%](contribute_ratio, origin=0.47, assessment="positive") of regional sales -- [India](dim_value): [180M units](metric_value, origin=180000000) - up [12.3%](ratio_value, origin=0.123, assessment="positive"), [ranked 2nd](rank, detail=[320, 180, 90, 65, 45]), representing [3 out of 4](proportion, origin=0.45) of the budget segment -- [Southeast Asia](dim_value): [180M units](metric_value, origin=180000000) - [stable](trend_desc, assessment="equal") +This comprehensive example showcases T8's capabilities for rendering data-driven narrative text with rich entity annotations and inline visualizations. The example includes: -The [gap of 140M units](difference, detail=[200, 180, 160, 140]) between [China](dim_value) and [India](dim_value) is [narrowing](trend_desc, assessment="neutral"). +- Multiple entity types (metrics, dimensions, trends, ratios, etc.) +- Inline mini-charts (distributions, correlations, seasonality) +- Complex data relationships (rankings, proportions, comparisons) +- Structured markdown with sections and subsections -### Market Dynamics +### Streaming Render -Sales showed [strong correlation](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}]) with economic indicators. The [distribution](distribution, detail=[15, 25, 35, 15, 10]) was [uneven](anomaly, detail=[15, 18, 20, 65, 22]), with [unexpected concentration](anomaly, detail=[15, 18, 20, 65, 22]) in urban areas. +Watch the content render incrementally, simulating real-time data streaming or AI-generated content. Perfect for scenarios where data arrives progressively. -We observed [clear seasonality](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]}) with [Q4 peaks](seasonality, detail={"data":[80, 90, 95, 135]}) driven by holiday shopping. + -For detailed methodology, visit [our research page](https://example.com/methodology). -`; +### Dark Theme with Custom Settings -// Dark theme with custom settings -const app = document.getElementById('app'); -const text = new Text(app!); -text.theme('dark', { fontSize: 12, lineHeight: 20 }).render(syntax); -``` +The same content rendered with a dark theme and custom typography settings (12px font size, 20px line height). -::: + ### Custom Plugin - Styled Dimension Values This example demonstrates how to customize entity rendering using plugins. Here, dimension values (like country/region names) are styled with custom colors and fonts. -::: my-sandbox {template=vanilla-ts} - -```ts index.ts -import { Text } from '@antv/t8'; -import { createDimensionValue } from '@antv/t8/plugin'; - -const syntax = ` -# 2024 Smartphone Market Analysis - -## Market Overview - -Global [smartphone shipments](metric_name) reached [1.2 billion units](metric_value, origin=1200000000) in [2024](time_desc), showing a [modest decline of 2.1%](ratio_value, origin=-0.021, assessment="negative") year-over-year. - -The **premium segment** (devices over $800) showed *remarkable* [resilience](trend_desc, assessment="positive"), growing by [5.8%](ratio_value, origin=0.058, assessment="positive"). [Average selling price](other_metric_value) was [$420](metric_value, origin=420, unit="USD"). - -## Key Findings - -1. [Asia-Pacific](dim_value) remains the __largest market__ -2. [Premium devices](dim_value) showed **strong growth** -3. Budget segment faced *headwinds* - -### Asia-Pacific - -[Asia-Pacific](dim_value) remains the largest market with [680 million units](metric_value, origin=680000000) shipped, though this represents a [decline of 180 million units](delta_value, origin=-180000000, assessment="negative") from the previous year. - -Key markets: -- [China](dim_value): [320M units](metric_value, origin=320000000) - down [8.5%](ratio_value, origin=-0.085, assessment="negative"), [ranked 1st](rank, detail=[320, 180, 90, 65, 45]) globally, accounting for [47%](contribute_ratio, origin=0.47, assessment="positive") of regional sales -- [India](dim_value): [180M units](metric_value, origin=180000000) - up [12.3%](ratio_value, origin=0.123, assessment="positive"), [ranked 2nd](rank, detail=[320, 180, 90, 65, 45]), representing [3 out of 4](proportion, origin=0.45) of the budget segment -- [Southeast Asia](dim_value): [180M units](metric_value, origin=180000000) - [stable](trend_desc, assessment="equal") - -The [gap of 140M units](difference, detail=[200, 180, 160, 140]) between [China](dim_value) and [India](dim_value) is [narrowing](trend_desc, assessment="neutral"). - -### Market Dynamics - -Sales showed [strong correlation](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}]) with economic indicators. The [distribution](distribution, detail=[15, 25, 35, 15, 10]) was [uneven](anomaly, detail=[15, 18, 20, 65, 22]), with [unexpected concentration](anomaly, detail=[15, 18, 20, 65, 22]) in urban areas. - -We observed [clear seasonality](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]}) with [Q4 peaks](seasonality, detail={"data":[80, 90, 95, 135]}) driven by holiday shopping. - -For detailed methodology, visit [our research page](https://example.com/methodology). -`; - -// Create a custom plugin to style dimension values -const dimensionValueDescriptor = { - style: () => ({ - color: 'red', - fontSize: 19, - }), - tooltip: false, -}; - -const dimensionPlugin = createDimensionValue(dimensionValueDescriptor, 'overwrite'); - -// Apply custom plugin -const app = document.getElementById('app'); -const text = new Text(app!); -text.registerPlugin(dimensionPlugin); -text.render(syntax); -``` - -::: + ## Understanding T8 Syntax diff --git a/site/zh/examples.md b/site/zh/examples.md index b1120e9..6c2d06e 100644 --- a/site/zh/examples.md +++ b/site/zh/examples.md @@ -2,30 +2,8 @@ title: 交互式示例 --- -# 交互式示例 - -探索 T8 功能和特性的综合示例。每个示例展示了 T8 文本可视化能力的不同方面，并包含完整的 T8 语法源代码。 - -## 示例：2024 年智能手机市场分析 - -这个综合示例展示了 T8 在渲染具有丰富实体注释和内联可视化的数据驱动叙事文本方面的能力。该示例包括： - -- 多种实体类型（指标、维度、趋势、比率等） -- 内联迷你图表（分布、相关性、季节性） -- 复杂的数据关系（排名、比例、比较） -- 带有章节和小节的结构化 Markdown - -### 流式渲染 - -观看内容逐步渲染，模拟实时数据流或 AI 生成的内容。非常适合数据逐步到达的场景。 - -::: my-sandbox {template=vanilla-ts} - -```ts index.ts -import { Text } from '@antv/t8'; - -const syntax = ` -# 2024 年智能手机市场分析 + -// 流式渲染 - 逐步渲染内容 -const app = document.getElementById('app'); -const text = new Text(app!); - -(async () => { - let chunk = ''; - for (let i = 0; i < syntax.length; i += 10) { - chunk += syntax.slice(i, i + 10); - text.render(chunk); - await new Promise((resolve) => setTimeout(resolve, 160)); - } -})(); -``` - -::: - -### 暗色主题与自定义设置 - -使用暗色主题和自定义排版设置（12px 字体大小，20px 行高）渲染相同的内容。 - -::: my-sandbox {template=vanilla-ts} - -```ts index.ts -import { Text } from '@antv/t8'; - -const syntax = ` -# 2024 年智能手机市场分析 - -## 市场概况 - -全球[智能手机出货量](metric_name)在 [2024 年](time_desc)达到 [12 亿台](metric_value, origin=1200000000)，同比显示出[适度下降 2.1%](ratio_value, origin=-0.021, assessment="negative")。 - -**高端市场**（800 美元以上设备）表现出*显著的*[韧性](trend_desc, assessment="positive")，增长了 [5.8%](ratio_value, origin=0.058, assessment="positive")。[平均售价](other_metric_value)为 [420 美元](metric_value, origin=420, unit="USD")。 - -## 主要发现 - -1. [亚太地区](dim_value)仍然是__最大的市场__ -2. [高端设备](dim_value)表现出**强劲增长** -3. 预算市场面临*阻力* +# 交互式示例 -### 亚太地区 +探索 T8 功能和特性的综合示例。每个示例展示了 T8 文本可视化能力的不同方面，并包含完整的 T8 语法源代码。 -[亚太地区](dim_value)仍然是最大的市场，出货量为 [6.8 亿台](metric_value, origin=680000000)，尽管这代表着比去年[下降了 1.8 亿台](delta_value, origin=-180000000, assessment="negative")。 +## 示例：2024 年智能手机市场分析 -主要市场： -- [中国](dim_value)：[3.2 亿台](metric_value, origin=320000000) - 下降 [8.5%](ratio_value, origin=-0.085, assessment="negative")，全球[排名第 1](rank, detail=[320, 180, 90, 65, 45])，占地区销售额的 [47%](contribute_ratio, origin=0.47, assessment="positive") -- [印度](dim_value)：[1.8 亿台](metric_value, origin=180000000) - 增长 [12.3%](ratio_value, origin=0.123, assessment="positive")，[排名第 2](rank, detail=[320, 180, 90, 65, 45])，占预算市场的 [四分之三](proportion, origin=0.45) -- [东南亚](dim_value)：[1.8 亿台](metric_value, origin=180000000) - [稳定](trend_desc, assessment="equal") +这个综合示例展示了 T8 在渲染具有丰富实体注释和内联可视化的数据驱动叙事文本方面的能力。该示例包括： -[中国](dim_value)和[印度](dim_value)之间的 [1.4 亿台差距](difference, detail=[200, 180, 160, 140])正在[缩小](trend_desc, assessment="neutral")。 +- 多种实体类型（指标、维度、趋势、比率等） +- 内联迷你图表（分布、相关性、季节性） +- 复杂的数据关系（排名、比例、比较） +- 带有章节和小节的结构化 Markdown -### 市场动态 +### 流式渲染 -销售额与经济指标显示出[强相关性](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}])。[分布](distribution, detail=[15, 25, 35, 15, 10])是[不均匀的](anomaly, detail=[15, 18, 20, 65, 22])，在城市地区有[意外集中](anomaly, detail=[15, 18, 20, 65, 22])。 +观看内容逐步渲染，模拟实时数据流或 AI 生成的内容。非常适合数据逐步到达的场景。 -我们观察到[明显的季节性](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]})，[第四季度高峰](seasonality, detail={"data":[80, 90, 95, 135]})由假日购物驱动。 + -有关详细方法，请访问[我们的研究页面](https://example.com/methodology)。 -`; +### 暗色主题与自定义设置 -// 暗色主题与自定义设置 -const app = document.getElementById('app'); -const text = new Text(app!); -text.theme('dark', { fontSize: 12, lineHeight: 20 }).render(syntax); -``` +使用暗色主题和自定义排版设置（12px 字体大小，20px 行高）渲染相同的内容。 -::: + ### 自定义插件 - 样式化维度值 此示例展示了如何使用插件自定义实体渲染。在这里，维度值（如国家/地区名称）使用自定义颜色和字体进行样式化。 -::: my-sandbox {template=vanilla-ts} - -```ts index.ts -import { Text } from '@antv/t8'; -import { createDimensionValue } from '@antv/t8/plugin'; - -const syntax = ` -# 2024 年智能手机市场分析 - -## 市场概况 - -全球[智能手机出货量](metric_name)在 [2024 年](time_desc)达到 [12 亿台](metric_value, origin=1200000000)，同比显示出[适度下降 2.1%](ratio_value, origin=-0.021, assessment="negative")。 - -**高端市场**（800 美元以上设备）表现出*显著的*[韧性](trend_desc, assessment="positive")，增长了 [5.8%](ratio_value, origin=0.058, assessment="positive")。[平均售价](other_metric_value)为 [420 美元](metric_value, origin=420, unit="USD")。 - -## 主要发现 - -1. [亚太地区](dim_value)仍然是__最大的市场__ -2. [高端设备](dim_value)表现出**强劲增长** -3. 预算市场面临*阻力* - -### 亚太地区 - -[亚太地区](dim_value)仍然是最大的市场，出货量为 [6.8 亿台](metric_value, origin=680000000)，尽管这代表着比去年[下降了 1.8 亿台](delta_value, origin=-180000000, assessment="negative")。 - -主要市场： -- [中国](dim_value)：[3.2 亿台](metric_value, origin=320000000) - 下降 [8.5%](ratio_value, origin=-0.085, assessment="negative")，全球[排名第 1](rank, detail=[320, 180, 90, 65, 45])，占地区销售额的 [47%](contribute_ratio, origin=0.47, assessment="positive") -- [印度](dim_value)：[1.8 亿台](metric_value, origin=180000000) - 增长 [12.3%](ratio_value, origin=0.123, assessment="positive")，[排名第 2](rank, detail=[320, 180, 90, 65, 45])，占预算市场的 [四分之三](proportion, origin=0.45) -- [东南亚](dim_value)：[1.8 亿台](metric_value, origin=180000000) - [稳定](trend_desc, assessment="equal") - -[中国](dim_value)和[印度](dim_value)之间的 [1.4 亿台差距](difference, detail=[200, 180, 160, 140])正在[缩小](trend_desc, assessment="neutral")。 - -### 市场动态 - -销售额与经济指标显示出[强相关性](association, detail=[{"x":100,"y":105},{"x":120,"y":128},{"x":150,"y":155}])。[分布](distribution, detail=[15, 25, 35, 15, 10])是[不均匀的](anomaly, detail=[15, 18, 20, 65, 22])，在城市地区有[意外集中](anomaly, detail=[15, 18, 20, 65, 22])。 - -我们观察到[明显的季节性](seasonality, detail={"data":[80, 90, 95, 135], "range":[0, 150]})，[第四季度高峰](seasonality, detail={"data":[80, 90, 95, 135]})由假日购物驱动。 - -有关详细方法，请访问[我们的研究页面](https://example.com/methodology)。 -`; - -// 创建自定义插件来样式化维度值 -const dimensionValueDescriptor = { - style: () => ({ - color: 'red', - fontSize: 19, - }), - tooltip: false, -}; - -const dimensionPlugin = createDimensionValue(dimensionValueDescriptor, 'overwrite'); - -// 应用自定义插件 -const app = document.getElementById('app'); -const text = new Text(app!); -text.registerPlugin(dimensionPlugin); -text.render(syntax); -``` - -::: + ## 理解 T8 语法 From 132ceb4cd9c5430169b8df0901ff629899e8461e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Feb 2026 05:13:27 +0000 Subject: [PATCH 6/8] Remove unused unmount variable Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- site/.vitepress/theme/components/T8Example.vue | 4 ---- 1 file changed, 4 deletions(-) diff --git a/site/.vitepress/theme/components/T8Example.vue b/site/.vitepress/theme/components/T8Example.vue index 2ecffab..a241749 100644 --- a/site/.vitepress/theme/components/T8Example.vue +++ b/site/.vitepress/theme/components/T8Example.vue @@ -22,7 +22,6 @@ const props = defineProps<{ const container = ref(null); const showCode = ref(false); let textInstance: any = null; -let unmount: (() => void) | null = null; onMounted(async () => { if (!container.value) return; @@ -71,9 +70,6 @@ onMounted(async () => { }); onBeforeUnmount(() => { - if (unmount) { - unmount(); - } if (textInstance) { textInstance.unmount?.(); } From 79f1895b8618f33c25bf69fffcecb7577b30621b Mon Sep 17 00:00:00 2001 From: hustcc Date: Fri, 6 Feb 2026 13:22:30 +0800 Subject: [PATCH 7/8] chore: update svg style --- src/charts/utils/createSvg.ts | 1 + src/plugin/presets/createCompare.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/charts/utils/createSvg.ts b/src/charts/utils/createSvg.ts index 26d44f0..fe397c3 100644 --- a/src/charts/utils/createSvg.ts +++ b/src/charts/utils/createSvg.ts @@ -12,6 +12,7 @@ export const createSvg = (container: Element, width: number, height: number): Se const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.style.margin = '0px 4px'; svg.style.transform = 'translate(0px, 0.125em)'; + svg.style.display = 'inline-block'; svg.setAttribute('height', String(height)); svg.setAttribute('width', String(width)); diff --git a/src/plugin/presets/createCompare.ts b/src/plugin/presets/createCompare.ts index a42fd4a..c6e2118 100644 --- a/src/plugin/presets/createCompare.ts +++ b/src/plugin/presets/createCompare.ts @@ -74,6 +74,7 @@ function createArrow(direction: 'up' | 'down', size: number): Element { svg.setAttribute('height', `${size}px`); svg.setAttribute('viewBox', '0 0 8 9'); svg.style.marginRight = `${MARGIN_RIGHT}px`; + svg.style.display = 'inline-block'; svg.setAttribute('version', '1.1'); const g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); From b53a3d6c61837ec57cdbf6f678dc0e849cdf1e65 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 6 Feb 2026 05:31:59 +0000 Subject: [PATCH 8/8] Fix dead links in examples pages Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- site/en/examples.md | 2 +- site/zh/examples.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/en/examples.md b/site/en/examples.md index 20204e4..1da4f73 100644 --- a/site/en/examples.md +++ b/site/en/examples.md @@ -102,4 +102,4 @@ Standard markdown syntax is supported: - Lists (numbered and bulleted) - Links -Learn more in the [T8 Syntax Documentation](../syntax/index.md). +Learn more in the [T8 Syntax Documentation](/en/syntax/). diff --git a/site/zh/examples.md b/site/zh/examples.md index 6c2d06e..c498bbe 100644 --- a/site/zh/examples.md +++ b/site/zh/examples.md @@ -102,4 +102,4 @@ const marketAnalysisSyntax = `# 2024 年智能手机市场分析 - 列表（编号和项目符号） - 链接 -在 [T8 语法文档](../syntax/index.md)中了解更多。 +在 [T8 语法文档](/zh/syntax/)中了解更多。