Skip to content

fix(og): redesign the social card - #35

Open
smmariquit wants to merge 1 commit into
mainfrom
fix/og-image-redesign
Open

smmariquit wants to merge 1 commit into
mainfrom
fix/og-image-redesign

Conversation

@smmariquit

Copy link
Copy Markdown
Collaborator

The uplb.tools link preview had ten problems. The worst were these:

  • It was 1.4 MB, so WhatsApp often showed no image at all.
  • The text was small and sat on busy grass.
  • It never named a tool.
  • It had no logo or brand color.
  • A square crop (Messenger, WhatsApp, iMessage) cut the wordmark in half.
  • scripts/generate-og-image.py no longer produced the committed image.

This replaces it with public/og.jpg, a 103 KB JPEG:

  • The toolbox logo, the wordmark, "Free tools for UP Los Baños students", and chips for Room TBA (find any room or class) and Elbi GradeSim (GWA and Latin honors).
  • Brand maroon, with the campus photo as a maroon duotone around the edges.
  • The wordmark sits inside the centered 630px square, so cropped previews keep it.
  • The script asserts the output stays under 300 KB.

I updated DEFAULT_OG_IMAGE, the alt text and the press kit entry. I verified it with astro build, and dist/index.html now points og:image at /og.jpg.

Run python3 scripts/generate-og-image.py to regenerate. It only uses fonts that are committed in scripts/fonts.

https://claude.ai/code/session_01T3dKAgr7Yo2637teHP4vNU

…sApp

The old og.png was a 1.4 MB photo, too heavy for WhatsApp previews, with
small text on busy grass, no tool names, no logo, and a wordmark that a
square crop cut in half. The generator script had also drifted from the
committed image.

The new card is a 103 KB JPEG: logo, wordmark, headline and tool chips on
brand maroon, with the campus photo as a maroon duotone at the edges. The
wordmark and headline sit in the centered square so cropped previews keep
them. The script now produces exactly the committed file from fonts that
are checked in.

Claude-Session: https://claude.ai/code/session_01T3dKAgr7Yo2637teHP4vNU
@vercel

vercel Bot commented Oct 5, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
uplbtools-me Ready Ready Preview Oct 5, 2026 6:29pm UTC

Request Review

This branch was successfully deployed

1 active deployment
Preview — f19a9a36 Deployed Oct 5, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant