60 lines
5.1 KiB
Markdown
60 lines
5.1 KiB
Markdown
# presentation-html
|
|
|
|
Reusable global skill for editable, offline HTML presentations built with **Reveal.js 6.0.2 + Anime.js 4.5.0**. Canonical name normalizes the user typo `presentation-htlm`.
|
|
|
|
## Quick start
|
|
|
|
Run from this package directory:
|
|
|
|
```sh
|
|
python3 scripts/build.py
|
|
# Open dist/presentation-html-demo-0.3.0.html directly, fully offline.
|
|
npm ci --ignore-scripts
|
|
npx playwright install chromium
|
|
npm test
|
|
```
|
|
|
|
Python builds with no network and no npm installation. npm/Chromium are needed only for browser tests. To use an existing compatible Chromium, set `CHROMIUM_EXECUTABLE` to its full path. Runtime playback has no external dependencies. The first dependency/browser installation needs network; the subsequent test runs disable browser networking.
|
|
|
|
## Package
|
|
|
|
- `SKILL.md`: operating workflow and verification gates.
|
|
- `references/`: dated official-source research, established-example catalog and QA contract.
|
|
- `assets/starter.html`, `assets/app.js`: original editable starter and lifecycle behavior.
|
|
- `assets/vendor/`: complete required libraries/fonts and their licenses.
|
|
- `scripts/build.py`: reproducible single-file build.
|
|
- `scripts/test.mjs`: real offline Chromium interaction checks (default `npm test`).
|
|
- `dist/`: ready-to-open six-slide example and hash manifest.
|
|
- `evidence/`: exact-artifact test report and individually rendered slides.
|
|
- `SOURCE.md`, `vendor-manifest.json`, `package-lock.json`: provenance and integrity.
|
|
|
|
Use six slides as examples, not a fixed narrative. Copy the package to a deck workspace before editing. Adapt test inventory when slide/node counts change. Work Sans is optional example typography. Channel-specific preferences and authority remain outside this global skill.
|
|
|
|
## Explanatory mechanism example
|
|
|
|
For architecture decomposition, modular products and inspect/reassemble interactions, first read [the mechanism reference](references/explanatory-mechanisms.md). It explains when to choose the pattern, what was observed in the Anime.js showcase, and what must not be inferred or copied.
|
|
|
|
`assets/mechanism.html` is an original editable SVG example. Build it with `python3 scripts/build-mechanism.py`, then open `dist/mechanism-demo-0.2.0.html`. All four state controls and all three components are covered by `scripts/test-mechanism.mjs`; `npm test` runs both the original deck and this new example.
|
|
|
|
## Runnable Anime.js library
|
|
|
|
- [Element registry](references/registry-animejs-elements.md): SVG draw, motion path and spatial stagger.
|
|
- [Composition registry](references/registry-animejs-compositions.md): dependency flow and assemble/explode/reassemble.
|
|
- `assets/animejs/examples.js`: editable configurations; `gallery.js`: shared renderer and lifecycle; `index.html`: local source preview.
|
|
|
|
Build with `python3 scripts/build-gallery.py` and open `dist/animejs-gallery-0.5.0/index.html`. This portable offline gallery includes Play, Replay, Settle and Seek for all five examples. `npm test` runs the deck, motion, mechanism and gallery suites. Registry coverage and source links are validated so new examples cannot silently go unlisted. Existing deck and mechanism artifact versions remain available.
|
|
|
|
## Licenses and scope
|
|
|
|
Original code/documentation: MIT, RootAtSkic and Hermes Agent. Reveal.js and Anime.js: MIT; Work Sans: SIL OFL 1.1. Notices are preserved alongside vendor bytes and embedded in the output. No copyrighted showcase artwork was scraped into the distributable. Research documents disclose unavailable pages and link-only references. See `references/examples.md` for attribution and reuse decisions.
|
|
|
|
Local Chromium verification is included; no hosted CI or cross-browser certification is claimed. No automation credentials belong in this repository.
|
|
|
|
### Gallery hierarchy (0.5.0)
|
|
|
|
Open `dist/animejs-gallery-0.5.0/index.html` for all five previews, or `elements/index.html` and `compositions/index.html` inside that package. Each gallery embeds `examples/<id>.html` through relative iframe `src` and links to that same file. Each individual page is self-contained (CSS, configuration, renderer, pinned Anime.js and full license embedded), so it also plays offline by itself. Breadcrumb links require keeping the package hierarchy together. Extract the complete package before opening its index; no server is needed. Previous version artifacts are retained.
|
|
|
|
The editable hierarchy mirrors this under `assets/animejs/`, sharing `examples.js`, `gallery.js`, `gallery.css` and `assets/vendor/`. Edit the configuration/renderer once, not the generated dist pages. Individual source documents select exactly one configuration using `body[data-example]`; unknown IDs fail explicitly, with no query-string fallback. Galleries never mount a renderer themselves. Every embedded document owns its lifecycle.
|
|
|
|
`python3 scripts/build-gallery.py` inlines local dependencies and records every page hash plus source hashes in `dist/animejs-gallery-manifest.json`. `scripts/test-gallery.mjs` tests both editable and built hierarchies, iframe identity, navigation, all five examples in normal/reduced motion and deterministic hold/cleanup behavior. Screenshots and exact page hashes are recorded under `evidence/`.
|