@booleanpress/learn

Interactive explainers for BooleanPress documentation sites built with Astro, including sites using @booleanpress/nimbus: a step Player, GSAP motion with a reduced-motion mode, and widgets that render a readable static figure without JavaScript.

Widgets are Astro components enhanced by a custom element — no island framework. GSAP is loaded by dynamic import only when a widget scrolls into view, so a page that uses no widget ships no GSAP.

Use

---
title: How sending works
description: The path an email takes from wp_mail() to your provider.
---

import { CheckYourself, EmailJourney } from '@booleanpress/learn';
import { nodes, scenarios } from '../../../data/learn/journey';

<EmailJourney nodes={nodes} scenarios={scenarios} label="The journey of an email" />

<CheckYourself
	page="how-sending-works"
	questions={[
		{
			question: 'Which step runs first?',
			answers: [
				{ label: 'The simulation check', correct: true, explain: '…' },
				{ label: 'The send', explain: '…' },
			],
		},
	]}
/>

Widgets

| Component | What it shows | | --- | --- | | EmailJourney | A diagram of nodes and one or more scenarios, stepped through with the Player | | MailerChooser | Questions that score a set of cards and explain the recommendation | | DecisionTree | A troubleshooting tree, one question at a time | | CheckYourself | 2–4 questions with explanations; the result is kept in the browser | | LearnPath | The ordered lessons of a section, with completion marks |

The data shapes are exported as types (JourneyNode, JourneyScenario, ChooserQuestion, ChooserCard …).

Motion rules

• prefers-reduced-motion: reduce shows final states, at most a cross-fade (prefersReducedMotion()).
• Every sequence has the Player: play/pause, previous/next, restart, keyboard, a step label.
• No scroll-jacking or scroll-scrubbing.

Licence

MIT. GSAP is a dependency installed from npm under its own licence; it is never bundled into this package.