Skip to content

Commit be7be8e

Browse files
lesebclaude
leseb
and
claude
authored
feat(docs): redesign provider cards, DocCardList, and tables site-wide (#5694)
# What does this PR do? Redesigns the docs site's card grids and tables for a cohesive, polished look that matches the rest of the site's design language. **Cards (DocCardList):** Replaces the default Docusaurus rounded-box cards with a unified 1px-gap grid panel. Applies globally to all pages using DocCardList (`/docs`, `/docs/concepts`, `/docs/building_applications`, `/docs/distributions`). **Providers page:** Adds a custom `ProviderGrid` component with Lucide icons, monospace count badges, and a `ProviderReference` table with category icons and arrow links, replacing the generic DocCardList and plain markdown table. **Tables (site-wide):** Restyles all markdown tables with contained borders and rounded corners, JetBrains Mono uppercase headers with a subtle background tint, alternating row zebra striping, first-column bold emphasis for scanability, row hover highlights, and quieter inline code styling inside table cells. ## Test Plan - Run `npm install && npx docusaurus gen-api-docs all` in the `docs/` directory - Start the dev server with `npx docusaurus start` - Verify the card grid on `/docs`, `/docs/concepts`, `/docs/building_applications`, `/docs/distributions` - Verify the custom ProviderGrid and ProviderReference on `/docs/providers` - Verify table styling on `/docs` (API table), `/docs/providers` (reference table), and any provider detail page like `/docs/providers/inference/remote_ollama` (config table) - Check both light and dark mode Signed-off-by: Sébastien Han <seb@redhat.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent e0412eb commit be7be8e

4 files changed

Lines changed: 585 additions & 75 deletions

File tree

‎docs/docs/providers/index.mdx‎

Lines changed: 3 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ sidebar_label: Overview
55
sidebar_position: 1
66
---
77

8-
import DocCardList from '@theme/DocCardList';
8+
import { ProviderGrid, ProviderReference } from '@site/src/components/ProviderGrid';
99

1010
# API Providers
1111

@@ -22,62 +22,11 @@ At least one inline provider exists for each API so you can run a fully featured
2222

2323
## Provider categories
2424

25-
<DocCardList items={[
26-
{
27-
type: 'link',
28-
label: 'Inference',
29-
href: '/docs/providers/inference/',
30-
description: 'Ollama, vLLM, OpenAI, Bedrock, Anthropic, Gemini, WatsonX, and more',
31-
},
32-
{
33-
type: 'link',
34-
label: 'Vector IO',
35-
href: '/docs/providers/vector_io/',
36-
description: 'FAISS, SQLite-Vec, ChromaDB, Qdrant, Milvus, PGVector, Weaviate',
37-
},
38-
{
39-
type: 'link',
40-
label: 'Safety',
41-
href: '/docs/providers/safety/',
42-
description: 'Llama Guard, Prompt Guard, Code Scanner, Bedrock Guardrails',
43-
},
44-
{
45-
type: 'link',
46-
label: 'Tool Runtime',
47-
href: '/docs/providers/tool_runtime/',
48-
description: 'File Search, Brave Search, Tavily, MCP, Wolfram Alpha',
49-
},
50-
{
51-
type: 'link',
52-
label: 'Files',
53-
href: '/docs/providers/files/',
54-
description: 'Local filesystem and S3 storage backends',
55-
},
56-
{
57-
type: 'link',
58-
label: 'DatasetIO',
59-
href: '/docs/providers/datasetio/',
60-
description: 'Local filesystem and HuggingFace dataset loading',
61-
},
62-
{
63-
type: 'link',
64-
label: 'External Providers',
65-
href: '/docs/providers/external/',
66-
description: 'Build your own provider and integrate it with OGX',
67-
},
68-
]} />
25+
<ProviderGrid />
6926

7027
## Reference
7128

72-
| Category | Count | Examples | Docs |
73-
|----------|-------|----------|------|
74-
| **Inference** | 23 | Ollama, vLLM, OpenAI, Bedrock, Anthropic, Gemini, WatsonX, and more | [Inference Providers](/docs/providers/inference/) |
75-
| **Vector IO** | 15 | FAISS, ChromaDB, Qdrant, Milvus, PGVector, Weaviate, Elasticsearch | [Vector IO Providers](/docs/providers/vector_io/) |
76-
| **Safety** | 7 | Llama Guard, Prompt Guard, Code Scanner, Bedrock Guardrails | [Safety Providers](/docs/providers/safety/) |
77-
| **Tool Runtime** | 6 | File Search, Brave Search, Tavily, MCP, Wolfram Alpha | [Tool Runtime Providers](/docs/providers/tool_runtime/) |
78-
| **Files** | 3 | Local filesystem, S3, OpenAI Files | [Files Providers](/docs/providers/files/) |
79-
| **DatasetIO** | 2 | Local filesystem, HuggingFace | [DatasetIO Providers](/docs/providers/datasetio/) |
80-
| **External** | — | Build your own provider | [External Providers Guide](/docs/providers/external/) |
29+
<ProviderReference />
8130

8231
## Why this matters
8332

‎docs/src/components/ProviderGrid/index.jsx‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import styles from './styles.module.css';
4+
5+
const ICONS = {
6+
inference: (
7+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
8+
<rect x="4" y="4" width="16" height="16" rx="2"/>
9+
<rect x="9" y="9" width="6" height="6"/>
10+
<path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/>
11+
<path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/>
12+
</svg>
13+
),
14+
vector_io: (
15+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
16+
<ellipse cx="12" cy="5" rx="9" ry="3"/>
17+
<path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5"/>
18+
<path d="M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3"/>
19+
</svg>
20+
),
21+
safety: (
22+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
23+
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
24+
</svg>
25+
),
26+
tool_runtime: (
27+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
28+
<path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
29+
</svg>
30+
),
31+
files: (
32+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
33+
<path d="M15 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7z"/>
34+
<path d="M14 2v4a2 2 0 002 2h4"/><path d="M10 13H8"/><path d="M16 17H8"/><path d="M16 13h-2"/>
35+
</svg>
36+
),
37+
datasetio: (
38+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
39+
<path d="M12 3v18"/><rect x="3" y="3" width="18" height="18" rx="2"/>
40+
<path d="M3 9h18"/><path d="M3 15h18"/>
41+
</svg>
42+
),
43+
external: (
44+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
45+
<path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a6 6 0 01-12 0V8z"/>
46+
</svg>
47+
),
48+
};
49+
50+
const CATEGORIES = [
51+
{
52+
id: 'inference',
53+
label: 'Inference',
54+
count: 23,
55+
desc: 'Ollama, vLLM, OpenAI, Bedrock, Anthropic, Gemini, WatsonX, and more',
56+
href: '/docs/providers/inference/',
57+
},
58+
{
59+
id: 'vector_io',
60+
label: 'Vector IO',
61+
count: 15,
62+
desc: 'FAISS, SQLite-Vec, ChromaDB, Qdrant, Milvus, PGVector, Weaviate',
63+
href: '/docs/providers/vector_io/',
64+
},
65+
{
66+
id: 'safety',
67+
label: 'Safety',
68+
count: 7,
69+
desc: 'Llama Guard, Prompt Guard, Code Scanner, Bedrock Guardrails',
70+
href: '/docs/providers/safety/',
71+
},
72+
{
73+
id: 'tool_runtime',
74+
label: 'Tool Runtime',
75+
count: 6,
76+
desc: 'File Search, Brave Search, Tavily, MCP, Wolfram Alpha',
77+
href: '/docs/providers/tool_runtime/',
78+
},
79+
{
80+
id: 'files',
81+
label: 'Files',
82+
count: 3,
83+
desc: 'Local filesystem and S3 storage backends',
84+
href: '/docs/providers/files/',
85+
},
86+
{
87+
id: 'datasetio',
88+
label: 'DatasetIO',
89+
count: 2,
90+
desc: 'Local filesystem and HuggingFace dataset loading',
91+
href: '/docs/providers/datasetio/',
92+
},
93+
];
94+
95+
const EXTERNAL = {
96+
id: 'external',
97+
label: 'External Providers',
98+
desc: 'Build your own provider and integrate it with OGX',
99+
href: '/docs/providers/external/',
100+
};
101+
102+
export function ProviderGrid() {
103+
return (
104+
<div className={styles.grid}>
105+
{CATEGORIES.map((cat) => (
106+
<Link key={cat.id} to={cat.href} className={styles.card}>
107+
<div className={styles.cardHeader}>
108+
<div className={styles.cardIcon}>{ICONS[cat.id]}</div>
109+
<span className={styles.cardTitle}>{cat.label}</span>
110+
<span className={styles.cardCount}>{cat.count}</span>
111+
</div>
112+
<p className={styles.cardDesc}>{cat.desc}</p>
113+
</Link>
114+
))}
115+
<Link to={EXTERNAL.href} className={`${styles.card} ${styles.cardExternal}`}>
116+
<div className={styles.cardHeader}>
117+
<div className={styles.cardIcon}>{ICONS[EXTERNAL.id]}</div>
118+
<span className={styles.cardTitle}>{EXTERNAL.label}</span>
119+
</div>
120+
<p className={styles.cardDesc}>{EXTERNAL.desc}</p>
121+
</Link>
122+
</div>
123+
);
124+
}
125+
126+
const REF_DATA = [
127+
{ id: 'inference', label: 'Inference', count: 23, examples: 'Ollama, vLLM, OpenAI, Bedrock, Anthropic, Gemini, WatsonX, and more', href: '/docs/providers/inference/', linkLabel: 'Inference Providers' },
128+
{ id: 'vector_io', label: 'Vector IO', count: 15, examples: 'FAISS, ChromaDB, Qdrant, Milvus, PGVector, Weaviate, Elasticsearch', href: '/docs/providers/vector_io/', linkLabel: 'Vector IO Providers' },
129+
{ id: 'safety', label: 'Safety', count: 7, examples: 'Llama Guard, Prompt Guard, Code Scanner, Bedrock Guardrails', href: '/docs/providers/safety/', linkLabel: 'Safety Providers' },
130+
{ id: 'tool_runtime', label: 'Tool Runtime', count: 6, examples: 'File Search, Brave Search, Tavily, MCP, Wolfram Alpha', href: '/docs/providers/tool_runtime/', linkLabel: 'Tool Runtime Providers' },
131+
{ id: 'files', label: 'Files', count: 3, examples: 'Local filesystem, S3, OpenAI Files', href: '/docs/providers/files/', linkLabel: 'Files Providers' },
132+
{ id: 'datasetio', label: 'DatasetIO', count: 2, examples: 'Local filesystem, HuggingFace', href: '/docs/providers/datasetio/', linkLabel: 'DatasetIO Providers' },
133+
{ id: 'external', label: 'External', count: null, examples: 'Build your own provider', href: '/docs/providers/external/', linkLabel: 'External Providers Guide' },
134+
];
135+
136+
export function ProviderReference() {
137+
return (
138+
<div className={styles.reference}>
139+
<table className={styles.refTable}>
140+
<thead>
141+
<tr>
142+
<th>Category</th>
143+
<th style={{textAlign: 'center'}}>Count</th>
144+
<th>Examples</th>
145+
<th>Docs</th>
146+
</tr>
147+
</thead>
148+
<tbody>
149+
{REF_DATA.map((row) => (
150+
<tr key={row.id} className={styles.refRow}>
151+
<td>
152+
<div className={styles.refCategory}>
153+
<span className={styles.refCategoryIcon}>{ICONS[row.id]}</span>
154+
{row.label}
155+
</div>
156+
</td>
157+
<td className={styles.refCount}>
158+
{row.count != null ? row.count : '—'}
159+
</td>
160+
<td className={styles.refExamples}>{row.examples}</td>
161+
<td className={styles.refLink}>
162+
<Link to={row.href}>
163+
{row.linkLabel}
164+
<span className={styles.refArrow}>&rarr;</span>
165+
</Link>
166+
</td>
167+
</tr>
168+
))}
169+
</tbody>
170+
</table>
171+
</div>
172+
);
173+
}

0 commit comments

Comments
 (0)