Teahub green home-screen icon and the link-preview card

apple-touch-icon.png: the cup on Teahub green (#2f9e44), opaque 180x180.
og-card.png: the 1200x630 preview card (the home page hero), 15 KB.

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

gitea/custom/README.md

@@ -6,16 +6,26 @@ when it starts, so a template change needs a restart; files under `public/` are
 - `templates/home.tmpl`: the signed-out home page, Teahub = Git + Tea + Time beside the cup.
 - `templates/user/dashboard/dashboard.tmpl`: Gitea 28's dashboard with the repository list and the contribution
   heatmap moved into the sidebar.
-- `templates/custom/header.tmpl`, `templates/custom/footer.tmpl`: load `teahub.css` and `teahub.js`. Bump their
-  `?v=` when those files change, because browsers keep assets for hours.
+- `templates/base/head_opengraph.tmpl`: Gitea 28's link-preview tags. Pages that aren't a repository or a profile
+  (home, explore, sign-in) point `og:image` at the absolute URL of `og-card.png`, give its size, and ask for the large
+  card (`twitter:card`), so Discord, WhatsApp, iMessage and Slack show it. Repositories, issues and profiles keep
+  Gitea's avatars.
+- `templates/custom/header.tmpl`, `templates/custom/footer.tmpl`: load `teahub.css` and `teahub.js`, and link the
+  home-screen icon. Bump their `?v=` when those files change, because browsers keep assets for hours.
 - `public/assets/css/teahub.css`: green tea colours for Gitea's light, dark and auto themes, the name beside the
   navbar's cup, the home page and the sidebar.
 - `public/assets/js/teahub.js`: the home page's title, "Powered by Teahub", and the dashboard's Domains tab, which asks
   Tea MCP's `GET /domains` (Cloudflare Registrar) and shows exact names and suggestions with their prices.
-- `public/assets/img/`: the 🍵 mark. The SVGs draw the emoji in the reader's own emoji font. The PNGs (link previews,
-  browser tabs, phone home screens) are Noto Emoji's U+1F375 (googlefonts/noto-emoji, Apache License 2.0).
+- `public/assets/img/`: the 🍵 mark. The SVGs draw the emoji in the reader's own emoji font. The PNGs are Noto Emoji's
+  U+1F375 (googlefonts/noto-emoji, Apache License 2.0). `apple-touch-icon.png` is the cup on Teahub green (#2f9e44),
+  180×180 and opaque (iOS turns transparency black), for phone home screens. `og-card.png` is the 1200×630 link
+  preview, the home page's hero; keep it under 300 KB, because WhatsApp drops bigger preview images.
+- `src/`: the HTML those two PNGs are rendered from. Not copied to prod. To redo one: headless Chrome at 1× with the
+  page's size (`--headless=new --force-device-scale-factor=1 --window-size=1200,630 --virtual-time-budget=6000
+  --screenshot`), then quantise to 256 colours (Pillow `quantize(256, MEDIANCUT, dither NONE)`) and look at it.
 
-The two page templates are Gitea 28.0.0's with Teahub's changes. After a Gitea upgrade, compare them with the new
-release's (`gitea embedded extract --destination x 'templates/**'`) before deploying it.
+The three Gitea templates here (home, dashboard, head_opengraph) are Gitea 28.0.0's with Teahub's changes. After a
+Gitea upgrade, compare them with the new release's (`gitea embedded extract --destination x 'templates/**'`) before
+deploying it.
 
 `../sync-custom.sh` puts this directory on prod (it needs flyctl signed in to Teahub's Fly organisation).

gitea/custom/src/apple-touch-icon.html

@@ -0,0 +1,4 @@
+<!doctype html><html><head><meta charset="utf-8"><title>Teahub home-screen icon, 180x180</title><style>
+html,body{margin:0;width:180px;height:180px;overflow:hidden;background:#2f9e44}
+img{position:absolute;left:15px;top:13px;width:150px;height:150px}
+</style></head><body><img src="../public/assets/img/logo.png" alt=""></body></html>

gitea/custom/src/og-card.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html><head><meta charset="utf-8">
+<title>Teahub link preview card, 1200x630</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=block" rel="stylesheet">
+<style>
+html,body{margin:0;width:1200px;height:630px;overflow:hidden}
+body{background:#f3f9f4;color:#181c21;font-family:Inter,sans-serif;position:relative}
+.wrap{position:absolute;inset:0;display:grid;grid-template-columns:1fr 360px;align-items:center;gap:32px;padding:0 84px 0 96px}
+.brand{margin:0 0 42px;font-size:60px;font-weight:700;letter-spacing:-.045em;line-height:1}
+.eq{display:flex;align-items:baseline;white-space:nowrap;margin:0;font-size:112px;font-weight:540;line-height:.9}
+.eq>span:not(.plus),.eq em{letter-spacing:-.07em}
+.eq em{font-family:Georgia,"Times New Roman",serif;font-size:.94em;font-weight:400;letter-spacing:-.055em}
+.plus{color:#2f9e44;font-size:.64em;font-weight:560;margin-inline:.16em}
+.cup{width:360px;height:360px;display:block}
+.url{position:absolute;left:96px;bottom:56px;font-size:28px;font-weight:560;color:#2f9e44;letter-spacing:-.01em}
+</style></head><body>
+<div class="wrap"><div><h1 class="brand">Teahub</h1><div class="eq"><span>Git</span><span class="plus">+</span><span>Tea</span><span class="plus">+</span><em>Time</em></div></div><img class="cup" src="../public/assets/img/logo.png" alt=""></div>
+<div class="url">teahub.xyz</div>
+</body></html>

gitea/custom/templates/base/head_opengraph.tmpl

@@ -0,0 +1,51 @@
+{{- /* og:description - a one to two sentence description of your object, maybe it only needs at most 300 bytes */ -}}
+{{if .PageIsUserProfile}}
+	<meta property="og:title" content="{{.ContextUser.DisplayName}}">
+	<meta property="og:type" content="profile">
+	<meta property="og:image" content="{{.ContextUser.AvatarLink ctx}}">
+	<meta property="og:url" content="{{.ContextUser.HTMLURL ctx}}">
+	{{if .ContextUser.Description}}
+		<meta property="og:description" content="{{StringUtils.EllipsisString .ContextUser.Description 300}}">
+	{{end}}
+{{else if .Repository}}
+	{{if .Issue}}
+		<meta property="og:title" content="{{.Issue.Title}}">
+		<meta property="og:url" content="{{.Issue.HTMLURL ctx}}">
+		{{if .Issue.Content}}
+			<meta property="og:description" content="{{StringUtils.EllipsisString .Issue.Content 300}}">
+		{{end}}
+	{{else if or .PageIsDiff .IsViewFile}}
+		<meta property="og:title" content="{{.Title}}">
+		<meta property="og:url" content="{{ctx.AppFullLink $.Link}}">
+		{{if and .PageIsDiff .Commit}}
+			{{- $commitMessageBody := .Commit.MessageBody -}}
+			{{- if $commitMessageBody -}}
+				<meta property="og:description" content="{{StringUtils.EllipsisString $commitMessageBody 300}}">
+			{{- end -}}
+		{{end}}
+	{{else}}
+		<meta property="og:title" content="{{.Repository.Name}}">
+		<meta property="og:url" content="{{.Repository.HTMLURL ctx}}">
+		{{if .Repository.Description}}
+			<meta property="og:description" content="{{StringUtils.EllipsisString .Repository.Description 300}}">
+		{{end}}
+	{{end}}
+	<meta property="og:type" content="object">
+	{{if (.Repository.AvatarLink ctx)}}
+		<meta property="og:image" content="{{.Repository.AvatarLink ctx}}">
+	{{else}}
+		<meta property="og:image" content="{{.Repository.Owner.AvatarLink ctx}}">
+	{{end}}
+{{else}}
+	{{/* Teahub: the 1200x630 card at an absolute URL (WhatsApp needs one), its size, and the large-card layout. */}}
+	<meta property="og:title" content="{{AppName}}">
+	<meta property="og:type" content="website">
+	<meta property="og:image" content="{{ctx.AppFullLink "/assets/img/og-card.png"}}">
+	<meta property="og:image:width" content="1200">
+	<meta property="og:image:height" content="630">
+	<meta property="og:image:alt" content="Teahub: Git + Tea + Time, beside a cup of green tea">
+	<meta property="og:url" content="{{ctx.AppFullLink}}">
+	<meta property="og:description" content="{{MetaDescription}}">
+	<meta name="twitter:card" content="summary_large_image">
+{{end}}
+<meta property="og:site_name" content="{{AppName}}">

gitea/custom/templates/custom/header.tmpl

@@ -1,2 +1,3 @@
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/teahub.css?v=20261015">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍵</text></svg>">
+<link rel="apple-touch-icon" href="{{AssetUrlPrefix}}/img/apple-touch-icon.png?v=20261016">