Skip to content

Commit 0063e52

Browse files
alekswebnetalekswebnet
committed
Refactor H5P build page and skill documentation; add sample activity and build cost calculation
- Updated build-source.ts to clarify comments. - Enhanced index.njk for the H5P build page with improved descriptions and structure. - Added a sample H5P activity (sample.json) for demonstration purposes. - Implemented build cost calculation in buildCost.js to show token usage for AI chat interactions. - Modified vite.config.ts to include sample generation during the build process. - Updated skill documentation to clarify usage for users and AI chats. - Removed unnecessary files from tsconfig.json.
1 parent 67830f9 commit 0063e52

26 files changed

Lines changed: 810 additions & 1341 deletions

‎.github/workflows/build.yml‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,3 @@ jobs:
2424
cache: pnpm
2525
- run: pnpm install --frozen-lockfile
2626
- run: pnpm build
27-
# The H5P build page and the bundles in a real browser, against the built site.
28-
- run: pnpm exec playwright install --with-deps chromium
29-
- run: pnpm e2e
30-
- if: failure()
31-
uses: actions/upload-artifact@v7
32-
with:
33-
name: playwright-traces
34-
path: test-results
35-
if-no-files-found: ignore

‎.gitignore‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
node_modules/
22
_site/
33
.DS_Store
4-
5-
# Playwright
6-
test-results/
7-
playwright-report/

‎README.md‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
# missing-elements.github.io
22

3-
The site of the [missing-elements](https://github.com/missing-elements) web components, at <https://missing-elements.github.io>: the docs of the PDF viewer, and the pages an AI chat uses to build H5P content with the [h5p-author skill](https://github.com/missing-elements/h5p-offline-player/tree/main/skills/h5p-author).
3+
The site of the [missing-elements](https://github.com/missing-elements) web components, at <https://missing-elements.github.io>: the docs of the PDF viewer, and the pages that make H5P content with an AI chat and the [h5p-author skill](https://github.com/missing-elements/h5p-offline-player/tree/main/skills/h5p-author).
44

55
## What it serves
66

7-
| Path | What it is | Source, and the detail |
7+
| Path | What it is | Source |
88
| --- | --- | --- |
99
| `/` | The project list, the tools (the build page, which links the skill's page), and a footer of links | [src/index.njk](src/index.njk); the lists are in [src/_data/site.js](src/_data/site.js) |
10-
| `/pdfjs-viewer/` | The docs of `<pdfjs-viewer-element>`, with a live preview | [src/pdfjs-viewer/](src/pdfjs-viewer/); [docs/pdfjs-viewer.md](docs/pdfjs-viewer.md) |
11-
| `/h5p/skill/` | The skill's files, and a page that lists each at its full address | [src/h5p/skill/](src/h5p/skill/), copied by [eleventy.config.js](eleventy.config.js); [docs/h5p-skill.md](docs/h5p-skill.md) |
12-
| `/h5p/bundles/` | The skill's build tool and a library bundle per content type, for a chat that runs Node but cannot reach npm | written by [vite.config.ts](vite.config.ts); [docs/h5p-bundles.md](docs/h5p-bundles.md) |
13-
| `/h5p/build/` | The build page: turns the source a chat wrote into a `.h5p` in the visitor's browser | [src/h5p/build/](src/h5p/build/); [docs/h5p-build-page.md](docs/h5p-build-page.md) |
14-
| `/h5p/build/types/` | The skill's type files, which the build page copies for the chat | written by [vite.config.ts](vite.config.ts); [docs/h5p-build-page.md](docs/h5p-build-page.md#the-type-files) |
10+
| `/pdfjs-viewer/` | The docs of `<pdfjs-viewer-element>`, with a live preview | [src/pdfjs-viewer/](src/pdfjs-viewer/) |
11+
| `/h5p/build/` | The build page, for people: what it makes, a sample that plays, and the build of a chat's source into a `.h5p`, in the visitor's browser | [src/h5p/build/](src/h5p/build/) |
12+
| `/h5p/skill/` | The skill's files, and a page that lists each at its full address, for a chat | [src/h5p/skill/](src/h5p/skill/), copied by [eleventy.config.js](eleventy.config.js) |
13+
| `/h5p/bundles/` | The skill's build tool and a library bundle per content type, for a chat that runs Node but cannot reach npm | written by [vite.config.ts](vite.config.ts) |
14+
| `/h5p/build/types/` | The skill's type files, which the build page copies for the chat | written by [vite.config.ts](vite.config.ts) |
1515

16-
The three `/h5p/` pages serve one skill to a chat that cannot install it, by what the chat can do. It is given `/h5p/skill/`, which lists every address. If it can run Node and fetch a file, it builds from the tool and a bundle in `/h5p/bundles/`. If it cannot, it gives the user a link to `/h5p/build/`, which builds in their browser.
16+
A chat that cannot install the skill is given `/h5p/skill/`, which lists every address. If it can run Node and fetch a file, it builds from the tool and a bundle in `/h5p/bundles/`. If it cannot, it gives the user a link to `/h5p/build/`, which builds in their browser.
1717

1818
## Develop
1919

@@ -24,18 +24,15 @@ pnpm install
2424
pnpm dev # Eleventy's server, http://localhost:8080
2525
pnpm build # type-checks, then Eleventy writes _site/, then Vite writes /h5p/ into it
2626
pnpm preview # serves _site/ as GitHub Pages does, http://localhost:4173
27-
pnpm typecheck
28-
pnpm e2e # the browser tests, against _site/: build first, and once per machine:
29-
# pnpm exec playwright install chromium
3027
```
3128

32-
`pnpm dev` shows the pages as Eleventy writes them: the build page's script is there only after a `pnpm build`. The bundles test unzips a bundle with `unzip`, as the skill's steps do: macOS and Linux have it, and so does CI's Ubuntu runner. On Windows, run the tests under WSL.
29+
`pnpm dev` shows the pages as Eleventy writes them: the build page's script and its sample are there only after a `pnpm build`.
3330

3431
## How it is built and deployed
3532

3633
- **Eleventy** writes the pages from `src/` into `_site/`. They ship no framework. Their scripts are the theme toggle and the code-block buttons ([src/assets/site.js](src/assets/site.js)), the pdfjs-viewer live preview ([src/pdfjs-viewer/docs.js](src/pdfjs-viewer/docs.js)) and the build page.
37-
- **Vite** then writes `/h5p/` into the same `_site/`: the build page's script, bundled with the H5P player, its runtime and the library pack; the type files; and the bundles. That is build output: git holds none of it, and the bundles alone are over 100 MB.
38-
- A push to `main` deploys through [pages.yml](.github/workflows/pages.yml). A pull request is built and tested by [build.yml](.github/workflows/build.yml): the build, then the browser tests.
34+
- **Vite** then writes `/h5p/` into the same `_site/`: the build page's script, bundled with the H5P player, its runtime and the library pack; the build page's sample; the type files; and the bundles. That is build output: git holds none of it, and the bundles alone are over 100 MB.
35+
- A push to `main` deploys through [pages.yml](.github/workflows/pages.yml). A pull request is built by [build.yml](.github/workflows/build.yml).
3936

4037
## What the site pins
4138

@@ -44,12 +41,10 @@ The pages run published releases, pinned exactly in [package.json](package.json)
4441
| Package | What it moves |
4542
| --- | --- |
4643
| `@missing-elements/pdfjs-viewer` | The docs' version numbers, and the viewer in the live preview |
47-
| `@missing-elements/h5p-author` | The build the build page runs, the type files, the skill's files at `/h5p/skill/`, and the tool in `/h5p/bundles/` |
44+
| `@missing-elements/h5p-author` | The build the build page runs, its sample, the type files, the skill's files at `/h5p/skill/`, and the tool in `/h5p/bundles/` |
4845
| `@missing-elements/h5p-libraries` | The library pack: the build page's libraries, and the bundles |
4946
| `@missing-elements/h5p-offline-player`, `@missing-elements/h5p-runtime` | The player on the build page, and its runtime |
5047

51-
To move a pin, change its version in `package.json`, run `pnpm install`, then `pnpm build` and `pnpm e2e`, and commit the lockfile with it. Dependabot opens the pull requests for the pins as their own, apart from its group for everything else, and takes a new `@missing-elements` release the day it comes out where it holds other packages back for three days: [.github/dependabot.yml](.github/dependabot.yml) and [pnpm-workspace.yaml](pnpm-workspace.yaml) say why.
48+
To move a pin, change its version in `package.json`, run `pnpm install`, then `pnpm build`, and commit the lockfile with it. Dependabot opens the pull requests for the pins as their own, apart from its group for everything else, and takes a new `@missing-elements` release the day it comes out where it holds other packages back for three days: [.github/dependabot.yml](.github/dependabot.yml) and [pnpm-workspace.yaml](pnpm-workspace.yaml) say why.
5249

53-
## Where the rest is written
54-
55-
The detail of each part is in [docs/](docs/). The rules behind the H5P pages, and what was measured to reach them, are in [design/author.md](https://github.com/missing-elements/h5p-offline-player/blob/main/design/author.md) of h5p-offline-player, where the skill and its packages live.
50+
The rules behind the H5P pages, and what was measured to reach them, are in [design/author.md](https://github.com/missing-elements/h5p-offline-player/blob/main/design/author.md) of h5p-offline-player, where the skill and its packages live.

0 commit comments

Comments
 (0)