Redesign shared-lesson OG card: title-forward + play/soundform#638
Merged
Conversation
The card is read at thumbnail size in chats, where the small chips (duration/level/type) and footer were illegible and duplicated the og:description below. Strip the card down to what survives shrinking: - title as hero, auto-sized (76→46) to fit 1–3 lines without colliding - "<Language> Audio Lesson" pill (states the category outright) - brand elephant + Zeeguu wordmark - a play button + full-width soundform as a wordless "listen" cue Metadata (duration, level, type) stays in og:description, which is legible at any size. Also drop the "Topic: " / "Situation: " prefix from the card title and og:title (clean_lesson_title) — clutter on a share. og:description unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
ArchLens - No architecturally relevant changes to the existing views |
It names the category, so give it more presence (34→42px + padding). Verified it still clears the wordmark for the longest language names (e.g. "Portuguese"). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
"<Language> Lesson" instead of "<Language> Audio Lesson"; the card's play button and soundform carry the "audio" meaning, so the word is redundant on the card. (og:description text keeps "audio lesson" — no soundform next to it there.) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
mircealungu
added a commit
that referenced
this pull request
May 27, 2026
Mirrors the audio-lesson previews (#637/#638) for articles shared as zeeguu.org/read/article?id=N. New public, no-auth endpoints in article.py: - GET /shared_article_preview/<id> → server-rendered OG/Twitter HTML - GET /shared_article_image/<id>.png → a 1200x630 card The card features the article's own photo full-bleed under a scrim, with the title, source, reading time (word_count/200), and CEFR level — falling back to the branded cream card when an article has no image (rendered by og_image.render_article_card). A transient image-fetch failure serves the fallback without caching it, so the photo card appears once the fetch succeeds. nginx routing for /read/article is staged separately in the ops repo. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
At the size WhatsApp/iMessage render the card, the small
▶ 5 min · A1 · Conversationchips and the footer line were illegible and duplicated theog:descriptiontext shown right below. A preview card is read in <1s at thumbnail size — only what survives shrinking belongs on it.What changed (card only;
og:descriptionunchanged)Stripped the card to its essentials:
Removed from the card: the duration/level/type chips and the footer tagline — that detail already lives, legibly, in
og:description("A 5-min Romanian audio lesson at level A1. Listen to a real conversation and pick up the words.").Also: drop the
Topic:/Situation:prefix from the card title andog:title(clean_lesson_title) — it reads as clutter on a share ("Ordering coffee…" beats "Situation: Ordering coffee…").Deploy notes
lesson_id. After deploy, clear the cache so existing lessons re-render with the new design:rm -f $ZEEGUU_DATA_FOLDER/og-images/shared-lessons/*.png?v=2) shows the new one immediately.Verified by rendering long/short/x-long and a
Situation:title via the realrender_card.🤖 Generated with Claude Code