Merge feature/tinytorch-core: site improvements, PDF build fixes, minor cleanups

This commit is contained in:
Vijay Janapa Reddi
2026-02-17 13:53:41 -05:00
7 changed files with 117 additions and 27 deletions

View File

@@ -29,6 +29,9 @@ serve: clean html
pdf:
@echo "🔥 Building Tiny🔥Torch PDF via XeLaTeX..."
@echo ""
@# PDF build needs Mermaid CLI (for diagrams). Config uses npx; Node.js must be installed.
@command -v npx >/dev/null 2>&1 || { echo "❌ Error: npx not found. PDF build requires Node.js (for Mermaid diagrams). Install from https://nodejs.org/ or run: brew install node"; exit 1; }
@echo "✅ Mermaid CLI (via npx) available"
@# Step 1: Generate LaTeX (matches CI workflow)
@echo "📚 Generating LaTeX files..."
jupyter-book build . --builder latex --config _config_pdf.yml --toc _toc_pdf.yml

View File

@@ -51,6 +51,8 @@ sphinx:
- sphinxcontrib.mermaid
config:
mermaid_version: "10.6.1"
# Use npx so PDF build works without global mermaid-cli (requires Node.js)
mermaid_cmd: "npx -y @mermaid-js/mermaid-cli"
# Render mermaid as PDF for LaTeX
# --pdfFit scales PDF to fit the diagram (not full page)
# --scale 1.0 keeps diagrams at natural size (1.5 was too large for tall diagrams)
@@ -172,6 +174,13 @@ sphinx:
\newunicodechar{ω}{$\omega$}
\newunicodechar{✓}{\checkmark}
\newunicodechar{✗}{$\times$}
% Box-drawing (terminal/code art) - TeX Gyre Cursor has no Unicode box glyphs
\newunicodechar{═}{\texttt{=}}
\newunicodechar{║}{\texttt{|}}
\newunicodechar{╔}{\texttt{+}}
\newunicodechar{╗}{\texttt{+}}
\newunicodechar{╚}{\texttt{+}}
\newunicodechar{╝}{\texttt{+}}
% Syntax-highlighted code blocks with refined colors
\usepackage{listings}

View File

@@ -384,14 +384,16 @@ pre.mermaid {
display: flex;
align-items: center;
font-size: 1.2rem;
font-weight: 600;
color: #f59e0b;
text-decoration: none;
font-weight: 700;
color: #fbbf24 !important;
text-decoration: none !important;
letter-spacing: -0.01em;
text-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}
.tinytorch-bar-brand:hover {
color: #fbbf24;
color: #fde68a !important;
text-shadow: 0 0 16px rgba(251, 191, 36, 0.45);
}
.tinytorch-bar-brand .brand-fire {
@@ -485,26 +487,41 @@ pre.mermaid {
background: rgba(249, 115, 22, 0.15);
}
/* Responsive: hide text on small screens, keep icons */
/* ── Responsive: progressive disclosure across breakpoints ── */
/* Tablet landscape / small desktop — drop date from version, shrink link padding */
@media (max-width: 1024px) {
.tinytorch-bar-version .version-date {
display: none;
}
.tinytorch-bar-links a {
padding: 0.5rem 0.7rem;
}
}
/* Tablet portrait — icons only, shrink badge, ensure 44px touch targets */
@media (max-width: 768px) {
.tinytorch-bar-links .link-text {
display: none;
}
.tinytorch-bar-links a {
padding: 0.5rem;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.tinytorch-bar-links .link-icon {
font-size: 1.1rem;
font-size: 1.15rem;
}
.tinytorch-bar-badge {
display: none;
}
.tinytorch-bar-version {
display: none;
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
}
.tinytorch-bar-left {
@@ -516,23 +533,42 @@ pre.mermaid {
}
.tinytorch-bar {
height: 44px;
height: 48px;
}
/* Keep download link visible but compact on mobile */
.tinytorch-bar-links a.download-link {
padding: 0.4rem 0.6rem;
.tinytorch-bar-links {
gap: 0;
}
}
/* Extra small screens - minimal spacing */
@media (max-width: 480px) {
.tinytorch-bar-links {
gap: 0.1rem;
/* Phone — hide badge, hide secondary links, keep compact version */
@media (max-width: 600px) {
.tinytorch-bar-badge {
display: none;
}
.tinytorch-bar-links a {
padding: 0.4rem;
.tinytorch-bar-links a.link-secondary {
display: none;
}
.tinytorch-bar-version {
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
}
.tinytorch-bar {
height: 44px;
}
.tinytorch-bar-brand {
font-size: 1.05rem;
}
}
/* Small phone — hide version too, brand + 3 primary icons */
@media (max-width: 420px) {
.tinytorch-bar-version {
display: none;
}
.tinytorch-bar-brand {
@@ -584,6 +620,18 @@ header.bd-header {
margin-top: 3.5rem !important;
}
@media (max-width: 768px) {
header.bd-header {
margin-top: 2.75rem !important;
}
}
@media (max-width: 600px) {
header.bd-header {
margin-top: 2.5rem !important;
}
}
/* When announcement bar is present, add extra space */
body.has-announcement header.bd-header {
margin-top: 6rem !important;
@@ -593,6 +641,26 @@ body.has-announcement .tinytorch-bar {
top: 2.5rem !important;
}
@media (max-width: 768px) {
body.has-announcement header.bd-header {
margin-top: 5rem !important;
}
body.has-announcement .tinytorch-bar {
top: 2.25rem !important;
}
}
@media (max-width: 600px) {
body.has-announcement header.bd-header {
margin-top: 4.5rem !important;
}
body.has-announcement .tinytorch-bar {
top: 2rem !important;
}
}
/* Hide icon links from sidebar completely - only show in top navbar */
.bd-sidebar .icon-links,
.bd-sidebar .navbar-icon-links,

View File

@@ -32,8 +32,8 @@ document.addEventListener('DOMContentLoaded', function() {
<a href="${siteRoot}intro.html" class="tinytorch-bar-brand">
Tiny<span class="brand-fire">🔥</span>Torch
</a>
<a href="https://github.com/harvard-edge/cs249r_book/releases" target="_blank" rel="noopener noreferrer" class="tinytorch-bar-version" title="View releases on GitHub"><span class="version-number">v${TINYTORCH_VERSION}</span><span class="version-date"> · ${TINYTORCH_RELEASE_DATE}</span></a>
<span class="tinytorch-bar-badge">Under Construction</span>
<a href="https://github.com/harvard-edge/cs249r_book/releases" target="_blank" rel="noopener noreferrer" class="tinytorch-bar-version" title="View releases on GitHub">v${TINYTORCH_VERSION} · ${TINYTORCH_RELEASE_DATE}</a>
</div>
<div class="tinytorch-bar-links">
<a href="${siteRoot}_static/downloads/TinyTorch-Guide.pdf" class="download-link" title="Download Course Guide (PDF)">
@@ -44,11 +44,11 @@ document.addEventListener('DOMContentLoaded', function() {
<span class="link-icon">↗</span>
<span class="link-text">Paper</span>
</a>
<a href="https://mlsysbook.ai" target="_blank">
<a href="https://mlsysbook.ai" target="_blank" class="link-secondary">
<span class="link-icon">📖</span>
<span class="link-text">MLSysBook</span>
</a>
<a href="#" class="subscribe-trigger" onclick="event.preventDefault(); if(window.openSubscribeModal) openSubscribeModal();">
<a href="#" class="subscribe-trigger link-secondary" onclick="event.preventDefault(); if(window.openSubscribeModal) openSubscribeModal();">
<span class="link-icon">✉️</span>
<span class="link-text">Subscribe</span>
</a>
@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', function() {
<span class="link-icon">⭐</span>
<span class="link-text">Star</span>
</a>
<a href="${siteRoot}community.html" target="_blank">
<a href="${siteRoot}community.html" target="_blank" class="link-secondary">
<span class="link-icon">🌍</span>
<span class="link-text">Community</span>
</a>

View File

@@ -121,6 +121,13 @@ parts:
- file: conclusion
title: "You Built Something Real"
# Community (referenced from TITO overview)
- caption: Community
numbered: false
chapters:
- file: community
title: "Community Guide"
# Appendix
- caption: Appendix
numbered: false

View File

@@ -286,7 +286,7 @@ Benchmark Architecture:
│ BenchmarkSuite │
│ • Multi-metric comprehensive evaluation │
├─────────────────────────────────────────┤
│ MLPerf │
│ MLPerf
│ • Standardized industry-style benchmarks│
└─────────────────────────────────────────┘
```

View File

@@ -65,6 +65,9 @@
{ "command": "tinytorch.revealTerminal", "title": "TinyTorch: Reveal Terminal", "icon": "$(terminal)" },
{ "command": "tinytorch.rerunCommand", "title": "TinyTorch: Rerun Command" }
],
"configurationDefaults": {
"workbench.tree.indent": 16
},
"menus": {
"view/title": [
{ "command": "tinytorch.refreshModules", "when": "view == tinytorch.modules", "group": "navigation" },