Skip to content

Commit 8445350

Browse files
ganeshrvelganeshrvel
authored
Fix/docs upgrade shade 2 (#2097)
1 parent 7e979a8 commit 8445350

File tree

9 files changed

+282
-32
lines changed

9 files changed

+282
-32
lines changed

‎.dockerignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
Dockerfile
2+
test_resources

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,4 +177,7 @@ uv.lock
177177
# nbdev
178178
_proc/
179179
site/
180+
_version.py
181+
test_resources
182+
.claude
180183
**/old_nbs/*.md

‎docs/INSTALL

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Documentation Development Setup
2+
3+
## Prerequisites
4+
5+
1. Install uv (Python package manager):
6+
```bash
7+
curl -LsSf https://astral.sh/uv/install.sh | sh
8+
```
9+
10+
## Running Documentation Locally
11+
12+
1. Install documentation dependencies:
13+
```bash
14+
uv sync --extra docs --project ragas
15+
```
16+
17+
2. Serve the documentation:
18+
```bash
19+
source ragas/.venv/bin/activate && mkdocs serve --dirtyreload
20+
```
21+
22+
The documentation will be available at http://127.0.0.1:8000/
23+
24+
## Run dev
25+
26+
You can also use the scripts command (after completing step 1 above and ensuring mkdocs is available in PATH):
27+
```bash
28+
./scripts/dev_docs.sh
29+
```

‎docs/_static/js/header_border.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const header_div = document.querySelector(".md-header");
22
const navbar_div = document.querySelector(".md-tabs");
3-
const border_css = "2px solid #ffb700df";
3+
const border_css = "2px solid #bd8526";
44

55
// Add smooth transition to borders
66
if (header_div) {

‎docs/_static/js/toggle.js

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,2 @@
11
document.addEventListener('DOMContentLoaded', () => {
2-
const toggles = document.querySelectorAll('.toggle-list');
3-
toggles.forEach(toggle => {
4-
toggle.addEventListener('click', () => {
5-
const content = toggle.nextElementSibling;
6-
const arrow = toggle.querySelector('.arrow');
7-
content.style.display = content.style.display === 'none' ? 'block' : 'none';
8-
// Toggle arrow direction based on content visibility
9-
if (content.style.display === 'block') {
10-
arrow.innerText = '▼'; // Down arrow
11-
} else {
12-
arrow.innerText = '▶'; // Right arrow
13-
}
14-
});
15-
});
162
});

‎docs/extra/ragas-modern.css

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/* Ragas Modern Documentation Theme */
2+
3+
/* Import Google Fonts - Professional Typography */
4+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');
5+
6+
/* Custom color scheme variables */
7+
:root {
8+
--md-primary-fg-color: #bd8526;
9+
--md-primary-fg-color--light: #d19a3d;
10+
--md-primary-fg-color--dark: #a0711e;
11+
--md-accent-fg-color: #bd8526;
12+
}
13+
14+
[data-md-color-scheme="slate"] {
15+
--md-primary-fg-color: #bd8526;
16+
--md-primary-fg-color--light: #d19a3d;
17+
--md-primary-fg-color--dark: #a0711e;
18+
--md-accent-fg-color: #bd8526;
19+
--md-default-bg-color: #171717;
20+
}
21+
22+
/* Only minimal, essential customizations - let Material Design handle the rest */
23+
24+
/* Reduce navigation font size only */
25+
.md-nav {
26+
font-size: 0.8rem;
27+
}
28+
29+
.md-nav__link {
30+
font-size: 0.8rem;
31+
}
32+
33+
.md-nav__title {
34+
font-size: 0.8rem;
35+
}
36+
37+
.md-tabs__link {
38+
font-size: 0.8rem;
39+
}
40+
41+
/* Clean repository info*/
42+
.md-source__fact--version {
43+
display: none;
44+
}
45+
46+
.md-source__fact:nth-child(1n + 2):before {
47+
margin-left: 0 !important;
48+
}
49+
50+
/* Ensure proper font family application */
51+
body {
52+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
53+
}
54+
55+
code, kbd, samp, pre {
56+
font-family: 'JetBrains Mono', 'Consolas', monospace;
57+
}
58+
59+
/* Modern Connected FAQ Styling */
60+
.toggle-list {
61+
background: var(--md-default-bg-color);
62+
border: 1px solid var(--md-default-fg-color--lightest);
63+
border-radius: 0.5rem;
64+
padding: 1rem 1.25rem;
65+
margin: 0.5rem 0;
66+
cursor: pointer;
67+
font-weight: 500;
68+
color: var(--md-default-fg-color);
69+
transition: all 0.2s ease;
70+
position: relative;
71+
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
72+
}
73+
74+
.toggle-list:hover {
75+
border-color: var(--md-accent-fg-color);
76+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
77+
}
78+
79+
.toggle-list.active {
80+
border-bottom-left-radius: 0;
81+
border-bottom-right-radius: 0;
82+
border-bottom-color: transparent;
83+
margin-bottom: 0;
84+
}
85+
86+
.toggle-list .arrow {
87+
position: absolute;
88+
right: 1.25rem;
89+
top: 50%;
90+
transform: translateY(-50%);
91+
font-size: 1rem;
92+
color: var(--md-default-fg-color--light);
93+
transition: all 0.2s ease;
94+
font-weight: normal;
95+
}
96+
97+
.toggle-list.active .arrow {
98+
color: var(--md-accent-fg-color);
99+
}
100+
101+
.toggle-list + div {
102+
background: var(--md-default-bg-color);
103+
border: 1px solid var(--md-default-fg-color--lightest);
104+
border-top: none;
105+
border-radius: 0 0 0.5rem 0.5rem;
106+
padding: 1.25rem;
107+
margin-top: 0;
108+
margin-bottom: 0.5rem;
109+
color: var(--md-default-fg-color--light);
110+
line-height: 1.6;
111+
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
112+
}
113+
114+
/* Header spacing fixes */
115+
.md-header__inner {
116+
gap: 0.25rem !important;
117+
}
118+
119+
.md-header__title {
120+
margin-left: 0.25rem !important;
121+
}
122+
123+
.md-header__button {
124+
margin: 0 0.25rem !important;
125+
}
126+
127+
/* Simple logo fixes - let MkDocs handle sizing */
128+
.md-header__button.md-logo {
129+
padding: 0 !important;
130+
margin: 0 !important;
131+
}
132+
133+
.md-header__button.md-logo img {
134+
height: 1.5rem !important;
135+
width: auto !important;
136+
display: block !important;
137+
}
138+
139+
/* Remove yellow/orange divider in header */
140+
.md-header::after,
141+
.md-header__inner::after,
142+
.md-tabs::after {
143+
display: none !important;
144+
}
145+
146+
.md-tabs {
147+
border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
148+
}
149+
150+
151+
/* Dark mode FAQ styling */
152+
[data-md-color-scheme="slate"] .toggle-list {
153+
background: var(--md-code-bg-color);
154+
border-color: var(--md-default-fg-color--lightest);
155+
}
156+
157+
[data-md-color-scheme="slate"] .toggle-list + div {
158+
background: var(--md-code-bg-color);
159+
border-color: var(--md-default-fg-color--lightest);
160+
}
161+
162+
/* FAQ Container spacing */
163+
.md-typeset h2 + .toggle-list:first-of-type {
164+
margin-top: 1.5rem;
165+
}
166+
167+
/* Let Material Design handle everything else - no custom colors, spacing, or layouts */

‎docs/index.md

Lines changed: 68 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,84 @@ Ragas is a library that provides tools to supercharge the evaluation of Large La
3838

3939
## Frequently Asked Questions
4040

41-
<div class="toggle-list"><span class="arrow">▶</span> What is the best open-source model to use?</div>
41+
<div class="toggle-list"><span class="arrow">→</span> What is the best open-source model to use?</div>
4242
<div style="display: none;">
4343
There isn't a single correct answer to this question. With the rapid pace of AI model development, new open-source models are released every week, often claiming to outperform previous versions. The best model for your needs depends largely on your GPU capacity and the type of data you're working with.
44+
<br><br>
4445
It's a good idea to explore newer, widely accepted models with strong general capabilities. You can refer to <a href="https://github.com/eugeneyan/open-llms?tab=readme-ov-file#open-llms">this list</a> for available open-source models, their release dates, and fine-tuned variants.
4546
</div>
4647

47-
<div class="toggle-list"><span class="arrow">▶</span> Why do NaN values appear in evaluation results?</div>
48+
<div class="toggle-list"><span class="arrow">→</span> Why do NaN values appear in evaluation results?</div>
4849
<div style="display: none;">
4950
NaN stands for "Not a Number." In ragas evaluation results, NaN can appear for two main reasons:
50-
<ul>
51+
<ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
5152
<li><strong>JSON Parsing Issue:</strong> The model's output is not JSON-parsable. ragas requires models to output JSON-compatible responses because all prompts are structured using Pydantic. This ensures efficient parsing of LLM outputs.</li>
52-
<li><strong>Non-Ideal Cases for Scoring:</strong> Certain cases in the sample may not be ideal for scoring. For example, scoring the faithfulness of a response like "I don’t know" might not be appropriate.</li>
53+
<li><strong>Non-Ideal Cases for Scoring:</strong> Certain cases in the sample may not be ideal for scoring. For example, scoring the faithfulness of a response like "I don't know" might not be appropriate.</li>
5354
</ul>
5455
</div>
5556

56-
<div class="toggle-list"><span class="arrow">▶</span> How can I make evaluation results more explainable?</div>
57+
<div class="toggle-list"><span class="arrow">→</span> How can I make evaluation results more explainable?</div>
5758
<div style="display: none;">
5859
The best way is to trace and log your evaluation, then inspect the results using LLM traces. You can follow a detailed example of this process <a href="/howtos/customizations/metrics/tracing/">here</a>.
59-
</div>
60+
</div>
61+
62+
<script>
63+
// FAQ
64+
(function() {
65+
function initFAQ() {
66+
const toggles = document.querySelectorAll('.toggle-list');
67+
68+
toggles.forEach(toggle => {
69+
// Remove any existing listeners
70+
const newToggle = toggle.cloneNode(true);
71+
toggle.parentNode.replaceChild(newToggle, toggle);
72+
});
73+
74+
// Re-select after cloning
75+
const freshToggles = document.querySelectorAll('.toggle-list');
76+
77+
freshToggles.forEach(toggle => {
78+
const arrow = toggle.querySelector('.arrow');
79+
const content = toggle.nextElementSibling;
80+
81+
// Initialize as closed
82+
if (arrow) arrow.innerText = '→';
83+
if (content) content.style.display = 'none';
84+
toggle.classList.remove('active');
85+
86+
// Add click listener
87+
toggle.addEventListener('click', function() {
88+
const myContent = this.nextElementSibling;
89+
const myArrow = this.querySelector('.arrow');
90+
const isOpen = this.classList.contains('active');
91+
92+
// Close all others first
93+
freshToggles.forEach(other => {
94+
const otherContent = other.nextElementSibling;
95+
const otherArrow = other.querySelector('.arrow');
96+
if (otherContent) otherContent.style.display = 'none';
97+
other.classList.remove('active');
98+
if (otherArrow) otherArrow.innerText = '→';
99+
});
100+
101+
// Open this one if it was closed
102+
if (!isOpen) {
103+
if (myContent) myContent.style.display = 'block';
104+
this.classList.add('active');
105+
if (myArrow) myArrow.innerText = '↓';
106+
}
107+
});
108+
});
109+
}
110+
111+
// Initialize when page loads
112+
if (document.readyState === 'loading') {
113+
document.addEventListener('DOMContentLoaded', function() {
114+
initFAQ();
115+
});
116+
} else {
117+
initFAQ();
118+
}
119+
})();
120+
</script>
121+

‎mkdocs.yml

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ nav:
123123
- Swarm: howtos/integrations/swarm_agent_evaluation.md
124124
- Migrations:
125125
- From v0.1 to v0.2: howtos/migrations/migrate_from_v01_to_v02.md
126-
- 📖 References:
126+
- 📖 References:
127127
- references/index.md
128128
- Core:
129129
- Prompt: references/prompt.md
@@ -132,11 +132,11 @@ nav:
132132
- RunConfig: references/run_config.md
133133
- Executor: references/executor.md
134134
- Cache: references/cache.md
135-
- Evaluation:
135+
- Evaluation:
136136
- Schemas: references/evaluation_schema.md
137137
- Metrics: references/metrics.md
138138
- evaluate(): references/evaluate.md
139-
- Testset Generation:
139+
- Testset Generation:
140140
- Schemas: references/testset_schema.md
141141
- Graph: references/graph.md
142142
- Transforms: references/transforms.md
@@ -176,22 +176,21 @@ theme:
176176
- search.suggest
177177
- search.highlight
178178
palette:
179-
# Palette toggle for automatic mode
180179
- media: "(prefers-color-scheme)"
181180
toggle:
182181
icon: material/brightness-auto
183182
name: Switch to light mode
184-
185-
# Palette toggle for light mode
186183
- media: "(prefers-color-scheme: light)"
187-
scheme: ragas_light
184+
scheme: default
185+
primary: "#bd8526"
186+
accent: "#bd8526"
188187
toggle:
189188
icon: material/brightness-7
190189
name: Switch to dark mode
191-
192-
# Palette toggle for dark mode
193190
- media: "(prefers-color-scheme: dark)"
194-
scheme: ragas_dark
191+
scheme: slate
192+
primary: "#bd8526"
193+
accent: "#bd8526"
195194
toggle:
196195
icon: material/brightness-4
197196
name: Switch to system preference
@@ -223,7 +222,7 @@ markdown_extensions:
223222

224223
# Extra CSS
225224
extra_css:
226-
- extra/style.css
225+
- extra/ragas-modern.css
227226

228227
# Plugins
229228
extra:

‎scripts/dev_docs.sh

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/bin/bash
2+
3+
source ragas/.venv/bin/activate && mkdocs serve --dirtyreload

0 commit comments

Comments
 (0)