Add shared ecosystem cards to landing pages

Add shared/config/_ecosystem-cards.qmd: one source of truth for the
'Part of the MLSysBook Ecosystem' section (full 7-member set). Each landing
page includes it; a small script marks the current site 'You are here' by
reading that site's own release-manifest meta, so one block shows each page
its own state. Replace the divergent inline sections in kits (3 hand-written
cards) and labs (prose paragraph); add the section to slides, instructors,
and mlsysim.
This commit is contained in:
Vijay Janapa Reddi
2026-06-03 15:34:30 -04:00
parent 5a6c71911d
commit 2dd81eaa38
6 changed files with 70 additions and 39 deletions
+2
View File
@@ -609,3 +609,5 @@ subtitle: "Everything an instructor needs to teach AI Systems — two semesters
<a href="https://github.com/harvard-edge/cs249r_book/discussions" class="btn-secondary">Community</a>
</div>
```
{{< include ../shared/config/_ecosystem-cards.qmd >}}
+1 -34
View File
@@ -165,37 +165,4 @@ Marcelo has also authored open companion books covering the Nicla Vision, XIAO,
3. **Build & Deploy:** Work through the labs for your chosen platform. Start with [Getting Started](contents/getting-started.qmd) for an overview of available exercises.
## Part of the MLSysBook Ecosystem
::: {.content-visible when-format="html"}
```{=html}
<div class="row g-3 mt-3">
<div class="col-md-4">
<div class="p-3 border rounded h-100 ecosystem-link">
<h5><a href="https://mlsysbook.ai">Textbook</a></h5>
<p class="small text-muted mb-0">Comprehensive theory and concepts covering the full ML systems stack.</p>
</div>
</div>
<div class="col-md-4">
<div class="p-3 border rounded h-100 bg-light ecosystem-current">
<h5>Hardware Kits</h5>
<p class="small text-muted mb-0">Hands-on embedded deployment. <strong>You are here.</strong></p>
</div>
</div>
<div class="col-md-4">
<div class="p-3 border rounded h-100 ecosystem-link">
<h5><a href="https://mlsysbook.ai/tinytorch">TinyTorch</a></h5>
<p class="small text-muted mb-0">Build your own ML framework from scratch.</p>
</div>
</div>
</div>
```
:::
::: {.content-visible when-format="pdf"}
These hardware labs complement the broader ML Systems learning experience:
- **Textbook:** Comprehensive theory and concepts covering the full ML systems stack
- **Hardware Kits:** Hands-on embedded deployment (you are here)
- **TinyTorch:** Build your own ML framework from scratch
:::
{{< include ../shared/config/_ecosystem-cards.qmd >}}
+1 -5
View File
@@ -740,10 +740,6 @@ marimo run vol1/lab_01_ml_intro.py</code></pre>
</div>
```
## Part of the MLSysBook Ecosystem
These labs bridge the gap between **reading** about ML systems (the [textbook](https://mlsysbook.ai)) and **building** them from scratch ([TinyTorch](https://mlsysbook.ai/tinytorch/)). Every computation is powered by the [mlsysim](https://mlsysbook.ai/mlsysim/) physics engine --- the same engine used in the textbook's quantitative examples.
- [Share feedback](https://github.com/harvard-edge/cs249r_book/discussions) | [View source](https://github.com/harvard-edge/cs249r_book)
{{< include ../shared/config/_ecosystem-cards.qmd >}}
:::
+2
View File
@@ -554,3 +554,5 @@ The slide decks, MLSys·im engine, tutorials, and textbook are all part of the s
:::
:::
{{< include ../../shared/config/_ecosystem-cards.qmd >}}
+62
View File
@@ -0,0 +1,62 @@
<!--
Shared "Part of the MLSysBook Ecosystem" section.
Include on a site's landing page with: {{< include ../shared/config/_ecosystem-cards.qmd >}}
One source of truth for the cross-site ecosystem links. Every card is a link;
a small script marks the CURRENT site "You are here" by reading that site's own
<meta name="release-manifest" content="/<site>/release-manifest.json"> — the same
per-site signal the footer version pill uses. So one shared block shows each
landing page its own state, with no per-page editing.
-->
## Part of the MLSysBook Ecosystem
::: {.content-visible when-format="html"}
```{=html}
<div class="ecosystem-grid row g-3 mt-3">
<div class="col-6 col-md-3"><div class="p-3 border rounded h-100 ecosystem-link" data-site="book"><h5><a href="https://mlsysbook.ai/">Textbook</a></h5><p class="small text-muted mb-0">Comprehensive theory across the full ML systems stack.</p></div></div>
<div class="col-6 col-md-3"><div class="p-3 border rounded h-100 ecosystem-link" data-site="slides"><h5><a href="https://mlsysbook.ai/slides/">Lecture Slides</a></h5><p class="small text-muted mb-0">Beamer decks and teaching materials for every chapter.</p></div></div>
<div class="col-6 col-md-3"><div class="p-3 border rounded h-100 ecosystem-link" data-site="labs"><h5><a href="https://mlsysbook.ai/labs/">Labs</a></h5><p class="small text-muted mb-0">Interactive Marimo notebooks that measure the book's claims.</p></div></div>
<div class="col-6 col-md-3"><div class="p-3 border rounded h-100 ecosystem-link" data-site="kits"><h5><a href="https://mlsysbook.ai/kits/">Hardware Kits</a></h5><p class="small text-muted mb-0">Hands-on embedded ML deployment on real devices.</p></div></div>
<div class="col-6 col-md-3"><div class="p-3 border rounded h-100 ecosystem-link" data-site="instructors"><h5><a href="https://mlsysbook.ai/instructors/">Instructor Hub</a></h5><p class="small text-muted mb-0">Course maps, syllabi, and adoption resources for teaching.</p></div></div>
<div class="col-6 col-md-3"><div class="p-3 border rounded h-100 ecosystem-link" data-site="tinytorch"><h5><a href="https://mlsysbook.ai/tinytorch/">TinyTorch</a></h5><p class="small text-muted mb-0">Build your own ML framework from scratch, module by module.</p></div></div>
<div class="col-6 col-md-3"><div class="p-3 border rounded h-100 ecosystem-link" data-site="mlsysim"><h5><a href="https://mlsysbook.ai/mlsysim/">MLSysIM</a></h5><p class="small text-muted mb-0">The physics engine behind every quantitative figure in the book.</p></div></div>
</div>
<style>
.ecosystem-grid .ecosystem-link h5 a { text-decoration: none; }
.ecosystem-grid .ecosystem-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ecosystem-grid .ecosystem-current { background: var(--bs-light, #f8f9fa); }
.ecosystem-grid .ecosystem-current h5 { font-weight: 600; }
</style>
<script>
(function () {
var grid = document.querySelector('.ecosystem-grid');
if (!grid) return;
var meta = document.querySelector('meta[name="release-manifest"]');
var seg = meta ? (meta.getAttribute('content') || '').split('/').filter(Boolean)[0] : '';
if (seg === 'vol1' || seg === 'vol2') seg = 'book';
if (!seg) return;
var card = grid.querySelector('[data-site="' + seg + '"]');
if (!card) return;
card.classList.remove('ecosystem-link');
card.classList.add('ecosystem-current');
var h = card.querySelector('h5');
if (h) { h.textContent = h.textContent.trim(); } // drop the link on the current site
var p = card.querySelector('p');
if (p) { p.innerHTML += ' <strong>You are here.</strong>'; }
})();
</script>
```
:::
::: {.content-visible when-format="pdf"}
The Machine Learning Systems ecosystem:
- **Textbook** --- comprehensive theory across the full ML systems stack
- **Lecture Slides** --- Beamer decks and teaching materials for every chapter
- **Labs** --- interactive Marimo notebooks that measure the book's claims
- **Hardware Kits** --- hands-on embedded ML deployment on real devices
- **Instructor Hub** --- course maps, syllabi, and adoption resources
- **TinyTorch** --- build your own ML framework from scratch
- **MLSysIM** --- the physics engine behind the book's quantitative figures
:::
+2
View File
@@ -394,3 +394,5 @@ toc: true
<a href="https://github.com/harvard-edge/cs249r_book" class="btn-outline" target="_blank">GitHub</a>
</div>
```
{{< include ../shared/config/_ecosystem-cards.qmd >}}