feat(blog): branded placeholder featured image for imageless posts (po-66l)#1645
Conversation
…o-66l) Recent posts with no frontmatter image showed a plain gradient on /blog. Add a self-contained 1200x630 SVG (PortalJS cyclone + orbiting composable-skill marks, from the 'PortalJS blog featured images' Claude Design project) and default BlogCard/FeaturedBlogPost/MiniCard to it via DEFAULT_FEATURED_IMAGE. og:image unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
7 Skipped Deployments
|
📝 WalkthroughWalkthroughAdds a new ChangesDefault featured image fallback
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: one or more packages not found in the registry. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
site/components/blog/BlogCard.tsx (1)
52-56: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueConsider
loading="lazy"on listing thumbnails.
BlogCardtypically renders many cards in a grid below the fold; addingloading="lazy"avoids eagerly fetching every card's image (including repeatedDEFAULT_FEATURED_IMAGErequests for imageless posts).♻️ Suggested addition
<img src={blog.image || DEFAULT_FEATURED_IMAGE} alt={blog.title} + loading="lazy" className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@site/components/blog/BlogCard.tsx` around lines 52 - 56, Add lazy loading to the thumbnail image in BlogCard so grid listings do not eagerly fetch every image. Update the img element that uses blog.image and DEFAULT_FEATURED_IMAGE to include a lazy-loading hint, keeping the existing alt and className behavior unchanged.site/components/blog/MiniCard.tsx (1)
42-46: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDuplicated fallback-image logic across BlogCard, FeaturedBlogPost, and MiniCard.
All three components repeat
src={blog.image || DEFAULT_FEATURED_IMAGE}with an<img alt={blog.title} className="absolute inset-0 h-full w-full object-cover ...">shell. Consider extracting a small sharedFeaturedImagecomponent acceptingimage,alt, andclassNameto consolidate the fallback logic, though each call site's sizing/hover classes differ enough that the payoff is modest.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@site/components/blog/MiniCard.tsx` around lines 42 - 46, The featured-image markup and fallback logic are duplicated across BlogCard, FeaturedBlogPost, and MiniCard, so extract a small shared FeaturedImage component to centralize the src fallback and img shell. Move the repeated image handling into that component with props for image, alt, and className, then update the existing call sites to pass their specific sizing and hover classes while reusing the shared fallback behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@site/components/blog/BlogCard.tsx`:
- Around line 52-56: Add lazy loading to the thumbnail image in BlogCard so grid
listings do not eagerly fetch every image. Update the img element that uses
blog.image and DEFAULT_FEATURED_IMAGE to include a lazy-loading hint, keeping
the existing alt and className behavior unchanged.
In `@site/components/blog/MiniCard.tsx`:
- Around line 42-46: The featured-image markup and fallback logic are duplicated
across BlogCard, FeaturedBlogPost, and MiniCard, so extract a small shared
FeaturedImage component to centralize the src fallback and img shell. Move the
repeated image handling into that component with props for image, alt, and
className, then update the existing call sites to pass their specific sizing and
hover classes while reusing the shared fallback behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 02876e07-94be-46c4-8e4a-183ed88a5fd7
⛔ Files ignored due to path filters (1)
site/public/static/img/blog/default-featured.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
site/components/blog/BlogCard.tsxsite/components/blog/FeaturedBlogPost.tsxsite/components/blog/MiniCard.tsxsite/components/blog/defaultFeaturedImage.ts
1 participant
What
Recent blog posts with no
imagein frontmatter rendered a plain gradient box on/blog. This adds a branded placeholder featured image so every post gets a proper card.site/public/static/img/blog/default-featured.svg— PortalJS cyclone mark as hero + orbiting "composable skills" marks, blue gradient, dot texture. Imported from the PortalJS blog featured images Claude Design project.DEFAULT_FEATURED_IMAGEconstant;BlogCard,FeaturedBlogPost,MiniCardnow fall back to it (blog.image || DEFAULT_FEATURED_IMAGE) instead of the gradient.Scope
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Bug Fixes