gator/founders-break
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Document the share page and check in the unfurl card source

Browse source
This commit is contained in:
Devin Willis 2026-08-26 16:04:47 -04:00
parent f907210a6e
commit 8cfa141648
No known key found for this signature in database
GPG key ID: 3776B3C5AFF3FFEA
3 changed files with 70 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
README.md
View file

@ -74,6 +74,28 @@ Both functions authenticate with a scoped `email + crm` key held by the paused
agent runs nothing. It exists only because an API key cannot mint another API
key. Deleting it revokes the key and breaks both functions.
## Sharing
`/flyer` (`views/flyer.ejs`) is the link to send someone: the poster shown as a
sheet, a download button, and the share controls. It is what the footer and the
post-RSVP confirmation both point at, rather than the raw PDF, so a share always
lands on something with context.
There is no general "share protocol". What exists is the **Web Share API**
(`navigator.share`), which on a phone opens the real OS share sheet and is the
only way to reach apps a web page cannot link to. Where `navigator.canShare`
allows files it shares the PDF itself, which is far better in a group chat than
a link; it falls back to sharing the URL, and the button stays hidden entirely on
browsers without support. Under that sit plain per-channel URLs (SMS, mailto,
WhatsApp, X, LinkedIn, Facebook) that work with no JavaScript at all, and a
copy-to-clipboard with a select-the-text fallback for in-app browsers that block
the clipboard.
`site.config.js -> images.share` is a 1200x630 unfurl card carrying the same four
facts the flyer leads with. Both `/` and `/flyer` use it for `og:image`, so a
pasted link never previews as a wordless photo. Regenerate it from
`design/og-card.html` the same way as the flyer.
## The printable flyer
`public/assets/founders-break-flyer.pdf` is a one-page US Letter flyer, linked

BIN
design/email-header-web.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

48
design/og-card.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<style>
/* 1200x630 unfurl card. This is what people actually see when the link is
pasted into a text, a Slack channel or a story, so it carries the same four
facts the flyer leads with rather than being a decorative banner. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { width: 1200px; height: 630px; background: #06060b; color: #f1f0ff;
font-family: "Inter", sans-serif; overflow: hidden; position: relative; }
.art { position: absolute; top: -40px; right: -260px; width: 900px; opacity: 0.22; }
.art img { width: 100%; display: block; }
.wrap { position: relative; padding: 64px 68px; height: 630px; display: flex; flex-direction: column; }
.kicker { font-family: "JetBrains Mono", monospace; font-size: 15px; letter-spacing: 0.2em;
text-transform: uppercase; color: #34d399; }
h1 { font-family: "Space Grotesk", sans-serif; font-size: 88px; font-weight: 700;
line-height: 0.9; letter-spacing: -0.035em; margin-top: 22px; text-transform: uppercase; }
.when { margin-top: 34px; display: flex; align-items: baseline; gap: 18px; }
.when b { font-family: "Space Grotesk", sans-serif; font-size: 40px; font-weight: 700;
letter-spacing: -0.02em; text-transform: uppercase; }
.when .t { color: #34d399; }
.foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.where { font-size: 21px; color: #c2c0d4; line-height: 1.4; }
.where strong { color: #f1f0ff; font-weight: 600; display: block; font-size: 24px; }
.free { font-family: "JetBrains Mono", monospace; font-size: 15px; letter-spacing: 0.16em;
text-transform: uppercase; color: #8b89a6; text-align: right; line-height: 1.7; }
</style>
</head>
<body>
<div class="art"><img src="email-header-web.png" alt=""></div>
<div class="wrap">
<p class="kicker">UF Startup Pool Social &nbsp;/&nbsp; Gainesville</p>
<h1>The Founder&rsquo;s<br>Break</h1>
<p class="when"><b>Every Thursday</b><b class="t">7 to 9 PM</b></p>
<div class="foot">
<p class="where"><strong>Silver Q Billiards</strong>225 W University Ave, Gainesville</p>
<p class="free">Free entry<br>18 and over</p>
</div>
</div>
</body>
</html>