fix(og): brandable static title + wider crawler UA coverage (#521)
@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
This commit is contained in:
+23
-2
@@ -1,13 +1,34 @@
|
||||
/// <reference types="vitest" />
|
||||
// @ts-nocheck
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import type { UserConfig as VitestUserConfig } from 'vitest/config'
|
||||
|
||||
// Inject defaults for the %VITE_DEFAULT_TITLE% / %VITE_DEFAULT_DESCRIPTION%
|
||||
// placeholders in index.html when the env vars aren't set (#521). Without
|
||||
// this, Vite would leave the literal "%VITE_DEFAULT_TITLE%" string in the
|
||||
// built HTML, breaking the link-preview fallback we're trying to create.
|
||||
//
|
||||
// Self-hosters override by exporting the env vars at build time
|
||||
// (typical Docker build pattern: --build-arg VITE_DEFAULT_TITLE="My Brand").
|
||||
function htmlTitleDefaults(mode: string) {
|
||||
const env = loadEnv(mode, process.cwd(), 'VITE_')
|
||||
const title = env.VITE_DEFAULT_TITLE || 'PicPeak'
|
||||
const description = env.VITE_DEFAULT_DESCRIPTION || 'Photo gallery shared with PicPeak.'
|
||||
return {
|
||||
name: 'html-title-defaults',
|
||||
transformIndexHtml(html: string) {
|
||||
return html
|
||||
.replaceAll('%VITE_DEFAULT_TITLE%', title)
|
||||
.replaceAll('%VITE_DEFAULT_DESCRIPTION%', description)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// https://vite.dev/config/
|
||||
const config: VitestUserConfig = {
|
||||
plugins: [react()],
|
||||
plugins: [react(), htmlTitleDefaults(process.env.NODE_ENV || 'production')],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
|
||||
Reference in New Issue
Block a user