feat(mdx): add Image component to MDX rendering (#2032)

Author: ComputelessComputer

apps/web/src/routes/_view/changelog/$slug.tsx

@@ -26,6 +26,7 @@ import {
   getChangelogBySlug,
   getChangelogList,
 } from "@/changelog";
+import { Image } from "@/components/image";
 import { Mermaid, Tweet } from "@/components/mdx";
 import { MockWindow } from "@/components/mock-window";
 
@@ -574,10 +575,10 @@ function ChangelogContent({ changelog }: { changelog: ChangelogWithMeta }) {
       </div>
 
       <div className="flex-1 p-6 overflow-y-auto">
-        <article className="prose prose-stone prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-8 prose-h1:mb-4 prose-h2:text-2xl prose-h2:mt-6 prose-h2:mb-3 prose-h3:text-xl prose-h3:mt-5 prose-h3:mb-2 prose-h4:text-lg prose-h4:mt-4 prose-h4:mb-2 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-img:rounded-sm prose-img:border prose-img:border-neutral-200 prose-img:my-6 max-w-none">
+        <article className="prose prose-stone prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-8 prose-h1:mb-4 prose-h2:text-2xl prose-h2:mt-6 prose-h2:mb-3 prose-h3:text-xl prose-h3:mt-5 prose-h3:mb-2 prose-h4:text-lg prose-h4:mt-4 prose-h4:mb-2 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-pre:prose-code:bg-transparent prose-pre:prose-code:border-0 prose-pre:prose-code:p-0 prose-img:rounded-sm prose-img:border prose-img:border-neutral-200 prose-img:my-6 max-w-none">
           <MDXContent
             code={changelog.mdx}
-            components={{ mermaid: Mermaid, Mermaid, Tweet }}
+            components={{ Image, img: Image, mermaid: Mermaid, Mermaid, Tweet }}
           />
         </article>
       </div>

apps/web/src/routes/_view/company-handbook/-components.tsx

@@ -14,6 +14,8 @@ import {
 } from "@hypr/ui/docs";
 import { cn } from "@hypr/utils";
 
+import { Image } from "@/components/image";
+
 export function HandbookLayout({
   doc,
   showSectionTitle = true,
@@ -99,13 +101,15 @@ function ArticleHeader({
 
 function ArticleContent({ doc }: { doc: any }) {
   return (
-    <article className="prose prose-stone prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-12 prose-h1:mb-6 prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-5 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h4:text-lg prose-h4:mt-6 prose-h4:mb-3 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-img:rounded-sm prose-img:my-8 max-w-none">
+    <article className="prose prose-stone prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-12 prose-h1:mb-6 prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-5 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h4:text-lg prose-h4:mt-6 prose-h4:mb-3 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-pre:prose-code:bg-transparent prose-pre:prose-code:border-0 prose-pre:prose-code:p-0 prose-img:rounded-sm prose-img:my-8 max-w-none">
       <MDXContent
         code={doc.mdx}
         components={{
           Accordion,
           Card,
           Columns,
+          Image,
+          img: Image,
           Info,
           Note,
           Step,

apps/web/src/routes/_view/docs/-components.tsx

@@ -17,6 +17,7 @@ import { cn } from "@hypr/utils";
 import { CtaCard } from "@/components/cta-card";
 import { DeeplinksList } from "@/components/deeplinks-list";
 import { HooksList } from "@/components/hooks-list";
+import { Image } from "@/components/image";
 import { Mermaid, Tweet } from "@/components/mdx";
 import { OpenAPIDocs } from "@/components/openapi-docs";
 
@@ -105,25 +106,27 @@ function ArticleHeader({
 
 function ArticleContent({ doc }: { doc: any }) {
   return (
-    <article className="prose prose-stone prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-12 prose-h1:mb-6 prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-5 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h4:text-lg prose-h4:mt-6 prose-h4:mb-3 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-img:rounded-sm prose-img:my-8 max-w-none">
+    <article className="prose prose-stone prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-12 prose-h1:mb-6 prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-5 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h4:text-lg prose-h4:mt-6 prose-h4:mb-3 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-pre:prose-code:bg-transparent prose-pre:prose-code:border-0 prose-pre:prose-code:p-0 prose-img:rounded-sm prose-img:my-8 max-w-none">
       <MDXContent
         code={doc.mdx}
         components={{
           Accordion,
           Card,
           Columns,
+          CtaCard,
+          DeeplinksList,
+          HooksList,
+          Image,
+          img: Image,
           Info,
           mermaid: Mermaid,
           Mermaid,
           Note,
+          OpenAPIDocs,
           Step,
           Steps,
           Tip,
           Tweet,
-          CtaCard,
-          DeeplinksList,
-          HooksList,
-          OpenAPIDocs,
         }}
       />
     </article>

apps/web/src/routes/_view/legal/$slug.tsx

@@ -2,6 +2,7 @@ import { MDXContent } from "@content-collections/mdx/react";
 import { createFileRoute, notFound } from "@tanstack/react-router";
 import { allLegals } from "content-collections";
 
+import { Image } from "@/components/image";
 import { Mermaid, Tweet } from "@/components/mdx";
 
 export const Route = createFileRoute("/_view/legal/$slug")({
@@ -57,7 +58,7 @@ function Component() {
 
           <MDXContent
             code={doc.mdx}
-            components={{ mermaid: Mermaid, Mermaid, Tweet }}
+            components={{ Image, img: Image, mermaid: Mermaid, Mermaid, Tweet }}
           />
         </article>
       </div>

apps/web/src/routes/_view/roadmap/$slug.tsx

@@ -5,6 +5,7 @@ import { allRoadmaps } from "content-collections";
 
 import { cn } from "@hypr/utils";
 
+import { Image } from "@/components/image";
 import { Mermaid, Tweet } from "@/components/mdx";
 
 export const Route = createFileRoute("/_view/roadmap/$slug")({
@@ -147,10 +148,12 @@ function Component() {
             </div>
           </header>
 
-          <div className="prose prose-stone prose-lg max-w-none prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-12 prose-h1:mb-6 prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-5 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h4:text-lg prose-h4:mt-6 prose-h4:mb-3 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-img:rounded-sm prose-img:border prose-img:border-neutral-200 prose-img:my-8">
+          <div className="prose prose-stone prose-lg max-w-none prose-headings:font-serif prose-headings:font-semibold prose-h1:text-3xl prose-h1:mt-12 prose-h1:mb-6 prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-5 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h4:text-lg prose-h4:mt-6 prose-h4:mb-3 prose-a:text-stone-600 prose-a:underline prose-a:decoration-dotted hover:prose-a:text-stone-800 prose-code:bg-stone-50 prose-code:border prose-code:border-neutral-200 prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-mono prose-code:text-stone-700 prose-pre:bg-stone-50 prose-pre:border prose-pre:border-neutral-200 prose-pre:rounded-sm prose-pre:prose-code:bg-transparent prose-pre:prose-code:border-0 prose-pre:prose-code:p-0 prose-img:rounded-sm prose-img:border prose-img:border-neutral-200 prose-img:my-8">
             <MDXContent
               code={item.mdx}
               components={{
+                Image,
+                img: Image,
                 mermaid: Mermaid,
                 Mermaid,
                 Tweet,