799921e213
- src/slides/compile.ts compiles a project into runtime-ready slides. :thisSlide is resolved to each slide's own selector before Less runs, so output is deterministic and never depends on which slide is visible. - src/slides/runtime.ts mounts every slide once and moves them through idle -> entering -> current -> leaving via a data-ps-state attribute; CSS owns the animation, JS only owns the lifecycle. Rapid input coalesces into a single settle instead of a queue of stale operations. Arrow/space/Home/End keys, plus history integration: back/forward step through slides and a reload restores the slide you were on. - The editor gained two buffers: HTML slides and the project Less. The preview and the presentation are the same runtime (present = fullscreen of the same stage), and broken Less keeps the last good preview while reporting the error. Adds `less` (the authoring language) and `@types/less`.
49 lines
1.8 KiB
HTML
49 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>p/slides</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="menubar">
|
|
<b>p/slides</b>
|
|
<div class="menubar-actions">
|
|
<div class="buffer-tabs" role="group" aria-label="Editor buffer">
|
|
<button
|
|
class="buffer-tab buffer-tab-slides"
|
|
type="button"
|
|
aria-pressed="true"
|
|
>
|
|
Slides
|
|
</button>
|
|
<button
|
|
class="buffer-tab buffer-tab-style"
|
|
type="button"
|
|
aria-pressed="false"
|
|
>
|
|
Styles
|
|
</button>
|
|
</div>
|
|
<button class="present-button" type="button">Present</button>
|
|
</div>
|
|
</div>
|
|
<div class="slidelist">
|
|
<div class="slide-list-header">
|
|
<span>Slides</span>
|
|
<button class="add-slide" type="button" aria-label="Add slide">+</button>
|
|
</div>
|
|
<div class="slide-list-items"></div>
|
|
</div>
|
|
<div class="code"></div>
|
|
<div class="preview">
|
|
<div class="compile-error" role="alert" hidden></div>
|
|
<div class="stage" tabindex="-1"></div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|