/* ============================================================ ENERGY PRIMER — React reader Renders course home, session pages, and resources. ============================================================ */ const { useState: epUse, useEffect: epEffect, useMemo: epMemo, useRef: epRef } = React; /* ---------- session metadata ---------- */ const EP_SESSIONS = [ { id: "01", file: "primer/session-01.md", title: "Energy Foundations & Systems Thinking", subtitle: "Units, primary vs. final energy, capacity factor, and the trilemma.", blindSpot: "Treating energy as one market instead of a system of distinct subsystems.", duration: 120, concepts: ["Units & orders of magnitude", "Primary / final / useful", "Stocks vs. flows", "The trilemma", "Capacity factor", "Adequacy vs. flexibility"], deliverable: "Country energy snapshot template", }, { id: "02", file: "primer/session-02.md", title: "Oil & Liquid Fuels Beyond the Futures Curve", subtitle: "Upstream, midstream, downstream — the machinery under the price.", blindSpot: "Knowing the curve but not the physical and corporate machinery that drives it.", duration: 120, concepts: ["Value chain economics", "Decline curves", "Crude grades & differentials", "Crack spreads", "OPEC+ as institution", "Demand structure"], deliverable: "Sectoral oil demand model", }, { id: "03", file: "primer/session-03.md", title: "Natural Gas, LNG, and the Most Geopolitical Molecule", subtitle: "Why gas is regional, what LNG changes, and what the 2022 crisis taught.", blindSpot: "Treating gas as oil-lite. The infrastructure-bound nature makes it different.", duration: 120, concepts: ["Regional markets & arbitrage", "LNG value chain", "HH / TTF / JKM", "Storage & seasonality", "The transition-fuel debate"], deliverable: "LNG project economics model", }, { id: "04", file: "primer/session-04.md", title: "Power Markets — Where Most Traders Get Surprised", subtitle: "Why electricity is not a commodity — and what that implies for design.", blindSpot: "Pattern-matching power to oil. Power is an instantaneous service, not inventory.", duration: 120, concepts: ["The physics constraint", "Merit-order dispatch", "Nodal vs. zonal pricing", "Capacity vs. energy markets", "The duck curve", "Value deflation"], deliverable: "Merit-order dispatch model", }, { id: "05", file: "primer/session-05.md", title: "Renewables Economics Beyond the Headline LCOE", subtitle: "WACC is destiny — and why LCOE is necessary but not sufficient.", blindSpot: "Treating renewables as a commodity. They are capital projects.", duration: 120, concepts: ["LCOE from first principles", "Capture price & value deflation", "Cost of capital", "Solar / onshore / offshore", "PPA structures"], deliverable: "LCOE model with sensitivity", }, { id: "06", file: "primer/session-06.md", title: "Storage, Grids, and the Flexibility Constraint", subtitle: "The flexibility cost stack — and why transmission matters as much as storage.", blindSpot: "Storage as the answer to intermittency. It solves some problems, not others.", duration: 120, concepts: ["Flexibility timescales", "Li-ion battery economics", "Revenue stack", "Long-duration options", "Transmission & demand response"], deliverable: "Battery dispatch optimizer", }, { id: "07", file: "primer/session-07.md", title: "Decarbonization Pathways — Sectors Are Not Interchangeable", subtitle: "Eight sectoral transitions, eight different physics and economics.", blindSpot: "Treating 'net zero' as a slogan. It's an engineering problem, by sector.", duration: 120, concepts: ["MAC curves and their limits", "Power, transport, buildings", "Heavy industry", "Hydrogen's real use cases", "CCUS by source"], deliverable: "Corporate MACC", }, { id: "08", file: "primer/session-08.md", title: "Geopolitics, Critical Minerals, and the New Energy Map", subtitle: "The chokepoints moved from oil straits to processing facilities.", blindSpot: "Mining vs. processing — the leverage sits midstream, not upstream.", duration: 120, concepts: ["Three-layer concentration", "China's processing dominance", "IRA, NZIA, CBAM", "Li / Co / Ni / Cu / REEs", "Industrial policy"], deliverable: "Critical-minerals risk scorecard", }, { id: "09", file: "primer/session-09.md", title: "Energy Finance and Corporate Strategy", subtitle: "Capital is the binding constraint — and rates are the dominant variable.", blindSpot: "Energy companies are not commodity-trading P&Ls. They are long-duration allocators.", duration: 120, concepts: ["Capital intensity", "Project finance structures", "Utility 2.0 & the major dilemma", "Capital allocation", "TCFD / ISSB"], deliverable: "IPP DCF model", }, { id: "10", file: "primer/session-10.md", title: "Synthesis — From Knowledge to Advisory Practice", subtitle: "Turning the framework into a repeatable advisory process.", blindSpot: "The temptation to forecast. Clients need defensible scenarios, not point estimates.", duration: 120, concepts: ["The five question archetypes", "Advisory diagnostic", "Research process", "Sources hierarchy", "Analytical assets"], deliverable: "Client memo + research checklist", }, ]; const EP_RESOURCES = [ { id: "curriculum", file: "primer/curriculum.md", tag: "Overview", title: "Curriculum overview", sub: "The 20-hour course at a glance." }, { id: "course-overview", file: "primer/course-overview.md", tag: "Outline", title: "Detailed course outline", sub: "Each session's purpose, key numbers, synthesis question." }, { id: "memo-template", file: "primer/resource-memo-template.md", tag: "Template", title: "Client memo template", sub: "Briefing, investment, and strategy memo structures." }, { id: "research-checklist", file: "primer/resource-research-checklist.md", tag: "Practice", title: "Research process checklist", sub: "Daily, weekly, monthly, quarterly rhythms." }, ]; /* ---------- progress tracking ---------- */ const EP_PROG_KEY = "energy-primer-progress-v1"; function epLoadProgress() { try { return JSON.parse(localStorage.getItem(EP_PROG_KEY) || "{}"); } catch { return {}; } } function epSaveProgress(p) { try { localStorage.setItem(EP_PROG_KEY, JSON.stringify(p)); } catch {} } /* ---------- markdown cache + fetcher ---------- */ const EP_MD_CACHE = new Map(); async function epFetchMd(file) { if (EP_MD_CACHE.has(file)) return EP_MD_CACHE.get(file); const res = await fetch(file); if (!res.ok) throw new Error("fetch failed: " + file); const text = await res.text(); EP_MD_CACHE.set(file, text); return text; } /* ---------- markdown rendering via marked ---------- */ function epRenderMarkdown(md) { if (!window.marked) return { html: "

Loading markdown library…

", toc: [] }; // Strip H1 (we render our own title block) let body = md.replace(/^# .*\n+/, ""); // Strip the standard italic meta line ("Lecture notes, …" or "*Companion to…*") body = body.replace(/^\*[^*\n]+\*\n+/, ""); // Strip leading horizontal rule body = body.replace(/^---\s*\n+/, ""); // Strip final italic "*End of …*" footer line body = body.replace(/\n*\*End of [^*]+\*\s*$/, ""); const renderer = new window.marked.Renderer(); const headings = []; renderer.heading = function(text, level) { const slug = "h-" + headings.length + "-" + text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40); if (level === 2) { // detect numbered section like "1. Units" → split into mark + title const m = text.match(/^(\d+)\.\s+(.+)$/); const inner = m ? `§ ${m[1].padStart(2, "0")}${m[2]}` : text; headings.push({ slug, level, text: m ? m[2] : text }); return `

${inner}

`; } if (level === 3) { headings.push({ slug, level, text }); return `

${text}

`; } return `${text}`; }; renderer.table = function(header, body) { return `
${header}${body}
`; }; window.marked.setOptions({ renderer, gfm: true, breaks: false, headerIds: false, mangle: false }); const html = window.marked.parse(body); return { html, toc: headings.filter(h => h.level === 2) }; } /* ============================================================ HOME VIEW ============================================================ */ function EpHome({ go, progress }) { const completed = Object.values(progress).filter(Boolean).length; const pct = (completed / EP_SESSIONS.length) * 100; const nextSession = EP_SESSIONS.find(s => !progress[s.id]) || EP_SESSIONS[0]; return (
Energy Primer ·Course home
{completed}/{EP_SESSIONS.length} sessions
A 20-hour foundation course

Energy, for advisors to capital, policy, and industry.

The twenty percent of energy knowledge that drives eighty percent of advisory outcomes. Built against a commodity trader's blind spots — power markets, long-dated capex, infrastructure constraints, sectoral pathways, and the geopolitics of minerals.

{ e.preventDefault(); go("/primer/resources/curriculum"); }}> Read the curriculum →
Format 10 sessions~2 hours each · self-paced
Output 10 deliverablesreusable models & frameworks
Audience Senior advisorsinvestment, policy, corporate
01
Read the lecture notes
Each session opens with the conceptual frame: numbered theory sections, key tables, and worked examples.
02
Work the case
A real-world case study at the end of every session. Walk through what happened and what to generalize.
03
Build the deliverable
Each session ships with an exercise — a model, scorecard, or memo you can reuse in client work.
04
Synthesize
Close with a list of what to internalize. Pre-work for the next session keeps the cadence.

The ten sessions

20 hours · 10 deliverables · 10 case studies
{EP_SESSIONS.map((s) => ( { e.preventDefault(); go("/primer/" + s.id); }}>
Session · {s.id} {progress[s.id] ? "✓ Completed" : (s.duration + " min")}
{s.title}
{s.subtitle}
Blind spot targeted {s.blindSpot}
Deliverable · {s.deliverable} Read →
))}

Companion resources

Templates, checklists, and reference
{EP_RESOURCES.map((r) => ( { e.preventDefault(); go("/primer/resources/" + r.id); }}> {r.tag}
{r.title}
{r.sub}
Open →
 ))}
Course 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 listed at the end of each session.
); } /* ============================================================ READER VIEW (session OR resource) ============================================================ */ function EpReader({ kind, item, go, progress, toggleDone }) { // kind: "session" | "resource" const [state, setState] = epUse({ html: "", toc: [], loading: true, err: null }); const [activeHeading, setActiveHeading] = epUse(null); const articleRef = epRef(null); // load markdown epEffect(() => { let cancelled = false; setState({ html: "", toc: [], loading: true, err: null }); (async () => { try { // wait briefly if marked is still loading for (let i = 0; i < 30 && !window.marked; i++) { await new Promise(r => setTimeout(r, 100)); } const md = await epFetchMd(item.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; }; }, [item.file]); // scroll spy for "on this page" epEffect(() => { 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 on new item epEffect(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [item.file]); const isSession = kind === "session"; const idx = isSession ? EP_SESSIONS.findIndex(s => s.id === item.id) : -1; const prev = isSession && idx > 0 ? EP_SESSIONS[idx - 1] : null; const next = isSession && idx >= 0 && idx < EP_SESSIONS.length - 1 ? EP_SESSIONS[idx + 1] : null; const isDone = isSession ? !!progress[item.id] : false; return (
{ e.preventDefault(); go("/primer"); }}> Energy Primer / { e.preventDefault(); go("/primer"); }}>Course / {isSession ? ("Session " + item.id) : item.tag}
{isSession && ( {idx + 1} of {EP_SESSIONS.length} )}
{/* left: course ToC */} {/* center: main reader */}
{isSession ? (
Session {item.id} · ~{item.duration} minutes

{item.title}

{item.subtitle}

Blind spot targeted {item.blindSpot}
Deliverable {item.deliverable}
Concepts {item.concepts.slice(0, 3).join(" · ")}
) : (
{item.tag}

{item.title}

{item.sub}

 )} {state.loading && (
Loading lecture notes
)} {state.err && (
Could not load this lesson — {state.err}
)} {!state.loading && !state.err && (
)} {/* prev / next pager for sessions */} {isSession && ( )}
{/* right: on-this-page */}
); } /* ============================================================ ROUTER ============================================================ */ function EnergyPrimerView() { // sub-route after #/primer/... const parsePrimer = () => { const hash = (window.location.hash || "").replace(/^#\/?/, ""); const rest = hash.replace(/^energy-primer\/?/, "").replace(/^\/+/, ""); if (!rest) return { view: "home" }; if (rest.startsWith("resources/")) { const id = rest.slice("resources/".length); const r = EP_RESOURCES.find(x => x.id === id); if (r) return { view: "resource", item: r }; return { view: "home" }; } const s = EP_SESSIONS.find(x => x.id === rest); if (s) return { view: "session", item: s }; return { view: "home" }; }; const [route, setRoute] = epUse(parsePrimer); const [progress, setProgress] = epUse(epLoadProgress); epEffect(() => { const onHash = () => setRoute(parsePrimer()); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); const go = (path) => { // path is like "/primer" or "/primer/01" — rewrite to match the app router const norm = path.replace(/^\/?primer/, "/energy-primer"); window.location.hash = norm; }; const toggleDone = (id) => { const next = { ...progress, [id]: !progress[id] }; setProgress(next); epSaveProgress(next); }; if (route.view === "home") { return ; } return ; } window.EnergyPrimerView = EnergyPrimerView;