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
84 lines
3.6 KiB
HTML
84 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<!--
|
|
Static fallback title + Open Graph defaults (#521).
|
|
|
|
The runtime SPA updates these once React loads, and social-crawler
|
|
User-Agents hitting /gallery/<slug> get a per-event rich preview
|
|
served by backend's galleryOgService instead of this static shell.
|
|
|
|
But the third path — link previews fetched by WhatsApp Business
|
|
API, Twilio, LinkPreview, or any service that caches metadata
|
|
with a non-crawler UA — gets *this* HTML as-is. Defaulting the
|
|
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.
|
|
-->
|
|
<title>%VITE_DEFAULT_TITLE%</title>
|
|
<meta name="description" content="%VITE_DEFAULT_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 name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="%VITE_DEFAULT_TITLE%" />
|
|
<meta name="twitter:description" content="%VITE_DEFAULT_DESCRIPTION%" />
|
|
|
|
<!-- Pre-React theme bootstrap (#358).
|
|
The browser may paint the very first frame before our inline
|
|
<script> below runs, so we set OS-preference defaults via CSS
|
|
here in <head> — that gets applied before any paint. The
|
|
script then layers a per-gallery cache hit on top when one is
|
|
available. Without this CSS, the very first frame on first-
|
|
visit dark-OS devices flashed white briefly (see Rekoo-PS's
|
|
frame f1 in the issue). -->
|
|
<style>
|
|
html, body { background-color: #fafafa; }
|
|
@media (prefers-color-scheme: dark) {
|
|
html, body { background-color: #171717; }
|
|
}
|
|
/* Smooth out the cache → API theme transition for the rare case
|
|
where the cached colour drifts from the freshly fetched theme. */
|
|
html { transition: background-color 200ms ease; }
|
|
</style>
|
|
|
|
<script>
|
|
/*
|
|
* Pre-React theme bootstrap (#358).
|
|
*
|
|
* The CSS @media block above handles the OS-preference default
|
|
* before paint. This script then applies a per-gallery cached
|
|
* background (written by ThemeContext on the previous visit) so
|
|
* revisits land on the exact theme background from frame one.
|
|
*/
|
|
(function () {
|
|
try {
|
|
var m = location.pathname.match(/\/gallery\/([^\/?#]+)/);
|
|
var bg = null;
|
|
if (m && m[1]) {
|
|
bg = localStorage.getItem('gallery-theme-bg-' + decodeURIComponent(m[1]));
|
|
}
|
|
if (bg) {
|
|
var root = document.documentElement;
|
|
root.style.backgroundColor = bg;
|
|
document.body && (document.body.style.backgroundColor = bg);
|
|
root.style.setProperty('--color-background', bg);
|
|
}
|
|
} catch (e) { /* never block render on a cache miss */ }
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|