feat(blog): add OG image thumbnails to blog list page#23
Merged
Conversation
Display custom OG images as thumbnails on /blog page: - Show OG image at top of each blog card - Add hover effect on images (opacity transition) - Responsive layout with proper spacing - Images are clickable links to blog posts Improves visual appeal and helps users identify content quickly.
Jing-yilin
added a commit
that referenced
this pull request
Jan 28, 2026
* fix(website): improve API key info alignment on skill detail page (#17) * chore: update install stats from skills.sh * feat(blog): add Ralph autonomous agent loop tutorial for solopreneurs (#20) (#21) * feat(blog): add Ralph autonomous agent loop tutorial for solopreneurs Add comprehensive tutorial on using Ralph, an autonomous AI agent loop with 7.9k GitHub stars, to build MVPs automatically. Includes real case study (SaaS dashboard in 24 hours), OPC Skills integration, step-by-step setup guide, and 10 GEO-optimized FAQ questions. * feat(scripts): add blog validation and creation tools Add comprehensive blog post management tools: - create-blog.py: Validate, check, and create blog posts - BLOG_GUIDELINES.md: Complete documentation for blog best practices Features: - Validate blog.json structure and required fields - Check markdown content quality (word count, headings, links) - Detect missing SEO/GEO optimization (keywords, FAQs, citations) - Create new blog post templates interactively * feat(workflows): add fast-track blog publishing with auto-merge Add automated blog publishing workflow to reduce time-to-live from 2+ days to 6 minutes: New workflow: - PR directly to main with 'blog-post' label - Auto-validates blog.json and markdown - Auto-approves and auto-merges if validation passes - Deploys to Cloudflare Workers automatically Documentation: - BLOG_PUBLISHING.md: Complete guide with 5 different publishing strategies - Comparison of workflows (Git Flow vs Fast-Track) - Implementation checklist and usage examples This allows blog posts to bypass develop branch while maintaining quality through automated validation. * feat(blog): add custom OG images for all blog posts (#22) * feat(blog): add custom OG images for all blog posts Add 5 custom OG images matching OPC pixel art branding: - 2026-01-26-ralph-og.png (Ralph autonomous agent loop) - 2026-01-24-docs-skills-og.png (Convert docs to skills) - 2026-01-23-skills-docs-og.png (Skills beat docs) - 2026-01-21-domain-hunter-og.png (Domain Hunter savings) - 2026-01-21-what-is-opc-og.png (What is OPC) All images: - 8-bit pixel art style with OPC king character - Cream/beige gradient background - Custom text for each blog topic - Date-prefixed filenames for organization - Served via GitHub raw URLs Updated blog.json with new OG image URLs for better social sharing. * fix(blog): update OG image URLs to use GitHub raw URLs Update all blog post OG image URLs to use GitHub raw instead of opc.dev domain. This ensures images work properly with the Cloudflare Worker deployment. * feat(blog): add OG image thumbnails to blog list page (#23) Display custom OG images as thumbnails on /blog page: - Show OG image at top of each blog card - Add hover effect on images (opacity transition) - Responsive layout with proper spacing - Images are clickable links to blog posts Improves visual appeal and helps users identify content quickly. * fix(blog): reduce OG image thumbnail size on blog list (#24) Limit OG image height to 200px on blog list page: - Set max-height on image container - Use object-fit: cover for consistent sizing - Center crop images with object-position - Prevents images from dominating the card Images now act as proper thumbnails instead of full-size banners. * chore: update install stats from skills.sh * blog(post): Add free AI infrastructure guide (DeepSeek + Jan + OPC Skills) Add comprehensive tutorial on building MVPs with zero API costs using: - DeepSeek OCR-2 for local document processing - Jan v3-4B for 40% improved local coding - OPC Skills for marketing and automation - Real cost breakdown: $0-15 vs $165-200 traditional approach Includes step-by-step setup guide, hardware requirements, and hybrid approach for scaling from free to paid Claude API when needed. * blog(og): Add OG image for free AI infrastructure blog post * blog(og): Add OG image for free AI infrastructure blog post * chore: update install stats from skills.sh * docs: add Star History chart to README --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.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
Add custom OG images as visual thumbnails to the blog list page (/blog), making blog posts more visually appealing and easier to scan.
Changes
Visual Updates
Technical Implementation
blog-image-linkandblog-imageCSS classesblog-contentwrapper for text contentloading="lazy" for performanceBefore & After
Before: Plain text cards with no visuals
After: Eye-catching cards with branded OG images
Benefits
Validation
✅ HTML structure updated properly
✅ CSS styling added for images
✅ Responsive layout maintained
✅ Hover effects work smoothly
Ready to merge! This completes the OG image implementation. 🚀