Document the share page and check in the unfurl card source
This commit is contained in:
parent
f907210a6e
commit
8cfa141648
3 changed files with 70 additions and 0 deletions
22
README.md
22
README.md
|
|
@ -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
|
agent runs nothing. It exists only because an API key cannot mint another API
|
||||||
key. Deleting it revokes the key and breaks both functions.
|
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
|
## The printable flyer
|
||||||
|
|
||||||
`public/assets/founders-break-flyer.pdf` is a one-page US Letter flyer, linked
|
`public/assets/founders-break-flyer.pdf` is a one-page US Letter flyer, linked
|
||||||
|
|
|
||||||
BIN
design/email-header-web.png
Normal file
BIN
design/email-header-web.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
48
design/og-card.html
Normal file
48
design/og-card.html
Normal 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 / Gainesville</p>
|
||||||
|
<h1>The Founder’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>
|
||||||
Loading…
Reference in a new issue