58 lines
2.6 KiB
Markdown
58 lines
2.6 KiB
Markdown
# Math Tasks Generator — Setup Steps
|
||
|
||
## Step 1: Initialize Node.js project
|
||
- [x] `npm init -y` with `"type": "module"`
|
||
- [x] Create `.gitignore` (node_modules/, output/)
|
||
|
||
## Step 2: Install dependencies
|
||
- [x] `puppeteer` — HTML to PDF conversion (headless Chrome)
|
||
- [x] `@tailwindcss/cli` — Tailwind CSS v4 build tool (dev)
|
||
- [x] `serve` — static file server for HTML preview (dev)
|
||
- [x] `concurrently` — run CSS watch + preview server together (dev)
|
||
|
||
## Step 3: Create directory structure
|
||
- [x] `src/styles/main.css` — Tailwind source with A4/print styles
|
||
- [x] `src/scripts/generate-pdf.mjs` — HTML → PDF via Puppeteer
|
||
- [x] `src/scripts/generate-problems.mjs` — JSON task → concrete problem list
|
||
- [x] `src/scripts/banatie.mjs` — Banatie API client for image generation
|
||
- [x] `tasks/` — JSON task definition files
|
||
- [x] `assets/backgrounds/` — large background images per theme
|
||
- [x] `assets/icons/` — icon sets in subfolders
|
||
- [x] `output/html/` — generated HTML (gitignored)
|
||
- [x] `output/pdf/` — generated PDFs (gitignored)
|
||
- [x] `output/css/` — built Tailwind CSS (gitignored)
|
||
|
||
## Step 4: Configure Tailwind CSS v4
|
||
- [x] `src/styles/main.css` with `@import "tailwindcss"`, `@page` rules for A4
|
||
- [x] Custom utility classes: `.page-a4`, `.page-background`, `.page-content`, `.problem-row`, `.problem-icon`, `.problem-text`, `.answer-line`
|
||
- [x] Build script: `npx @tailwindcss/cli -i src/styles/main.css -o output/css/styles.css`
|
||
|
||
## Step 5: Create PDF generation script
|
||
- [x] `src/scripts/generate-pdf.mjs` using Puppeteer
|
||
- [x] Accepts HTML file path, outputs PDF to `output/pdf/`
|
||
- [x] Settings: A4 format, `printBackground: true`, zero margins, `preferCSSPageSize: true`
|
||
|
||
## Step 6: Create problem generation utility
|
||
- [x] `src/scripts/generate-problems.mjs` — reads JSON task, generates randomized math problems
|
||
- [x] Exports function and works as CLI
|
||
- [x] Handles variable substitution, deduplication
|
||
|
||
## Step 7: Create example JSON task
|
||
- [x] `tasks/example-multiply.json` with sample multiplication task config
|
||
- [x] Demonstrates full JSON schema: template, variables, labels, theme refs
|
||
|
||
## Step 8: Set up npm scripts
|
||
- [x] `build:css` — build Tailwind CSS (minified)
|
||
- [x] `build:css:watch` — watch mode
|
||
- [x] `preview` — serve HTML at localhost:3000
|
||
- [x] `pdf` — convert HTML to PDF
|
||
- [x] `dev` — CSS watch + preview (concurrent)
|
||
|
||
## Step 9: Initialize git repo
|
||
- [x] `git init`, initial commit
|
||
|
||
## Step 10: Configure Banatie API integration
|
||
- [x] `src/scripts/banatie.mjs` — API client for image generation
|
||
- [x] Documented in CLAUDE.md
|
||
- [x] Standard sizes: backgrounds 1200×1700px, icons 128×128px transparent PNG
|