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:
2026-04-13 15:28:14 +10:00
parent 5b2a41f4e4
commit ab25af2e67
8 changed files with 142 additions and 43 deletions

View File

@@ -11,7 +11,7 @@ Publish the project to all three targets: backup, dev remotes, and Chromatic.
### Step 2 — Push to backup (everything)
Push main directly to the `backup` remote (git.richie-snitch.online/richie/ParsonsFA). This is a private repo that receives the full repo including AI tooling, memory, and working docs.
Push main directly to the `backup` remote (git.tensordesign.com.au/richie/ParsonsFA). This is a private repo that receives the full repo including AI tooling, memory, and working docs.
```bash
git push backup main
@@ -50,23 +50,43 @@ git branch -D dev-clean
**Important:** The `--force` is safe here because the stripped branch is always regenerated from main. Dev remotes never have unique commits.
### Step 4 — Deploy to Chromatic
### Step 4 — Sync assets to Gitea
Push the `brandassets/` directory to the dedicated assets repo so Chromatic can load images via external URLs.
```bash
npm run chromatic
cd /tmp
rm -rf ParsonsAssets
git clone https://richie:151fdccacf11b6190d066a7e07f6f5310b2227dd@git.tensordesign.com.au/richie/ParsonsAssets.git
rsync -a --delete <project-root>/brandassets/ /tmp/ParsonsAssets/ --exclude='.git'
cd /tmp/ParsonsAssets
git add -A
git diff --cached --quiet || git commit -m "Sync assets from main project"
git push origin main
cd <project-root>
rm -rf /tmp/ParsonsAssets
```
Run this in the background. Report the Storybook URL and build link when complete.
This step is idempotent — if nothing changed, no commit is created. Skip if you know no images were added or changed since last publish.
### Step 5 — Report
### Step 5 — Deploy to Chromatic
```bash
STORYBOOK_ASSET_BASE=https://git.tensordesign.com.au/richie/ParsonsAssets/raw/branch/main npm run chromatic
```
The `STORYBOOK_ASSET_BASE` env var tells `assetUrl()` to resolve image paths from the Gitea assets repo instead of local static files. Run this in the background. Report the Storybook URL and build link when complete.
### Step 6 — Report
Summarise what was pushed:
```
Published to all targets:
- backup → git.richie-snitch.online/richie/ParsonsFA (full)
- fa-dev → git.richie-snitch.online/richie/Parsons (stripped)
- backup → git.tensordesign.com.au/richie/ParsonsFA (full)
- fa-dev → git.tensordesign.com.au/richie/Parsons (stripped)
- sheffield → sheffield.sapiente.casa/richie/ParsonsFA (stripped)
- assets → git.tensordesign.com.au/richie/ParsonsAssets (synced)
- Chromatic → [build link]
```