Skip to content

OG card Garamond headline + whitepaper PDF cover refresh (items 1 + 2) #292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blove merged 2 commits into from
May 13, 2026
Merged

OG card Garamond headline + whitepaper PDF cover refresh (items 1 + 2) #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b08a817
feat(website): EB Garamond headline on OG card (item 2 follow-up)
blove May 13, 2026
1c067ba
chore(website): refresh whitepaper PDF covers + previews (item 1 foll…
blove May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions apps/website/public/whitepaper-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,38 @@
<body>

<!-- Cover -->
<div style="height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 80px 100px;background:linear-gradient(135deg,#fef0f3 0%,#f4f0ff 45%,#eaf3ff 70%,#e6f4ff 100%);page-break-after:always">
<div style="height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 80px 100px;background:linear-gradient(135deg, #fafbfc 0%, #eaf3ff 100%);page-break-after:always">
<div style="font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:#004090;font-weight:700;margin-bottom:24px">@ngaf/langgraph · Production Readiness Guide</div>
<h1 style="font-family:'EB Garamond',serif;font-size:52px;font-weight:800;line-height:1.1;color:#1a1a2e;margin-bottom:20px">From<br>Prototype<br>to<br>Production</h1>
<p style="font-family:'EB Garamond',serif;font-style:italic;font-size:20px;color:#555770;margin-bottom:40px">The Angular Agent Readiness Guide</p>
<div style="font-size:13px;color:#888;font-family:monospace">cacheplane.ai · 2026</div>
<div style="font-size:13px;color:#8b8fa3;font-family:monospace">cacheplane.ai · 2026</div>
</div>

<!-- TOC -->
<div style="padding:80px;page-break-after:always">
<h2 style="font-family:'EB Garamond',serif;font-size:32px;font-weight:700;color:#1a1a2e;margin-bottom:32px">Contents</h2>

<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">01</span>
<span style="flex:1">Streaming State Management</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">02</span>
<span style="flex:1">Thread Persistence</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">03</span>
<span style="flex:1">Tool-Call Rendering</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">04</span>
<span style="flex:1">Human Approval Flows</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">05</span>
<span style="flex:1">Generative UI</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">06</span>
<span style="flex:1">Deterministic Testing</span>
</div>
Expand Down
Binary file modified apps/website/public/whitepaper.pdf
View file
Open in desktop
Binary file not shown.
16 changes: 8 additions & 8 deletions apps/website/public/whitepapers/angular-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,38 @@
<body>

<!-- Cover -->
<div style="height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 80px 100px;background:linear-gradient(135deg, #eaf3ff 0%, #e6f4ff 45%, #f4f0ff 70%, #fef0f3 100%);page-break-after:always">
<div style="height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 80px 100px;background:linear-gradient(135deg, #fafbfc 0%, #eaf3ff 100%);page-break-after:always">
<div style="font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:#004090;font-weight:700;margin-bottom:24px">@ngaf/langgraph · Enterprise Guide</div>
<h1 style="font-family:'EB Garamond',serif;font-size:52px;font-weight:800;line-height:1.1;color:#1a1a2e;margin-bottom:20px">The<br>Enterprise<br>Guide<br>to<br>Agent<br>Streaming<br>in<br>Angular</h1>
<p style="font-family:'EB Garamond',serif;font-style:italic;font-size:20px;color:#555770;margin-bottom:40px">Ship LangGraph agents in Angular — without building the plumbing</p>
<div style="font-size:13px;color:#888;font-family:monospace">cacheplane.ai · 2026</div>
<div style="font-size:13px;color:#8b8fa3;font-family:monospace">cacheplane.ai · 2026</div>
</div>

<!-- TOC -->
<div style="padding:80px;page-break-after:always">
<h2 style="font-family:'EB Garamond',serif;font-size:32px;font-weight:700;color:#1a1a2e;margin-bottom:32px">Contents</h2>

<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">01</span>
<span style="flex:1">The Last-Mile Problem</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">02</span>
<span style="flex:1">The agent() API</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">03</span>
<span style="flex:1">Thread Persistence & Memory</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">04</span>
<span style="flex:1">Interrupt & Approval Flows</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">05</span>
<span style="flex:1">Full LangGraph Feature Coverage</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">06</span>
<span style="flex:1">Deterministic Testing</span>
</div>
Expand Down
Binary file modified apps/website/public/whitepapers/angular.pdf
View file
Open in desktop
Binary file not shown.
14 changes: 7 additions & 7 deletions apps/website/public/whitepapers/chat-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,34 @@
<body>

<!-- Cover -->
<div style="height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 80px 100px;background:linear-gradient(135deg, #f3e8ff 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%);page-break-after:always">
<div style="height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 80px 100px;background:linear-gradient(135deg, #fafbfc 0%, #f3e8ff 100%);page-break-after:always">
<div style="font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:#004090;font-weight:700;margin-bottom:24px">@ngaf/chat · Enterprise Guide</div>
<h1 style="font-family:'EB Garamond',serif;font-size:52px;font-weight:800;line-height:1.1;color:#1a1a2e;margin-bottom:20px">The<br>Enterprise<br>Guide<br>to<br>Agent<br>Chat<br>Interfaces<br>in<br>Angular</h1>
<p style="font-family:'EB Garamond',serif;font-style:italic;font-size:20px;color:#555770;margin-bottom:40px">Production agent chat UI in days, not sprints</p>
<div style="font-size:13px;color:#888;font-family:monospace">cacheplane.ai · 2026</div>
<div style="font-size:13px;color:#8b8fa3;font-family:monospace">cacheplane.ai · 2026</div>
</div>

<!-- TOC -->
<div style="padding:80px;page-break-after:always">
<h2 style="font-family:'EB Garamond',serif;font-size:32px;font-weight:700;color:#1a1a2e;margin-bottom:32px">Contents</h2>

<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">01</span>
<span style="flex:1">The Sprint Tax</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">02</span>
<span style="flex:1">Batteries-Included Components</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">03</span>
<span style="flex:1">Theming & Design System Integration</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">04</span>
<span style="flex:1">Generative UI in Chat</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">05</span>
<span style="flex:1">Debug Tooling</span>
</div>
Expand Down
Binary file modified apps/website/public/whitepapers/chat.pdf
View file
Open in desktop
Binary file not shown.
14 changes: 7 additions & 7 deletions apps/website/public/whitepapers/render-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,34 @@
<body>

<!-- Cover -->
<div style="height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 80px 100px;background:linear-gradient(135deg, #e8f5e9 0%, #eaf3ff 45%, #f4f0ff 70%, #fef0f3 100%);page-break-after:always">
<div style="height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:80px 80px 100px;background:linear-gradient(135deg, #fafbfc 0%, #e8f5e9 100%);page-break-after:always">
<div style="font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:#004090;font-weight:700;margin-bottom:24px">@ngaf/render · Enterprise Guide</div>
<h1 style="font-family:'EB Garamond',serif;font-size:52px;font-weight:800;line-height:1.1;color:#1a1a2e;margin-bottom:20px">The<br>Enterprise<br>Guide<br>to<br>Generative<br>UI<br>in<br>Angular</h1>
<p style="font-family:'EB Garamond',serif;font-style:italic;font-size:20px;color:#555770;margin-bottom:40px">Agents that render UI — without coupling to your frontend</p>
<div style="font-size:13px;color:#888;font-family:monospace">cacheplane.ai · 2026</div>
<div style="font-size:13px;color:#8b8fa3;font-family:monospace">cacheplane.ai · 2026</div>
</div>

<!-- TOC -->
<div style="padding:80px;page-break-after:always">
<h2 style="font-family:'EB Garamond',serif;font-size:32px;font-weight:700;color:#1a1a2e;margin-bottom:32px">Contents</h2>

<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">01</span>
<span style="flex:1">The Coupling Problem</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">02</span>
<span style="flex:1">Declarative UI Specs & the json-render Standard</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">03</span>
<span style="flex:1">The Component Registry</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">04</span>
<span style="flex:1">Streaming JSON Patches</span>
</div>
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;color:#444">
<div style="display:flex;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid #e6e8ee;font-size:15px;color:#555770">
<span style="font-family:monospace;font-size:11px;color:#004090;font-weight:700;min-width:24px">05</span>
<span style="flex:1">State Management & Computed Functions</span>
</div>
Expand Down
Binary file modified apps/website/public/whitepapers/render.pdf
View file
Open in desktop
Binary file not shown.
66 changes: 66 additions & 0 deletions apps/website/scripts/instance-garamond.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
"""
Generate apps/website/src/app/EBGaramond-Bold.ttf from the upstream EB
Garamond variable font.

Why this script exists:
- Satori (the engine behind Next.js ImageResponse) crashes on variable-weight
TTFs with "Cannot read properties of undefined (reading '256')".
- Google Fonts only serves Garamond as woff2, which Satori also can't decode.
- So we instance the upstream variable font to a single weight (Bold, 700)
and strip the now-unused variable-font tables, producing a static TTF
Satori parses cleanly.

The output is committed to the repo and consumed by
apps/website/src/app/opengraph-image.tsx at request time.

Usage:
pip install --user fonttools
python3 apps/website/scripts/instance-garamond.py

Re-run if the upstream font is updated.
"""
import os
import tempfile
import urllib.request

from fontTools.ttLib import TTFont
from fontTools.varLib.instancer import instantiateVariableFont

UPSTREAM_URL = "https://github.com/google/fonts/raw/main/ofl/ebgaramond/EBGaramond%5Bwght%5D.ttf"
TARGET_WEIGHT = 700
OUTPUT_PATH = os.path.join(
os.path.dirname(os.path.dirname(os.path.abspath(__file__))),
"src",
"app",
"EBGaramond-Bold.ttf",
)


def main() -> None:
print(f"Downloading variable TTF from {UPSTREAM_URL}")
with tempfile.NamedTemporaryFile(suffix=".ttf", delete=False) as tmp:
with urllib.request.urlopen(UPSTREAM_URL) as response:
tmp.write(response.read())
src_path = tmp.name

try:
print(f"Instancing to wght={TARGET_WEIGHT}")
font = TTFont(src_path)
static = instantiateVariableFont(font, {"wght": TARGET_WEIGHT})

# Drop variable-font tables that no longer serve a purpose and that
# Satori doesn't need. Shaves ~300KB off the file.
for tag in ("STAT", "fvar", "MVAR", "HVAR"):
if tag in static:
del static[tag]

print(f"Writing {OUTPUT_PATH}")
static.save(OUTPUT_PATH)
size_kb = os.path.getsize(OUTPUT_PATH) // 1024
print(f"Done — {size_kb} KB")
finally:
os.unlink(src_path)


if __name__ == "__main__":
main()
Loading
Loading