Improve how session description looks like

hasparus · hasparus · commit 589d8b4c94c7 · 2025-06-03T19:48:54.000+02:00
diff --git a/src/app/conf/2025/_data.ts b/src/app/conf/2025/_data.ts
@@ -84,13 +84,24 @@ async function getSchedule(): Promise<ScheduleSession[]> {
     // TODO: Preserve formatting??
     return {
       ...session,
-      description: description && stripHtml(description).result,
+      description: preprocessDescription(description),
     }
   })
 
   return result
 }
 
+function preprocessDescription(description: string | undefined | null): string {
+  let res = description || ""
+
+  // we respect manual line breaks
+  res = res.replace(/<br\s*\/?>/g, "\n")
+
+  // respecting <li> and <a> tags doesn't make sense, because speakers don't use them consistently
+  // we'll improve how the descriptions look later down the tree in the session details page
+  return stripHtml(res).result
+}
+
 export const speakers = await getSpeakers()
 
 // TODO: Collect tags from schedule for speakers.
diff --git a/src/app/conf/2025/components/session-tags.tsx b/src/app/conf/2025/components/session-tags.tsx
@@ -1,16 +1,23 @@
+import clsx from "clsx"
+import React from "react"
+
 import { ScheduleSession } from "@/app/conf/2023/types"
 import { Tag } from "@/app/conf/_design-system/tag"
-import React from "react"
 
 import { eventsColors } from "../utils"
 
-export function SessionTags({ session }: { session: ScheduleSession }) {
+export interface SessionTagsProps extends React.HTMLAttributes<HTMLDivElement> {
+  session: ScheduleSession
+  className?: string
+}
+
+export function SessionTags({ session, className, ...rest }: SessionTagsProps) {
   const eventType = session.event_type.endsWith("s")
     ? session.event_type.slice(0, -1)
     : session.event_type
 
   return (
-    <div className="flex flex-wrap gap-3">
+    <div className={clsx("flex flex-wrap gap-3", className)} {...rest}>
       {eventType && (
         <Tag color={eventsColors[session.event_type]}>{eventType}</Tag>
       )}
diff --git a/src/app/conf/2025/schedule/[id]/page.tsx b/src/app/conf/2025/schedule/[id]/page.tsx
@@ -49,22 +49,22 @@ export function generateStaticParams() {
 }
 
 export default function SessionPage({ params }: SessionProps) {
-  const event = schedule.find(s => s.id === params.id)
-  if (!event) {
+  const session = schedule.find(s => s.id === params.id)
+  if (!session) {
     notFound()
   }
 
   // @ts-expect-error -- fixme
-  event.speakers = (event.speakers || []).map(speaker =>
+  session.speakers = (session.speakers || []).map(speaker =>
     speakers.find(s => s.username === speaker.username),
   )
 
   const eventTitle = getEventTitle(
-    event,
-    event.speakers!.map(s => s.name),
+    session,
+    session.speakers!.map(s => s.name),
   )
 
-  const video = findVideo(event, eventTitle)
+  const video = findVideo(session, eventTitle)
 
   return (
     <>
@@ -75,7 +75,7 @@ export default function SessionPage({ params }: SessionProps) {
             <div className="gql-conf-section !py-0">
               <div className="border-x border-neu-200 pt-8 dark:border-neu-100 2xl:pt-16">
                 <SessionHeader
-                  event={event}
+                  event={session}
                   eventTitle={eventTitle}
                   year="2025"
                   className={clsx(
@@ -89,14 +89,9 @@ export default function SessionPage({ params }: SessionProps) {
                   <Hr className="mt-10 2xl:mt-16" />
                 )}
 
-                {event.description && (
+                {session.description && (
                   <>
-                    <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">{event.description}</p>
-                    </div>
+                    <SessionDescription session={session} />
                     <Hr />
                   </>
                 )}
@@ -105,19 +100,19 @@ export default function SessionPage({ params }: SessionProps) {
                   Session speakers
                 </h3>
                 <SessionSpeakers
-                  event={event}
+                  session={session}
                   className="-mx-px -mb-px last:xl:pb-24"
                 />
 
-                {!!event.files?.length && (
+                {!!session.files?.length && (
                   <>
                     <Hr />
 
                     <h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
                       Session resources
                     </h3>
                     <section>
-                      {event.files?.map(({ path }) => (
+                      {session.files?.map(({ path }) => (
                         <iframe
                           key={path}
                           src={path}
@@ -191,9 +186,12 @@ function SessionHeader({
         <div className="typography-body-md flex flex-col gap-4 md:flex-row md:gap-6">
           <div className="flex items-center gap-2">
             <CalendarIcon className="size-5 text-sec-darker dark:text-sec-light/90 sm:size-6" />
-            <time dateTime="2025-09-08">September 08</time>
-            <span>-</span>
-            <time dateTime="2025-09-10">10, 2025</time>
+            <time dateTime={event.event_start}>
+              {new Date(event.event_start).toLocaleDateString("en-US", {
+                day: "numeric",
+                month: "long",
+              })}
+            </time>
           </div>
           <div className="flex items-center gap-2">
             <PinIcon className="size-5 text-sec-darker dark:text-sec-light/90 sm:size-6" />
@@ -207,10 +205,10 @@ function SessionHeader({
 }
 
 function SessionSpeakers({
-  event,
+  session: event,
   className,
 }: {
-  event: ScheduleSession
+  session: ScheduleSession
   className?: string
 }) {
   return (
@@ -237,3 +235,16 @@ function Hr({ className }: { className?: string }) {
     />
   )
 }
+
+function SessionDescription({ session }: { session: ScheduleSession }) {
+
+  
+  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}
+      </p>
+    </div>
+  )
+}
diff --git a/src/app/conf/2025/speakers/[id]/long-session-card.tsx b/src/app/conf/2025/speakers/[id]/long-session-card.tsx
@@ -11,6 +11,7 @@ import PlayIcon from "@/app/conf/_design-system/pixelarticons/play.svg?svgr"
 import { findVideo } from "../../schedule/[id]/session-video"
 import { eventsColors, getEventTitle } from "../../utils"
 import React from "react"
+import { SessionTags } from "../../components/session-tags"
 
 export interface LongSessionCardProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -19,41 +20,35 @@ export interface LongSessionCardProps
   year?: string
 }
 
-function formatTime(dateString: string): string {
-  return new Date(dateString).toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-  })
-}
-
-function formatDate(dateString: string): string {
-  return new Date(dateString).toLocaleDateString("en-US", {
-    day: "numeric",
-    month: "long",
-  })
-}
-
 export function LongSessionCard({
   session,
   year = "2025",
   className,
   ...props
 }: LongSessionCardProps) {
-  const eventType = session.event_type.endsWith("s")
-    ? session.event_type.slice(0, -1)
-    : session.event_type
-
-  const formattedDate = formatDate(session.event_start)
-  const formattedTime = formatTime(session.event_start)
+  const formattedDate = new Date(session.event_start).toLocaleDateString(
+    "en-US",
+    {
+      day: "numeric",
+      month: "long",
+    },
+  )
+  const formattedTime = new Date(session.event_start).toLocaleTimeString(
+    "en-US",
+    {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    },
+  )
 
   const eventTitle = getEventTitle(
     session,
     session.speakers?.map(s => s.name) || [],
   )
   const video = findVideo(session, eventTitle)
 
-  const eventDuration =
+  const eventDurationMs =
     new Date(session.event_end).getTime() -
     new Date(session.event_start).getTime()
 
@@ -74,15 +69,9 @@ export function LongSessionCard({
         aria-label={`Read more about "${eventTitle}" by ${session.speakers?.[0]?.name || "Speaker"}`}
       />
 
-      <div className={clsx("flex flex-col gap-6", video && "mb-6")}>
+      <div className="flex flex-col gap-6">
         <div className="flex items-center justify-between gap-6">
-          <Tag
-            color={
-              eventsColors[session.event_type] || "hsl(var(--color-neu-700))"
-            }
-          >
-            {eventType}
-          </Tag>
+          <SessionTags session={session} />
           {video && (
             <div className="flex items-center gap-2 border border-neu-400 bg-neu-100 px-2 py-1">
               <span className="typography-menu text-neu-900">
@@ -93,7 +82,7 @@ export function LongSessionCard({
           )}
         </div>
 
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-4">
           <div className="min-h-[120px]">
             <h3 className="typography-h3 text-neu-900">{session.name}</h3>
           </div>
@@ -121,14 +110,16 @@ export function LongSessionCard({
               <div className="flex items-center gap-0.5">
                 <ClockIcon className="size-3" />
                 <span className="typography-body-xs text-neu-600">
-                  {eventDuration}
+                  {Math.round(eventDurationMs / (1000 * 60))} min
                 </span>
               </div>
             )}
           </div>
         </div>
       </div>
 
+      {/* todo: past session no recording variant */}
+
       {video ? (
         <Button
           href={`https://youtube.com/embed/${video.id}`}
@@ -139,8 +130,8 @@ export function LongSessionCard({
           <PlayIcon className="size-6" />
         </Button>
       ) : (
-        <div className="flex items-center text-neu-800">
-          <div className="flex flex-1 items-center gap-6 border-r border-neu-200 pr-6">
+        <footer className="flex items-center border-t border-neu-200 text-neu-800">
+          <div className="flex flex-1 items-center gap-6 border-r border-neu-200 px-6 py-4">
             <div className="flex items-center gap-0.5">
               <CalendarIcon className="size-4 text-sec-dark" />
               <span className="typography-body-xs">{formattedDate}</span>
@@ -154,13 +145,13 @@ export function LongSessionCard({
               <span className="typography-body-xs">{session.venue}</span>
             </div>
           </div>
-          <div className="flex flex-col items-center justify-center gap-6 pl-6">
+          <div className="flex flex-col items-center justify-center gap-6 px-6 py-4">
             <button className="relative z-[2] flex items-center gap-0.5 text-neu-800">
               <PlusIcon className="size-4 text-sec-dark" />
               <span className="typography-body-xs">Add to calendar</span>
             </button>
           </div>
-        </div>
+        </footer>
       )}
     </div>
   )
diff --git a/src/app/conf/_design-system/session-card.example.tsx b/src/app/conf/_design-system/session-card.example.tsx
