add links to blurbs

nwplus · Jan 2, 2025 · 06c7e9b · 06c7e9b
1 parent 578b8ff
commit 06c7e9b
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -190,6 +190,15 @@ const Blurb = styled.div`
     font-size: 0.75rem;
     padding-right: calc(100vw * (10 / 487));
   }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 `
 
 const LearnMoreButton = styled.a`
@@ -208,6 +217,9 @@ const LearnMoreButton = styled.a`
   }
 `
 
+const sanitizeBlurb = blurb =>
+  blurb.replace(/<a\s+(?:[^>]*?)href=/g, '<a target="_blank" rel="noopener noreferrer" href=')
+
 const Carousel = ({ sponsors }) => {
   const [viewing, setViewing] = useState(0)
   const showLeftButton = viewing > 0
@@ -280,7 +292,7 @@ const Carousel = ({ sponsors }) => {
 
           <RightContainer>
             <RightInnerContainer>
-              <Blurb>{sponsors[viewing]?.blurb}</Blurb>
+              <Blurb dangerouslySetInnerHTML={{ __html: sanitizeBlurb(sponsors[viewing]?.blurb) }} />
               <LearnMoreButton href={sponsors[viewing]?.link}>Learn More</LearnMoreButton>
             </RightInnerContainer>
           </RightContainer>