feat(oss-friends): add og images and improve grid layout #2176
Conversation
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughAdds image front-matter to many OSS friends MDX files and updates the oss-friends card layout/classes in Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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.
Actionable comments posted: 3
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (32)
apps/web/content/oss-friends/activepieces.mdx(1 hunks)apps/web/content/oss-friends/aptabase.mdx(1 hunks)apps/web/content/oss-friends/argos.mdx(1 hunks)apps/web/content/oss-friends/bifrost.mdx(1 hunks)apps/web/content/oss-friends/cap.mdx(1 hunks)apps/web/content/oss-friends/classroomio.mdx(1 hunks)apps/web/content/oss-friends/epicenter.mdx(1 hunks)apps/web/content/oss-friends/firecrawl.mdx(1 hunks)apps/web/content/oss-friends/formbricks.mdx(1 hunks)apps/web/content/oss-friends/ghostfolio.mdx(1 hunks)apps/web/content/oss-friends/helicone.mdx(1 hunks)apps/web/content/oss-friends/highlight.mdx(1 hunks)apps/web/content/oss-friends/hook0.mdx(1 hunks)apps/web/content/oss-friends/keephq.mdx(1 hunks)apps/web/content/oss-friends/mastra.mdx(1 hunks)apps/web/content/oss-friends/mockoon.mdx(1 hunks)apps/web/content/oss-friends/onyx.mdx(1 hunks)apps/web/content/oss-friends/openbb.mdx(1 hunks)apps/web/content/oss-friends/requestly.mdx(1 hunks)apps/web/content/oss-friends/rivet.mdx(1 hunks)apps/web/content/oss-friends/rybbit.mdx(1 hunks)apps/web/content/oss-friends/shelf.mdx(1 hunks)apps/web/content/oss-friends/sniffnet.mdx(1 hunks)apps/web/content/oss-friends/tiledesk.mdx(1 hunks)apps/web/content/oss-friends/tolgee.mdx(1 hunks)apps/web/content/oss-friends/trieve.mdx(1 hunks)apps/web/content/oss-friends/typebot.mdx(1 hunks)apps/web/content/oss-friends/voltagent.mdx(1 hunks)apps/web/content/oss-friends/webiny.mdx(1 hunks)apps/web/content/oss-friends/webstudio.mdx(1 hunks)apps/web/content/oss-friends/windmill.mdx(1 hunks)apps/web/src/routes/_view/oss-friends.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/oss-friends.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: fmt
- GitHub Check: ci
🔇 Additional comments (26)
apps/web/content/oss-friends/mastra.mdx (1)
6-6: Metadata addition looks good, but verify component integration.The image field has been added correctly to the front matter. Ensure the component that consumes these MDX files properly reads and uses the
imagefield from the front matter.apps/web/content/oss-friends/firecrawl.mdx (1)
6-6: Image URL format is appropriate.The image URL points to a PNG file, which is a web-friendly format for og:image to ensure faster loading times and better quality. Verify that the image dimensions meet Open Graph best practices.
apps/web/content/oss-friends/onyx.mdx (1)
6-6: Verify image dimensions meet OG requirements.The filename suggests this is a thumbnail image. OG images should have dimensions of at least 1,200 x 630 pixels and keep file size under 8 MB. Verify this image meets those specifications.
apps/web/content/oss-friends/windmill.mdx (1)
6-6: Verify component handles relative image paths correctly.This file uses a relative path (
/api/images/oss-friends/windmill.jpg) while all other OSS Friends files use absolute URLs. Ensure the component that consumes this metadata properly resolves relative paths, or clarify whether this inconsistency is intentional.apps/web/content/oss-friends/rybbit.mdx (1)
6-6: OG image URL appears well-constructed.The URL filename explicitly indicates this is an OpenGraph image, suggesting it's been properly prepared. Verify the image meets OG size and format requirements.
apps/web/content/oss-friends/sniffnet.mdx (1)
6-6: Metadata addition is valid.PNG format and absolute URL are correctly configured. Verify the image endpoint is accessible and meets OG requirements.
apps/web/content/oss-friends/helicone.mdx (1)
6-6: OG image URL is well-structured.The URL path explicitly indicates this is an open-graph image, suggesting it's been designed for social sharing. Verify accessibility and that dimensions meet OG best practices.
apps/web/content/oss-friends/bifrost.mdx (1)
6-6: Verify image dimensions despite "small" filename suffix.The filename includes "OG-Image-small," which may indicate non-standard dimensions. Open Graph images should have dimensions of at least 1,200 x 630 pixels. Verify this image meets the recommended specifications.
apps/web/content/oss-friends/argos.mdx (1)
6-6: Review image URL with query parameter.This image URL includes a query parameter (
?opengraph-image.17375fb1.jpg) which appears to be a cache-busting suffix. Verify whether this query string is necessary in the front matter or if it should be stripped, especially if the component processes or sanitizes these URLs.apps/web/content/oss-friends/formbricks.mdx (1)
6-6: LGTM.The image URL has been updated to the correct endpoint. This maintains consistency with the external CDN pattern used by most OSS Friends entries.
apps/web/content/oss-friends/trieve.mdx (1)
6-6: Component already handles both image URL patterns correctly.The
oss-friends.tsxcomponent properly manages theimagefield with a fallback pattern:src={friend.image || "/api/images/hyprnote/default-cover.jpg"}(line 162). It uses the Unpic image library which natively supports both external CDN URLs (likehttps://cdn.trieve.ai/trieve-og.png) and relative API paths (like/api/images/oss-friends/activepieces.jpg). Missing images gracefully fall back to a default cover image.apps/web/content/oss-friends/classroomio.mdx (1)
6-6: Metadata addition is clean and follows the OG image pattern.The image field correctly references an official OG image from ClassroomIO's CDN.
apps/web/content/oss-friends/shelf.mdx (1)
6-6: Metadata addition follows the OG image pattern and uses modern format.The image field correctly references Shelf.nu's OG image via their CDN using WebP format.
apps/web/content/oss-friends/rivet.mdx (1)
6-6: Metadata addition is clean and uses the project's own domain.The image field correctly references Rivet's OG image directly from their domain.
apps/web/content/oss-friends/cap.mdx (1)
6-6: Metadata addition is clean and follows standard OG naming convention.The image field correctly references Cap's OG image with straightforward domain-relative path.
apps/web/content/oss-friends/hook0.mdx (1)
6-6: Path format differs from other OSS Friends entries—verify runtime resolution.This entry uses a relative API path (
"/api/images/oss-friends/hook0.jpg") while all other entries use absolute external URLs. Ensure the component correctly resolves this path and the image exists at that location.apps/web/content/oss-friends/tiledesk.mdx (1)
6-6: Metadata addition follows the OG image pattern.The image field correctly references Tiledesk's OG image from their domain with a recently dated asset.
apps/web/content/oss-friends/webiny.mdx (1)
6-6: Metadata addition uses CDN with dynamic sizing.The image field correctly references Webiny's OG image via CloudFront with a width query parameter for optimization.
apps/web/content/oss-friends/ghostfolio.mdx (1)
6-6: Metadata addition follows the OG image pattern.The image field correctly references Ghostfolio's cover image from their assets directory.
apps/web/src/routes/_view/oss-friends.tsx (2)
155-155: LGTM! Card layout improvements enhance visual consistency.The styling changes improve the card layout:
h-fullensures consistent card heights across the gridshrink-0on the image container prevents squashingobject-covermaintains proper image aspect ratiosborder-tadds visual separation between image and contentflex-1andline-clamp-2ensure descriptions truncate consistentlymt-autoproperly aligns the GitHub link at the bottomThese changes create better visual hierarchy and consistent spacing.
Also applies to: 160-160, 164-164, 169-169, 179-179, 187-187
201-201: Good UX improvement with cursor-pointer.Adding
cursor-pointerto the Load More button improves user experience by making the interactive element more obvious.apps/web/content/oss-friends/typebot.mdx (1)
6-6: The image URL is valid and accessible.The URL returns HTTP 200 with proper image headers (content-type: image/png, content-length: 446185 bytes). The asset is actively served and maintained by Cloudflare, last modified on November 24, 2025. No action is required.
apps/web/content/oss-friends/highlight.mdx (1)
6-6: Image URL is currently accessible and properly configured.The URL returns HTTP 200 with correct JPEG content-type. The cache headers (
cache-control: public,max-age=31536000,immutable) indicate the asset is configured with content-addressed naming, meaning the URL will remain stable for the current content. No action needed.apps/web/content/oss-friends/keephq.mdx (1)
6-6: Image URL is currently accessible. The image athttps://assets-global.website-files.com/651fbba3d2d2f809dffbe9c5/6527e87613838166773cf896_isometric-hero-image.pngreturns HTTP/2 200. However, Webflow CDN URLs can change if the upstream site is redesigned—consider having a backup or fallback strategy if this image becomes critical to the site's functionality.apps/web/content/oss-friends/requestly.mdx (1)
6-6: The image URL is valid and publicly accessible. The image loads successfully as a Requestly hero graphic and returns proper HTTP headers. No action required.apps/web/content/oss-friends/mockoon.mdx (1)
6-6: The image URL is acceptable. Mockoon's website is active and actively maintained with recent GitHub commits (Nov 27, 2025), making this a stable, reliable external resource unlikely to change or become unavailable.
ComputelessComputer
force-pushed
the
feat/og-images-grid-layout
branch
from
f9cfcf6 to
0424831
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/content/oss-friends/bifrost.mdx (1)
6-6: Verify the component consumes the newimagefield and handle external CDN fragility.The image front matter is added with an external Webflow CDN URL. While this works, a few concerns:
- The component file (
apps/web/src/routes/_view/oss-friends.tsx) isn't provided in this review, so I cannot verify it properly reads and uses this field.- External CDN dependencies can break if the Webflow project is removed or restructured. Consider storing critical OG images in your own static asset directory (
public/or equivalent) for resilience.Please confirm:
- That the component file is updated to read and render the
imagefield from front matter.- Whether all other OSS friends MDX files in this directory have been updated with the same pattern (consistency).
- If storing images in your own CDN or static directory is feasible, to reduce long-term fragility.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (32)
apps/web/content/oss-friends/activepieces.mdx(1 hunks)apps/web/content/oss-friends/aptabase.mdx(1 hunks)apps/web/content/oss-friends/argos.mdx(1 hunks)apps/web/content/oss-friends/bifrost.mdx(1 hunks)apps/web/content/oss-friends/cap.mdx(1 hunks)apps/web/content/oss-friends/classroomio.mdx(1 hunks)apps/web/content/oss-friends/epicenter.mdx(1 hunks)apps/web/content/oss-friends/firecrawl.mdx(1 hunks)apps/web/content/oss-friends/formbricks.mdx(1 hunks)apps/web/content/oss-friends/ghostfolio.mdx(1 hunks)apps/web/content/oss-friends/helicone.mdx(1 hunks)apps/web/content/oss-friends/highlight.mdx(1 hunks)apps/web/content/oss-friends/hook0.mdx(1 hunks)apps/web/content/oss-friends/keephq.mdx(1 hunks)apps/web/content/oss-friends/mastra.mdx(1 hunks)apps/web/content/oss-friends/mockoon.mdx(1 hunks)apps/web/content/oss-friends/onyx.mdx(1 hunks)apps/web/content/oss-friends/openbb.mdx(1 hunks)apps/web/content/oss-friends/requestly.mdx(1 hunks)apps/web/content/oss-friends/rivet.mdx(1 hunks)apps/web/content/oss-friends/rybbit.mdx(1 hunks)apps/web/content/oss-friends/shelf.mdx(1 hunks)apps/web/content/oss-friends/sniffnet.mdx(1 hunks)apps/web/content/oss-friends/tiledesk.mdx(1 hunks)apps/web/content/oss-friends/tolgee.mdx(1 hunks)apps/web/content/oss-friends/trieve.mdx(1 hunks)apps/web/content/oss-friends/typebot.mdx(1 hunks)apps/web/content/oss-friends/voltagent.mdx(1 hunks)apps/web/content/oss-friends/webiny.mdx(1 hunks)apps/web/content/oss-friends/webstudio.mdx(1 hunks)apps/web/content/oss-friends/windmill.mdx(1 hunks)apps/web/src/routes/_view/oss-friends.tsx(3 hunks)
✅ Files skipped from review due to trivial changes (3)
- apps/web/content/oss-friends/argos.mdx
- apps/web/content/oss-friends/windmill.mdx
- apps/web/content/oss-friends/tolgee.mdx
🚧 Files skipped from review as they are similar to previous changes (24)
- apps/web/content/oss-friends/requestly.mdx
- apps/web/content/oss-friends/tiledesk.mdx
- apps/web/content/oss-friends/formbricks.mdx
- apps/web/content/oss-friends/webiny.mdx
- apps/web/content/oss-friends/shelf.mdx
- apps/web/src/routes/_view/oss-friends.tsx
- apps/web/content/oss-friends/cap.mdx
- apps/web/content/oss-friends/webstudio.mdx
- apps/web/content/oss-friends/classroomio.mdx
- apps/web/content/oss-friends/hook0.mdx
- apps/web/content/oss-friends/rivet.mdx
- apps/web/content/oss-friends/aptabase.mdx
- apps/web/content/oss-friends/firecrawl.mdx
- apps/web/content/oss-friends/rybbit.mdx
- apps/web/content/oss-friends/activepieces.mdx
- apps/web/content/oss-friends/voltagent.mdx
- apps/web/content/oss-friends/typebot.mdx
- apps/web/content/oss-friends/onyx.mdx
- apps/web/content/oss-friends/trieve.mdx
- apps/web/content/oss-friends/keephq.mdx
- apps/web/content/oss-friends/sniffnet.mdx
- apps/web/content/oss-friends/mastra.mdx
- apps/web/content/oss-friends/mockoon.mdx
- apps/web/content/oss-friends/openbb.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: Redirect rules - hyprnote-storybook
- GitHub Check: Header rules - hyprnote-storybook
- GitHub Check: Pages changed - hyprnote-storybook
- GitHub Check: fmt
- GitHub Check: ci
🔇 Additional comments (4)
apps/web/content/oss-friends/highlight.mdx (1)
6-6: The OG image URL is valid and properly configured.The image at
https://highlight.io/_next/static/media/meta-image.f5d10b7f.jpgis accessible (HTTP 200), correctly served asimage/jpeg, and hosted on Vercel's CDN with appropriate caching headers. The YAML syntax is correct, and the change aligns with the PR objectives.apps/web/content/oss-friends/helicone.mdx (1)
6-6: Theimagefield is properly integrated and accessible.The front-matter addition is syntactically correct and verified to be working:
- The image URL is accessible (HTTP 200) with proper PNG format and headers
- The
oss-friends.tsxcomponent reads the field at line 162:src={friend.image || "/api/images/hyprnote/default-cover.jpg"}- The component properly renders the image with fallback to a default cover
- Image size (~1.9MB) is acceptable for Open Graph usage
- Pattern is consistent with other OSS Friends entries that use external image URLs
apps/web/content/oss-friends/ghostfolio.mdx (1)
6-6: No action required—image field is properly integrated.The rendering component already consumes the
imagefield with appropriate fallback behavior (line 162 in oss-friends.tsx). The URL domain matches the project's href, and the front matter syntax is consistent with other OSS Friends entries.apps/web/content/oss-friends/epicenter.mdx (1)
6-6: Image path is correctly configured for Supabase-hosted images.The
/api/images/oss-friends/path follows the established pattern in the codebase. The API route (apps/web/src/routes/api/images.$.ts) proxies requests to Supabase Storage (https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images), so images are not stored locally. The MDX file is consistent with other oss-friends files (aider, chatwoot, drizzle, hoppscotch, pocketbase, tabby, teable, unkey, activepieces, hook0, and others) that use the same API pattern.
Overview
Changes