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
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
/// <reference types="vitest" />
|
|
// @ts-nocheck
|
|
|
|
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(), htmlTitleDefaults(process.env.NODE_ENV || 'production')],
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
manualChunks: {
|
|
'react-vendor': ['react', 'react-dom', 'react-router-dom'],
|
|
'ui-vendor': ['lucide-react', 'react-toastify'],
|
|
},
|
|
},
|
|
},
|
|
sourcemap: false,
|
|
},
|
|
test: {
|
|
environment: 'jsdom',
|
|
setupFiles: './vitest.setup.ts',
|
|
globals: true
|
|
},
|
|
server: {
|
|
port: 5173,
|
|
host: true,
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:7101',
|
|
changeOrigin: true,
|
|
},
|
|
'/photos': {
|
|
target: 'http://localhost:7101',
|
|
changeOrigin: true,
|
|
},
|
|
'/uploads': {
|
|
target: 'http://localhost:7101',
|
|
changeOrigin: true,
|
|
},
|
|
},
|
|
}
|
|
}
|
|
|
|
export default defineConfig(config as any)
|