Image gallery for generative media artworks.
Project details
Checks
Built with
One-click deploy
BabySea open source projects are organized into three categories:
| Category | Description |
|---|---|
| SDK | Typed developer entry points for creating, tracking, and managing BabySea workloads from application code. |
| Primitive | Reusable infrastructure boundaries extracted from BabySea's execution control plane. Each primitive focuses on one system concern. |
| Starter | Deployable reference applications that combine product UI, runtime configuration, and BabySea publishing patterns. |
BabySea OSS projects are published into three status levels:
| Status | Description |
|---|---|
| Working | Implemented and deployable. All documented capabilities function as described. Suitable for personal creator portfolios and small static showcases. |
| Production | Working plus a hardened public runtime contract, explicit failure modes, and a documented upgrade path. |
| Alpha | Early-stage implementation. Core structure exists but some capabilities may be incomplete, undocumented, or subject to breaking changes. Not recommended for production usage. |
See CHANGELOG.md to track releases and public contract changes.
Run locally:
git clone https://github.com/babysea-community/image-gallery-starter.git
cd image-gallery-starter
pnpm install --frozen-lockfile
cp .env.example .env.localFill .env.local from .env.example, then start the app:
pnpm devOpen http://localhost:3011.
This starter serves hosted Cloudflare Images URLs in this format:
https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<VARIANT_OR_OPTIONS>Configure the delivery surface in .env.local:
NEXT_PUBLIC_SITE_URL=http://localhost:3011
NEXT_PUBLIC_CLOUDFLARE_IMAGES_ACCOUNT_HASH=your_account_hash
NEXT_PUBLIC_CLOUDFLARE_IMAGES_DELIVERY_ORIGIN=https://imagedelivery.netFor custom domains, use Cloudflare's documented cdn-cgi/imagedelivery path:
NEXT_PUBLIC_CLOUDFLARE_IMAGES_DELIVERY_ORIGIN=https://gallery.example.com/cdn-cgi/imagedeliveryThe starter ships with 36 ordered Cloudflare Images records in lib/gallery/source-gallery-images.ts. Feature, grid, hero, and collection views all read from that shared source so replacements stay consistent.
| Surface | Source | Purpose |
|---|---|---|
| Hero | lib/gallery/hero-section-images.ts |
First five artworks used for the preview surface. |
| Featured works | lib/gallery/feature-carousel-images.ts |
All 36 artworks in masonry groups. |
| Archive grid | lib/gallery/gallery-grid-images.ts |
All 36 artworks in fixed-size scan cards. |
| Collections | lib/gallery/stack-section-images.ts |
Twelve three-image collection cards generated in order. |
| Shared metadata | lib/gallery/gallery-image.ts, source-gallery-images.ts |
Image titles, prompts, model labels, variants, and alt text. |
- The app is a public, one-page creator gallery. It has no database, auth, server actions, billing, or private workspace state.
- Every image card uses
ProtectedImageto discourage drag and context-menu downloads from the browser UI. - The lightbox shows prompt, model, and size metadata vertically for each artwork.
- Touch interactions let mobile users preview image hover states.
- Cloudflare Images account hash and delivery origin are public
NEXT_PUBLIC_*values because image URLs render in the browser. - Static security headers and a small CSP are applied from
lib/security/csp.ts. - Sentry is optional. Leave
NEXT_PUBLIC_SENTRY_DSNblank for a no-op runtime, or set it to enable client/server error reporting with source-map upload when Sentry build secrets are configured.
wrangler.jsonc and open-next.config.ts deploy this Next.js starter to Cloudflare Workers through OpenNext. Use the Deploy to Cloudflare button above, or set the Cloudflare deploy command to pnpm run deploy. Set NEXT_PUBLIC_SITE_URL to the Worker or custom domain and configure values from .env.example. Use pnpm run preview for local Worker previews.
.do/deploy.template.yaml defines the DigitalOcean App Platform service, build command, start command, and environment prompts. Set NEXT_PUBLIC_SITE_URL to the App Platform or custom domain and configure the Cloudflare Images variables during app creation.
netlify.toml builds with pnpm run build, publishes .next, and uses the Next.js plugin. The Netlify deploy button prompts for the public Cloudflare Images environment values.
Use the Deploy on Railway button above to create a new Railway project from the public repository. Add the variables from .env.example, then set NEXT_PUBLIC_SITE_URL to the Railway or custom domain.
render.yaml builds with pnpm build and runs pnpm start -- -p $PORT. Add the variables from .env.example in the Render dashboard before the first deploy.
Keep the checked-in vercel.json framework settings. Set NEXT_PUBLIC_SITE_URL to the Vercel or custom domain, and set NEXT_PUBLIC_CLOUDFLARE_IMAGES_ACCOUNT_HASH to your Cloudflare Images account hash.
| Change | Files |
|---|---|
| Gallery images | lib/gallery/source-gallery-images.ts |
| Gallery types | lib/gallery/gallery-image.ts |
| Homepage layout | app/page.tsx |
| Metadata and icons | app/layout.tsx, public/icon.png, public/card.png |
| Visual system | styles/globals.css |
| Image protection | components/protected-image.tsx, components/gallery/touch-event.tsx |
| Security headers | lib/security/csp.ts, next.config.ts |
| Monitoring | instrumentation.ts, instrumentation-client.ts, lib/monitoring |
| Deploy config | .do/deploy.template.yaml, netlify.toml, open-next.config.ts, render.yaml, vercel.json, wrangler.jsonc |
| Symptom | Fix |
|---|---|
| Images do not load | Confirm NEXT_PUBLIC_CLOUDFLARE_IMAGES_ACCOUNT_HASH and NEXT_PUBLIC_CLOUDFLARE_IMAGES_DELIVERY_ORIGIN are correct. |
| Custom domain images 404 | Use the Cloudflare Images cdn-cgi/imagedelivery origin path and confirm the image IDs exist in the same Cloudflare account. |
| Local site metadata is wrong | Set NEXT_PUBLIC_SITE_URL=http://localhost:3011 in .env.local before running pnpm dev. |
| Deploy preview shows old media | Redeploy after changing public environment variables; NEXT_PUBLIC_* values are baked into the client build. |
| Sentry is silent | Confirm NEXT_PUBLIC_SENTRY_DSN is set for runtime reporting and SENTRY_ORG, SENTRY_PROJECT, SENTRY_AUTH_TOKEN are set only in CI secrets for source maps. |
| Formatting fails | Run pnpm format:fix, then rerun pnpm format. |
The project publishes its trust signals through public GitHub, GitLab, and other CI provider checks so contributors can inspect the actual CI configuration, jobs, and reports.
Issues, pull requests, design discussion, and security reports should follow CONTRIBUTING.md, CODE_OF_CONDUCT.md, and SECURITY.md.