fix(brand-title): runtime substitution so GHCR-image users can override (#521 follow-up)
@Rekoo-PS confirmed the prior #521 fix landed on beta but reported the preview still shows the default "PicPeak" title — their brand is "arkan-studio". Root cause: that fix used Vite's build-time %VITE_DEFAULT_TITLE% substitution. Self-hosters running the pre-built ghcr.io/the-luap/picpeak/frontend image can't override at build time without rebuilding, so they were stuck with whatever the upstream build baked in. Pivot to runtime substitution: the frontend container now reads BRAND_TITLE / BRAND_DESCRIPTION env vars on startup and envsubsts them into index.html. Change the values in .env, restart the frontend service, done — no rebuild required. Mechanics: - frontend/index.html: tokens are now ${BRAND_TITLE} / ${BRAND_DESCRIPTION} (shell expansion syntax, passes through Vite unchanged into the built dist). - frontend/Dockerfile: install gettext (provides envsubst), snapshot /usr/share/nginx/html/index.html → index.html.tpl at build, install docker-entrypoint.sh, wire ENTRYPOINT to it. The .tpl is the immutable source — every container start re-renders index.html from .tpl, so restarts pick up new env values cleanly (no accidental "first-boot env stuck forever" trap). - frontend/docker-entrypoint.sh: applies defaults if env unset, runs envsubst (locked to BRAND_TITLE + BRAND_DESCRIPTION explicitly so /assets/*.js template literals aren't touched if anyone ever extends substitution to the bundle), execs nginx. - frontend/vite.config.ts: drop the htmlTitleDefaults plugin — no longer needed since substitution is fully runtime. - frontend/.env.example + .env.production.example: drop the VITE_DEFAULT_* docs (the vars no longer have effect). - docker-compose.yml + docker-compose.production.yml: pass BRAND_TITLE / BRAND_DESCRIPTION env into the frontend service with sensible defaults so unconfigured installs work unchanged. - .env.example: add BRAND_TITLE / BRAND_DESCRIPTION with comment pointing at the social-preview use case. Verified end-to-end against the built image: - BRAND_TITLE="Arkan Studio" BRAND_DESCRIPTION="Wedding photographs by Arkan Studio" → index.html serves <title>Arkan Studio</title> + og:title="Arkan Studio" + og:description correctly substituted. - .tpl preserves ${...} tokens so the next restart can re-substitute. - Bundle assets unaffected. - Defaults applied when env unset → <title>PicPeak</title>. Docs PR in picpeak-docs describes the two new env vars under "Social link preview fallback" in the environment-variables reference. Refs: #521
This commit is contained in:
+17
-11
@@ -17,20 +17,26 @@
|
||||
title to "PicPeak - Photo Sharing Platform" left every such
|
||||
preview looking unbranded for self-hosted installs.
|
||||
|
||||
Self-hosters set VITE_DEFAULT_TITLE / VITE_DEFAULT_DESCRIPTION
|
||||
at build time (see .env.example) to bake their brand into this
|
||||
fallback. Default values keep the upstream-image behaviour for
|
||||
anyone who doesn't override them.
|
||||
${BRAND_TITLE} / ${BRAND_DESCRIPTION} are replaced at *container
|
||||
start* by the frontend image's docker-entrypoint.sh (envsubst on
|
||||
an index.html.tpl snapshot taken at image build). That keeps the
|
||||
tokens working even for self-hosters running the pre-built GHCR
|
||||
image — set BRAND_TITLE in compose env and the next container
|
||||
restart picks it up. No frontend rebuild needed.
|
||||
|
||||
Vite dev server doesn't run the entrypoint, so dev mode shows the
|
||||
literal tokens in the tab title — acceptable since dev sessions
|
||||
don't care about social previews.
|
||||
-->
|
||||
<title>%VITE_DEFAULT_TITLE%</title>
|
||||
<meta name="description" content="%VITE_DEFAULT_DESCRIPTION%" />
|
||||
<title>${BRAND_TITLE}</title>
|
||||
<meta name="description" content="${BRAND_DESCRIPTION}" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="%VITE_DEFAULT_TITLE%" />
|
||||
<meta property="og:title" content="%VITE_DEFAULT_TITLE%" />
|
||||
<meta property="og:description" content="%VITE_DEFAULT_DESCRIPTION%" />
|
||||
<meta property="og:site_name" content="${BRAND_TITLE}" />
|
||||
<meta property="og:title" content="${BRAND_TITLE}" />
|
||||
<meta property="og:description" content="${BRAND_DESCRIPTION}" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="%VITE_DEFAULT_TITLE%" />
|
||||
<meta name="twitter:description" content="%VITE_DEFAULT_DESCRIPTION%" />
|
||||
<meta name="twitter:title" content="${BRAND_TITLE}" />
|
||||
<meta name="twitter:description" content="${BRAND_DESCRIPTION}" />
|
||||
|
||||
<!-- Pre-React theme bootstrap (#358).
|
||||
The browser may paint the very first frame before our inline
|
||||
|
||||
Reference in New Issue
Block a user