/* ---- src/shared.jsx ---- */
/* ============================================================
SHARED — primitives + small helpers
============================================================ */
const C = window.CONTENT;
/* Render an HTML string safely (used for leadHTML, identity, etc.
Content is author-controlled — not user input — so this is safe.) */
function HTML({ html, as: Tag = "span", ...rest }) {
return
{mark} : null}
{tag}
/
{code}
·
{label}
{caption ? {caption} : null}
);
}
/* Editorial colophon (footer of each section) */
function Colophon({ ix, title, scale, note }) {
return (
{ix}
{title}
{scale ? <>· {scale} : null}
{note ? <>· {note} : null}
);
}
/* Section header — simple, editorial */
function SectionHead({ num, kicker, right }) {
return (
);
}
Object.assign(window, { C, HTML, Placeholder, Colophon, SectionHead });
/* ---- src/sections-a.jsx ---- */
/* ============================================================
SECTIONS A — Cover · Speaker · Narrative
All copy comes from window.CONTENT (see content.js).
============================================================ */
/* ---------------------------- 01 — COVER ---------------------------- */
function CoverSection() {
const d = C.cover;
return (
{/* slim project meta */}
{d.sheet}
/
cover sheet
{C.project.event}
{/* Hero */}
i. {d.eyebrow}
{d.title.l1}{d.title.l2} {d.title.l3}
{/* Lead paragraph */}
{d.duration}
{d.indexLabel}
{d.indexRight}
{d.indexItems.map((it) => {
const color = it.accent === "terra" ? "var(--terra)" :
it.accent === "moss" ? "var(--moss)" :
it.accent === "gold" ? "var(--gold)" : "var(--mute)";
return (
{it.n}
{it.t}
{it.d}
);
})}
{[
["format", "16:9 landscape"],
["ratio", "1920 × 1080"],
["tempo", "10 menit"],
["mode", "PDF / print-ready"],
].map(([k, v]) => (
))}
);
}
/* ---------------------------- 02 — SPEAKER ---------------------------- */
function SpeakerProfile() {
const d = C.speaker;
return (
{d.nameLabel}
{d.name.prefix} {d.name.last}
{d.name.suffix}
{d.portraits[0] && (
)}
{d.portraits.slice(1, 3).map((p, i) => (
))}
{d.practiceLabel}
{d.practiceRight}
{d.practiceItems.map((it) => (
{it.n}
{it.t}
{it.d}
))}
);
}
/* ---------------------------- 03 — NARRATIVE ---------------------------- */
function NarrativeFlow() {
const d = C.narrative;
return (
{d.title.l1}{d.title.l2_emph}
{/* Phase legend */}
{Object.entries(d.phases).map(([k, v]) => (
))}
↓ open full sequence (mobile)
{d.steps.map(s => {
const tone = d.phases[s.phase];
return (
{s.n}.
{s.t}
{tone.label}
);
})}
);
}
function SpineElevation({ steps, phases }) {
const W = 1440, H = 320;
const m = { l: 20, r: 20, t: 80, b: 70 };
const innerW = W - m.l - m.r;
const baseY = H - m.b;
const headY = m.t;
const stepX = (i) => m.l + (innerW * (i + 0.5) / steps.length);
return (
{isOutcome
? {s.n}.
{s.t}
);
})}
↘ outcome
{steps[0].t.toLowerCase()}
{steps[steps.length-1].t.toLowerCase()}
);
}
Object.assign(window, { CoverSection, SpeakerProfile, NarrativeFlow });
/* ---- src/sections-b.jsx ---- */
/* ============================================================
SECTIONS B — Ecosystem · Deck
All copy comes from window.CONTENT (see content.js).
============================================================ */
const TONE_COLOR = {
terra:"var(--terra)", moss:"var(--moss)", gold:"var(--gold)",
ink:"var(--ink)", "terra-d":"var(--terra-d)",
};
/* ---------------------------- 04 — ECOSYSTEM ---------------------------- */
function EcosystemMap() {
const d = C.ecosystem;
return (
{d.title.l1} {d.title.l2_emph}
{d.lead}
{/* Register */}
register · simpul
{d.nodes.length} entries
{d.nodes.map((n, i) => (
{String(i+1).padStart(2,"0")}.
{n.label}
{n.role}
↗ {n.domain}
))}
{d.outcome.kicker}
{d.outcome.title}
);
}
function EcosystemPlan({ nodes, outcome }) {
const W = 1320, H = 700;
const cx = W/2, cy = H/2 + 6;
const R1 = 230;
const R2 = 120;
const positions = [
{ x: cx, y: cy - R1 },
{ x: cx + R1*0.95, y: cy - R1*0.31 },
{ x: cx + R1*0.59, y: cy + R1*0.81 },
{ x: cx - R1*0.59, y: cy + R1*0.81 },
{ x: cx - R1*0.95, y: cy - R1*0.31 },
];
return (
N
fig. 04 · peta ekosistem
plan view · not to scale
outcome
{outcome.discTitle}
{outcome.discCaption}
{nodes.map((n, i) => {
const p = positions[i];
if (!p) return null;
const color = TONE_COLOR[n.tone] || "var(--ink)";
const dx = p.x - cx, dy = p.y - cy;
const isLeft = dx < -10;
const isRight = dx > 10;
const anchor = isLeft ? "end" : isRight ? "start" : "middle";
const tx = p.x + (isLeft ? -28 : isRight ? 28 : 0);
const ty = p.y + (dy < -10 ? -32 : 38);
return (
{n.id.toLowerCase()}.
{n.label.replace("Jiwa Karya ","")}
{n.role}
);
})}
);
}
/* ---------------------------- 05 — DECK ---------------------------- */
function DeckSection() {
const d = C.deck;
return (
{d.title.l1_emph} {d.title.l1_post}{d.title.l2_emph}
{d.lead}
{d.slides.map(s =>
);
}
function SlidePreview({ slide, total }) {
return (
slide · {slide.n}
{slide.layout}
Teguh Budiana · IAI Bali
{slide.n} / {total}
{slide.n}.
{slide.note}
);
}
function SlideLayoutPreview({ slide }) {
switch (slide.layout) {
case "title": {
const words = slide.title.split(" ");
const main = words.slice(0, -2).join(" ");
const tail = words.slice(-2).join(" ");
return (
);
}
case "split":
return (
);
case "image":
return (
);
case "diagram":
return (
0{i+1}.
))}
);
case "quote":
return (
);
default:
return null;
}
}
Object.assign(window, { EcosystemMap, DeckSection });
/* ---- src/sections-c.jsx ---- */
/* ============================================================
SECTIONS C — Manifesto (dark) · Bio · Assets
All copy comes from window.CONTENT (see content.js).
============================================================ */
/* ---------------------------- 06 — MANIFESTO ---------------------------- */
function QuoteSection() {
const d = C.manifesto;
return (
{d.title.l1}{d.title.l2_emph}
{d.quotes.map((q, i) => {
const align = i % 2 === 0 ? "left" : "right";
return (
“
{q}
”
{String(i+1).padStart(2,"0")}.
signature · #{i+1}
);
})}
);
}
/* ---------------------------- 07 — BIO ---------------------------- */
function BioSection() {
const d = C.bio;
return (
{d.title.l1}{d.title.l2_emph}
{d.lead}
);
}
function BioPanel({ data, italic }) {
return (
);
}
function BioLong({ data }) {
// Replace literal "\n" in the title-emph with line breaks
const emphLines = (data.title.l2_emph || "").split("\n");
return (
{data.ix}
{data.label}
{data.spec}
{data.title.l1}
{emphLines.map((ln, i) => (
{i > 0 &&
))}
{data.paragraphs.map((p, i) => (
))}
);
}
/* ---------------------------- 08 — ASSETS ---------------------------- */
const STATUS_TONE = {
todo: { color:"var(--terra)", label:"to do" },
draft: { color:"var(--gold)", label:"draft" },
ready: { color:"var(--moss)", label:"ready" },
};
function AssetChecklist() {
const d = C.assets;
const counts = d.items.reduce((acc, a) => { acc[a.status] = (acc[a.status]||0)+1; return acc; }, {});
return (
{d.title.l1}{d.title.l2_emph}
register · visual assets
{d.items.length} entries
{d.items.map((a) => {
const st = STATUS_TONE[a.status] || STATUS_TONE.todo;
return (
{a.id}
{a.title}
{a.notes}
{a.fmt} · {a.aspect}
);
})}
{d.safetyNever.map(item => (
✕
{item}
))}
{d.pmaLabel}
“
{d.pmaFraming}
”
);
}
Object.assign(window, { QuoteSection, BioSection, AssetChecklist });
/* ---- src/app.jsx ---- */
/* ============================================================
APP — Final 8-slide presentation renderer
============================================================ */
function App() {
const slides = C.deck.slides || [];
return (
{slides.map((slide, index) => (
);
}
function FinalPresentationSlide({ slide, index, total }) {
const dark = Boolean(slide.dark);
return (
{C.project.event}
{slide.title}
{slide.subtitle ? (
{slide.subtitle}
) : null}
{slide.body ? (
{slide.body}
) : null}
{slide.bullets && slide.bullets.length ? (
{slide.bullets.map((item, i) => (
{String(i + 1).padStart(2, "0")}.
{item}
))}
) : null}
{slide.layout === "quote" ? (
transition {slide.transition}
);
}
function FinalVisualPlaceholder({ slide }) {
const v = slide.visual || {};
return (
Visual final dapat diganti dengan foto public-safe sesuai brief aset.
);
}
function FinalDiagram({ slide }) {
const items = slide.bullets || [];
return (
N
{slide.visual?.label || "diagram"}
{items.map((item, i) => (
{String(i + 1).padStart(2, "0")}
{item}
{i < items.length - 1 ? ↓
: null}
))}
);
}
function FinalQuote({ slide }) {
return (
“
{slide.body}
”
{slide.keyLine}
);
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(