cca link

Author: fhammerschmidt

_blogposts/2025-03-17-retreats.mdx

@@ -84,6 +84,7 @@ After the retreat, most participants stated that they want to do it again and ov
 ## Our Sponsors
 
 <Image
+  externalLink="https://www.cca.io"
   src="/static/lp/cca-io-color.svg"
   size="small"
   caption="Thanks to cca.io for sponsoring our retreat venue"

src/components/Markdown.res

@@ -474,7 +474,13 @@ module Strong = {
 
 module Image = {
   @react.component
-  let make = (~src: string, ~size=#large, ~withShadow=false, ~caption: option<string>=?) => {
+  let make = (
+    ~src: string,
+    ~size=#large,
+    ~withShadow=false,
+    ~caption: option<string>=?,
+    ~externalLink: option<string>=?,
+  ) => {
     let width = switch size {
     | #large => "w-full"
     | #small => "w-1/4"
@@ -486,8 +492,10 @@ module Image = {
       ""
     }
 
+    let target = externalLink->Option.isSome ? Some("_blank") : None
+
     <div className={`mt-8 mb-12 ${size === #large ? "md:-mx-16" : ""}`}>
-      <a href=src rel="noopener noreferrer">
+      <a href={externalLink->Option.getOr(src)} rel="noopener noreferrer" ?target>
         <img className={width ++ " " ++ shadow} src />
       </a>
       {switch caption {

src/components/Markdown.resi

@@ -160,6 +160,7 @@ module Image: {
     ~size: [#large | #small]=?,
     ~withShadow: bool=?,
     ~caption: string=?,
+    ~externalLink: string=?,
   ) => React.element
 }
 

src/components/MarkdownComponents.res

@@ -11,7 +11,10 @@ type t = {
   @as("Intro")
   intro?: React.componentLike<Intro.props<React.element>, React.element>,
   @as("Image")
-  image?: React.componentLike<Image.props<string, [#large | #small], bool, string>, React.element>,
+  image?: React.componentLike<
+    Image.props<string, [#large | #small], bool, string, string>,
+    React.element,
+  >,
   @as("Video")
   video?: React.componentLike<Video.props<string, string>, React.element>,
   @as("UrlBox")