Repository navigation
Serve the hand-drawn blog art as traced SVG - #209
Merged
Merged
Conversation
Quest-Claim: 13d52a465828ab9d
Trace 55 hand-drawn PNGs into flat colour layers on a transparent background, snapped to the site palette, and point every reference at them. tools/drawn/trace.ts replaces tools/icons/smooth.sh as the one tracer for drawings and icons, exposed as `just trace`. SVG covers are rendered to PNG at build time for og:image. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
kixelated
changed the title
kixelated
marked this pull request as ready for review
October 28, 2026 06:21
Contributor
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 36 minutes. View limit details
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
Collaborator
Author
|
Landing summary:
(Written by Opus 5.5) |
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
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.
The blog's hand-drawn diagrams and sketches are now SVG instead of PNG. They sit on a transparent background in the site palette, so each one is drawn straight onto the page at any resolution. Social cards still get a PNG.
Changes
kixelCat. Every reference now points at the SVG, includingrobotics.mdx's reuses, the frontmatter covers, andcomponents/author.astro. The PNGs are gone. Together the SVGs come to 1.4 MB against the PNGs' 7.5 MB (about 5.5x smaller), and every one is smaller than its PNG. The quic-powers grey boxes (#292929/#212121) are gone too.tools/drawn/trace.tsreplacestools/icons/smooth.sh, exposed asjust trace. It handles drawn PNGs and the existing icon SVGs (SIGMA=12 just trace --crop public/drawn/icon-*.svgreproduces the homepage icons). Each colour is taken from the drawing's flat regions and snapped to the palette (#fafafa,#00be2d,#a3a5a8, black) when it is within reach; accent and fill colours keep their own value. Each colour layer is then upscaled, blurred, thresholded, and run through potrace. TheviewBoxstays at the original pixel size, so layout does not shift.src/pages/og/[...cover].png.tsrenders each SVG cover with sharp at 1200px wide, on slate-900.global.astropointsog:imagethere. The SVG is the only committed source.sharpis now an explicit devDependency (it already came in through Astro).imagemagick,librsvg, andpotraceare in the dev shell.public/icons/README.mdandAGENTS.md(one line, written against the trimmed shape from moq-dev/moq.dev#200) point at the recipe.Choices made without asking
first-app/demo.png(screenshot),hash-tag-community/hash.pngandopen-for-business/logo-full-dark.png(logos, not drawings), andto-wasm/slide.png(pasted bitmaps, per the plan). Every filled drawing the plan names (vegeta, kixelCat, narwhal, boat, cloudflare, moqbs) traced without visible loss, so none fell back to PNG.cars2/toilet.pngandopen-for-business/bean.pnginstead of tracing them. No commit in the history has ever referenced them.#272727) is kept even though it sits close to slate. The background only absorbs its own noise. Antialiased fringes are never flat, so they never become a colour.og:imageis 1200px wide for every SVG cover, the width large cards are laid out at. The old PNG covers were their native size: kixelCat was 240px, small enough that scrapers showed it as a thumbnail.--crop). smooth.sh always cropped, which drawings can't allow. Icons re-run through the tool would get#fafafainstead of#fcfcfcfor their white, which is not visibly different. No icon was re-traced in this PR.Verification
just check,bun test,bun astro build --mode live, andbun scripts/check-og.tspass (social cards OK across 38 pages;og:imagefor e.g. cars2 ishttps://moq.dev/og/blog/cars2/queen.png, 1200x675).just devat deviceScaleFactor 1 and 2 with Playwright: quic-powerstuple-quic2andvegeta, cars2queen, open-for-businessena, and the author avatar.Follow-ups
hash.png,logo-full-dark.png) could come from their original vector sources, if any exist. Out of scope here.scripts/check-og.tscould also assert that every SVG cover has its rendered PNG. Today the build fails loudly if one is missing, which already covers it.🤖 Generated with Claude Code
(Written by Claude Opus 5.5)