feat: Add emoji figure support and diagram/chart container styles

jeremymanning · claude · jeremymanning · commit 280e17aba00e · 2025-12-29T17:13:08.000-05:00
Emoji figures (slime-mold inspired): - Size classes: emoji-xs through emoji-xxl (24px to 192px) - Background colors: emoji-bg-green, emoji-bg-teal, emoji-bg-orange, emoji-bg-blue - State classes: emoji-gray (inactive), emoji-faded (partially faded) - Layout classes: emoji-figure, emoji-row, emoji-col, emoji-grid - Labeled emojis with emoji-labeled class - Hierarchy support with emoji-hierarchy and connector lines Diagram and chart containers: - .diagram-container for Kroki/Mermaid SVG diagrams - .chart-container for Chart.js canvas elements - Caption styling for both diagram-caption and chart-caption Example slides added demonstrating: - Flow diagram with colored emoji backgrounds - Size comparison (xs through xl) - State comparison (normal, faded, inactive) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/slides/template_deck/notes/table_splitting_implementation.md b/slides/template_deck/notes/table_splitting_implementation.md
@@ -0,0 +1,66 @@
+# Table Splitting Implementation Notes
+
+## Date: 2025-12-29
+
+## Summary
+Implemented support for auto-splitting long tables across multiple slides in the Marp presentation compile pipeline.
+
+## Files Modified
+
+### 1. `/Users/jmanning/llm-course/slides/template_deck/process_markdown.py`
+- Added `parse_markdown_table()` function to parse markdown tables into header, separator, and data rows
+- Added `generate_table_html()` function to generate HTML tables with proper alignment
+- Added `split_table()` function to split long tables and generate multiple slides
+- Updated `process_markdown()` function signature to accept `max_table_rows` parameter (default: 8)
+- Added table detection logic in the main processing loop
+- Added statistics tracking for tables found and tables split
+- Updated argparse to include `--max-table-rows` / `-r` argument
+
+### 2. `/Users/jmanning/llm-course/slides/template_deck/compile.sh`
+- Added `-r, --rows` option for max table rows per slide (default: 8)
+- Added `MAX_TABLE_ROWS` configuration variable
+- Updated Python command to pass `--max-table-rows` argument
+- Updated help text and examples
+
+### 3. `/Users/jmanning/llm-course/slides/template_deck/themes/cdl-theme.css`
+- Added `.table-continued-indicator` and `.table-continued-indicator-last` CSS classes
+- Added positioning rules for table continued indicators
+- Added `.table-continuation` class for continuation tables
+
+### 4. `/Users/jmanning/llm-course/slides/template_deck/theme_showcase.md`
+- Added new "Long table (auto-split demo)" slide with 17 data rows to test table splitting
+
+## Implementation Details
+
+### Table Detection
+- Tables are detected by lines that start and end with `|`
+- Lines are buffered until a non-table line is encountered
+
+### Splitting Logic
+- Tables with more than `max_table_rows` data rows are split
+- Header row is replicated on each slide
+- Alignment from markdown separator row is preserved
+- Column widths are consistent via inline styles
+
+### Continued Indicators
+- First slide: `<div class="table-continued-indicator">continued...</div>`
+- Middle slides: `<div class="table-continued-indicator">...continued...</div>`
+- Last slide: `<div class="table-continued-indicator-last">...continued</div>`
+
+## Testing
+- Compiled `theme_showcase.md` successfully
+- 17-row table was split into 3 slides (8 + 8 + 2 rows)
+- Header row correctly replicated on all slides
+- Continued indicators correctly positioned
+
+## Usage Examples
+```bash
+# Compile with default 8 rows per table
+./compile.sh theme_showcase.md
+
+# Compile with 6 rows per table
+./compile.sh theme_showcase.md -r 6
+
+# Compile with 10 rows per table
+./compile.sh theme_showcase.md --rows 10
+```
diff --git a/slides/template_deck/theme_showcase.html b/slides/template_deck/theme_showcase.html
diff --git a/slides/template_deck/theme_showcase.md b/slides/template_deck/theme_showcase.md
@@ -293,6 +293,69 @@ The quadratic memory complexity of attention limits context length.
 
 ---
 
+# Emoji figures
+
+<div class="emoji-figure">
+  <div class="emoji-col">
+    <span class="emoji emoji-xl emoji-bg emoji-bg-green">🎓</span>
+    <span class="label">Students</span>
+  </div>
+  <span class="emoji emoji-lg">➡️</span>
+  <div class="emoji-col">
+    <span class="emoji emoji-xl emoji-bg emoji-bg-teal">🤖</span>
+    <span class="label">LLM</span>
+  </div>
+  <span class="emoji emoji-lg">➡️</span>
+  <div class="emoji-col">
+    <span class="emoji emoji-xl emoji-bg emoji-bg-orange">💡</span>
+    <span class="label">Insights</span>
+  </div>
+</div>
+
+---
+
+# Emoji sizes and states
+
+<div class="emoji-row">
+  <div class="emoji-col">
+    <span class="emoji emoji-xs">🧠</span>
+    <span class="label">xs (24px)</span>
+  </div>
+  <div class="emoji-col">
+    <span class="emoji emoji-sm">🧠</span>
+    <span class="label">sm (48px)</span>
+  </div>
+  <div class="emoji-col">
+    <span class="emoji emoji-md">🧠</span>
+    <span class="label">md (72px)</span>
+  </div>
+  <div class="emoji-col">
+    <span class="emoji emoji-lg">🧠</span>
+    <span class="label">lg (96px)</span>
+  </div>
+  <div class="emoji-col">
+    <span class="emoji emoji-xl">🧠</span>
+    <span class="label">xl (128px)</span>
+  </div>
+</div>
+
+<div class="emoji-row" style="margin-top: 1em;">
+  <div class="emoji-col">
+    <span class="emoji emoji-lg">👤</span>
+    <span class="label">Normal</span>
+  </div>
+  <div class="emoji-col">
+    <span class="emoji emoji-lg emoji-faded">👤</span>
+    <span class="label">Faded</span>
+  </div>
+  <div class="emoji-col">
+    <span class="emoji emoji-lg emoji-gray">👤</span>
+    <span class="label">Inactive</span>
+  </div>
+</div>
+
+---
+
 # Course Information
 
 <div style="display: flex; gap: 2em;">
diff --git a/slides/template_deck/themes/cdl-theme.css b/slides/template_deck/themes/cdl-theme.css
@@ -1268,3 +1268,183 @@ section:not(.lead):not(#\31) > .warning-box {
     align-self: center !important;
     justify-self: center !important;
 }
+
+/* ============================================
+   EMOJI FIGURES - Slime-Mold Inspired Styling
+   For creating emoji-based diagrams and figures
+   ============================================ */
+
+/* Base emoji styling - makes emojis behave as inline-blocks */
+.emoji {
+    display: inline-block;
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+    line-height: 1;
+    vertical-align: middle;
+}
+
+/* Emoji size classes */
+.emoji-xs { font-size: 24px; }   /* Extra small */
+.emoji-sm { font-size: 48px; }   /* Small */
+.emoji-md { font-size: 72px; }   /* Medium */
+.emoji-lg { font-size: 96px; }   /* Large */
+.emoji-xl { font-size: 128px; }  /* Extra large */
+.emoji-xxl { font-size: 192px; } /* Hero size */
+
+/* Emoji with background - colored "pedestal" effect */
+.emoji-bg {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3em;
+    border-radius: 8px;
+}
+
+.emoji-bg-orange { background-color: #f97316; }
+.emoji-bg-teal { background-color: #14b8a6; }
+.emoji-bg-green { background-color: #00693e; }
+.emoji-bg-blue { background-color: #3b82f6; }
+.emoji-bg-gray { background-color: #9ca3af; }
+
+/* Grayscale effect for "inactive" emojis */
+.emoji-gray,
+.emoji-inactive {
+    filter: grayscale(100%);
+    opacity: 0.7;
+}
+
+.emoji-faded {
+    filter: grayscale(50%);
+    opacity: 0.8;
+}
+
+/* Emoji figure container - for grouping emojis into diagrams */
+.emoji-figure {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+    margin: 1em auto;
+}
+
+/* Row layout for emoji figures */
+.emoji-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 2em;
+}
+
+/* Column layout for emoji figures */
+.emoji-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5em;
+}
+
+/* Grid layout for emoji figures */
+.emoji-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    gap: 1em;
+    justify-items: center;
+    align-items: center;
+}
+
+/* Emoji with label underneath */
+.emoji-labeled {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3em;
+}
+
+.emoji-labeled .label {
+    font-size: 0.6em;
+    text-align: center;
+    max-width: 120px;
+}
+
+/* Hierarchy/tree structure */
+.emoji-hierarchy {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5em;
+}
+
+.emoji-hierarchy-row {
+    display: flex;
+    justify-content: center;
+    gap: 3em;
+    position: relative;
+}
+
+/* Horizontal line connector for hierarchy */
+.emoji-hierarchy-row.with-connector::before {
+    content: '';
+    position: absolute;
+    top: -25px;
+    left: 25%;
+    right: 25%;
+    height: 2px;
+    background-color: #9ca3af;
+}
+
+/* Vertical line from parent */
+.emoji-hierarchy-row.with-connector::after {
+    content: '';
+    position: absolute;
+    top: -25px;
+    left: 50%;
+    width: 2px;
+    height: 25px;
+    background-color: #9ca3af;
+    transform: translateX(-50%);
+}
+
+/* ============================================
+   DIAGRAM AND CHART STYLING
+   ============================================ */
+
+/* Kroki/Mermaid diagram containers */
+.diagram-container {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    width: 100% !important;
+    margin: 0.5em auto !important;
+}
+
+.diagram-container img {
+    max-width: 90% !important;
+    max-height: 60vh !important;
+    object-fit: contain !important;
+}
+
+/* Chart.js canvas containers */
+.chart-container {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    width: 80% !important;
+    max-height: 55vh !important;
+    margin: 0.5em auto !important;
+}
+
+.chart-container canvas {
+    max-width: 100% !important;
+    max-height: 100% !important;
+}
+
+/* Caption styling for diagrams and charts */
+.diagram-caption,
+.chart-caption {
+    text-align: center !important;
+    font-size: 0.7em !important;
+    font-style: italic !important;
+    color: #6b7c85 !important;
+    margin-top: 0.3em !important;
+}
