feat/image-component-and-proxy (#2030)

* feat(content): replace img with Image component in blog articles

* Refactor image handling and add MDX callout component

Introduce Supabase URL transformation to proxy public storage images through /api/images and update components/routes to use proxied paths. Add a reusable Callout MDX component (with styles and icons) and export it from mdx index. Wire Image into MDX content and replace inline Supabase avatar URLs with proxied API paths.

Changes were needed to avoid leaking direct Supabase storage URLs from the frontend, centralize image handling via a proxy, and provide a styled Callout component for MDX content.

* Proxy supabase image URLs through local /api/images

Replace direct Supabase public image URLs with proxied local endpoints (/api/images/...) across multiple blog article MDX files. This avoids exposing the Supabase asset host directly and enables image proxying/caching, safer refactoring, and consistent URL handling across the site.

* refactor(content): update image paths to use local API route

* fix(content): update image source for Tactiq in article

Author: ComputelessComputer

apps/web/content/articles/ai-meeting-summary-tools.mdx

@@ -4,7 +4,7 @@ meta_title: "AI Meeting Summary Tools: Top 9 Options"
 meta_description: "Find the best AI meeting summary tool for your team. Compare 9 top solutions, including free options, bot-free tools, and enterprise platforms."
 author: "John Jeong"
 created: "2025-10-06"
-coverImage: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/cover.png"
+coverImage: "/api/images/blog/ai-meeting-summary-tools/cover.png"
 published: true
 ---
 
@@ -54,7 +54,7 @@ Hyprnote is the only truly local-first AI meeting summary tool on this list. Whi
 
 **Full disclosure:** I'm a co-founder of Hyprnote, so I'll keep this as objective as possible.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-1.webp" alt="ai meeting summary platforms with customizable templates" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-1.webp" alt="ai meeting summary platforms with customizable templates" />
 
 #### How Hyprnote's Summary Generation Works
 
@@ -64,7 +64,7 @@ The summary generation happens entirely on your device. You can also connect ext
 
 #### Summary Features
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-2.webp" alt="How Hyprnote works" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-2.webp" alt="How Hyprnote works" />
 
 - **Instant summary generation:** Get your summaries within seconds of the meeting ending. No waiting around. The moment you stop recording, Hyprnote processes everything locally and delivers your summary.
 - **Customizable templates:** Create summary formats for any meeting type, including sales calls, therapy sessions, legal consultations, and team standups. Your summaries adapt to your workflow, not the other way around.
@@ -102,7 +102,7 @@ Consider upgrading to **Pro ($8/month)** when you want unlimited AI chat, custom
 
 Read AI is a cloud-based AI meeting assistant that goes beyond individual meetings to provide unified search across meetings, emails, and messages. Think of it as an intelligence layer connecting all your communication platforms.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-3.webp" alt="read ai summaries review" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-3.webp" alt="read ai summaries review" />
 
 #### How Read AI's Summary Generation Works
 
@@ -143,7 +143,7 @@ Also, check other AI Notetakers for Enterprises like Read AI.
 
 Fathom is a cloud-based AI meeting assistant that automatically generates concise meeting summaries and highlights key moments, with a generous free plan that offers unlimited recordings.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-4.webp" alt="fathom ai summaries review" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-4.webp" alt="fathom ai summaries review" />
 
 #### How Fathom's Summary Generation Works
 
@@ -181,7 +181,7 @@ You can highlight important moments during meetings with a single click, and the
 
 Jamie AI is a desktop application that transcribes meetings without joining as a bot, making it ideal for sensitive conversations where visible recording assistants aren't welcome.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-5.webp" alt="Jamie ai meeting summaries review" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-5.webp" alt="Jamie ai meeting summaries review" />
 
 #### How Jamie AI's Summary Generation Works
 
@@ -223,7 +223,7 @@ Paid plans start at **€24/user/month** (approximately $26 USD) for unlimited A
 
 Fellow is a cloud-based meeting workflow platform that emphasizes security and granular privacy controls, making it popular with organizations that need rigorous data protection.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-6.webp" alt="Fellow AI meeting summaries review" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-6.webp" alt="Fellow AI meeting summaries review" />
 
 #### How Fellow's Summary Generation Works
 
@@ -267,7 +267,7 @@ The platform stands out with its focus on internal meetings with recording permi
 
 Fireflies.ai positions itself as more than just a transcription tool. It's a conversation intelligence solution focused on analytics, searchability, and deep insights across all your meetings.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-7.webp" alt="fireflies ai meeting summaries review" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-7.webp" alt="fireflies ai meeting summaries review" />
 
 #### How Fireflies' Summary Generation Works
 
@@ -308,7 +308,7 @@ Also check: Top Fireflies AI Alternatives
 
 Otter AI is probably the most well-known AI meeting assistant, offering cloud-based meeting intelligence with real-time collaboration features and established cross-platform support.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-8.webp" alt="Otter ai meeting summaries review" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-8.webp" alt="Otter ai meeting summaries review" />
 
 #### How Otter AI's Summary Generation Works
 
@@ -350,7 +350,7 @@ Also check: Top Otter AI Alternatives
 
 Avoma is an AI-powered meeting platform specifically built for sales and customer success teams. It combines meeting intelligence with revenue operations, automatically extracting insights that matter for deal progression.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-9.webp" alt="avoma ai summaries review" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-9.webp" alt="avoma ai summaries review" />
 
 #### How Avoma's Summary Generation Works
 
@@ -391,7 +391,7 @@ After meetings, summaries sync directly to your CRM with automatic field updates
 
 MeetGeek is a cloud-based conversation intelligence platform that goes beyond basic summaries with sophisticated automation, meeting type detection, and team-level analytics.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/ai-meeting-summary-tools/summary-10.webp" alt="Meetgeek ai summaries review" />
+<Image src="/api/images/blog/ai-meeting-summary-tools/summary-10.webp" alt="Meetgeek ai summaries review" />
 
 #### How MeetGeek's Summary Generation Works
 

apps/web/content/articles/best-ai-meeting-assistant-for-taking-notes.mdx

@@ -4,7 +4,7 @@ meta_description: "Discover the best AI meeting assistants for automated note-ta
 author: "Harshika"
 created: "2025-08-04"
 published: true
-coverImage: https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_imageshttps://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-meeting-assistant-for-taking-notes//cover.png
+coverImage: /api/images/api/images/blog/best-ai-meeting-assistant-for-taking-notes//cover.png
 ---
 
 This comprehensive guide reviews the seven best AI meeting assistants for taking notes in 2025, helping you choose the right tool for automated transcription, intelligent summarization, and actionable meeting insights.
@@ -59,7 +59,7 @@ _If you're specifically looking for budget-friendly options, check out our compr
 
 This privacy-first approach makes it ideal for organizations handling sensitive information or operating under strict compliance requirements.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_imageshttps://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-meeting-assistant-for-taking-notes//hyprnote-app-mock.jpg" alt="Hyprnote app mockup"/>
+<Image src="/api/images/api/images/blog/best-ai-meeting-assistant-for-taking-notes//hyprnote-app-mock.jpg" alt="Hyprnote app mockup"/>
 
 #### About Hyprnote's AI notetaker:
 
@@ -104,7 +104,7 @@ It also offers a Pro plan with advanced search, chat functionality, and unlimite
 
 [Granola](https://granola.ai) is an AI-powered notepad designed for people who prefer taking their own notes but want intelligent assistance to make them comprehensive.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-meeting-assistant-for-taking-notes//granola.webp" alt="Granola app"/>
+<Image src="/api/images/blog/best-ai-meeting-assistant-for-taking-notes//granola.webp" alt="Granola app"/>
 
 #### About Granola's note-taking capabilities:
 
@@ -145,7 +145,7 @@ Also check: [Best Granola AI Alternatives](https://hyprnote.com/blog/granola-ai-
 
 [Otter](https://otter.ai/) is a cloud-based AI meeting assistant that automatically joins your video calls to record, transcribe, and summarize conversations.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-meeting-assistant-for-taking-notes//otter.webp" alt="Otter app"/>
+<Image src="/api/images/blog/best-ai-meeting-assistant-for-taking-notes//otter.webp" alt="Otter app"/>
 
 #### About Otter.ai's note-taking capabilities:
 
@@ -196,7 +196,7 @@ Also check: [Top Otter AI's Alternatives](https://hyprnote.com/blog/otter-ai-alt
 
 With over 16 million users and a recent $1 billion valuation, it's positioned as an enterprise-grade solution for teams that want data-driven meeting insights.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-meeting-assistant-for-taking-notes//fireflies.webp" alt="Fireflies"/>
+<Image src="/api/images/blog/best-ai-meeting-assistant-for-taking-notes//fireflies.webp" alt="Fireflies"/>
 
 #### About Fireflies.ai's note-taking capabilities:
 
@@ -242,7 +242,7 @@ Also check: [Top Fireflies AI Alternatives](https://hyprnote.com/blog/fireflies-
 
 [Krisp](https://krisp.ai/) is primarily an AI-powered noise cancellation tool that has expanded into meeting note-taking, making it unique among AI assistants.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-meeting-assistant-for-taking-notes//krisp.webp" alt="Krisp"/>
+<Image src="/api/images/blog/best-ai-meeting-assistant-for-taking-notes//krisp.webp" alt="Krisp"/>
 
 #### About Krisp's note-taking capabilities:
 
@@ -284,7 +284,7 @@ Paid plans start at $16 per user per month. Business and enterprise plans also a
 
 [Jamie AI](https://www.meetjamie.ai/) is a close Granola's substitute with a little more attention to security. It is a bot-free meeting assistant (not local like Hyprnote), built with European privacy standards and GDPR compliance.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-meeting-assistant-for-taking-notes//jamie.webp" alt="Jamie"/>
+<Image src="/api/images/blog/best-ai-meeting-assistant-for-taking-notes//jamie.webp" alt="Jamie"/>
 
 #### About Jamie AI's note-taking capabilities:
 
@@ -327,7 +327,7 @@ Contact their team for specific pricing details and custom enterprise arrangemen
 
 [Avoma](https://www.avoma.com/) is an AI meeting assistant specifically designed for sales and customer success teams, offering specialized features like deal intelligence, competitor tracking, and sales methodology scoring that go far beyond basic note-taking.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-meeting-assistant-for-taking-notes//avoma.webp" alt="Avoma"/>
+<Image src="/api/images/blog/best-ai-meeting-assistant-for-taking-notes//avoma.webp" alt="Avoma"/>
 
 #### About Avoma's AI note-taking capabilities:
 

apps/web/content/articles/best-ai-notetaker-for-in-person-meetings.mdx

@@ -4,7 +4,7 @@ meta_description: "Compare the top AI notetakers for in-person meetings. Find to
 author: "Harshika"
 created: "2025-09-03"
 published: true
-coverImage: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-notetaker-for-in-person-meetings/cover.png"
+coverImage: "/api/images/blog/best-ai-notetaker-for-in-person-meetings/cover.png"
 ---
 
 In-person meetings shouldn't mean going back to pen-and-paper note-taking. The right AI notetaker can capture every detail while you stay engaged in the conversation, but not all tools handle face-to-face meetings equally well.
@@ -50,7 +50,7 @@ The interface feels like Apple Notes but with AI superpowers. Start a meeting, a
 
 The game-changer is complete data sovereignty. Your sensitive client conversations, therapy sessions, or legal discussions never leave your device unless you explicitly choose to connect to external APIs.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-notetaker-for-in-person-meetings/inperson-1.webp" alt="Hyprnote for in person meetings" />
+<Image src="/api/images/blog/best-ai-notetaker-for-in-person-meetings/inperson-1.webp" alt="Hyprnote for in person meetings" />
 
 #### Pros:
 - Functions completely offline for both transcription and AI summarization
@@ -83,7 +83,7 @@ Hyprnote also offers an Enterprise plan for organizations that need an on-premis
 
 The system automatically deletes audio files after generating transcripts and summaries, emphasizing privacy through data minimization rather than local processing.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-notetaker-for-in-person-meetings/inperson-2.webp" alt="jamie ai for in person meetings" />
+<Image src="/api/images/blog/best-ai-notetaker-for-in-person-meetings/inperson-2.webp" alt="jamie ai for in person meetings" />
 
 #### Pros:
 - Provides speaker recognition that improves over time by learning voices
@@ -111,7 +111,7 @@ Fireflies operates through a bot system for online meetings, but shifts to mobil
 
 You might want to check out [Fireflies' bot-free alternatives](link).
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-notetaker-for-in-person-meetings/inperson-3.webp" alt="Fireflies ai for in person meetings" />
+<Image src="/api/images/blog/best-ai-notetaker-for-in-person-meetings/inperson-3.webp" alt="Fireflies ai for in person meetings" />
 
 #### Pros:
 - Dedicated mobile applications enable portable recording on phones and tablets
@@ -142,7 +142,7 @@ With MeetGeek, you can record your in-person meetings using their app, and then
 
 The platform syncs the content directly into your existing tools like Slack, HubSpot, or project management apps, reducing the manual post-meeting work.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-notetaker-for-in-person-meetings/inperson-4.webp" alt="meetgeek for in person meetings" />
+<Image src="/api/images/blog/best-ai-notetaker-for-in-person-meetings/inperson-4.webp" alt="meetgeek for in person meetings" />
 
 #### Pros:
 - Mobile applications available for iOS and Android devices
@@ -169,7 +169,7 @@ Basic plan offers 300 free minutes monthly. Pro costs $19 monthly, Business $39
 
 Otter specializes in live transcription as meetings occur, making it particularly useful for following along during active conversations. However, the platform faces significant privacy concerns, including ongoing federal litigation.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-notetaker-for-in-person-meetings/inperson-5.webp" alt="Otter ai for in person meetings" />
+<Image src="/api/images/blog/best-ai-notetaker-for-in-person-meetings/inperson-5.webp" alt="Otter ai for in person meetings" />
 
 #### Pros:
 - Mobile applications enable recording and transcription on smartphones and tablets
@@ -199,7 +199,7 @@ Also check: [Top Otter AI Alternatives](link)
 
 Granola encourages users to take notes manually during meetings, then uses AI to enhance and structure those notes after conversations end. The platform records locally but processes content in the cloud for intelligent analysis.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-notetaker-for-in-person-meetings/inperson-6.webp" alt="granola ai for in person meetings" />
+<Image src="/api/images/blog/best-ai-notetaker-for-in-person-meetings/inperson-6.webp" alt="granola ai for in person meetings" />
 
 #### Pros:
 - Mobile application available for iOS devices, enabling portable recording
@@ -226,7 +226,7 @@ Also check: [Top Granola AI Alternatives](link)
 
 Read AI focuses on analyzing meeting dynamics and participant engagement alongside traditional transcription services. The platform recently introduced mobile capabilities specifically designed for in-person meeting recording and analysis.
 
-<img src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/blog/best-ai-notetaker-for-in-person-meetings/inperson-7.webp" alt="read ai for in person meetings" />
+<Image src="/api/images/blog/best-ai-notetaker-for-in-person-meetings/inperson-7.webp" alt="read ai for in person meetings" />
 
 #### Pros:
 - iPhone application enables mobile recording with real-time transcription and summarization