Page modules

• Buffer (22 — buffer_module)

  A breath-and-laugh module — short message and an optional GIF wedged between heavier modules. Currently paused in v3.

• Call to action (60 — cta_module)

  A single call-to-action: heading, supporting copy, and a featured action. Destination, label, and lead copy are configurable per instance.

• Callout (197 — callout_module)

  Attention-grabbing block for warnings, alerts, or "remember this." Type axis controls the visual treatment.

• Challenges (165 — challenges_module)

  A list of exercises (legacy: "challenges") at the bottom of a workshop. Each item has a title, rich description, and optional time estimate.

• Chart (20 — chart_module)

  Embeds a single chart post. Chart's own data (source, type, caption) drives the render via the universal chart-render component.

• Code example (109 — code_example_module)

  Inline code examples for prose pages. One or several snippets with headings, descriptions, language tags, and copy-to-clipboard. For code that's illustrative — read, not run.

• CodePen embed (290 — codepen_module)

  Embedded CodePen pens. Used where CodePen is the canonical source of truth. Long-term, most embeds are migrating to Codestudy.

• Codestudy (4 — study_module)

  Interactive sandboxes powered by CodeMirror. Students can edit and re-run inline. New — usage is low while CodePen embeds migrate over.

• Codestudy imports — matrix (reference)

  Not a module — a reference matrix. The same pen rendered with different imports stacks, side by side.

• Deliverables (37 — deliverables_module)

  A checklist of things a student needs to produce by the end of a workshop. Setup paragraph + checkbox items. Hard-coded "Deliverables" heading.

• Feature (single) (feature_single_module)

  Wraps one feature post with per-instance framing (custom heading override, contextual paragraph). Use when a single language feature deserves its own moment in a workshop.

• Feature (group) (feature_group_module)

  A list of feature posts laid out side-by-side or stacked. Use when introducing three or four related features at once. Same card shape as the single module.

• Figure (1,620 — figure_module)

  An image, SVG, or interactive figure with optional caption and prominence. The most-used module on the site.

• Group heading (40 — group_heading_module)

  A bare section heading. One field, one element — titles a group of related modules without the full chrome of section.

• Interactive (13 — interactive_module)

  Vue 3 widgets for in-page tinkering — sliders, toggles, fidget surfaces. "Grab a slider, watch the concept change." Distinct from study.

• Key concept (110 — key_concept_module)

  A named concept with a definition and short explanation. Use to surface a term that students will see again — so when it reappears, they recognize it.

• List (348 — list_module)

  Ordered list with optional rich content per item. Bullet, numbered, check, or none, in simple or rich variants. Pick this when the list is the section's primary content.

• Markdown (4 — markdown_module)

  Renders a markdown file from /docs/public/ inline on a page. Ships docs alongside the site without round-tripping through the CMS.

• Optional reading (71 — optional_reading_module)

  The "if you have time today" slot at the bottom of a workshop or section. Curated bonus material — not required, not assessed.

• Resizable iframe (resizable_iframe)

  A CodePen pen embedded in debug mode with a draggable resize handle. Use when the point is responsive behavior — students drag the edge to see how the layout reacts.

• Related resources (192 — related_resources_module)

  Curated pointers (resource posts, gems, etc.) at the bottom of a page. Verb adapts: read / watch / listen / buy.

• Section (18 — section_module)

  Structural wrapper that groups nested modules under a shared heading, with optional emphasis and tone scope. The only module that contains other modules.

• Settings (6 — settings_module)

  List of "newly introduced settings" — editor / browser / OS configuration tips surfaced inside a workshop.

• Shortcut (49 — shortcut_module)

  A keyboard shortcut surfaced inside a page — pulls a shortcut post and renders via shortcut-card.

• Text (1,010 — text_module)

  Free-form prose. WYSIWYG body in a <text-content> wrapper — the workhorse for paragraphs, lists, links, anything that's "just writing."

• Video (767 — video_module)

  Vimeo embed with optional heading and description. Size axis (full / constrained). Second-most-used module after figure.

• Workshop goals (191 — goals_module)

  "By the end of this you'll be able to…" — a structured list of learning goals at the top of a workshop or section.

Layouts in the database with no implementation yet: application_module (deferred — see application.md) and cheatsheet_module (no template found, likely deprecated).