Add Pebble link-preview (Open Graph) branding to logviewer

Replace the upstream per-thread og:* tags with a fixed Pebble card
(title, description, self-hosted og:image) so shared log links show
consistent branding instead of leaking recipient details. Rebrand the
page title and theme color, and ship a placeholder og.png to swap out.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013vqQJQAud7rmfykwWKJACY

Author: claude

deploy/oracle/README.md

@@ -133,6 +133,23 @@ image and injects that stylesheet as the last `<link>` in the templates, so the
 bot's message-rendering logic is untouched — only the appearance changes. Edit
 the CSS and re-run `docker compose up -d --build` to iterate on the design.
 
+### Link-preview (Open Graph) branding
+
+The Dockerfile also replaces the per-thread Open Graph tags with a fixed Pebble
+card (title, description, and image) so shared log links show consistent
+branding instead of leaking recipient details. The preview image is served from
+your own domain at `/static/img/og.png`.
+
+`logviewer/static/img/og.png` is currently a **plain placeholder**. Replace it
+with the real image (keep the same path/filename, ideally ~1200×630 PNG/JPG),
+then rebuild:
+
+```bash
+docker compose up -d --build
+```
+
+Discord caches previews, so use Discord's link or repost to refresh the embed.
+
 ## Updating later
 
 ```bash

deploy/oracle/logviewer/Dockerfile

@@ -1,14 +1,35 @@
-# Custom logviewer image: upstream logviewer + an Apple dark-mode skin.
+# Custom logviewer image: upstream logviewer + an Apple dark-mode skin and
+# Pebble link-preview (Open Graph) branding.
 #
 # We keep the upstream app and all of its message-rendering templates untouched,
-# and only overlay one extra stylesheet (applemode.css) that overrides the look.
-# The stylesheet is injected as the LAST <link> in each template so it wins the
-# CSS cascade — no template logic is modified.
+# and only overlay one extra stylesheet (applemode.css) plus replace the page
+# metadata. No template logic is modified.
 FROM ghcr.io/modmail-dev/logviewer:master
 
+# Apple dark-mode skin + the link-preview image (served at /static/img/og.png).
 COPY static/css/applemode.css /logviewer/static/css/applemode.css
+COPY static/img/og.png        /logviewer/static/img/og.png
 
-# Append the Apple stylesheet right before </head> in both page templates.
-RUN sed -i 's#</head>#    <link href="/static/css/applemode.css" type="text/css" rel="stylesheet" media="screen,projection" />\n</head>#' \
-        /logviewer/templates/base.html \
-        /logviewer/templates/logbase.html
+# Inject the Apple stylesheet, set the Pebble link-preview (Open Graph) tags,
+# and rebrand the page title. The og:* tags shown when a log link is shared
+# (e.g. in Discord) become a fixed Pebble card instead of leaking recipient
+# details — and point at our own self-hosted image so they never expire.
+RUN set -eux; \
+    for f in base.html logbase.html; do \
+        t="/logviewer/templates/$f"; \
+        # drop the upstream per-thread og:* tags and any existing theme-color
+        sed -i '/property=.og:/d; /name=.theme-color./d' "$t"; \
+        # rebrand the browser/tab title
+        sed -i 's#<title>[^<]*</title>#<title>Pebble</title>#' "$t"; \
+        # inject our stylesheet + Open Graph card just before </head>
+        sed -i 's@</head>@\
+    <link href="/static/css/applemode.css" type="text/css" rel="stylesheet" media="screen,projection" />\
+    <meta property="og:type" content="website" />\
+    <meta property="og:site_name" content="Pebble" />\
+    <meta property="og:title" content="Pebble" />\
+    <meta property="og:description" content="Pebble logs are used by Plover contributors to assist in customer support inquiries." />\
+    <meta property="og:image" content="https://pebble.getplover.com/static/img/og.png" />\
+    <meta name="twitter:card" content="summary_large_image" />\
+    <meta name="theme-color" content="#0A84FF" />\
+</head>@' "$t"; \
+    done