feat(oss-friends): add og images and improve grid layout (#2176)

ComputelessComputer · web-flow · commit a61c8902cec4 · 2025-12-09T12:47:06.000+09:00
* feat(oss-friends): add og images and improve grid layout

* docs(oss-friends): update images to local references

* fix(ui): remove unused index parameter in friends map
diff --git a/apps/web/content/oss-friends/activepieces.mdx b/apps/web/content/oss-friends/activepieces.mdx
@@ -3,4 +3,5 @@ name: Activepieces
 description: Open source, no-code, AI-first business automation tool. Alternative to Zapier, Make and Workato.
 href: https://activepieces.com
 github: https://github.com/activepieces/activepieces
+image: "/api/images/oss-friends/activepieces.jpg"
 ---
diff --git a/apps/web/content/oss-friends/aptabase.mdx b/apps/web/content/oss-friends/aptabase.mdx
@@ -3,4 +3,5 @@ name: Aptabase
 description: Analytics for Apps, open source, simple and privacy-friendly. SDKs for Swift, React Native, Electron, Flutter and many others.
 href: https://aptabase.com
 github: https://github.com/aptabase/aptabase
+image: https://aptabase.com/og.png
 ---
diff --git a/apps/web/content/oss-friends/argos.mdx b/apps/web/content/oss-friends/argos.mdx
@@ -3,4 +3,5 @@ name: Argos
 description: Open source visual testing platform. Debug tests and detect visual regressions with ease.
 href: https://argos-ci.com
 github: https://github.com/argos-ci/argos
+image: https://argos-ci.com/opengraph-image.jpg?opengraph-image.17375fb1.jpg
 ---
diff --git a/apps/web/content/oss-friends/bifrost.mdx b/apps/web/content/oss-friends/bifrost.mdx
@@ -3,4 +3,5 @@ name: Bifrost
 description: Fastest LLM gateway with adaptive load balancer, cluster mode, guardrails, 1000+ models support and less than 100 microseconds overhead at 5k RPS.
 href: https://bifrost.so
 github: https://github.com/bifrost-platform/bifrost
+image: https://uploads-ssl.webflow.com/61df4fc03520dad0264f53b7/64b5a125c89c55970defb6ea_OG-Image-small.png
 ---
diff --git a/apps/web/content/oss-friends/cap.mdx b/apps/web/content/oss-friends/cap.mdx
@@ -3,4 +3,5 @@ name: Cap
 description: Open source alternative to Loom. Lightweight, powerful, and cross-platform. Record and share securely in seconds.
 href: https://cap.so
 github: https://github.com/CapSoftware/Cap
+image: https://cap.so/og.png
 ---
diff --git a/apps/web/content/oss-friends/classroomio.mdx b/apps/web/content/oss-friends/classroomio.mdx
@@ -3,4 +3,5 @@ name: ClassroomIO
 description: Open source no-code tool that allows you to build and scale your own teaching platform with ease.
 href: https://classroomio.com
 github: https://github.com/classroomio/classroomio
+image: https://brand.cdn.clsrio.com/og/classroomio-og.png
 ---
diff --git a/apps/web/content/oss-friends/epicenter.mdx b/apps/web/content/oss-friends/epicenter.mdx
@@ -3,4 +3,5 @@ name: Epicenter
 description: Press shortcut, speak, get text. Free and open source local-first speech-to-text app.
 href: https://epicenter.so
 github: https://github.com/EpicenterHQ/epicenter
+image: "/api/images/oss-friends/epicenter.jpg"
 ---
diff --git a/apps/web/content/oss-friends/firecrawl.mdx b/apps/web/content/oss-friends/firecrawl.mdx
@@ -3,4 +3,5 @@ name: Firecrawl
 description: The Web Data API for AI. Turn entire websites into LLM-ready markdown or structured data.
 href: https://firecrawl.dev
 github: https://github.com/mendableai/firecrawl
+image: https://www.firecrawl.dev/og.png
 ---
diff --git a/apps/web/content/oss-friends/formbricks.mdx b/apps/web/content/oss-friends/formbricks.mdx
@@ -3,5 +3,5 @@ name: Formbricks
 description: Open source experience management. Create in-app surveys and collect feedback.
 href: https://formbricks.com
 github: https://github.com/formbricks/formbricks
-image: https://formbricks.com/api/og
+image: https://formbricks.com/og-image.jpg
 ---
diff --git a/apps/web/content/oss-friends/ghostfolio.mdx b/apps/web/content/oss-friends/ghostfolio.mdx
@@ -3,4 +3,5 @@ name: Ghostfolio
 description: Privacy-first, open source dashboard for your personal finances. Designed to simplify asset tracking and empower informed investment decisions.
 href: https://ghostfol.io
 github: https://github.com/ghostfolio/ghostfolio
+image: https://ghostfol.io/assets/cover.png
 ---
diff --git a/apps/web/content/oss-friends/helicone.mdx b/apps/web/content/oss-friends/helicone.mdx
@@ -3,4 +3,5 @@ name: Helicone
 description: Open source LLM observability platform. One line of code to monitor, evaluate, and experiment with your AI apps.
 href: https://www.helicone.ai
 github: https://github.com/Helicone/helicone
+image: https://www.helicone.ai/static/new-open-graph.png
 ---
diff --git a/apps/web/content/oss-friends/highlight.mdx b/apps/web/content/oss-friends/highlight.mdx
@@ -3,4 +3,5 @@ name: Highlight
 description: Open source full-stack monitoring platform. Error monitoring, session replay, logging, and distributed tracing.
 href: https://highlight.io
 github: https://github.com/highlight/highlight
+image: https://highlight.io/_next/static/media/meta-image.f5d10b7f.jpg
 ---
diff --git a/apps/web/content/oss-friends/hook0.mdx b/apps/web/content/oss-friends/hook0.mdx
@@ -3,4 +3,5 @@ name: Hook0
 description: Open-Source Webhooks-as-a-service (WaaS) that makes it easy for developers to send webhooks.
 href: https://hook0.com
 github: https://github.com/hook0/hook0
+image: "/api/images/oss-friends/hook0.jpg"
 ---
diff --git a/apps/web/content/oss-friends/keephq.mdx b/apps/web/content/oss-friends/keephq.mdx
@@ -3,4 +3,5 @@ name: KeepHQ
 description: Open-source AIOps (AI for IT operations) platform for alert management, correlation, and automation.
 href: https://keephq.dev
 github: https://github.com/keephq/keep
+image: https://assets-global.website-files.com/651fbba3d2d2f809dffbe9c5/6527e87613838166773cf896_isometric-hero-image.png
 ---
diff --git a/apps/web/content/oss-friends/mastra.mdx b/apps/web/content/oss-friends/mastra.mdx
@@ -3,4 +3,5 @@ name: Mastra
 description: The TypeScript AI agent framework. Build assistants with RAG, observability, and support for GPT-4, Claude, Gemini, and Llama.
 href: https://mastra.ai
 github: https://github.com/mastra-ai/mastra
+image: https://mastra.ai/api/og/website
 ---
diff --git a/apps/web/content/oss-friends/mockoon.mdx b/apps/web/content/oss-friends/mockoon.mdx
@@ -3,4 +3,5 @@ name: Mockoon
 description: The easiest and quickest way to design and run mock REST APIs. No remote deployment, no account required, free and open source.
 href: https://mockoon.com
 github: https://github.com/mockoon/mockoon
+image: https://mockoon.com/images/og-image.png
 ---
diff --git a/apps/web/content/oss-friends/onyx.mdx b/apps/web/content/oss-friends/onyx.mdx
@@ -3,4 +3,5 @@ name: Onyx
 description: Open-source AI chat connected to your docs, apps, and people. Build custom AI assistants with your organization's knowledge.
 href: https://onyx.app
 github: https://github.com/onyx-dot-app/onyx
+image: https://www.onyx.app/onyx-thumbnail.png
 ---
diff --git a/apps/web/content/oss-friends/openbb.mdx b/apps/web/content/oss-friends/openbb.mdx
@@ -3,4 +3,5 @@ name: OpenBB
 description: Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.
 href: https://openbb.co
 github: https://github.com/OpenBB-finance/OpenBB
+image: https://openbb.co/assets/images/ogimages/single-image/logo-og-image.png
 ---
diff --git a/apps/web/content/oss-friends/requestly.mdx b/apps/web/content/oss-friends/requestly.mdx
@@ -3,4 +3,5 @@ name: Requestly
 description: Makes frontend development cycle 10x faster with API Client, Mock Server, Intercept and Modify HTTP Requests and Session Replays.
 href: https://requestly.com
 github: https://github.com/requestly/requestly
+image: https://requestly.com/wp-content/uploads/2025/10/Requestlycom_.png
 ---
diff --git a/apps/web/content/oss-friends/rivet.mdx b/apps/web/content/oss-friends/rivet.mdx
@@ -3,4 +3,5 @@ name: Rivet
 description: Open-source solution to deploy, scale, and operate your multiplayer game with ease.
 href: https://rivet.gg
 github: https://github.com/rivet-gg/rivet
+image: https://www.rivet.dev/promo/og.png
 ---
diff --git a/apps/web/content/oss-friends/rybbit.mdx b/apps/web/content/oss-friends/rybbit.mdx
@@ -3,4 +3,5 @@ name: Rybbit
 description: Next-gen, open source, lightweight, cookieless web and product analytics for everyone.
 href: https://rybbit.io
 github: https://github.com/rybbit-io/rybbit
+image: https://rybbit.com/opengraph-image.png
 ---
diff --git a/apps/web/content/oss-friends/shelf.mdx b/apps/web/content/oss-friends/shelf.mdx
@@ -3,4 +3,5 @@ name: Shelf.nu
 description: Open Source Asset and Equipment tracking software that lets you create QR asset labels, manage and overview your assets across locations.
 href: https://shelf.nu
 github: https://github.com/Shelf-nu/shelf.nu
+image: https://cdn.prod.website-files.com/64186faca4f0a0ec048fb2dd/65fd5feaa2955c9b827c3fa2_open-graph.webp
 ---
diff --git a/apps/web/content/oss-friends/sniffnet.mdx b/apps/web/content/oss-friends/sniffnet.mdx
@@ -3,4 +3,5 @@ name: Sniffnet
 description: Open source network monitoring tool to help you easily keep track of your Internet traffic.
 href: https://sniffnet.net
 github: https://github.com/GyulyVGC/sniffnet
+image: https://sniffnet.net/assets/img/preview.png
 ---
diff --git a/apps/web/content/oss-friends/tiledesk.mdx b/apps/web/content/oss-friends/tiledesk.mdx
@@ -3,4 +3,5 @@ name: Tiledesk
 description: The innovative open-source framework for developing LLM-enabled chatbots. Empowers developers to create advanced, conversational AI agents.
 href: https://tiledesk.com
 github: https://github.com/Tiledesk/tiledesk
+image: https://tiledesk.com/wp-content/uploads/2024/11/2024-11-21-11.43.49.jpg
 ---
diff --git a/apps/web/content/oss-friends/tolgee.mdx b/apps/web/content/oss-friends/tolgee.mdx
@@ -3,4 +3,5 @@ name: Tolgee
 description: Software localization from A to Z made really easy. Open source translation management platform.
 href: https://tolgee.io
 github: https://github.com/tolgee/tolgee-platform
+image: "/api/images/oss-friends/tolgee.png"
 ---
diff --git a/apps/web/content/oss-friends/trieve.mdx b/apps/web/content/oss-friends/trieve.mdx
@@ -3,4 +3,5 @@ name: Trieve
 description: All-in-one platform for search, recommendations, RAG, and analytics offered via API.
 href: https://trieve.ai
 github: https://github.com/devflowinc/trieve
+image: https://cdn.trieve.ai/trieve-og.png
 ---
diff --git a/apps/web/content/oss-friends/typebot.mdx b/apps/web/content/oss-friends/typebot.mdx
@@ -3,4 +3,5 @@ name: Typebot
 description: Powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.
 href: https://typebot.io
 github: https://github.com/baptisteArno/typebot.io
+image: https://typebot.io/images/default-og.png
 ---
diff --git a/apps/web/content/oss-friends/voltagent.mdx b/apps/web/content/oss-friends/voltagent.mdx
@@ -3,4 +3,5 @@ name: Voltagent
 description: Open Source TypeScript framework for building AI agents with enterprise-grade capabilities and seamless integrations.
 href: https://voltagent.dev
 github: https://github.com/voltagent/voltagent
+image: https://voltagent.dev/img/social3.png
 ---
diff --git a/apps/web/content/oss-friends/webiny.mdx b/apps/web/content/oss-friends/webiny.mdx
@@ -3,4 +3,5 @@ name: Webiny
 description: Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.
 href: https://webiny.com
 github: https://github.com/webiny/webiny-js
+image: https://d1mjtaoiepp9z3.cloudfront.net/files/8lfjvh02b-01-Productcard.png?width=1596
 ---
diff --git a/apps/web/content/oss-friends/webstudio.mdx b/apps/web/content/oss-friends/webstudio.mdx
@@ -3,4 +3,5 @@ name: Webstudio
 description: Open source alternative to Webflow. Visual web development platform for building professional websites without code.
 href: https://webstudio.is
 github: https://github.com/webstudio-is/webstudio
+image: "/api/images/oss-friends/webstudio.png"
 ---
diff --git a/apps/web/content/oss-friends/windmill.mdx b/apps/web/content/oss-friends/windmill.mdx
@@ -3,4 +3,5 @@ name: Windmill
 description: Open source developer platform. Build internal tools, workflows, and data pipelines with scripts and low-code builders.
 href: https://windmill.dev
 github: https://github.com/windmill-labs/windmill
+image: "/api/images/oss-friends/windmill.jpg"
 ---
diff --git a/apps/web/src/routes/_view/oss-friends.tsx b/apps/web/src/routes/_view/oss-friends.tsx
@@ -152,20 +152,21 @@ function FriendsSection({
             target="_blank"
             rel="noopener noreferrer"
             className={cn([
-              "group flex flex-col bg-white overflow-hidden",
+              "group flex flex-col bg-white overflow-hidden h-full",
               "hover:bg-stone-50 transition-all",
+              "border-b border-neutral-200",
             ])}
           >
-            <div className="aspect-40/21 bg-neutral-100 overflow-hidden">
+            <div className="aspect-40/21 bg-neutral-100 overflow-hidden shrink-0">
               <Image
                 src={friend.image || "/api/images/hyprnote/default-cover.jpg"}
                 alt={friend.name}
-                className="w-full h-full group-hover:scale-105 transition-transform duration-300"
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                 objectFit="cover"
                 layout="fullWidth"
               />
             </div>
-            <div className="p-4 flex-1 flex flex-col">
+            <div className="p-4 flex flex-col flex-1 border-t border-neutral-200">
               <div className="flex items-start justify-between gap-2 mb-2">
                 <h3 className="text-lg font-medium text-stone-600 group-hover:text-stone-800">
                   {friend.name}
@@ -175,15 +176,15 @@ function FriendsSection({
                   className="text-lg text-neutral-400 group-hover:text-stone-600 transition-colors shrink-0"
                 />
               </div>
-              <p className="text-sm text-neutral-600 leading-relaxed mb-3">
+              <p className="text-sm text-neutral-600 leading-relaxed mb-3 flex-1 line-clamp-2">
                 {friend.description}
               </p>
               <a
                 href={friend.github}
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={(e) => e.stopPropagation()}
-                className="inline-flex items-center gap-1.5 text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+                className="inline-flex items-center gap-1.5 text-xs text-neutral-500 hover:text-neutral-700 transition-colors mt-auto"
               >
                 <Icon icon="mdi:github" className="text-sm" />
                 <span>View on GitHub</span>
@@ -197,7 +198,7 @@ function FriendsSection({
           <button
             onClick={onLoadMore}
             className={cn([
-              "inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-medium rounded-full",
+              "cursor-pointer inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-medium rounded-full",
               "border border-neutral-200 text-neutral-700",
               "bg-linear-to-t from-stone-100 to-white",
               "hover:from-stone-200 hover:to-stone-50 hover:border-stone-300 transition-all",
