Handle events without a description

Event cards crashed on a missing description, and the event metadata
included "null" for missing fields. Truncate previews by grapheme so
emoji aren't split, and show descriptions of exactly 70 characters in
full.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/[locale]/event/[slug]/page.tsx

@@ -49,7 +49,13 @@ export async function generateMetadata({
   return generateSeoMetadata({
     locale,
     title: data.title,
-    description: `${t("time")}: ${formatDate(data.date)}\n${t("location")}: ${data.location}\n\n${data.description}`,
+    description: [
+      `${t("time")}: ${formatDate(data.date)}`,
+      data.location && `${t("location")}: ${data.location}`,
+      data.description && `\n${data.description}`,
+    ]
+      .filter(Boolean)
+      .join("\n"),
   })
 }
 

src/components/page-sections/events.tsx

@@ -15,9 +15,11 @@ interface Event {
   slug: {
     current: string
   }
-  description: string
+  description: string | null
 }
 
+const DESCRIPTION_PREVIEW_LENGTH = 70
+
 const Events = async () => {
   const t = await getTranslations("events")
   const tCommon = await getTranslations("common")
@@ -47,6 +49,26 @@ const Events = async () => {
     return date.toLocaleString(locale, options)
   }
 
+  const previewDescription = (description: string | null) => {
+    if (!description) return null
+
+    // Count graphemes so emoji and accented characters are never cut in half
+    const graphemes = Array.from(new Intl.Segmenter().segment(description))
+    if (graphemes.length <= DESCRIPTION_PREVIEW_LENGTH) return description
+
+    const preview = graphemes
+      .slice(0, DESCRIPTION_PREVIEW_LENGTH)
+      .map(({ segment }) => segment)
+      .join("")
+      .trimEnd()
+
+    return (
+      <>
+        {preview}... <span className={styles.readMore}>{t("readMore")}</span>
+      </>
+    )
+  }
+
   const mapEvents = (events: Event[]) => {
     if (events.length !== 0) {
       return events.map((event: Event) => (
@@ -63,16 +85,7 @@ const Events = async () => {
                 <p>{formatDate(event.date)}</p>
               </div>
             </div>
-            <p>
-              {event.description.length < 70 ? (
-                event.description
-              ) : (
-                <>
-                  {event.description.substring(0, 70)}...{" "}
-                  <span className={styles.readMore}>{t("readMore")}</span>
-                </>
-              )}
-            </p>
+            <p>{previewDescription(event.description)}</p>
           </article>
         </Link>
       ))