Add external asset hosting for Chromatic image rendering
Migrate Gitea remotes to git.tensordesign.com.au. Add assetUrl() utility that resolves image paths from Gitea ParsonsAssets repo when STORYBOOK_ASSET_BASE is set, enabling images on Chromatic-published Storybook while keeping local dev unchanged via staticDirs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -26,6 +26,68 @@ Each entry follows this structure:
|
||||
|
||||
## Sessions
|
||||
|
||||
### Session 2026-04-13 — Chromatic image hosting + Gitea domain migration
|
||||
|
||||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||||
|
||||
**Work completed:**
|
||||
- **Gitea domain migration** — updated all remotes (backup, fa-dev) and references from `git.richie-snitch.online` to `git.tensordesign.com.au`. Updated publish skill and memory files.
|
||||
- **Chromatic image hosting solution** — created `src/utils/assetUrl.ts` utility that resolves image paths via `STORYBOOK_ASSET_BASE` env var. When set (Chromatic builds), images load from Gitea ParsonsAssets repo. When empty (local dev), paths resolve via staticDirs as before.
|
||||
- **Fixed path inconsistency** — story files used `/brandassets/images/...` which only worked locally via Vite root serving, not in builds. Changed to `/images/...` (correct for staticDirs) wrapped in `assetUrl()`.
|
||||
- **Updated 4 files:** HomePage.tsx, HomePageV2.stories.tsx, HomePageV3.stories.tsx, HomePageV4.stories.tsx
|
||||
- **Updated publish skill** — added Step 4 (sync assets to Gitea) and Step 5 (Chromatic with STORYBOOK_ASSET_BASE env var)
|
||||
- **Created init script** — `scripts/init-assets-repo.sh` for one-time setup of ParsonsAssets repo on Gitea
|
||||
|
||||
**Decisions made:**
|
||||
- ParsonsAssets Gitea repo must be **public** so Chromatic clients can load images without auth
|
||||
- `/brandlogo/` SVG paths left as-is — they're small, tracked in git, and work via staticDirs in builds
|
||||
- Only `/brandassets/images/...` paths converted to `assetUrl()` — these are the large untracked binaries
|
||||
- Scripts directory gitignored (contains embedded credentials)
|
||||
|
||||
**Open questions:**
|
||||
- User needs to create ParsonsAssets repo on Gitea and run `scripts/init-assets-repo.sh` (server not reachable from dev machine)
|
||||
|
||||
**Next steps:**
|
||||
- Create public ParsonsAssets repo on git.tensordesign.com.au
|
||||
- Run init script to push 1.1GB of brand assets
|
||||
- Test `/publish` end-to-end to verify Chromatic images render
|
||||
|
||||
---
|
||||
|
||||
### Session 2026-04-12b — Homepage V3 redesign + FuneralFinder refinements
|
||||
|
||||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||||
|
||||
**Work completed:**
|
||||
- **HomePage V3 promoted to production** — story title changed from `Archive/HomePage V3` to `Pages/HomePage`
|
||||
- **FuneralFinder V3 refinements:** responsive CTA (medium on mobile, large on desktop), button text "Search Local Providers" → "Search", "Free to use" bumped from captionSm to caption, tightened location pin-to-text gap
|
||||
- **New section: "Why Use Funeral Arranger"** — text left + image right (people.png), overline + display3 heading + body copy
|
||||
- **New section: "Three ways we can help you today"** — 3 feature cards with placeholder images, headings, descriptions, outlined CTA buttons
|
||||
- **Section reorder:** partner logos carousel moved above Discover section, inherits overlap padding from FuneralFinder
|
||||
- **Background colour scheme from Figma Make:** warm-grey alternating — `#f3efea` (darkest), `#fdfbf9` (lightest), `#f8f5f1` (mid), white sections with `#f3efea` borders
|
||||
- **Overline headings** ("WHY USE FUNERAL ARRANGER", "WHAT YOU CAN DO HERE") styled in copper brand-600
|
||||
- **Card drop shadows** on three feature cards (shadow-md, removed border)
|
||||
- **Heading consistency:** all section headings unified to display3 serif; "Why Use FA" was h3, FAQ was h2 — both fixed
|
||||
- **SEO fixes:** h1 grammar ("funeral directors pricing" → "funeral director pricing"), logo section heading `<p>` → `<h2>`, `aria-labelledby` on partner section
|
||||
- **Section padding** increased from py 8/12 to 10/14 across all sections
|
||||
- **Testimonials** left-aligned with consistent 560px max-width, centred block
|
||||
- **"See more" button** added below FAQ accordion
|
||||
- **FAQ heading** changed to "Frequently Asked Questions"
|
||||
- **Logo section** changed to white bg, overline style heading, increased heading-to-logos gap
|
||||
- **Figma capture** sent to Parsons Figma file (node 6049-25005)
|
||||
|
||||
**Decisions made:**
|
||||
- Page-level warm-grey backgrounds use direct hex values (#f3efea, #fdfbf9, #f8f5f1) rather than brand tokens — brand-100 (#f7ecdf) is too golden; the Figma tones are neutral-warm
|
||||
- All section headings use display3 (Noto Serif SC) visually, rendered as semantic h2 tags
|
||||
- Three feature card buttons are outlined, text-only (no arrows)
|
||||
|
||||
**Next steps:**
|
||||
- Replace feature card placeholder images with real screenshots/illustrations
|
||||
- Wire up onClick handlers for feature card CTAs and FAQ "See more" when routing is in place
|
||||
- Consider meta title/description for production deployment
|
||||
|
||||
---
|
||||
|
||||
### Session 2026-04-12 — ComparisonPage refinements + new molecules
|
||||
|
||||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||||
|
||||
Reference in New Issue
Block a user