/* ============================================================ ENERGY FLUENCY — React reader A series of lectures sourced from primer/session_*.md files. Each lecture has three parts: notes, a case study, and an exercise — surfaced as tabs within the reader. Reuses the markdown helpers (epFetchMd / epRenderMarkdown) and the .ep-* styling defined alongside the Energy Primer. ============================================================ */ const { useState: efUse, useEffect: efEffect, useRef: efRef } = React; /* ---------- lecture metadata ---------- `base` is the shared filename stem; the three parts are derived by appending _notes / _case_study / _exercise. */ const EF_LECTURES = [ { id: "01", base: "primer/session_01_energy_foundations", title: "Energy Foundations & Systems Thinking", subtitle: "Units, stocks vs. flows, and the categories that prevent costly analytical errors.", blindSpot: "Confusing stocks with flows, primary with final energy, installed MW with delivered MWh.", deliverable: "Country energy snapshot", }, { id: "02", base: "primer/session_02_global_energy_system", title: "The Global Energy System: Map, Flows, Trajectory", subtitle: "Where energy comes from, where it goes, and how the map has actually changed.", blindSpot: "Treating the system as smaller, more substitutable, or faster-moving than it is.", deliverable: "Regional energy snapshot", }, { id: "03", base: "primer/session_03_oil", title: "Oil & Liquid Fuels Beyond the Futures Curve", subtitle: "The physical and corporate machinery underneath the price curve.", blindSpot: "Knowing the curve but not the machinery and demand that ultimately move it.", deliverable: "Oil demand model with GDP elasticity", }, { id: "04", base: "primer/session_04_natural_gas_and_lng", title: "Natural Gas, LNG & the Most Geopolitical Molecule", subtitle: "Why gas is bound to its infrastructure — and what LNG does and doesn't change.", blindSpot: "Pricing gas like oil and ignoring the infrastructure it is physically bound to.", deliverable: "LNG project economics model", }, { id: "05", base: "primer/session_05_power_markets", title: "Power Markets: Where Most Traders Get Surprised", subtitle: "No inventory; supply equals demand every second — the course's biggest intellectual shift.", blindSpot: "Pattern-matching power to inventory commodities like oil and gas.", deliverable: "Merit-order dispatch model", }, { id: "06a", base: "primer/session_06a_renewables_economics", title: "Renewables Economics Beyond the Headline LCOE", subtitle: "Why LCOE is necessary but not sufficient to judge a renewable investment.", blindSpot: "Reading a low LCOE number as a complete investment case.", deliverable: "LCOE model with sensitivity", }, { id: "06b", base: "primer/session_06b_storage_and_flexibility", title: "Storage, Grids & the Flexibility Constraint", subtitle: "From 'how much energy' to 'when and where' — the cost of integrating intermittency.", blindSpot: "Assuming storage alone solves intermittency.", deliverable: "Battery dispatch optimizer", }, { id: "07", base: "primer/session_07_nuclear_and_firm_power", title: "Nuclear & Other Firm Power", subtitle: "The firm, dispatchable, low-carbon ingredient missing from most transition narratives.", blindSpot: "Leaving firm, dispatchable power out of the decarbonization story.", deliverable: "New-nuclear vs. alternatives LCOE comparison", }, { id: "08", base: "primer/session_08_decarbonization_pathways", title: "Decarbonization Pathways: Sectors Are Not Interchangeable", subtitle: "Eight or ten sectoral transitions, each with its own physics and economics.", blindSpot: "Treating 'the energy transition' as a single object.", deliverable: "Corporate MACC", }, { id: "09", base: "primer/session_09_geopolitics_and_critical_minerals", title: "Geopolitics, Critical Minerals & the New Energy Map", subtitle: "When the chokepoints moved from oil straits to mineral processing.", blindSpot: "Still mapping energy power only through oil.", deliverable: "Critical-minerals risk scorecard", }, ]; /* ---------- the three parts of every lecture ---------- */ const EF_PARTS = [ { key: "notes", label: "Lecture notes", suffix: "_notes.md", glyph: "❡" }, { key: "case", label: "Case study", suffix: "_case_study.md", glyph: "◆" }, { key: "exercise", label: "Exercise", suffix: "_exercise.md", glyph: "✎" }, ]; function efPartFile(lecture, partKey) { const part = EF_PARTS.find((p) => p.key === partKey) || EF_PARTS[0]; return lecture.base + part.suffix; } /* ---------- progress tracking ---------- */ const EF_PROG_KEY = "energy-fluency-progress-v1"; function efLoadProgress() { try { return JSON.parse(localStorage.getItem(EF_PROG_KEY) || "{}"); } catch { return {}; } } function efSaveProgress(p) { try { localStorage.setItem(EF_PROG_KEY, JSON.stringify(p)); } catch {} } /* ============================================================ HOME VIEW ============================================================ */ function EfHome({ go, progress }) { const completed = Object.values(progress).filter(Boolean).length; const pct = (completed / EF_LECTURES.length) * 100; const next = EF_LECTURES.find((l) => !progress[l.id]) || EF_LECTURES[0]; return (
Energy Fluency ·Lecture series
{completed}/{EF_LECTURES.length} lectures
A lecture series in energy fluency

Read the system fluently — fuel by fuel, sector by sector.

Ten lectures that build structural intuition across the whole energy system: foundations, oil, gas, power, renewables, storage, nuclear, decarbonization, and the new geopolitics of minerals. Each lecture pairs the theory with a real-world case study and a hands-on exercise.

Format {EF_LECTURES.length} lecturesnotes · case · exercise
Per lecture 3 partsread · study · build
Output {EF_LECTURES.length} exercisesreusable analytical artifacts
01
Read the lecture notes
The conceptual frame: numbered theory sections, key tables, and worked examples for the fuel or system in focus.
02
Work the case study
A real episode — Uri, the European gas crisis, rare-earth weaponization — walked through for what to generalize.
03
Build the exercise
A model, scorecard, or snapshot you produce yourself and can reuse directly in real analytical work.

The lectures

{EF_LECTURES.length} lectures · notes, case study & exercise each
{EF_LECTURES.map((l) => ( { e.preventDefault(); go("/energy-fluency/" + l.id); }}>
Lecture · {l.id} {progress[l.id] ? "✓ Completed" : "3 parts"}
{l.title}
{l.subtitle}
Blind spot targeted {l.blindSpot}
Exercise · {l.deliverable} Open →
))}
Lecture material is generated and adapted for self-study. Where the notes reference institutional sources — IEA, EIA, IRENA, Lazard, BNEF — always validate live figures against the primary publications.
); } /* ============================================================ READER VIEW (single lecture, three tabbed parts) ============================================================ */ function EfReader({ lecture, part, go, progress, toggleDone }) { const [state, setState] = efUse({ html: "", toc: [], loading: true, err: null }); const [activeHeading, setActiveHeading] = efUse(null); const articleRef = efRef(null); const file = efPartFile(lecture, part); // load markdown for the active part efEffect(() => { let cancelled = false; setState({ html: "", toc: [], loading: true, err: null }); (async () => { try { for (let i = 0; i < 30 && !window.marked; i++) { await new Promise((r) => setTimeout(r, 100)); } const md = await epFetchMd(file); const { html, toc } = epRenderMarkdown(md); if (!cancelled) setState({ html, toc, loading: false, err: null }); } catch (e) { if (!cancelled) setState({ html: "", toc: [], loading: false, err: e.message }); } })(); return () => { cancelled = true; }; }, [file]); // scroll spy for "on this page" efEffect(() => { if (!state.toc.length) return; const handler = () => { const headings = state.toc.map((h) => document.getElementById(h.slug)).filter(Boolean); let active = null; for (const h of headings) { if (h.getBoundingClientRect().top < 100) active = h.id; } setActiveHeading(active); }; handler(); window.addEventListener("scroll", handler, { passive: true }); return () => window.removeEventListener("scroll", handler); }, [state.toc]); // scroll to top when the part changes efEffect(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [file]); const idx = EF_LECTURES.findIndex((l) => l.id === lecture.id); const prev = idx > 0 ? EF_LECTURES[idx - 1] : null; const next = idx >= 0 && idx < EF_LECTURES.length - 1 ? EF_LECTURES[idx + 1] : null; const isDone = !!progress[lecture.id]; return (
{ e.preventDefault(); go("/energy-fluency"); }}> Energy Fluency / { e.preventDefault(); go("/energy-fluency"); }}>Lectures / Lecture {lecture.id}
{idx + 1} of {EF_LECTURES.length}
{/* left: lecture list */} {/* center: main reader */}
Lecture {lecture.id}

{lecture.title}

{lecture.subtitle}

Blind spot targeted {lecture.blindSpot}
Exercise {lecture.deliverable}
{/* tab switcher: notes / case study / exercise */}
{EF_PARTS.map((p) => ( ))}
{state.loading && (
Loading {(EF_PARTS.find((p) => p.key === part) || {}).label || "content"}
)} {state.err && (
Could not load this part — {state.err}
)} {!state.loading && !state.err && (
)} {/* prev / next pager across lectures */}
{/* right: on-this-page */}
); } /* ============================================================ ROUTER ============================================================ */ function EnergyFluencyView() { // sub-route after #/energy-fluency/... const parse = () => { const hash = (window.location.hash || "").replace(/^#\/?/, ""); const rest = hash.replace(/^energy-fluency\/?/, "").replace(/^\/+/, ""); if (!rest) return { view: "home" }; const [id, partRaw] = rest.split("/"); const lecture = EF_LECTURES.find((l) => l.id === id); if (!lecture) return { view: "home" }; const part = EF_PARTS.find((p) => p.key === partRaw) ? partRaw : "notes"; return { view: "lecture", lecture, part }; }; const [route, setRoute] = efUse(parse); const [progress, setProgress] = efUse(efLoadProgress); efEffect(() => { const onHash = () => setRoute(parse()); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); const go = (path) => { window.location.hash = path.replace(/^\/?/, "/"); }; const toggleDone = (id) => { const next = { ...progress, [id]: !progress[id] }; setProgress(next); efSaveProgress(next); }; if (route.view === "home") { return ; } return ; } window.EnergyFluencyView = EnergyFluencyView;