Getting Started

Getting Started

Requirements

• Node.js 22 (the version CI uses) and npm
• Python 3 with Pillow (AVIF and WebP support), only if you regenerate images

Install and run

git clone https://github.com/stackified/kalapriti.git
cd kalapriti
git checkout dev
npm ci
npm run dev     # http://localhost:5173/

The base path defaults to /, so the dev server serves the site from the root.

Scripts

Command	What it does
npm run dev	Vite dev server
npm run lint	ESLint over the project
npm run build	Production build to dist/, including the generated 404.html
npm run preview	Serves the built dist/ locally
npm run images	Runs scripts/images.py to create AVIF and WebP variants and rewrite src/data/images.js
npm run deploy	Builds, then publishes dist/ to the gh-pages branch with the gh-pages package

Production deploys normally go through CI instead of npm run deploy, because CI runs the verify step first. See Deployment.

Preview build under a subpath

To produce a one-off build for a repository subpath such as /kalapriti/, set VITE_BASE rather than editing any file:

VITE_BASE=/kalapriti/ npm run build

vite.config.js then also generates a 404.html with the matching number of path segments. Do not push such a build to gh-pages: the CI verify step rejects any /kalapriti/ path because the production site is served from the domain root.

Adding an image

1. Put the original PNG or JPG in public/assets.
2. Add an entry to PLAN in scripts/images.py (source file, optional crop, output widths).
3. Run npm run images.
4. Use it as <Picture name="your-name" alt="..." />.

Lint note

The ESLint config has no jsx-uses-vars, so a capitalised parameter that is only used as a JSX tag is reported as unused. Bind it to a const first (see Reveal.jsx).