feat: add Takumi renderer support#414
Merged
Merged
Conversation
Adds Takumi as an alternative rendering engine for OG images. Takumi is a Rust-based renderer that directly rasterizes to PNG/JPEG/WebP without SVG intermediates, offering 2-10x faster rendering compared to Satori+Resvg. New files: - bindings/takumi/node.ts - Node.js binding - bindings/takumi/wasm.ts - WASM binding for edge runtimes - takumi/instances.ts - Lazy-loaded renderer instance - takumi/nodes.ts - HTML to Takumi node converter - takumi/renderer.ts - Main renderer implementation Features: - Native Tailwind CSS support via `tw` prop - Direct PNG/JPEG/WebP output (no SVG intermediate) - Variable font support - COLR emoji support - RTL text support Configuration: - Set renderer: 'takumi' in defineOgImage() or module defaults - Supports node and wasm bindings based on runtime environment Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Collaborator
Author
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. 🤖 Generated with Claude Code - If this code review was useful, please react with 👍. Otherwise, react with 👎. |
- Add @ts-expect-error for optional dependencies (@takumi-rs/core, @takumi-rs/wasm, linkedom) - Use `any` types for external Renderer class to avoid missing type declarations - Add @ts-expect-error for virtual module imports (#og-image/bindings/takumi, #og-image/renderers/takumi) - Add @ts-expect-error for runtime hook (nuxt-og-image:takumi:nodes) - Fix potential undefined access in nodes.ts with optional chaining - Remove webp from supportedFormats (not in extension types) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add takumi page fixture with basic example - Add e2e test that conditionally runs when @takumi-rs/core is available - Test skips gracefully when takumi packages not installed Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix linkedom HTML parsing by using document.documentElement instead of body.firstElementChild - Add TakumiTest component for e2e testing - Add image snapshot test for takumi renderer - Add @takumi-rs/core and @takumi-rs/wasm to catalog - Update trust policy exclusions for pnpm Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add comparison pages using same TakumiTest component - Generate snapshots for both renderers - Results show near-identical output for simple Tailwind components Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Rename to comparison-simple-satori/takumi for clarity - Skip NuxtSeo template test (uses hash-based URLs, prerender only) - Both renderers produce identical output for simple Tailwind components Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Shows compatibility differences: - Satori: gradient backgrounds, opacity colors, full flexbox - Takumi: limited - no gradients, opacity issues, flexbox gaps Useful for documenting current Takumi limitations vs Satori. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Documents: - Installation requirements - Pros/cons vs Satori - Supported/unsupported CSS features - Example template - Runtime compatibility table Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove console.log in skipped test - Lowercase test title for 'nuxtseo template' - Remove unused props variable in Vue components - Fix yaml key ordering in pnpm-workspace.yaml Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Closed
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.
Summary
#411
Adds Takumi as an alternative rendering engine for OG images. Takumi is a Rust-based renderer that directly rasterizes to PNG/JPEG/WebP without SVG intermediates.
twpropChanges
New files:
bindings/takumi/node.ts- Node.js bindingbindings/takumi/wasm.ts- WASM binding for edge runtimestakumi/instances.ts- Lazy-loaded renderer instancetakumi/nodes.ts- HTML to Takumi node convertertakumi/renderer.ts- Main renderer implementationtest/unit/takumiNodes.test.ts- Unit tests for node conversionModified files:
types.ts- Added takumi renderer type and optionsinstances.ts- Added useTakumiRenderer()context.ts- Added takumi case to renderer switchcompatibility.ts- Added takumi to all runtime configsUsage
Test plan
🤖 Generated with Claude Code