${String(n + 1).padStart(2, ' ')}${highlightLine(l)}
`
)
.join('')
const focusJson = JSON.stringify(focus)
return `
${esc(mark)}${highlightLine(body)}
`
})
.join('')
}
function renderDiff({ slide, start, duration, i }) {
return `
${esc(c.text)}
`
})
.join('\n')
// --- Timeline JS -------------------------------------------------------------
const timelineJs = []
for (const { slide, start, duration, i } of timed) {
const fadeIn = 0.4
const fadeOut = 0.4
if (i === 0) {
// First frame should show the full title card immediately.
timelineJs.push(`tl.set("#slide-${i}", { opacity: 1 }, ${start});`)
} else {
timelineJs.push(
`tl.fromTo("#slide-${i}", { opacity: 0 }, { opacity: 1, duration: ${fadeIn}, ease: "power2.out" }, ${start});`
)
}
timelineJs.push(
`tl.to("#slide-${i}", { opacity: 0, duration: ${fadeOut}, ease: "power2.in" }, ${start + duration - fadeOut});`
)
timelineJs.push(`tl.set("#slide-${i}", { opacity: 0 }, ${start + duration});`)
if ((slide.type === 'code' || slide.type === 'diff') && slide.focus && slide.focus.length) {
const lineHeight = 36
const focus = slide.focus
const targets = focus.map((f) => ({
t: start + (f.at || 0) * duration,
y: -Math.max(0, f.line - 4) * lineHeight,
}))
timelineJs.push(`tl.set("#code-scroll-${i}", { y: ${targets[0].y} }, ${start});`)
for (let k = 1; k < targets.length; k++) {
const prev = targets[k - 1]
const cur = targets[k]
const dur = Math.max(0.5, cur.t - prev.t)
timelineJs.push(
`tl.to("#code-scroll-${i}", { y: ${cur.y}, duration: ${dur}, ease: "power1.inOut" }, ${prev.t});`
)
}
}
}
// --- Final HTML --------------------------------------------------------------
const html = `
${slidesHtml}
${audioHtml}
`
fs.writeFileSync(path.join(__dirname, 'index.html'), html)
console.log(`Wrote ${path.relative(process.cwd(), path.join(__dirname, 'index.html'))}`)
console.log(` ${timed.length} slides, ${totalDuration.toFixed(2)}s total`)
console.log(
` ${timed.filter((t) => t.slide.audio).length} audio tracks, ${allCaptions.length} captions`
)
${captionsHtml}