Open
Conversation
- Image management docs, components, and utilities - Preloaded image embed, tina-image component, error state - Image metadata collection and custom field - Migration and cleanup scripts
…nents, etc. (still a WIP)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ack, fix Biome lint - Split ImageComponent into two render paths (explicit dimensions vs fill fallback) - Add min-height: 200px to fill container so it never collapses to 0 - Remove debug console.log from imageAugmentation - Fix all Biome lint errors (import sorting, formatting) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Handle TinaCloud CDN URLs (assets.tina.io) by extracting the path portion and resolving against local public/ directory - Add h-full to lightbox button so fill images have unbroken height chain Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…l URLs - Revert h-full on lightbox button (was breaking accordion layout) - Use padding-bottom: 56.25% for fill container instead of aspect-ratio (gives real height without relying on h-full chain) - Fix lightbox loader to not append query params to external URLs (TinaCloud URLs were failing to load with unknown params) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
External URLs (TinaCloud) now omit the custom loader so Next.js routes them through /_next/image, matching how inline images work. Custom loader only used for local images. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove unused ImageWithMetadata export and default export from image-metadata.tsx - Remove unused size prop from ImageErrorState (only "small" was ever used) - Remove dead ImageMetadata re-export from tina-image.tsx - Clean up scripts/README.md: remove stale preloadedImage and cleanup-backups docs - Add TinaCloud URL coupling comments to imageAugmentation.ts - Update README.md and CLAUDE.md with TinaCloud URL handling docs - Remove broken image reference from deploying-your-docs.mdx Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Migration has already been run — accordion/showcase images are converted. The script and its README docs are no longer needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace hand-rolled image dimension parser with `image-size` library - Move imageAugmentation.ts from utils/docs/navigation/ to utils/docs/ - Revert scroll-showcase changes (not part of this PR's scope) - Revert TinaImage usage in error-wrapper and navbar-logo (UI chrome) - Revert text-components.mdx copy change and README image section - Fix docs-navigation-bar.json broken indentation - Add tsconfig.tsbuildinfo to .gitignore Co-Authored-By: Claude Opus 4.6 <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.
Summary
image-sizeto eliminate Cumulative Layout Shift (CLS) for documentation imagesTinaImagecomponent with loading skeleton, error state, and optional lightboxImageMetadataobjects with auto-captured dimensions via a custom TinaCMS field/_next/imageHow it works
At build time, the server component walks the TinaCMS rich-text AST, finds
imgnodes pointing to local files inpublic/, reads their dimensions from disk using theimage-sizelibrary, and injectswidth/heightinto the AST. The client-sideImageComponentrenders with explicit dimensions when available, falling back tofillmode with a 16:9 aspect ratio container during live CMS editing or for external images.For accordion components, a new custom TinaCMS field (
ImageWithMetadataField) auto-captures image dimensions on upload in the CMS editor, storing them alongside the image path.Key files
src/utils/docs/imageAugmentation.ts- Build-time dimension injectionsrc/components/ui/tina-image.tsx- Unified image componentsrc/utils/image-path.ts- Shared path resolution utilitiestina/customFields/image-with-metadata.tsx- CMS field with auto-dimension capturesrc/components/tina-markdown/standard-elements/image.tsx- Markdown image rendererTest plan
pnpm buildto confirm no build errorspnpm lintandnpx tsc --noEmit🤖 Generated with Claude Code