6.6 KiB
6.6 KiB
Manual launch checklist (customization and go-live)
Use this before you call the site “ready.” It covers replacing dummy content, branding, security, and infrastructure decisions only you can make.
1. Gallery content and media (replace all dummy data)
- Create or edit your gallery manifest — Run
npm run init:customonce, then edit the gitignoredsrc/data/gallery.json(copied fromsrc/data/gallery.defaults.json). If you skip that, the app uses the committed defaults file only. Every entry must matchGalleryAssetinsrc/types/gallery.ts(ids,scrubbedUrl, dimensions,blurDataUrl,collection,tags, copy fields,alt). - Swap SVG illustrations for real scrubbed images
DefaultscrubbedUrlvalues point atpublic/gallery/*.svg. Replace with paths to your real files (e.g./gallery/my-photo.webp,/gallery/user/photo.webp, or a CDN URL). You can delete unused SVGs frompublic/gallery/when nothing references them. Optional local-only assets:public/gallery/user/(gitignored contents; keep.gitkeep). - Set accurate
widthandheightfor each asset (layout and aspect ratio depend on them). - Regenerate
blurDataUrlfor each image (tiny LQIP/blur-up). The current values are simple inline SVG data URLs sized to match each dummy asset. - Optional: add
scrubbedSrcSetandsizeson entries that use responsive variants (e.g. Cloudflare Images). Omit if you use a single URL per asset. - Write honest
alttext for accessibility and SEO (not generic “photo”). - Align tags and dates with how you want filtering and captions to read; tags drive the filter chips in the UI.
2. Collections and taxonomy (code + data must agree)
- Decide final collection names
Allowed values today are fixed insrc/types/gallery.ts(Collectiontype) and mirrored insrc/components/GalleryFilterBar.vue. If you rename or add collections, update both plus everycollectionfield ingallery.json. - Document your tag vocabulary (even informally) so future imports stay consistent with the chip UI.
3. Branding, copy, and site identity
index.html— Update<title>, metadescription, andtheme-colorif you change palette.src/components/AppHeader.vue— Site title in the header.src/views/GalleryView.vue— Main gallery heading and subtitle (“The Infinite Sanctuary” / Encinitas line).src/App.vue— Footer line (“Seaside Sanctuary - Encinitas coast” or equivalent).package.json—namefield still saysseaside-sanctuary; align with your npm/project identity if it matters to you.README.md— Project title and description for contributors or future you.
4. Visual design (optional customization)
tailwind.config.js—moonlight,meyer,succulent,seafoamand font stacks (Playfair Display,Source Sans 3). Swap fonts inindex.htmlGoogle Fonts link and here if you change typography.public/favicon.svg— Replace with your mark.- OG / social preview — Not present today; add meta tags in
index.html(or a small plugin) if you care about link previews.
5. Admin, AI, and security (before any public admin URL)
- Production admin access — Set
VITE_ADMIN_ACCESS_KEYin your real env (see.env.example). In production builds,/adminredirects away unless?key=matches. Pick a long random value; never commit it. - Prefer edge/network controls — Treat the query key as a thin gate only; typical secure-gallery PRDs assume Tunnel / IP / Worker rules for real protection. Decide and implement those outside this repo.
- Implementation notes — Template:
docs/IMPLEMENTATION_DECISIONS.example.md. Afternpm run init:custom, edit gitignoreddocs/IMPLEMENTATION_DECISIONS.mdwith your real hosting, storage, privacy, and AI provider choices. - Replace mock vision —
src/features/admin/vision.tsand the admin store only expose a mock provider today. When you add Gemini/OpenAI/Ollama, wire keys server-side for production; do not ship real API keys in the client bundle. - Admin copy —
src/views/AdminWorkbenchView.vueintro text still describes a scaffold; align with your real workflow.
6. Ingestion and privacy (when you move past static JSON)
- Real pipeline —
src/features/admin/ingestion.tsdrafts are illustrative (object URLs, placeholder dimensions). Replace with server-side upload, EXIF handling, scrubbing, and storage perBACKLOG.md. - “Preserve metadata” toggle — Decide policy; today it is UI state only until a backend enforces it.
7. Infrastructure and deployment
- Host — Cloudflare Pages, Vercel, or other; connect repo, set build command (
npm run build), output directorydist, Node version (see.nvmrc). - Domain and HTTPS — Point DNS; confirm TLS and redirects (www vs apex).
- Environment variables — Set
VITE_ADMIN_ACCESS_KEY(and any futureVITE_*) in the host’s dashboard for production builds only as appropriate. - CI —
.github/workflows/ci.ymlruns on PRs; enable branch protection if you want required checks.
8. Legal, analytics, and polish
- Privacy policy / terms — Add pages or external links if you collect data or use third-party AI.
- Analytics — Add only if you want them; not in the app today.
- Contact or about — Add if visitors need a way to reach you.
9. After you change headings or behavior (automated tests)
- E2E smoke test —
tests/e2e/gallery-smoke.spec.tsasserts the exact gallery heading text. If you rename it, update the test. - Run locally before deploy
npm run check
npx playwright install chromium # once per machine
npm run test:e2e
Quick reference: files that usually change together
| What you change | Primary files |
|---|---|
| All photos and metadata | src/data/gallery.json (local override) or src/data/gallery.defaults.json; files under public/ (e.g. public/gallery/user/) or your CDN |
| Collection list | src/types/gallery.ts, src/components/GalleryFilterBar.vue, every asset in your active manifest |
| Site name / hero copy | index.html, AppHeader.vue, GalleryView.vue, App.vue |
| Colors / fonts | tailwind.config.js, index.html (fonts), src/assets/main.css if used |
| Admin gate secret | .env (local), host env vars (prod), .env.example (placeholder name only) |
When every item you care about is checked off for your launch bar, you are in good shape to ship.