feat(web): add OSS Friends page #2037
Conversation
- Add new OSS Friends page at /oss-friends route - Use content-collections for managing OSS friends data - Implement 3xn grid layout with og-image/logo, title, and description - Add 12 initial OSS friends: OpenStatus, Cal.com, Documenso, Formbricks, Infisical, Dub, Papermark, Trigger.dev, Unkey, Hanko, Inbox Zero, Eraser - Include 'Want to be listed?' section with GitHub issue link Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ 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 a new public content collection Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 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)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (10)
✅ Files skipped from review due to trivial changes (3)
🚧 Files skipped from review as they are similar to previous changes (6)
⏰ 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). (6)
🔇 Additional comments (1)
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: 0
🧹 Nitpick comments (5)
apps/web/content-collections.ts (1)
495-514: ossFriends collection wiring looks solid; consider URL validationThe new
ossFriendscollection (Line 495–Line 514) is consistent with the rest of the content model, and adding it tocollections(Line 577–Line 591) cleanly exposes it to consumers likeallOssFriends.One improvement you might consider:
- Enforce URL shape for
hrefto catch typos early:- href: z.string(), + href: z.string().url(),This keeps author mistakes in MDX front matter from surfacing as broken external links.
Also applies to: 577-591
apps/web/src/routes/_view/oss-friends.tsx (4)
9-39: Route and head metadata are coherent; watch for URL driftThe
createFileRouteconfiguration andheadmetadata look good and should integrate fine with the rest of the app. One minor thing to keep in mind:og:urlis hardcoded tohttps://hyprnote.com/oss-friendswhile the route path is"/_view/oss-friends". If there’s a canonical public path different from the internal route, this is fine; otherwise, consider centralizing or reusing a single source of truth for the canonical URL so it doesn’t drift over time.
41-75: Consider adding a<main>landmark for better accessibilityThe page’s primary content is wrapped in generic
<div>containers. For improved semantics and screen reader navigation, consider wrapping the main content (fromHeroSectionthroughJoinSection) in a<main>element instead of a plain<div>, or turning the inner container into<main>.
77-128: Friends grid implementation is clean; consider explicit orderingThe
FriendsSectionmapping overallOssFriendsis straightforward and usescncorrectly with an array for class groups. The card structure, fallback icon whenimageis missing, and external link handling all look solid.If you care about stable display order (e.g., alphabetically by
nameor by a futurepriorityfield), consider adding an explicit sort before themapso the layout doesn’t depend on collection emission order.
130-157: JoinSection CTA is clear; optional polish on issue templateThe GitHub CTA link is straightforward and pre-fills title/body, which is nice. If you later add an issue template for OSS friends, you might want to update the URL to point at a dedicated template, but the current implementation is perfectly serviceable as-is.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
apps/web/content-collections.ts(2 hunks)apps/web/content/oss-friends/cal.mdx(1 hunks)apps/web/content/oss-friends/documenso.mdx(1 hunks)apps/web/content/oss-friends/dub.mdx(1 hunks)apps/web/content/oss-friends/eraser.mdx(1 hunks)apps/web/content/oss-friends/formbricks.mdx(1 hunks)apps/web/content/oss-friends/hanko.mdx(1 hunks)apps/web/content/oss-friends/inbox-zero.mdx(1 hunks)apps/web/content/oss-friends/infisical.mdx(1 hunks)apps/web/content/oss-friends/openstatus.mdx(1 hunks)apps/web/content/oss-friends/papermark.mdx(1 hunks)apps/web/content/oss-friends/trigger.mdx(1 hunks)apps/web/content/oss-friends/unkey.mdx(1 hunks)apps/web/src/routes/_view/oss-friends.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{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.tsxapps/web/content-collections.ts
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Agent implementations should use TypeScript and follow the established architectural patterns defined in the agent framework
Agent communication should use defined message protocols and interfaces
Files:
apps/web/content-collections.ts
🧠 Learnings (1)
📚 Learning: 2025-11-30T05:42:31.014Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/api/AGENTS.md:0-0
Timestamp: 2025-11-30T05:42:31.014Z
Learning: Use infisical export to manage environment variables for the API application, exporting secrets from the dev environment to a .env file at apps/api/.env with secret overriding disabled
Applied to files:
apps/web/content/oss-friends/infisical.mdx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/oss-friends.tsx (2)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)packages/utils/src/cn.ts (1)
cn(20-22)
⏰ 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). (6)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: Devin
- GitHub Check: fmt
- GitHub Check: ci
🔇 Additional comments (12)
apps/web/content/oss-friends/inbox-zero.mdx (1)
1-6: Content structure looks good.apps/web/content/oss-friends/openstatus.mdx (1)
1-6: Content structure consistent with other entries.apps/web/content/oss-friends/eraser.mdx (1)
1-6: Metadata complete and consistent.apps/web/content/oss-friends/documenso.mdx (1)
1-6: Metadata complete and formatted correctly.apps/web/content/oss-friends/hanko.mdx (1)
1-6: All fields present and properly formatted.apps/web/content/oss-friends/infisical.mdx (1)
1-6: Metadata complete and properly structured.apps/web/content/oss-friends/papermark.mdx (1)
1-6: Content properly formatted and complete.apps/web/content/oss-friends/trigger.mdx (1)
1-6: Metadata complete and consistent.apps/web/content/oss-friends/formbricks.mdx (1)
1-6: Formbricks front matter is consistent with the ossFriends schema
name,description,href, andimageare all present and well-formed; this entry should work cleanly with the new collection and route.apps/web/content/oss-friends/dub.mdx (1)
1-6: Dub entry front matter looks goodAll required fields are present and align with the ossFriends schema; the OG image endpoint should render nicely in the card layout.
apps/web/content/oss-friends/cal.mdx (1)
1-6: Cal.com front matter is valid and on-brandMetadata matches the expected schema and will plug into the grid without issues.
apps/web/content/oss-friends/unkey.mdx (1)
1-6: Unkey front matter aligns with the new collection contractAll fields required by the ossFriends schema are present and look accurate.
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
- Add new OSS Friends page at /oss-friends route - Use content-collections for managing OSS friends data - Implement 3xn grid layout with og-image/logo, title, and description - Add 12 initial OSS friends: OpenStatus, Cal.com, Documenso, Formbricks, Infisical, Dub, Papermark, Trigger.dev, Unkey, Hanko, Inbox Zero, Eraser - Include 'Want to be listed?' section with GitHub issue link Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
ComputelessComputer
force-pushed
the
devin/1764567730-oss-friends
branch
from
4d42797 to
0a681a7
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/web/content-collections.ts (1)
495-515: Consider adding MDX compilation for consistency and future-proofing.The
ossFriendscollection doesn't compile MDX content, unlike all other collections in this file. While this may be intentional since the current MDX files only contain frontmatter, it creates an inconsistency and limits future extensibility.If OSS friend entries ever need body content (e.g., detailed descriptions, feature lists, or usage notes), the content won't be processed without MDX compilation.
Apply this diff to add MDX compilation consistent with other collections:
- transform: async (document) => { + transform: async (document, context) => { + const mdx = await compileMDX(context, document, { + remarkPlugins: [remarkGfm, mdxMermaid], + rehypePlugins: [ + rehypeSlug, + [ + rehypeAutolinkHeadings, + { + behavior: "wrap", + properties: { + className: ["anchor"], + }, + }, + ], + ], + }); + const slug = document._meta.path.replace(/\.mdx$/, ""); return { ...document, + mdx, slug, }; },apps/web/content/oss-friends/eraser.mdx (1)
1-7: Ensure AVIF image format has appropriate fallback handling.The image uses AVIF format, which has strong modern browser support (93%+ globally as of Dec 2025). However, the current implementation relies on @unpic/react's automatic format negotiation without explicit fallbacks. Consider implementing fallback sources (WebP, JPEG) via
<Source>components within a<picture>element to ensure compatibility with older browsers or CDN limitations.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/web/src/routeTree.gen.tsis excluded by!**/*.gen.ts
📒 Files selected for processing (21)
apps/web/content-collections.ts(2 hunks)apps/web/content/oss-friends/cal.mdx(1 hunks)apps/web/content/oss-friends/documenso.mdx(1 hunks)apps/web/content/oss-friends/dub.mdx(1 hunks)apps/web/content/oss-friends/eraser.mdx(1 hunks)apps/web/content/oss-friends/formbricks.mdx(1 hunks)apps/web/content/oss-friends/hanko.mdx(1 hunks)apps/web/content/oss-friends/inbox-zero.mdx(1 hunks)apps/web/content/oss-friends/infisical.mdx(1 hunks)apps/web/content/oss-friends/logto.mdx(1 hunks)apps/web/content/oss-friends/n8n.mdx(1 hunks)apps/web/content/oss-friends/novu.mdx(1 hunks)apps/web/content/oss-friends/openstatus.mdx(1 hunks)apps/web/content/oss-friends/papermark.mdx(1 hunks)apps/web/content/oss-friends/plausible.mdx(1 hunks)apps/web/content/oss-friends/posthog.mdx(1 hunks)apps/web/content/oss-friends/supabase.mdx(1 hunks)apps/web/content/oss-friends/trigger.mdx(1 hunks)apps/web/content/oss-friends/twenty.mdx(1 hunks)apps/web/content/oss-friends/unkey.mdx(1 hunks)apps/web/src/routes/_view/oss-friends.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (7)
- apps/web/content/oss-friends/posthog.mdx
- apps/web/content/oss-friends/supabase.mdx
- apps/web/content/oss-friends/logto.mdx
- apps/web/content/oss-friends/plausible.mdx
- apps/web/content/oss-friends/novu.mdx
- apps/web/content/oss-friends/n8n.mdx
- apps/web/content/oss-friends/unkey.mdx
🚧 Files skipped from review as they are similar to previous changes (9)
- apps/web/src/routes/_view/oss-friends.tsx
- apps/web/content/oss-friends/formbricks.mdx
- apps/web/content/oss-friends/trigger.mdx
- apps/web/content/oss-friends/dub.mdx
- apps/web/content/oss-friends/inbox-zero.mdx
- apps/web/content/oss-friends/infisical.mdx
- apps/web/content/oss-friends/papermark.mdx
- apps/web/content/oss-friends/cal.mdx
- apps/web/content/oss-friends/documenso.mdx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Agent implementations should use TypeScript and follow the established architectural patterns defined in the agent framework
Agent communication should use defined message protocols and interfaces
Files:
apps/web/content-collections.ts
**/*.{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/content-collections.ts
⏰ 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-storybook
- GitHub Check: Header rules - hyprnote-storybook
- GitHub Check: Pages changed - hyprnote-storybook
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: fmt
- GitHub Check: ci
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
🔇 Additional comments (3)
apps/web/content/oss-friends/twenty.mdx (1)
1-7: LGTM!The frontmatter is schema-compliant with all required fields present. The metadata accurately represents the Twenty CRM project.
apps/web/content/oss-friends/openstatus.mdx (1)
1-7: LGTM!The frontmatter is schema-compliant and correctly configured. Using a dynamic OG image endpoint is a good practice for ensuring fresh images.
apps/web/content-collections.ts (1)
591-591: LGTM!The
ossFriendscollection is correctly registered in the collections array.
…to devin/1764567730-oss-friends Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
feat(web): add OSS Friends page
Summary
Adds a new OSS Friends page at
/oss-friendssimilar to OpenBB, OpenStatus, and Cap.so.The page uses content-collections to manage OSS friends data, with each friend defined in a separate MDX file containing name, description, href, github URL, and optional og-image URL. The layout is a 3-column grid where each card displays the og-image at the top, followed by the project name, description, and GitHub link.
Current list includes 19 projects: Cal.com, Documenso, Dub, Eraser, Formbricks, Hanko, Inbox Zero, Infisical, Logto, n8n, Novu, OpenStatus, Papermark, Plausible, PostHog, Supabase, Trigger.dev, Twenty, and Unkey.
Updates since last revision
githubfield to schema (required) - each project now links to its GitHub repoog:imagemeta tagsReview & Testing Checklist for Human
grid-cols-3without responsive breakpoints. Check if this causes layout issues on smaller screensRecommended test plan: Visit the Netlify preview to verify the page renders correctly with images loading, or run
pnpm -F web devlocally.Notes
apps/web/content/oss-friends/with the frontmatter schema (name, description, href, github, and optional image)