mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-08 18:01:20 -05:00
72d2163a70
Adds a small amber pill below the existing "A Build-It-Yourself Companion to..." subtitle showing "🔥 TinyTorch v0.1.10 →", linked to the GitHub Releases page filtered for tinytorch tags. Why: the previous sidebar had no persistent version indicator, and the announcement-bar approach was rejected (see config/announcement.yml header note: "Release news belongs in a changelog, not in the always- visible nav bar"). The sidebar subtitle area is the natural home for this kind of meta-info — sticky on desktop, not competing with content, and follows the existing JS injection pattern. Design choices: - "🔥 TinyTorch" prefix + visual divider above the pill prevent the reader from parsing "v0.1.10" as the textbook's version (which would be wrong — the textbook is versioned by Volume). - Amber border + amber text + faint amber background match the TinyTorch brand color used throughout the announcement bar and accent system. - target="_blank" + rel="noopener" — the chip leaves the docs site, so external-link semantics apply. - !important on color rules because Quarto's link styles otherwise win at higher specificity (matches the existing `.sidebar-subtitle a:hover` pattern in this file). Version source: hardcoded as "v0.1.10" with a TINYTORCH_VERSION_CHIP sed marker. The tinytorch-publish-live workflow's UPDATE_VERSION step already syncs 6 files (pyproject.toml, settings.ini, install.sh, announcement, README badge, init); adding this file to that step is a follow-up. For now, manual updates on each release. Verified in Playwright on index + tito/milestones, light + dark mode. Computed color rgb(212, 116, 12) light / rgb(245, 158, 11) dark; href points to releases?q=tinytorch as intended.
88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
<script>
|
|
// Inject subtitle + framework version chip under sidebar logo.
|
|
// The chip's `v0.1.10` is sourced from tinytorch/settings.ini and kept in
|
|
// sync by the tinytorch-publish-live workflow's UPDATE_VERSION step on
|
|
// each release. Update marker for sed: TINYTORCH_VERSION_CHIP.
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const sidebarLogo = document.querySelector('.sidebar-logo');
|
|
if (!sidebarLogo) return;
|
|
|
|
// 1. Existing subtitle — what TinyTorch IS in relation to the textbook.
|
|
const subtitle = document.createElement('div');
|
|
subtitle.className = 'sidebar-subtitle';
|
|
subtitle.innerHTML = 'A Build-It-Yourself Companion to the<br><a href="https://mlsysbook.ai" style="color: #D4740C; text-decoration: none;">Machine Learning Systems</a> textbook';
|
|
sidebarLogo.parentElement.insertBefore(subtitle, sidebarLogo.nextSibling);
|
|
|
|
// 2. Framework version chip — explicitly identifies TinyTorch's version,
|
|
// not the textbook's. Visually separated so the reader does not parse
|
|
// the version as part of the subtitle prose. Click → GitHub Releases
|
|
// filtered for tinytorch tags (the canonical changelog destination).
|
|
const chipWrap = document.createElement('div');
|
|
chipWrap.className = 'tinytorch-version-chip-wrap';
|
|
|
|
const chip = document.createElement('a');
|
|
chip.className = 'tinytorch-version-chip';
|
|
chip.href = 'https://github.com/harvard-edge/cs249r_book/releases?q=tinytorch';
|
|
chip.target = '_blank';
|
|
chip.rel = 'noopener';
|
|
chip.innerHTML = '🔥 TinyTorch v0.1.10 →'; // TINYTORCH_VERSION_CHIP
|
|
|
|
chipWrap.appendChild(chip);
|
|
subtitle.parentNode.insertBefore(chipWrap, subtitle.nextSibling);
|
|
});
|
|
</script>
|
|
<style>
|
|
.sidebar-subtitle {
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
color: #6b7280;
|
|
line-height: 1.4;
|
|
padding: 0 1rem 0.5rem 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.sidebar-subtitle a:hover {
|
|
color: #f97316 !important;
|
|
}
|
|
|
|
/* Version chip — divider above + amber pill anchored to TinyTorch brand */
|
|
.tinytorch-version-chip-wrap {
|
|
text-align: center;
|
|
margin: 0 1rem;
|
|
padding: 0.5rem 0 0.75rem;
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
.tinytorch-version-chip {
|
|
display: inline-block;
|
|
padding: 0.15rem 0.65rem;
|
|
border: 1px solid #D4740C;
|
|
border-radius: 999px;
|
|
background: rgba(212, 116, 12, 0.08);
|
|
color: #D4740C !important; /* override Quarto's default link color */
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
text-decoration: none !important;
|
|
white-space: nowrap;
|
|
letter-spacing: 0.01em;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
.tinytorch-version-chip:hover {
|
|
background: rgba(212, 116, 12, 0.18);
|
|
color: #D4740C !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Dark-mode overrides — brighter amber to match dark-mode.scss $accent */
|
|
[data-bs-theme="dark"] .tinytorch-version-chip-wrap {
|
|
border-top-color: #454d55;
|
|
}
|
|
[data-bs-theme="dark"] .tinytorch-version-chip {
|
|
border-color: #F59E0B;
|
|
color: #F59E0B !important;
|
|
background: rgba(245, 158, 11, 0.1);
|
|
}
|
|
[data-bs-theme="dark"] .tinytorch-version-chip:hover {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: #F59E0B !important;
|
|
}
|
|
</style>
|