Optimize OG images: raw cover / shared card, no per-post generation - #22
Merged
Conversation
Keeps build time flat regardless of post count (no render or file per post, so PR preview links aren't delayed and we stay well under Cloudflare's 20k-file deploy cap): - Cover posts share the raw cover as og:image; others share the single prebuilt /og-default.png - Per-post composite OG endpoint preserved but disabled (getStaticPaths returns []); documented how to re-enable, ideally with edge caching - Add article:author meta (fixes 'No author found' in link inspectors)
Deploying mlsystems with
|
| Latest commit: |
199c610
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://12958726.mlsystems.pages.dev |
| Branch Preview URL: | https://feature-og-build-optimizatio.mlsystems.pages.dev |
|
Tip |
- New ogCard frontmatter flag: when set (with a cover), the post renders a generated 1200x630 card (title over cover); otherwise raw cover / shared card - Per-post OG generation now runs ONLY for opted-in posts, so build stays flat - Checkbox shows under a cover in /write, gated by PUBLIC_OG_CARD_OPTIN (off by default) so it can be toggled centrally; short label + hover info tooltip - Round-trips via the .write-source.json sidecar like other meta
- Editor cover preview is now a 1200x630 (1.91:1) frame with object-fit:cover, so authors see the exact crop link previews will show; tip nudges 1200x630 - Article hero uses the same 1.91:1 ratio, so editor = hero = social all match - Non-ideal covers are center-cropped for display only (file unchanged, no build cost) — authors see it and can swap - Replace the broken info glyph with a native title tooltip on the whole label
…de frame - New cropCover helper: center-crops to 1200x630 via canvas so only the previewed 1.91:1 image is uploaded (og:image, hero, social all match) — no build cost - Upload and pick-existing both route through addCroppedCover - Remove button now sits outside the clipped frame via a holder wrapper
- build.format: 'file' → flat blog/x.html so URLs are /blog/x with no trailing slash (pairs with trailingSlash: 'never'); avoids Cloudflare's directory 308 - Preview-link bot posts the clean no-slash post URL - Remove tsconfig baseUrl (removed in modern TS); paths already resolve relative
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.
What this does
Removes default per-post OG image generation so build time stays flat as the blog grows — keeping the PR preview link fast and staying under Cloudflare Pages' 20k-file-per-deploy cap. Adds an opt-in for the fancy designed card when you want it.
og:image behavior
ogCard: true→ generated 1200×630 card (post title over the cover). Renders at build only for these opted-in posts./og-default.png(built once, reused by all).The opt-in checkbox (env-gated)
/write, with a hover ⓘ explaining it.PUBLIC_OG_CARD_OPTIN(off by default) so you control it centrally — set it totrueto expose the checkbox; leave unset to hide it entirely.ogCard: trueto frontmatter; round-trips via.write-source.json.Also
article:authormeta (fixes "No author found" in LinkedIn/other inspectors).Why
og:imageis just a URL in the page<head>— it never needs per-post generation. Default = zero cost; the designed card is generated only for the handful that ask for it.