diff --git a/shared/markdown.ts b/shared/markdown.ts index 8ac21f4e..573135cb 100644 --- a/shared/markdown.ts +++ b/shared/markdown.ts @@ -1,7 +1,8 @@ /** * Flattens the Markdown users write into one line of plain text, where a - * quote of it can't render markup: the chat's reply previews and the digest - * email's quotes of a comment or a note. + * quote of it can't render markup: the chat's reply previews, the digest + * email's quotes of a comment or a note, and the line of a description on a + * playlist's card and on a user in the search results. * * @module */ diff --git a/src/components/playlist/PlaylistCard.tsx b/src/components/playlist/PlaylistCard.tsx index 465b6a3c..e3dfe6a8 100644 --- a/src/components/playlist/PlaylistCard.tsx +++ b/src/components/playlist/PlaylistCard.tsx @@ -20,6 +20,7 @@ import { import { Tooltip } from "../shared/Tooltip.tsx"; import { CategoryChips } from "../category/CategoryChips.tsx"; import { userPath } from "../../../shared/paths.ts"; +import { markdownToPlainText } from "../../../shared/markdown.ts"; /** Passed to {@link PlaylistCard} by each list of playlists. */ export interface PlaylistCardProps { @@ -53,6 +54,10 @@ export function PlaylistCard( const unread = !isOwner && isRecent(playlist.createdAt) && !isPlaylistVisited(playlist.id); const showBadge = !privateBadgeOnly || (!!isOwner && !playlist.isPublic); + // The playlist's page renders the description's Markdown; the card has + // room for its text only, and none at all when it is a lone image. + const description = playlist.description && + markdownToPlainText(playlist.description, ""); function handleNavigate() { markPlaylistVisited(playlist.id); @@ -91,8 +96,8 @@ export function PlaylistCard( {unread && } {playlist.title} - {playlist.description && ( -
{playlist.description}
+ {description && ( +{description}
)}{t`No users match "${q}".`}
: (