Skip to content

Commit 9419f98

Browse files
bsc2fastbsc2fast
committed
Rich social card: 1200x630 OG image replaces the bare lab logo
Chat apps rendered og:image (the raw black_logo_circle.png) as a giant full-width logo. Point og:image at a generated 1200x630 branded card and switch to summary_large_image, plus site_name/alt/locale/canonical and matching twitter:* tags. og-card.html is the card's source; regenerate with the headless-Chrome command in its header.
1 parent 46f3c8d commit 9419f98

4 files changed

Lines changed: 99 additions & 6 deletions

File tree

‎README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,28 @@ This repo is intentionally tiny. It's a single page that embeds the **gated Apps
66

77
```
88
index.html full-bleed <iframe> of the Apps Script /exec URL + splash
9+
og-card.html source for og-image.png (1200×630)
10+
og-image.png social share card, served at /og-image.png
911
CNAME status.ahlab.org
1012
manifest.webmanifest PWA metadata
1113
```
1214

15+
## The social card
16+
17+
Pasting the URL into WhatsApp/Slack/iMessage renders `og-image.png` — a 1200×630
18+
branded card, not the bare lab logo (which chat apps blow up to full width). Edit
19+
`og-card.html`, then regenerate:
20+
21+
```bash
22+
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
23+
--headless=new --hide-scrollbars --window-size=1200,630 \
24+
--screenshot="og-image.png" "$(pwd)/og-card.html"
25+
```
26+
27+
Chat apps cache previews aggressively — after deploying, re-scrape via the
28+
[Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) or append
29+
a throwaway `?v=2` to the URL to see the new card.
30+
1331
## Why an iframe and not fetch()
1432

1533
A domain-gated Apps Script app needs the visitor's Google session to enforce the `@ahlab.org` gate; a cross-origin background `fetch()` from a static origin can't carry it. The iframe does — and inside it the dashboard talks to its server via `google.script.run` (Apps Script's internal bridge, not a cross-origin request), so **there is no CORS**.

‎index.html‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,26 @@
66
<title>AHL · System Status</title>
77
<meta name="description" content="Live health of every Augmented Human Lab service — sites, Apps Script apps, deployments and upstream providers.">
88

9-
<!-- Open Graph / social preview -->
10-
<meta property="og:title" content="AHL · System Status">
11-
<meta property="og:description" content="Live health of every Augmented Human Lab service.">
9+
<link rel="canonical" href="https://status.ahlab.org/">
10+
11+
<!-- Open Graph / social preview. og-image.png is generated from og-card.html;
12+
see that file's header for the regeneration command. -->
1213
<meta property="og:type" content="website">
13-
<meta property="og:url" content="https://status.ahlab.org">
14-
<meta property="og:image" content="https://cdn.ahlab.org/media/site/black_logo_circle.png">
15-
<meta name="twitter:card" content="summary">
14+
<meta property="og:site_name" content="Augmented Human Lab">
15+
<meta property="og:title" content="AHL · System Status">
16+
<meta property="og:description" content="Live health of every Augmented Human Lab service — sites, Apps Script apps, deployments and upstream providers.">
17+
<meta property="og:url" content="https://status.ahlab.org/">
18+
<meta property="og:image" content="https://status.ahlab.org/og-image.png">
19+
<meta property="og:image:width" content="1200">
20+
<meta property="og:image:height" content="630">
21+
<meta property="og:image:alt" content="AHL System Status — live health of every Augmented Human Lab service">
22+
<meta property="og:locale" content="en_SG">
23+
24+
<!-- Twitter / X -->
25+
<meta name="twitter:card" content="summary_large_image">
26+
<meta name="twitter:title" content="AHL · System Status">
27+
<meta name="twitter:description" content="Live health of every Augmented Human Lab service — sites, Apps Script apps, deployments and upstream providers.">
28+
<meta name="twitter:image" content="https://status.ahlab.org/og-image.png">
1629

1730
<!-- PWA / icons -->
1831
<link rel="manifest" href="manifest.webmanifest">

‎og-card.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Source for og-image.png (1200×630 social-share card).
4+
Regenerate after editing:
5+
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
6+
--headless=new --hide-scrollbars --window-size=1200,630 \
7+
--screenshot="og-image.png" "$(pwd)/og-card.html"
8+
-->
9+
<html lang="en">
10+
<head>
11+
<meta charset="UTF-8">
12+
<style>
13+
* { margin: 0; padding: 0; box-sizing: border-box; }
14+
html, body { width: 1200px; height: 630px; overflow: hidden; }
15+
body {
16+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
17+
background:
18+
radial-gradient(70% 90% at 0% 0%, rgba(0,215,238,0.22), transparent 60%),
19+
radial-gradient(70% 90% at 100% 100%, rgba(97,0,255,0.30), transparent 60%),
20+
#0E0F11;
21+
color: #fff;
22+
display: flex;
23+
align-items: center;
24+
padding: 0 84px;
25+
gap: 58px;
26+
}
27+
.icon {
28+
flex: 0 0 auto;
29+
width: 264px; height: 264px;
30+
border-radius: 56px;
31+
background: #fff;
32+
padding: 38px;
33+
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
34+
}
35+
.icon img { width: 100%; height: 100%; display: block; }
36+
.copy { display: flex; flex-direction: column; gap: 18px; }
37+
.eyebrow {
38+
font-size: 27px; font-weight: 600; letter-spacing: 0.16em;
39+
text-transform: uppercase; color: #00D7EE;
40+
}
41+
h1 { font-size: 104px; font-weight: 800; line-height: 0.94; letter-spacing: -0.025em; }
42+
.accent {
43+
height: 10px; width: 190px; border-radius: 999px; margin: 4px 0 2px;
44+
background: linear-gradient(90deg, #00D7EE 0%, #6100FF 100%);
45+
}
46+
p { font-size: 34px; font-weight: 500; color: rgba(255,255,255,0.88); line-height: 1.3; }
47+
.url { font-size: 28px; font-weight: 600; color: rgba(255,255,255,0.62); margin-top: 8px; }
48+
</style>
49+
</head>
50+
<body>
51+
<div class="icon">
52+
<img src="https://cdn.ahlab.org/media/site/black_logo_circle.png" alt="AHL">
53+
</div>
54+
<div class="copy">
55+
<div class="eyebrow">Augmented Human Lab</div>
56+
<h1>System<br>Status</h1>
57+
<div class="accent"></div>
58+
<p>Live health of every AHL service — sites,<br>Apps Script apps, deployments &amp; upstream.</p>
59+
<div class="url">status.ahlab.org</div>
60+
</div>
61+
</body>
62+
</html>

‎og-image.png‎

144 KB
Loading

0 commit comments

Comments
 (0)