Format links in bios

Author: hasparus

src/app/conf/2025/_data.ts

@@ -21,6 +21,7 @@ async function fetchData<T>(url: string): Promise<T> {
         "Content-Type": "application/json",
         "User-Agent": "GraphQL Conf / GraphQL Foundation",
       },
+      cache: "force-cache",
     })
     const data = await response.json()
     return data
@@ -58,7 +59,7 @@ async function getSpeakers(): Promise<SchedSpeaker[]> {
     .map(user => {
       return {
         ...user,
-        about: stripHtml(user.about).result,
+        about: preprocessDescription(user.about),
       }
     })
     .sort((a, b) => {

src/app/conf/2025/schedule/[id]/format-description.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+const URL_REGEX = /https?:\/\/[^\s]+/g
+
+export function formatDescription(text: string): React.ReactNode {
+  const res: React.ReactNode[] = []
+
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+
+  while ((match = URL_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      res.push(text.slice(lastIndex, match.index))
+    }
+
+    res.push(
+      <a
+        href={match[0]}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="typography-link"
+      >
+        {match[0].replace(/^https?:\/\//, "")}
+      </a>,
+    )
+
+    lastIndex = match.index + match[0].length
+  }
+
+  if (lastIndex < text.length) {
+    res.push(text.slice(lastIndex))
+  }
+
+  return <>{res}</>
+}

src/app/conf/2025/schedule/[id]/page.tsx

@@ -21,6 +21,7 @@ import { GET_TICKETS_LINK } from "../../links"
 import { CtaCardSection } from "../../components/cta-card-section"
 import { Button } from "@/app/conf/_design-system/button"
 import { SessionTags } from "../../components/session-tags"
+import { formatDescription } from "./format-description"
 
 type SessionProps = { params: { id: string } }
 
@@ -237,13 +238,13 @@ function Hr({ className }: { className?: string }) {
 }
 
 function SessionDescription({ session }: { session: ScheduleSession }) {
+  const formattedDescription = formatDescription(session.description || "")
 
-  
   return (
     <div className="mt-8 flex gap-4 px-2 pb-8 max-lg:flex-col sm:px-3 lg:mt-16 lg:gap-8 xl:pb-16">
       <h3 className="typography-h2 min-w-[320px]">Session description</h3>
       <p className="typography-body-lg whitespace-pre-wrap">
-        {session.description}
+        {formattedDescription}
       </p>
     </div>
   )