use next/link for internal links, even if absolute from the cms

web/src/components/blocks/ContactSection.tsx

@@ -3,6 +3,7 @@ import {
   type ContactSectionBlockFragment,
   type ContactSubsectionBlockFragment,
 } from "@/gql/graphql";
+import { RichText } from "@/components/general/RichText";
 import styles from "./contactSection.module.scss";
 import { Blocks } from "./Blocks";
 
@@ -37,10 +38,9 @@ export const ContactSectionBlock = ({
     <section className={styles.contactSection}>
       <h2 className={styles.heading}>{block.title}</h2>
       {block.text && (
-        <p
-          className={styles.intro}
-          dangerouslySetInnerHTML={{ __html: block.text }}
-        />
+        <div className={styles.intro}>
+          <RichText content={block.text} />
+        </div>
       )}
       <Blocks blocks={block.blocks} />
     </section>
@@ -56,10 +56,9 @@ export const ContactSubsectionBlock = ({
     <section className={styles.contactSubsection}>
       <h3 className={styles.heading}>{block.title}</h3>
       {block.text && (
-        <p
-          className={styles.intro}
-          dangerouslySetInnerHTML={{ __html: block.text }}
-        />
+        <div className={styles.intro}>
+          <RichText content={block.text} />
+        </div>
       )}
       <Blocks blocks={block.blocks} />
     </section>

web/src/components/blocks/FactBoxBlock.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { type FactBoxBlockFragment } from "@/gql/graphql";
+import { RichText } from "@/components/general/RichText";
 import styles from "./factBoxBlock.module.scss";
 
 const FactBoxBlockFragmentDefinition = graphql(`
@@ -23,10 +24,9 @@ export const FactBoxBlock = ({
         className={styles.factBox}
         data-background-color={block.backgroundColor ?? ""}
       >
-        <div
-          className={styles.factBoxContent}
-          dangerouslySetInnerHTML={{ __html: block.factBoxBody }}
-        />
+        <div className={styles.factBoxContent}>
+          <RichText content={block.factBoxBody} />
+        </div>
       </div>
     </section>
   );

web/src/components/blocks/FeaturedBlock.tsx

@@ -2,7 +2,9 @@ import { graphql, unmaskFragment } from "@/gql";
 import { type FeaturedBlockFragment } from "@/gql/graphql";
 import Link from "next/link";
 import { Image } from "@/components/general/Image";
+import { RichText } from "@/components/general/RichText";
 import { ImageFragmentDefinition } from "@/lib/common";
+import { internalHref } from "@/lib/links";
 import styles from "./featuredBlock.module.scss";
 
 const FeaturedBlockFragmentDefinition = graphql(`
@@ -44,6 +46,9 @@ export const FeaturedBlock = ({
   );
   // TODO: fetch image from target page
 
+  const pageUrl = block.featuredPage.url;
+  const featuredHref = pageUrl ? internalHref(pageUrl) ?? pageUrl : "#";
+
   return (
     <div
       className={styles.featuredBlock}
@@ -51,8 +56,10 @@ export const FeaturedBlock = ({
     >
       <div className={styles.text}>
         <h2>{block.title}</h2>
-        <div dangerouslySetInnerHTML={{ __html: block.featuredBlockText }} />
-        <Link href={block.featuredPage.url ?? "#"}>
+        <div>
+          <RichText content={block.featuredBlockText} />
+        </div>
+        <Link href={featuredHref}>
           {block.linkText} &rarr;
         </Link>
       </div>

web/src/components/blocks/ScheduleBlock.tsx

@@ -1,5 +1,6 @@
 import { graphql, unmaskFragment } from "@/gql";
 import { type ScheduleBlockFragment } from "@/gql/graphql";
+import { RichText } from "@/components/general/RichText";
 import styles from "./scheduleBlock.module.scss";
 
 const ScheduleItemFragmentDefinition = graphql(`
@@ -45,19 +46,13 @@ export const ScheduleBlock = ({
             <div key={index} className={styles.item}>
               <dt className={styles.time}>{scheduleItem.time}</dt>
               <dd className={styles.body}>
-                <div
-                  className={styles.title}
-                  dangerouslySetInnerHTML={{
-                    __html: scheduleItem.scheduleItemTitle,
-                  }}
-                />
+                <div className={styles.title}>
+                  <RichText content={scheduleItem.scheduleItemTitle} />
+                </div>
                 {scheduleItem.description && (
-                  <div
-                    className={styles.description}
-                    dangerouslySetInnerHTML={{
-                      __html: scheduleItem.description,
-                    }}
-                  />
+                  <div className={styles.description}>
+                    <RichText content={scheduleItem.description} />
+                  </div>
                 )}
               </dd>
             </div>