Skip to content

Commit f7fdc05

Browse files
wangchen615wangchen615
authored
Add News page with articles about vLLM Semantic Router (#435)
- Add News tab to navigation in docusaurus.config.ts - Create news.js page with article cards and previews - Add news.module.css with responsive styling - Include 7 articles from arXiv, Red Hat Developer, and community blogs - Add contribution section with GitHub issue links - Style Read More buttons with white text and bold hover effect Signed-off-by: Chen Wang <Chen.Wang1@ibm.com>
1 parent 925c830 commit f7fdc05

File tree

3 files changed

+354
-0
lines changed

3 files changed

+354
-0
lines changed

‎website/docusaurus.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,11 @@ const config: Config = {
9494
label: 'Blog',
9595
position: 'left',
9696
},
97+
{
98+
to: '/news',
99+
label: 'News',
100+
position: 'left',
101+
},
97102
{
98103
type: 'dropdown',
99104
label: 'Community',

‎website/src/pages/news.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React from 'react'
2+
import Layout from '@theme/Layout'
3+
import styles from './news.module.css'
4+
5+
const newsArticles = [
6+
{
7+
title: 'vLLM Semantic Router: Improving Efficiency in AI Reasoning',
8+
date: 'September 11, 2025',
9+
source: 'Red Hat Developer',
10+
description: 'This article explores how the vLLM Semantic Router addresses challenges in AI reasoning by implementing dynamic, semantic-aware routing to optimize performance and cost.',
11+
url: 'https://developers.redhat.com/articles/2025/09/11/vllm-semantic-router-improving-efficiency-ai-reasoning',
12+
category: 'Technical Article',
13+
},
14+
{
15+
title: 'LLM Semantic Router: Intelligent Request Routing for Large Language Models',
16+
date: 'May 20, 2025',
17+
source: 'Red Hat Developer',
18+
description: 'This piece introduces the LLM Semantic Router, focusing on intelligent, cost-aware request routing to ensure efficient processing of queries by large language models.',
19+
url: 'https://developers.redhat.com/articles/2025/05/20/llm-semantic-router-intelligent-request-routing',
20+
category: 'Technical Article',
21+
},
22+
{
23+
title: 'Smarter LLMs: How the vLLM Semantic Router Delivers Fast, Efficient Inference',
24+
date: 'September 2025',
25+
source: 'Joshua Berkowitz Blog',
26+
description: 'This blog post highlights the vLLM Semantic Router\'s role in enhancing large language model inference by intelligently routing queries to balance speed, accuracy, and cost.',
27+
url: 'https://joshuaberkowitz.us/blog/news-1/smarter-llms-how-the-vllm-semantic-router-delivers-fast-efficient-inference-1133',
28+
category: 'Blog Post',
29+
},
30+
{
31+
title: 'vLLM Semantic Router',
32+
date: 'September 2025',
33+
source: 'Jimmy Song\'s Blog',
34+
description: 'This article provides an overview of the vLLM Semantic Router, detailing its features and applications in improving large language model inference efficiency.',
35+
url: 'https://jimmysong.io/ai/semantic-router/',
36+
category: 'Blog Post',
37+
},
38+
]
39+
40+
function NewsCard({ article }) {
41+
return (
42+
<div className={`card ${styles.newsCard}`}>
43+
<div className="card__header">
44+
<div className={styles.cardHeader}>
45+
<h3 className={styles.articleTitle}>{article.title}</h3>
46+
<div className={styles.articleMeta}>
47+
<span className={`badge badge--primary ${styles.categoryBadge}`}>
48+
{article.category}
49+
</span>
50+
<span className={styles.source}>{article.source}</span>
51+
<span className={styles.date}>{article.date}</span>
52+
</div>
53+
</div>
54+
</div>
55+
<div className="card__body">
56+
<p className={styles.articleDescription}>{article.description}</p>
57+
</div>
58+
<div className="card__footer">
59+
<a
60+
href={article.url}
61+
target="_blank"
62+
rel="noopener noreferrer"
63+
className={`button button--primary button--outline ${styles.readMoreButton}`}
64+
>
65+
Read More →
66+
</a>
67+
</div>
68+
</div>
69+
)
70+
}
71+
72+
export default function News() {
73+
return (
74+
<Layout
75+
title="News"
76+
description="Latest news, articles, and publications about vLLM Semantic Router"
77+
>
78+
<div className="container margin-vert--lg">
79+
<div className="row">
80+
<div className="col col--12">
81+
<div className={styles.heroSection}>
82+
<h1 className={styles.heroTitle}>News & Articles</h1>
83+
<p className={styles.heroDescription}>
84+
Stay updated with the latest news, research papers, blog posts, and articles
85+
about vLLM Semantic Router and its impact on LLM inference efficiency.
86+
</p>
87+
</div>
88+
</div>
89+
</div>
90+
91+
<div className="row">
92+
<div className="col col--12">
93+
<div className={styles.newsGrid}>
94+
{newsArticles.map((article, index) => (
95+
<div key={index} className={styles.newsItem}>
96+
<NewsCard article={article} />
97+
</div>
98+
))}
99+
</div>
100+
</div>
101+
</div>
102+
103+
<div className="row">
104+
<div className="col col--12">
105+
<div className={styles.contributeSection}>
106+
<h2>Contribute to News</h2>
107+
<p>
108+
Know of an article, blog post, or publication about vLLM Semantic Router
109+
that should be featured here?
110+
</p>
111+
<p className={styles.contributeActions}>
112+
<a
113+
href="https://github.com/vllm-project/semantic-router/issues/new?template=feature_request.md"
114+
target="_blank"
115+
rel="noopener noreferrer"
116+
>
117+
Submit a suggestion
118+
</a>
119+
{' '}
120+
or
121+
{' '}
122+
<a
123+
href="https://github.com/vllm-project/semantic-router/issues/new?template=feature_request.md"
124+
target="_blank"
125+
rel="noopener noreferrer"
126+
>
127+
contribute directly
128+
</a>
129+
{' '}
130+
to our repository.
131+
</p>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
</Layout>
137+
)
138+
}

‎website/src/pages/news.module.css‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
.heroSection {
2+
text-align: center;
3+
margin-bottom: 3rem;
4+
}
5+
6+
.heroTitle {
7+
font-size: 3rem;
8+
font-weight: 700;
9+
margin-bottom: 1rem;
10+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11+
-webkit-background-clip: text;
12+
-webkit-text-fill-color: transparent;
13+
background-clip: text;
14+
}
15+
16+
.heroDescription {
17+
font-size: 1.2rem;
18+
color: var(--ifm-color-emphasis-700);
19+
max-width: 600px;
20+
margin: 0 auto;
21+
line-height: 1.6;
22+
}
23+
24+
.newsGrid {
25+
display: grid;
26+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
27+
gap: 2rem;
28+
margin-bottom: 3rem;
29+
}
30+
31+
.newsItem {
32+
height: 100%;
33+
}
34+
35+
.newsCard {
36+
height: 100%;
37+
display: flex;
38+
flex-direction: column;
39+
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
40+
border: 1px solid var(--ifm-color-emphasis-200);
41+
}
42+
43+
.newsCard:hover {
44+
transform: translateY(-4px);
45+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
46+
}
47+
48+
.cardHeader {
49+
padding: 0;
50+
}
51+
52+
.articleTitle {
53+
font-size: 1.3rem;
54+
font-weight: 600;
55+
margin-bottom: 0.75rem;
56+
line-height: 1.4;
57+
color: var(--ifm-heading-color);
58+
}
59+
60+
.articleMeta {
61+
display: flex;
62+
flex-wrap: wrap;
63+
gap: 0.5rem;
64+
align-items: center;
65+
margin-bottom: 0;
66+
}
67+
68+
.categoryBadge {
69+
font-size: 0.75rem;
70+
font-weight: 500;
71+
}
72+
73+
.source {
74+
font-size: 0.9rem;
75+
color: var(--ifm-color-emphasis-600);
76+
font-weight: 500;
77+
}
78+
79+
.date {
80+
font-size: 0.85rem;
81+
color: var(--ifm-color-emphasis-500);
82+
}
83+
84+
.articleDescription {
85+
color: var(--ifm-color-emphasis-700);
86+
line-height: 1.6;
87+
margin-bottom: 0;
88+
}
89+
90+
/* Custom button styling for Read More buttons */
91+
.newsCard .button--outline {
92+
color: white !important;
93+
background-color: var(--ifm-color-primary) !important;
94+
border-color: var(--ifm-color-primary) !important;
95+
transition: all 0.2s ease-in-out;
96+
opacity: 1 !important;
97+
}
98+
99+
.newsCard .button--outline:hover {
100+
color: white !important;
101+
background-color: var(--ifm-color-primary) !important;
102+
border-color: var(--ifm-color-primary) !important;
103+
transform: translateY(-1px);
104+
opacity: 1 !important;
105+
font-weight: bold !important;
106+
}
107+
108+
/* More specific targeting for outline buttons */
109+
.newsCard .card__footer .button--outline {
110+
color: white !important;
111+
background-color: var(--ifm-color-primary) !important;
112+
border-color: var(--ifm-color-primary) !important;
113+
}
114+
115+
.newsCard .card__footer .button--outline:hover {
116+
color: white !important;
117+
background-color: var(--ifm-color-primary) !important;
118+
border-color: var(--ifm-color-primary) !important;
119+
font-weight: bold !important;
120+
}
121+
122+
/* Custom read more button class */
123+
.readMoreButton {
124+
color: white !important;
125+
background-color: var(--ifm-color-primary) !important;
126+
border-color: var(--ifm-color-primary) !important;
127+
transition: all 0.2s ease-in-out;
128+
}
129+
130+
.readMoreButton:hover {
131+
color: white !important;
132+
background-color: var(--ifm-color-primary) !important;
133+
border-color: var(--ifm-color-primary) !important;
134+
transform: translateY(-1px);
135+
font-weight: bold !important;
136+
}
137+
138+
.contributeSection {
139+
text-align: center;
140+
padding: 2rem;
141+
background: var(--ifm-color-emphasis-100);
142+
border-radius: 8px;
143+
margin-top: 2rem;
144+
}
145+
146+
.contributeSection h2 {
147+
margin-bottom: 1rem;
148+
color: var(--ifm-heading-color);
149+
}
150+
151+
.contributeSection p {
152+
margin-bottom: 0;
153+
color: var(--ifm-color-emphasis-700);
154+
}
155+
156+
.contributeSection a {
157+
color: var(--ifm-color-primary);
158+
text-decoration: none;
159+
font-weight: 500;
160+
}
161+
162+
.contributeSection a:hover {
163+
text-decoration: underline;
164+
}
165+
166+
.contributeActions {
167+
text-align: center;
168+
margin-top: 1rem;
169+
}
170+
171+
.contributeActions a {
172+
color: var(--ifm-color-primary);
173+
text-decoration: none;
174+
font-weight: 500;
175+
}
176+
177+
.contributeActions a:hover {
178+
text-decoration: underline;
179+
}
180+
181+
/* Responsive design */
182+
@media (max-width: 768px) {
183+
.heroTitle {
184+
font-size: 2.5rem;
185+
}
186+
187+
.heroDescription {
188+
font-size: 1.1rem;
189+
}
190+
191+
.newsGrid {
192+
grid-template-columns: 1fr;
193+
gap: 1.5rem;
194+
}
195+
196+
.articleMeta {
197+
flex-direction: column;
198+
align-items: flex-start;
199+
gap: 0.25rem;
200+
}
201+
}
202+
203+
@media (max-width: 480px) {
204+
.heroTitle {
205+
font-size: 2rem;
206+
}
207+
208+
.newsGrid {
209+
gap: 1rem;
210+
}
211+
}

0 commit comments

Comments
 (0)