Website, editor and Node starters

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>OPF website starter</title><link rel="stylesheet" href="/style.css"></head>
<body>
<h1>Quarterly Review</h1>
<p id="status" role="status">Loading presentation…</p>
<opf-deck src="/deck.opf.json" fonts="/opf-fonts/" thumbnails present></opf-deck>
<p><a href="/downloads/deck.pptx" download>Download PowerPoint</a><a href="/downloads/deck.pdf" download>Download PDF</a><a href="/deck.opf.json" download>Download OPF source</a></p>
<script type="module" src="/main.js"></script>
</body>
</html>

import { createCanvasEditor } from '@openpresentation/opf-editor/canvas';
import { loadPreviewFonts } from '@openpresentation/opf-render/preview-fonts';
const status = document.querySelector('#status');
const source = document.querySelector('#source');
let canvas, fonts, slideIndex = 0;
const sync = message => { source.value = JSON.stringify(canvas.editor.presentation, null, 2); status.textContent = message; };
function save(bytes, type, name) {
  const url = URL.createObjectURL(new Blob([bytes], { type }));
  const link = document.createElement('a');
  link.href = url; link.download = name; link.click();
  setTimeout(() => URL.revokeObjectURL(url), 10000);
}
function action(id, run) {
  const button = document.querySelector('#' + id);
  button.disabled = false;
  button.addEventListener('click', async () => {
    try { await run(); } catch (error) { status.textContent = 'Error: ' + error.message; }
  });
}
try {
  const response = await fetch('/deck.opf.json');
  if (!response.ok) throw new Error('Deck request failed: ' + response.status);
  const presentation = await response.json();
  fonts = await loadPreviewFonts('/opf-fonts/');
  canvas = createCanvasEditor(document.querySelector('#slide'), { presentation, fonts,
    onCommit: () => sync('Committed'), onError: error => { status.textContent = 'Error: ' + error.message; } });
  await canvas.ready;
  sync('Ready');
  action('undo', () => { canvas.editor.undo(); sync('Undo'); });
  action('redo', () => { canvas.editor.redo(); sync('Redo'); });
  for (const [id, delta] of [['previous', -1], ['next', 1]]) action(id, () => {
    const count = canvas.editor.presentation.slides.length;
    const next = (slideIndex + delta + count) % count;
    if (canvas.setSlide(next) === false) throw new Error('Commit or cancel the active draft first.');
    slideIndex = next; sync('Slide ' + (slideIndex + 1));
  });
  action('save', () => {
    if (!canvas.commit()) throw new Error('The draft cannot be committed.');
    save(JSON.stringify(canvas.editor.presentation, null, 2), 'application/json', 'deck.opf.json'); sync('OPF saved');
  });
  action('pptx', async () => {
    if (!canvas.commit()) throw new Error('The draft cannot be committed.');
    const deck = canvas.editor.presentation;
    await fonts.ensure(deck);
    const { toPptx } = await import('@openpresentation/opf-pptx');
    const diagnostics = [];
    const bytes = await toPptx(deck, { fonts, onDiagnostic: item => diagnostics.push(item) });
    save(bytes, 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'deck.pptx');
    sync('PowerPoint exported' + (diagnostics.length ? ': ' + diagnostics.map(item => item.code + ': ' + item.message).join('; ') : ''));
  });
  action('pdf', async () => {
    if (!canvas.commit()) throw new Error('The draft cannot be committed.');
    const { convert } = await import('@openpresentation/opf-editor/export');
    const { files: [download] } = await convert(canvas.editor.presentation, { format: 'pdf', fonts });
    save(download.bytes, download.type, download.name); sync('PDF exported');
  });
  window.addEventListener('pagehide', () => { canvas.destroy(); fonts.dispose(); }, { once: true });
} catch (error) {
  canvas?.destroy(); fonts?.dispose();
  status.textContent = 'Startup error: ' + error.message;
}

import { mkdir, readFile, writeFile } from "node:fs/promises";
import path from "node:path";
import { assertValid } from "@openpresentation/opf";
import { paginate } from "@openpresentation/opf/pagination";
import { loadFonts } from "@openpresentation/opf-render/fonts-node";
import { toPdf, toPng, toSvg } from "@openpresentation/opf-render";
import { toPptx } from "@openpresentation/opf-pptx";

const input = process.argv[2] ?? "deck.opf.json";
const output = process.argv[3] ?? "output";
const deck = JSON.parse(await readFile(input, "utf8"));
assertValid(deck);
// This starter chooses Roboto, covered by base. Load office when your deck requires it.
const fonts = await loadFonts({ pack: "base", presentation: deck, scripts: "auto", embedScriptFonts: true });
const { presentation } = paginate(deck, { fonts });
const svgs = toSvg(presentation, { fonts }); // one SVG per slide
await mkdir(output, { recursive: true });
await writeFile(path.join(output, "deck.opf.json"), JSON.stringify(presentation, null, 2));
await writeFile(path.join(output, "slide-1.svg"), svgs[0]);
await writeFile(path.join(output, "slide-1.png"), await toPng(svgs[0], { fonts }));
await writeFile(path.join(output, "deck.pdf"), await toPdf(svgs, { fonts }));
await writeFile(path.join(output, "deck.pptx"), await toPptx(presentation, { fonts, onDiagnostic: item => console.warn(item.code + ": " + item.message) }));
console.log("Exported " + presentation.slides.length + " slides to " + output);