Skip to content

Commit fc209a3

Browse files
ulivzulivz
authored
docs(agent-tars): add blog index page (#1588)
1 parent c2466c1 commit fc209a3

8 files changed

Lines changed: 311 additions & 2 deletions

File tree

‎multimodal/websites/docs/docs/en/_nav.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
},
1212
{
1313
"text": "Blog",
14-
"link": "/blog/2025-06-25-introducing-agent-tars-beta.html"
14+
"link": "/blog",
15+
"activeMatch": "/blog/"
1516
},
1617
{
1718
"text": "Version",

‎multimodal/websites/docs/docs/en/blog/index.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
description: Latest updates, insights, and announcements from the Agent TARS team
3+
pageType: custom
4+
---
5+
6+
import { BlogIndex } from '@components/BlogIndex';
7+
8+
<BlogIndex
9+
posts={[
10+
{
11+
title: "Introducing Agent TARS Beta",
12+
date: "June 25, 2025",
13+
author: "Agent TARS Team",
14+
excerpt: "We're excited to announce the Beta release of Agent TARS, bringing a new CLI-based architecture, hybrid browser GUI agent, better cross-model compatibility, and much more.",
15+
href: "/blog/2025-06-25-introducing-agent-tars-beta.html",
16+
tags: ["release", "beta", "cli", "gui-agent"]
17+
}
18+
]}
19+
/>

‎multimodal/websites/docs/docs/zh/_nav.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
},
1212
{
1313
"text": "Blog",
14-
"link": "/blog/2025-06-25-introducing-agent-tars-beta.html"
14+
"link": "/blog",
15+
"activeMatch": "/blog/"
1516
},
1617
{
1718
"text": "Version",

‎multimodal/websites/docs/docs/zh/blog/index.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
description: Agent TARS 团队的最新更新、见解和公告
3+
pageType: custom
4+
---
5+
6+
import { BlogIndex } from '@components/BlogIndex';
7+
8+
<BlogIndex
9+
posts={[
10+
{
11+
title: "Introducing Agent TARS Beta",
12+
date: "2025年6月25日",
13+
author: "Agent TARS Team",
14+
excerpt: "我们很高兴地宣布 Agent TARS Beta 版本的发布，带来了全新的 CLI 架构、混合浏览器 GUI Agent、更好的跨模型兼容性等更多功能。",
15+
href: "/blog/2025-06-25-introducing-agent-tars-beta.html",
16+
tags: ["发布", "beta", "cli", "gui-agent"]
17+
}
18+
]}
19+
/>

‎multimodal/websites/docs/src/components/BlogCard.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import { Link } from './Link';
3+
import './BlogIndex.css';
4+
5+
interface BlogCardProps {
6+
title: string;
7+
date: string;
8+
author: string;
9+
excerpt: string;
10+
href: string;
11+
tags?: string[];
12+
}
13+
14+
export function BlogCard({ title, date, author, excerpt, href, tags = [] }: BlogCardProps) {
15+
return (
16+
<Link
17+
href={href}
18+
className="blog-card"
19+
forceTraditionalLink={false}
20+
>
21+
<article className="blog-card-content">
22+
<div className="blog-card-meta">
23+
<time className="blog-card-date">{date}</time>
24+
<span className="blog-card-author">by {author}</span>
25+
</div>
26+
27+
<h2 className="blog-card-title">{title}</h2>
28+
29+
<p className="blog-card-excerpt">{excerpt}</p>
30+
31+
{tags.length > 0 && (
32+
<div className="blog-card-tags">
33+
{tags.map((tag) => (
34+
<span key={tag} className="blog-card-tag">
35+
{tag}
36+
</span>
37+
))}
38+
</div>
39+
)}
40+
41+
<div className="blog-card-arrow">Read more →</div>
42+
</article>
43+
</Link>
44+
);
45+
}

‎multimodal/websites/docs/src/components/BlogIndex.css‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
/* Blog Index Styles */
2+
.blog-index {
3+
max-width: 1200px;
4+
margin: 0 auto;
5+
padding: 2rem 1rem;
6+
}
7+
8+
.blog-index-header {
9+
text-align: center;
10+
margin-bottom: 4rem;
11+
}
12+
13+
.blog-index-title {
14+
font-size: 3rem;
15+
font-weight: 700;
16+
margin: 0 0 1rem 0;
17+
color: var(--rp-c-text-1);
18+
letter-spacing: -0.02em;
19+
}
20+
21+
.blog-index-description {
22+
font-size: 1.125rem;
23+
color: var(--rp-c-text-2);
24+
margin: 0;
25+
max-width: 600px;
26+
margin-left: auto;
27+
margin-right: auto;
28+
line-height: 1.6;
29+
}
30+
31+
.blog-index-grid {
32+
display: grid;
33+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
34+
gap: 2rem;
35+
margin-bottom: 3rem;
36+
}
37+
38+
.blog-index-empty {
39+
text-align: center;
40+
padding: 4rem 2rem;
41+
color: var(--rp-c-text-2);
42+
font-size: 1.125rem;
43+
}
44+
45+
/* Blog Card Styles */
46+
.blog-card {
47+
display: block;
48+
text-decoration: none;
49+
color: inherit;
50+
transition: transform 0.2s ease, box-shadow 0.2s ease;
51+
}
52+
53+
.blog-card:hover {
54+
transform: translateY(-4px);
55+
text-decoration: none;
56+
}
57+
58+
.blog-card-content {
59+
border: 1px solid var(--rp-c-divider);
60+
border-radius: 12px;
61+
padding: 2rem;
62+
height: 100%;
63+
display: flex;
64+
flex-direction: column;
65+
background: var(--rp-c-bg);
66+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
67+
}
68+
69+
.blog-card:hover .blog-card-content {
70+
border-color: var(--rp-c-text-3);
71+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
72+
}
73+
74+
.blog-card-meta {
75+
display: flex;
76+
align-items: center;
77+
gap: 0.75rem;
78+
margin-bottom: 1rem;
79+
font-size: 0.875rem;
80+
color: var(--rp-c-text-2);
81+
}
82+
83+
.blog-card-date {
84+
font-weight: 500;
85+
}
86+
87+
.blog-card-author {
88+
opacity: 0.8;
89+
}
90+
91+
.blog-card-title {
92+
font-size: 1.5rem;
93+
font-weight: 600;
94+
margin: 0 0 1rem 0;
95+
color: var(--rp-c-text-1);
96+
line-height: 1.3;
97+
}
98+
99+
.blog-card-excerpt {
100+
color: var(--rp-c-text-2);
101+
line-height: 1.6;
102+
margin: 0 0 1.5rem 0;
103+
flex-grow: 1;
104+
font-size: 0.95rem;
105+
}
106+
107+
.blog-card-tags {
108+
display: flex;
109+
flex-wrap: wrap;
110+
gap: 0.5rem;
111+
margin-bottom: 1.5rem;
112+
}
113+
114+
.blog-card-tag {
115+
background: var(--rp-c-bg-soft);
116+
color: var(--rp-c-text-2);
117+
padding: 0.25rem 0.75rem;
118+
border-radius: 9999px;
119+
font-size: 0.75rem;
120+
font-weight: 500;
121+
border: 1px solid var(--rp-c-divider);
122+
}
123+
124+
.blog-card-arrow {
125+
color: var(--rp-c-text-2);
126+
font-size: 0.875rem;
127+
font-weight: 500;
128+
transition: color 0.2s ease, transform 0.2s ease;
129+
align-self: flex-start;
130+
}
131+
132+
.blog-card:hover .blog-card-arrow {
133+
color: var(--rp-c-text-1);
134+
transform: translateX(4px);
135+
}
136+
137+
/* Responsive Design */
138+
@media (max-width: 768px) {
139+
.blog-index {
140+
padding: 1.5rem 1rem;
141+
}
142+
143+
.blog-index-title {
144+
font-size: 2.5rem;
145+
}
146+
147+
.blog-index-header {
148+
margin-bottom: 3rem;
149+
}
150+
151+
.blog-index-grid {
152+
grid-template-columns: 1fr;
153+
gap: 1.5rem;
154+
}
155+
156+
.blog-card-content {
157+
padding: 1.5rem;
158+
}
159+
}
160+
161+
@media (max-width: 480px) {
162+
.blog-index-title {
163+
font-size: 2rem;
164+
}
165+
166+
.blog-card-content {
167+
padding: 1.25rem;
168+
}
169+
170+
.blog-card-title {
171+
font-size: 1.25rem;
172+
}
173+
}

‎multimodal/websites/docs/src/components/BlogIndex.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import { BlogCard } from './BlogCard';
3+
import './BlogIndex.css';
4+
5+
interface BlogPost {
6+
title: string;
7+
date: string;
8+
author: string;
9+
excerpt: string;
10+
href: string;
11+
tags?: string[];
12+
}
13+
14+
interface BlogIndexProps {
15+
posts: BlogPost[];
16+
}
17+
18+
export function BlogIndex({ posts }: BlogIndexProps) {
19+
return (
20+
<div className="blog-index">
21+
<header className="blog-index-header">
22+
<h1 className="blog-index-title">Blog</h1>
23+
<p className="blog-index-description">
24+
Latest updates, insights, and announcements from the Agent TARS team
25+
</p>
26+
</header>
27+
28+
<div className="blog-index-grid">
29+
{posts.map((post, index) => (
30+
<BlogCard
31+
key={index}
32+
title={post.title}
33+
date={post.date}
34+
author={post.author}
35+
excerpt={post.excerpt}
36+
href={post.href}
37+
tags={post.tags}
38+
/>
39+
))}
40+
</div>
41+
42+
{posts.length === 0 && (
43+
<div className="blog-index-empty">
44+
<p>No blog posts available yet. Stay tuned for updates!</p>
45+
</div>
46+
)}
47+
</div>
48+
);
49+
}

‎multimodal/websites/docs/src/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ export * from './NotFoundLayout';
1010
export * from './UnderConstructionLayout';
1111
export * from './SocialCallout';
1212
export * from './Link';
13+
export * from './BlogCard';
14+
export * from './BlogIndex';
1315

1416
export * from './Banner';
1517
export * from './Replay';

0 commit comments

Comments
 (0)