62 lines
6.2 KiB
Markdown
62 lines
6.2 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
|
|
|
|
Start with the [discovery guide](references/industry-catalog.md). Choose by explanatory question and technique, then read only the relevant industry registry. Version 0.6.0 adds 24 substantial conceptual scenarios across oil and gas, pharma, government, retail, logistics, manufacturing, energy, healthcare, finance, telecom, agriculture and infrastructure. Twelve sectors is this release, not a ceiling. Values are illustrative, not verified operating procedures or engineering/clinical advice.
|
|
|
|
- [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.6.0/index.html`. This portable offline gallery includes Play, Replay, Settle and Seek for all 29 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.6.0)
|
|
|
|
Open `dist/animejs-gallery-0.6.0/index.html` for all 29 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 generated `catalog-data.js`, `gallery.js`, `gallery.css` and `assets/vendor/`. Industry descriptors in `catalogs/*.json` and renderer registrations in `industries/*.js` are the editable sources; the builder generates all wrappers without duplicated labels. Legacy configs remain in `examples.js`. 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 29 examples in normal/reduced motion and deterministic hold/cleanup behavior. A compact representative screenshot set and exact page hashes are recorded under `evidence/`. Every normal-motion example gets actual early playback, then accelerated natural completion at engine speed 12; representative legacy/industry examples also complete at speed 1. The report explicitly distinguishes these. Default build/tests fail on missing release sectors; `--allow-partial` is development-only and reports missing coverage. The complete release has 29 individual pages, 14 registry galleries, and the overall index: 44 HTML pages.
|