docs: typography
This commit is contained in:
@@ -3,6 +3,8 @@
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
|
||||
@@ -71,7 +71,43 @@ html.dark,
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Noto Sans',
|
||||
'Liberation Sans',
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji';
|
||||
}
|
||||
|
||||
/* 文档正文排版优化 */
|
||||
.prose {
|
||||
letter-spacing: 0.01em;
|
||||
font-weight: 380;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 标题使用中等字重(相对细体更重,但比默认 bold 更轻) */
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5,
|
||||
.prose h6 {
|
||||
font-weight: 480;
|
||||
}
|
||||
|
||||
/* strong/b 也用中等字重 */
|
||||
.prose strong,
|
||||
.prose b {
|
||||
font-weight: 480;
|
||||
}
|
||||
|
||||
/* 确保文档页面标题在暗色模式下可见 - 只针对 prose 内的标题 */
|
||||
|
||||
@@ -101,7 +101,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
|
||||
<path d={siGooglechrome.path} fill="currentColor" />
|
||||
</svg>
|
||||
<SparklesText
|
||||
className="text-[length:inherit] font-[inherit]"
|
||||
className="text-[length:inherit] font-[inherit] font-medium"
|
||||
sparklesCount={3}
|
||||
>
|
||||
{item.title}
|
||||
@@ -123,7 +123,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 min-w-0" id="main-content" role="main">
|
||||
<div className="prose prose-lg dark:prose-invert max-w-none">{children}</div>
|
||||
<div className="prose dark:prose-invert max-w-none">{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -50,8 +50,8 @@ export default function CustomUIDocs() {
|
||||
<h2 className="text-2xl font-semibold mb-4">{isZh ? '两个事件流' : 'Two Event Streams'}</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
{isZh
|
||||
? 'PageAgentCore 提供两种不同性质的事件流,服务于不同的 UI 需求:'
|
||||
: 'PageAgentCore provides two distinct event streams for different UI needs:'}
|
||||
? 'PageAgentCore 提供两种不同性质的事件流,方便 UI 渲染:'
|
||||
: 'PageAgentCore provides two distinct event streams for UI rendering:'}
|
||||
</p>
|
||||
|
||||
{/* Comparison Table */}
|
||||
@@ -59,9 +59,7 @@ export default function CustomUIDocs() {
|
||||
<table className="w-full border-collapse border border-gray-300 dark:border-gray-600">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 dark:bg-gray-800">
|
||||
<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left">
|
||||
{isZh ? '特性' : 'Feature'}
|
||||
</th>
|
||||
<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left"></th>
|
||||
<th className="border border-gray-300 dark:border-gray-600 px-4 py-2 text-left">
|
||||
Historical Events
|
||||
</th>
|
||||
@@ -90,7 +88,7 @@ export default function CustomUIDocs() {
|
||||
{isZh ? '持久化到 agent.history' : 'Persisted in agent.history'}
|
||||
</td>
|
||||
<td className="border border-gray-300 dark:border-gray-600 px-4 py-2">
|
||||
{isZh ? '瞬态,无存储' : 'Transient, not stored'}
|
||||
{isZh ? '瞬态' : 'Transient'}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@@ -193,9 +193,7 @@ agent.panel.dispose()`}
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 dark:bg-gray-800/50">
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300">
|
||||
{isZh ? '特性' : 'Feature'}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300"></th>
|
||||
<th className="px-4 py-3 text-center font-medium text-gray-600 dark:text-gray-300">
|
||||
PageAgent
|
||||
</th>
|
||||
|
||||
@@ -47,7 +47,7 @@ const customTools = {
|
||||
|
||||
// remove internal tool
|
||||
const customTools = {
|
||||
ask_user: null // never ask user questions
|
||||
scroll: null, // never scroll
|
||||
}
|
||||
|
||||
const pageAgent = new PageAgent({customTools})
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function CdnSetup() {
|
||||
|
||||
<CodeEditor
|
||||
className="mb-3"
|
||||
code={`<script src="${CDN_DEMO_URL}" crossorigin="true"></script>`}
|
||||
code={`<script src="DEMO_CDN_URL" crossorigin="true"></script>`}
|
||||
/>
|
||||
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 px-4 py-3 rounded-lg mb-4 text-sm">
|
||||
|
||||
@@ -117,9 +117,7 @@ export default function Overview() {
|
||||
<table className="w-full border-collapse border border-gray-300 dark:border-gray-600">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 dark:bg-gray-800">
|
||||
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
|
||||
{isZh ? '特性' : 'Feature'}
|
||||
</th>
|
||||
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left"></th>
|
||||
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
|
||||
page-agent
|
||||
</th>
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function QuickStart() {
|
||||
</span>
|
||||
</div>
|
||||
<CodeEditor
|
||||
code={`<script src="${isZh ? CDN_DEMO_CN_URL : CDN_DEMO_URL}" crossorigin="true"></script>`}
|
||||
code={`<script src="DEMO_CDN_URL" crossorigin="true"></script>`}
|
||||
language="html"
|
||||
/>
|
||||
<table className="w-full border-collapse text-sm">
|
||||
|
||||
Reference in New Issue
Block a user