diff --git a/src/app/[locale]/event/[slug]/page.tsx b/src/app/[locale]/event/[slug]/page.tsx index 83cafe6..dbf3f44 100644 --- a/src/app/[locale]/event/[slug]/page.tsx +++ b/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"), }) } diff --git a/src/components/page-sections/events.tsx b/src/components/page-sections/events.tsx index ba03020..8512768 100644 --- a/src/components/page-sections/events.tsx +++ b/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}... {t("readMore")} + + ) + } + const mapEvents = (events: Event[]) => { if (events.length !== 0) { return events.map((event: Event) => ( @@ -63,16 +85,7 @@ const Events = async () => {

{formatDate(event.date)}

-

- {event.description.length < 70 ? ( - event.description - ) : ( - <> - {event.description.substring(0, 70)}...{" "} - {t("readMore")} - - )} -

+

{previewDescription(event.description)}

))