Skip to content

Commit 548951e

Browse files
hghalebihghalebi
committed
feat: enhance docs workflow to create beautiful tutorial HTML with professional styling
1 parent 9c8b991 commit 548951e

File tree

1 file changed

+266
-90
lines changed

1 file changed

+266
-90
lines changed

‎.github/workflows/docs.yml

Lines changed: 266 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -229,71 +229,257 @@ jobs:
229229
cp README.md target/doc/website/
230230
fi
231231
232-
# Step 5.5: Create tutorial HTML pages and navigation
233-
- name: Create tutorial pages
232+
# Step 5.5: Install markdown processing tools and create tutorial HTML
233+
- name: Install markdown processing tools
234234
run: |
235-
echo "Creating tutorial HTML pages..."
235+
echo "Installing markdown processing tools..."
236+
# Install pandoc for proper markdown to HTML conversion
237+
sudo apt-get update
238+
sudo apt-get install -y pandoc
236239
237-
# Create a simple HTML template for tutorials
240+
# Install Python markdown for fallback
241+
pip install markdown[extra] pygments
242+
243+
- name: Create beautiful tutorial HTML pages
244+
run: |
245+
echo "Creating beautiful tutorial HTML pages..."
246+
247+
# Create enhanced CSS for beautiful rendering
248+
cat > target/doc/tutorials/tutorial-style.css << 'EOF'
249+
/* Beautiful Tutorial Styling */
250+
body {
251+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
252+
line-height: 1.7;
253+
color: #2c3e50;
254+
max-width: 1200px;
255+
margin: 0 auto;
256+
padding: 20px;
257+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
258+
min-height: 100vh;
259+
}
260+
261+
.container {
262+
background: white;
263+
border-radius: 12px;
264+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
265+
padding: 40px;
266+
margin: 20px auto;
267+
}
268+
269+
.nav {
270+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
271+
color: white;
272+
padding: 20px;
273+
border-radius: 12px;
274+
margin-bottom: 40px;
275+
text-align: center;
276+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
277+
}
278+
.nav a {
279+
color: white;
280+
text-decoration: none;
281+
margin: 0 20px;
282+
padding: 8px 16px;
283+
border-radius: 6px;
284+
transition: background 0.3s ease;
285+
}
286+
.nav a:hover {
287+
background: rgba(255,255,255,0.2);
288+
text-decoration: none;
289+
}
290+
291+
h1 {
292+
color: #667eea;
293+
font-size: 2.5rem;
294+
margin-bottom: 30px;
295+
text-align: center;
296+
background: linear-gradient(135deg, #667eea, #764ba2);
297+
-webkit-background-clip: text;
298+
-webkit-text-fill-color: transparent;
299+
background-clip: text;
300+
}
301+
302+
h2 {
303+
color: #4a5568;
304+
font-size: 1.8rem;
305+
margin: 40px 0 20px 0;
306+
padding-bottom: 10px;
307+
border-bottom: 3px solid #667eea;
308+
}
309+
310+
h3 {
311+
color: #667eea;
312+
font-size: 1.4rem;
313+
margin: 30px 0 15px 0;
314+
}
315+
316+
p {
317+
margin-bottom: 20px;
318+
text-align: justify;
319+
}
320+
321+
pre {
322+
background: #2d3748;
323+
color: #e2e8f0;
324+
padding: 20px;
325+
border-radius: 8px;
326+
overflow-x: auto;
327+
border-left: 4px solid #667eea;
328+
margin: 20px 0;
329+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
330+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
331+
}
332+
333+
code {
334+
background: #edf2f7;
335+
color: #e53e3e;
336+
padding: 3px 8px;
337+
border-radius: 4px;
338+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
339+
font-size: 0.9em;
340+
}
341+
342+
pre code {
343+
background: transparent;
344+
color: inherit;
345+
padding: 0;
346+
}
347+
348+
.example {
349+
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
350+
border: 1px solid #dee2e6;
351+
border-radius: 12px;
352+
padding: 25px;
353+
margin: 25px 0;
354+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
355+
}
356+
357+
.toc {
358+
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
359+
padding: 25px;
360+
border-radius: 12px;
361+
margin: 30px 0;
362+
border-left: 5px solid #2196f3;
363+
}
364+
.toc ul { list-style-type: none; padding-left: 20px; }
365+
.toc > ul { padding-left: 0; }
366+
.toc a { color: #1976d2; text-decoration: none; font-weight: 500; }
367+
.toc a:hover { text-decoration: underline; color: #0d47a1; }
368+
369+
.highlight {
370+
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
371+
border: 1px solid #ffeaa7;
372+
border-radius: 8px;
373+
padding: 20px;
374+
margin: 25px 0;
375+
border-left: 5px solid #f39c12;
376+
}
377+
378+
.note {
379+
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
380+
border: 1px solid #c3e6cb;
381+
border-radius: 8px;
382+
padding: 20px;
383+
margin: 25px 0;
384+
border-left: 5px solid #28a745;
385+
}
386+
387+
.warning {
388+
background: linear-gradient(135deg, #f8d7da 0%, #f1b2b7 100%);
389+
border: 1px solid #f1b2b7;
390+
border-radius: 8px;
391+
padding: 20px;
392+
margin: 25px 0;
393+
border-left: 5px solid #dc3545;
394+
}
395+
396+
ul, ol {
397+
margin-bottom: 20px;
398+
padding-left: 30px;
399+
}
400+
401+
li {
402+
margin-bottom: 8px;
403+
}
404+
405+
strong {
406+
color: #2d3748;
407+
font-weight: 600;
408+
}
409+
410+
em {
411+
color: #667eea;
412+
font-style: italic;
413+
}
414+
415+
blockquote {
416+
border-left: 4px solid #667eea;
417+
padding-left: 20px;
418+
margin: 20px 0;
419+
font-style: italic;
420+
color: #4a5568;
421+
background: #f7fafc;
422+
padding: 15px 20px;
423+
border-radius: 0 8px 8px 0;
424+
}
425+
426+
table {
427+
width: 100%;
428+
border-collapse: collapse;
429+
margin: 20px 0;
430+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
431+
border-radius: 8px;
432+
overflow: hidden;
433+
}
434+
435+
th, td {
436+
padding: 12px 15px;
437+
text-align: left;
438+
border-bottom: 1px solid #e2e8f0;
439+
}
440+
441+
th {
442+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
443+
color: white;
444+
font-weight: 600;
445+
}
446+
447+
tr:hover {
448+
background: #f8f9fa;
449+
}
450+
451+
a {
452+
color: #667eea;
453+
text-decoration: none;
454+
border-bottom: 1px solid transparent;
455+
transition: border-color 0.3s ease;
456+
}
457+
458+
a:hover {
459+
border-bottom: 1px solid #667eea;
460+
}
461+
462+
.footer {
463+
text-align: center;
464+
margin-top: 60px;
465+
padding: 30px;
466+
color: #718096;
467+
border-top: 1px solid #e2e8f0;
468+
}
469+
EOF
470+
471+
# Create complete HTML template
238472
cat > target/doc/tutorials/template.html << 'EOF'
239473
<!DOCTYPE html>
240474
<html lang="en">
241475
<head>
242476
<meta charset="UTF-8">
243477
<meta name="viewport" content="width=device-width, initial-scale=1.0">
244-
<title>MCP Rust Tutorial</title>
245-
<style>
246-
body {
247-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
248-
line-height: 1.6;
249-
color: #333;
250-
max-width: 1000px;
251-
margin: 0 auto;
252-
padding: 20px;
253-
background: #fff;
254-
}
255-
.nav {
256-
background: #667eea;
257-
color: white;
258-
padding: 15px;
259-
border-radius: 8px;
260-
margin-bottom: 30px;
261-
text-align: center;
262-
}
263-
.nav a { color: white; text-decoration: none; margin: 0 15px; }
264-
.nav a:hover { text-decoration: underline; }
265-
h1, h2, h3 { color: #667eea; }
266-
pre {
267-
background: #f4f4f4;
268-
padding: 15px;
269-
border-radius: 8px;
270-
overflow-x: auto;
271-
border-left: 4px solid #667eea;
272-
}
273-
code {
274-
background: #f4f4f4;
275-
padding: 2px 6px;
276-
border-radius: 4px;
277-
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
278-
}
279-
.example {
280-
background: #f8f9fa;
281-
border: 1px solid #dee2e6;
282-
border-radius: 8px;
283-
padding: 20px;
284-
margin: 20px 0;
285-
}
286-
.toc {
287-
background: #e9ecef;
288-
padding: 20px;
289-
border-radius: 8px;
290-
margin: 20px 0;
291-
}
292-
.toc ul { list-style-type: none; padding-left: 20px; }
293-
.toc > ul { padding-left: 0; }
294-
.toc a { color: #667eea; text-decoration: none; }
295-
.toc a:hover { text-decoration: underline; }
296-
</style>
478+
<title>MCP Rust Tutorial - Complete Learning Resource</title>
479+
<link rel="stylesheet" href="tutorial-style.css">
480+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦀</text></svg>">
481+
<meta name="description" content="Complete tutorial for learning MCP (Model Context Protocol) development with Rust">
482+
<meta name="keywords" content="Rust, MCP, Model Context Protocol, Tutorial, Programming">
297483
</head>
298484
<body>
299485
<div class="nav">
@@ -302,43 +488,33 @@ jobs:
302488
<a href="mcp_rust_tutorial.html">📖 Tutorial</a>
303489
<a href="../website/readme.html">📄 README</a>
304490
</div>
491+
<div class="container">
305492
EOF
306493
307-
# If pandoc is available, convert markdown to HTML
308-
if command -v pandoc >/dev/null 2>&1; then
309-
echo "Converting tutorial markdown to HTML with pandoc..."
310-
if [ -f "mcp_rust_tutorial.md" ]; then
311-
pandoc mcp_rust_tutorial.md -o target/doc/tutorials/mcp_rust_tutorial.html \
312-
--standalone \
313-
--toc \
314-
--toc-depth=3 \
315-
--css=tutorial-style.css \
316-
--template=target/doc/tutorials/template.html 2>/dev/null || {
317-
echo "Pandoc conversion failed, creating simple HTML wrapper..."
318-
cat target/doc/tutorials/template.html > target/doc/tutorials/mcp_rust_tutorial.html
319-
echo '<div class="tutorial-content">' >> target/doc/tutorials/mcp_rust_tutorial.html
320-
echo '<pre>' >> target/doc/tutorials/mcp_rust_tutorial.html
321-
cat mcp_rust_tutorial.md >> target/doc/tutorials/mcp_rust_tutorial.html
322-
echo '</pre>' >> target/doc/tutorials/mcp_rust_tutorial.html
323-
echo '</div></body></html>' >> target/doc/tutorials/mcp_rust_tutorial.html
324-
}
325-
else
326-
echo "Tutorial markdown not found, creating placeholder..."
327-
cat target/doc/tutorials/template.html > target/doc/tutorials/mcp_rust_tutorial.html
328-
echo '<h1>Tutorial Coming Soon</h1><p>The tutorial content will be available soon.</p></body></html>' >> target/doc/tutorials/mcp_rust_tutorial.html
329-
fi
494+
# Convert markdown to beautiful HTML using pandoc
495+
if [ -f "mcp_rust_tutorial.md" ]; then
496+
echo "Converting tutorial markdown to beautiful HTML..."
497+
pandoc mcp_rust_tutorial.md \
498+
-f markdown+smart+pipe_tables+fenced_code_blocks+definition_lists \
499+
-t html5 \
500+
--standalone \
501+
--toc \
502+
--toc-depth=4 \
503+
--section-divs \
504+
--html-q-tags \
505+
--highlight-style=github \
506+
--template=target/doc/tutorials/template.html \
507+
-o target/doc/tutorials/mcp_rust_tutorial.html \
508+
--metadata title="MCP Rust Tutorial - Complete Learning Resource"
509+
510+
# Add closing tags
511+
echo '</div><div class="footer">🦀 <strong>MCP Rust Tutorial</strong> | Built with ❤️ for the Rust Community</div></body></html>' >> target/doc/tutorials/mcp_rust_tutorial.html
512+
513+
echo "✅ Beautiful tutorial HTML created successfully!"
330514
else
331-
echo "Creating simple HTML wrapper for tutorial..."
515+
echo "⚠️ Tutorial markdown not found, creating placeholder..."
332516
cat target/doc/tutorials/template.html > target/doc/tutorials/mcp_rust_tutorial.html
333-
echo '<div class="tutorial-content">' >> target/doc/tutorials/mcp_rust_tutorial.html
334-
if [ -f "mcp_rust_tutorial.md" ]; then
335-
echo '<pre>' >> target/doc/tutorials/mcp_rust_tutorial.html
336-
cat mcp_rust_tutorial.md >> target/doc/tutorials/mcp_rust_tutorial.html
337-
echo '</pre>' >> target/doc/tutorials/mcp_rust_tutorial.html
338-
else
339-
echo '<h1>Tutorial Coming Soon</h1><p>The tutorial content will be available soon.</p>' >> target/doc/tutorials/mcp_rust_tutorial.html
340-
fi
341-
echo '</div></body></html>' >> target/doc/tutorials/mcp_rust_tutorial.html
517+
echo '<h1>🚧 Tutorial Coming Soon</h1><p>The comprehensive MCP Rust tutorial will be available soon.</p></div></body></html>' >> target/doc/tutorials/mcp_rust_tutorial.html
342518
fi
343519
344520
# Create a CSS file for tutorials

0 commit comments

Comments
 (0)