Paul Nothaft
b960639035
@Rekoo-PS reported that gallery URLs sent via the WhatsApp Business API render an unbranded "PicPeak - Photo Sharing Platform" preview even though manual link sends from the WhatsApp app pick up the per-event rich preview correctly. Two root causes, two fixes: 1. WhatsApp Business and 3rd-party preview services (Twilio, LinkPreview.net, etc.) don't always crawl with the recognisable "WhatsApp/X.Y.Z" UA we matched in nginx + galleryOgService. Extend the regex (both copies) to also catch WhatsAppBot, wa-bot, LinkPreview, and Slack-ImgProxy. 2. Even with broader UA coverage, some senders cache metadata with no UA at all and fetch the static SPA shell. That shell's <title> was hard-coded to "PicPeak - Photo Sharing Platform" — embarrassingly generic for any self-hosted brand. Switch to Vite's %VITE_DEFAULT_TITLE% / %VITE_DEFAULT_DESCRIPTION% HTML substitution so self-hosters can bake their brand into the fallback at build time. Defaults stay "PicPeak" so the upstream image doesn't change behaviour for anyone. The per-event rich preview path (handleGalleryOgRequest, fired on matched crawler UAs) is unchanged — this only improves the fallback for unrecognised UAs and for the SPA-shell title that humans see in their browser tab. Adds a vite.config plugin to provide the defaults when env vars aren't set, so unsubstituted "%VITE_..." literals never reach the built HTML. Adds .env.example entries explaining the override. Tests: extend galleryOgService.shareImage.test.js with an isSocialCrawler suite that pins every documented UA (incl. the new ones) plus three browser UAs (negative) and null/empty edge cases. Verified locally: `vite build` with VITE_DEFAULT_TITLE="MyBrand" produces <title>MyBrand</title> + og:title="MyBrand"; without the env var falls back to "PicPeak". Refs: #521
35 lines
1.6 KiB
Bash
35 lines
1.6 KiB
Bash
# Static HTML fallback for social-link previews (#521).
|
|
#
|
|
# Most link previews (WhatsApp, Facebook, Slack, etc.) hit the backend's
|
|
# per-event OG endpoint and get the actual event name + branding. Some
|
|
# third-party preview services and the WhatsApp Business API cache
|
|
# metadata with a non-crawler User-Agent and end up reading these static
|
|
# values instead. Set these to your brand so that fallback isn't generic
|
|
# "PicPeak - Photo Sharing Platform".
|
|
#
|
|
# These are baked into index.html at build time, so they take effect on
|
|
# the next `npm run build` / docker build. Live admin Branding settings
|
|
# do NOT propagate here — for that, use the per-event OG endpoint, which
|
|
# always serves the live branded preview.
|
|
VITE_DEFAULT_TITLE=PicPeak
|
|
VITE_DEFAULT_DESCRIPTION=Photo gallery shared with PicPeak.
|
|
|
|
# Backend API URL
|
|
# For local development with Docker:
|
|
VITE_API_URL=http://localhost:3001/api
|
|
|
|
# For local development without Docker:
|
|
# VITE_API_URL=http://localhost:3001
|
|
|
|
# For production behind reverse proxy (Traefik, nginx, etc):
|
|
# VITE_API_URL=/api
|
|
|
|
# Umami Analytics Configuration (OPTIONAL - Fallback only)
|
|
# NOTE: Primary Umami configuration should be done through Admin UI > Settings > Analytics
|
|
# These environment variables serve as fallbacks when backend settings are not available
|
|
# Useful for: development environments, initial setup, or when backend is unavailable
|
|
#
|
|
# Example values:
|
|
# VITE_UMAMI_URL=https://analytics.example.com
|
|
# VITE_UMAMI_WEBSITE_ID=abc123def-4567-89ab-cdef-0123456789ab
|
|
# VITE_UMAMI_SHARE_URL=https://analytics.example.com/share/xyz789/wedding-photos |