wiki: auto-compile 2026-05-10 (1 log(s), 222 articles)

wiki/_master-index.md

@@ -23,7 +23,7 @@ This 3-hop pattern works for hundreds of articles without vector search.
 | [[wiki/tech-patterns/_index\|tech-patterns/]] | Recurring tech stacks: FastAPI, React/Vite, Next.js, Azure AD, AI, Box, One2Edit, Redis/Celery, cost-tracker, OMG API | 28 |
 | [[wiki/architecture/_index\|architecture/]] | Cross-cutting architectural patterns: Docker Compose, multi-agent AI, GCP timeout, RAG, hotfolder, optical-dev deploy, cost-tracker, new-project checklist, troubleshooting playbooks, ADR log, Cloud Run Jobs | 11 |
 | [[wiki/client-knowledge/_index\|client-knowledge/]] | Per-client notes for Ford, H&M, L'Oréal, Barclays, Ferrero, 3M, BAIC | 7 |
-| [[wiki/concepts/_index\|concepts/]] | Atomic knowledge extracted from Claude Code sessions | 165 |
+| [[wiki/concepts/_index\|concepts/]] | Atomic knowledge extracted from Claude Code sessions | 166 |
 | [[wiki/connections/_index\|connections/]] | Cross-cutting insights linking 2+ concepts: FastAPI+Azure AD+Docker trinity, AI→cost-tracker, Apache+Vite basePath, GCP→REST polling, Box+hotfolder, Docker DNS+AdGuard, Celery prefork×faster_whisper memory stacking | 10 |
 | [[wiki/qa/_index\|qa/]] | Filed answers to queries (saved with `--file-back`) | 0 |
 | [[wiki/homelab/_index\|homelab/]] | Self-hosted infra: Proxmox install, IOMMU/PCI passthrough, hypervisor setup, budget builds, HP Elitedesk G3, Homarr API + Apps + Boards + Certificates + Integrations + Settings + Tasks + AdGuard + Clock + Docker Stats + Docker Integration + Download Client + Firewall + Proxmox Integration + Radarr + Readarr + Sonarr + Bookmarks + Calendar + Icons + App Widget + Weather + GitHub + Nextcloud + qBittorrent + RSS Feed + Speedtest Tracker + System Health Monitoring + System Resources + Services Map + Media Stack | 43 |

wiki/concepts/_index.md

@@ -214,5 +214,6 @@
 | [[wiki/concepts/react-state-playwright-css-hover\|React useState Dropdown — CSS group-hover vs useState for Playwright]] | Playwright `hover()` on a trigger element does not reliably open a React dropdown that uses `useStat | daily/2026-05-10.md | 2026-05-10 |
 | [[wiki/concepts/overflow-hidden-clips-absolute-children\|overflow:hidden Clips Absolute/Fixed Children Regardless of z-index]] | `overflow: hidden` on a parent element **clips all descendant content at its boundary** — including  | daily/2026-05-10.md | 2026-05-10 |
 | [[wiki/concepts/figma-fig-binary-format\|Figma .fig File — Proprietary Binary Format; Assets Extractable, Layout Data Not]] | `.fig` = ZIP with proprietary binary `canvas.fig` (magic bytes `fig-kiwij`); image assets extractable via `unzip`, but layer/component/text data requires Figma REST API or Desktop | daily/2026-05-10.md | 2026-05-10 |
+| [[wiki/concepts/vite-base-url-slash-concatenation]] | `${BASE_URL}file.png` works in dev (BASE_URL="/") but breaks in prod — always use explicit slash or `new URL(file, BASE_URL).href` | daily/2026-05-10.md | 2026-05-10 |
 <!-- Articles added automatically by compile.py -->
 <!-- Format: | [[concepts/slug]] | One-line summary | daily/YYYY-MM-DD.md | date | -->

wiki/concepts/vite-base-url-slash-concatenation.md

@@ -0,0 +1,48 @@
+---
+title: Vite BASE_URL Slash Concatenation Bug
+tags: [vite, frontend, build, paths, react]
+source: daily/2026-05-10.md
+created: 2026-05-10
+---
+
+# Vite BASE_URL Slash Concatenation Bug
+
+## The Problem
+
+Template-literal concatenation of `import.meta.env.BASE_URL` with a filename silently works in dev but breaks in production.
+
+```ts
+// BUG — works in dev, fails in prod
+src={`${import.meta.env.BASE_URL}logo.png`}
+```
+
+**Why it hides in dev:** In dev mode `BASE_URL` is always `"/"`, so `"/logo.png"` is correct.  
+**Why it breaks in prod:** When `base` is set to a sub-path (e.g. `/app/`), `BASE_URL` becomes `"/app/"` — still fine. But when `base: "./"` or `base: ""` is used, `BASE_URL` is `""` or `"./"`, yielding `"logo.png"` (no leading slash) or `"./logo.png"` relative path that resolves incorrectly depending on the page route.
+
+## The Fix
+
+Always include an explicit separator, or use `URL` constructor:
+
+```ts
+// Option 1 — explicit slash (safe when BASE_URL ends with /)
+src={`${import.meta.env.BASE_URL}/logo.png`}
+
+// Option 2 — URL constructor (safest, handles all BASE_URL forms)
+src={new URL('logo.png', import.meta.env.BASE_URL).href}
+```
+
+## Real-World Case
+
+Project `barclays-banner-builder` — logo `<img>` worked in Vite dev server but 404'd after deploy:
+
+```ts
+// Before (broken in prod)
+src={`${import.meta.env.BASE_URL}copygen-barclays-logo.png`}
+
+// After (fixed)
+src={`${import.meta.env.BASE_URL}/copygen-barclays-logo.png`}
+```
+
+## Rule of Thumb
+
+Never rely on `BASE_URL` being `"/"` in dev. Always test with `base: '/subpath/'` in `vite.config.ts` to surface path bugs before deploy.

wiki/log.md

@@ -1,6 +1,13 @@
 
 # Build Log
 
+## [2026-05-11T00:45:00+01:00] compile | daily/2026-05-10.md (addendum — Vite BASE_URL slash concatenation)
+- Source: daily/2026-05-10.md
+- Articles created: [[wiki/concepts/vite-base-url-slash-concatenation]]
+- Articles updated: none
+- Index updates: [[wiki/concepts/_index]] (165→166, +1 entry)
+- Note: One concept missed in prior passes — session 16:19 barclays-banner-builder: `${BASE_URL}filename` silently works in dev (BASE_URL="/") but fails in prod when base is a sub-path or empty. Fix: always use explicit slash or `new URL(file, BASE_URL).href`. Now captured.
+
 ## [2026-05-11T00:30:00+01:00] compile | daily/2026-05-10.md (addendum — Figma .fig binary format)
 - Source: daily/2026-05-10.md
 - Articles created: [[wiki/concepts/figma-fig-binary-format]]