Add catalog subject banner feature: Introduce optional header images for subjects in the catalog, update CONTRIBUTING.md with guidelines for adding banners, and modify catalog data structure to support banner URLs. Enhance frontend components and styles to display banners effectively. Update TypeScript types and curriculum structure to accommodate new banner functionality.

This commit is contained in:
Hananoshika Yomaru 2026-05-20 12:40:51 -07:00
parent 8a7f6449a7
commit 7636bb4a86
35 changed files with 4140 additions and 10 deletions

View file

@ -16,6 +16,7 @@ Thank you for helping grow free, open textbooks.
| Publish a **live** chapter (readable page) | [§ Publish a live chapter](#publish-a-live-chapter) |
| Add a **branch** in the catalog map | [§ Chapter graph](#chapter-graph-branches) |
| Add a new **subject** | [§ New subject](#add-a-new-subject) |
| Add a **catalog subject banner** | [§ Catalog subject banner](#catalog-subject-banner) |
| Add a **curriculum** filter (e.g. GCSE) | [§ New curriculum label](#add-a-curriculum-label) |
**Browse the catalog locally:** `bun run build:js && zola serve` → [http://127.0.0.1:1111/catalog/](http://127.0.0.1:1111/catalog/)
@ -152,6 +153,36 @@ Add edges in `data/{subject}-curriculum.json`:
---
## Catalog subject banner
Optional header image when browsing a subject in the catalog (List and Map). Subjects without a `banner` field keep the plain header.
1. Prepare a **2:1** image (e.g. 2000×1000). Keep the large source file out of the repo if possible.
2. Optimize to WebP under `static/catalog/banners/`:
```bash
mkdir -p static/catalog/banners
# ffmpeg (requires libwebp in your build):
ffmpeg -y -i your-banner.jpg -vf "scale=1400:-2" -c:v libwebp -quality 82 \
static/catalog/banners/math.webp
# or cwebp (Homebrew: brew install webp):
cwebp -resize 1400 0 -q 82 your-banner.jpg -o static/catalog/banners/math.webp
```
3. In `data/catalog.json`, add a root-relative path on the subject:
```json
{ "id": "math", "name": "Mathematics", "banner": "/catalog/banners/math.webp" }
```
4. Check locally: `bun run build:js && zola serve` → `/catalog/?subject=math`
Omit `banner` for subjects that should stay unchanged (e.g. roadmap-only placeholders).
---
## Add a curriculum label
1. Add the label to `curriculums` in `data/catalog.json`.