From 5c964440daf3c8001e00e11b19396b05d17df8c3 Mon Sep 17 00:00:00 2001 From: Jay Sitter <jay@jaysitter.com> Date: Mon, 26 Jun 2023 20:12:21 -0400 Subject: [PATCH] fix: Show metadata preview card on all post pages --- src/shared/components/post/metadata-card.tsx | 86 +++++++++----------- src/shared/components/post/post-listing.tsx | 11 ++- 2 files changed, 47 insertions(+), 50 deletions(-) diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx index a1ddca7..1269c0b 100644 --- a/src/shared/components/post/metadata-card.tsx +++ b/src/shared/components/post/metadata-card.tsx @@ -8,60 +8,54 @@ interface MetadataCardProps { post: Post; } -interface MetadataCardState { - expanded: boolean; -} - -export class MetadataCard extends Component< - MetadataCardProps, - MetadataCardState -> { +export class MetadataCard extends Component<MetadataCardProps> { constructor(props: any, context: any) { super(props, context); } render() { const post = this.props.post; - return ( - <> - {post.embed_title && post.url && ( - <div className="post-metadata-card card border-secondary mt-3 mb-2"> - <div className="row"> - <div className="col-12"> - <div className="card-body"> - {post.name !== post.embed_title && ( - <> - <h5 className="card-title d-inline"> - <a className="text-body" href={post.url} rel={relTags}> - {post.embed_title} - </a> - </h5> - <span className="d-inline-block ms-2 mb-2 small text-muted"> - <a - className="text-muted fst-italic" - href={post.url} - rel={relTags} - > - {new URL(post.url).hostname} - <Icon icon="external-link" classes="ms-1" /> - </a> - </span> - </> - )} - {post.embed_description && ( - <div - className="card-text small text-muted md-div" - dangerouslySetInnerHTML={{ - __html: sanitizeHtml(post.embed_description), - }} - /> - )} - </div> + + if (post.embed_title && post.url) { + return ( + <div className="post-metadata-card card border-secondary mt-3 mb-2"> + <div className="row"> + <div className="col-12"> + <div className="card-body"> + {post.name !== post.embed_title && ( + <> + <h5 className="card-title d-inline"> + <a className="text-body" href={post.url} rel={relTags}> + {post.embed_title} + </a> + </h5> + <span className="d-inline-block ms-2 mb-2 small text-muted"> + <a + className="text-muted fst-italic" + href={post.url} + rel={relTags} + > + {new URL(post.url).hostname} + <Icon icon="external-link" classes="ms-1" /> + </a> + </span> + </> + )} + {post.embed_description && ( + <div + className="card-text small text-muted md-div" + dangerouslySetInnerHTML={{ + __html: sanitizeHtml(post.embed_description), + }} + /> + )} </div> </div> </div> - )} - </> - ); + </div> + ); + } else { + return <></>; + } } } diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index f898e83..2b761c5 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -105,6 +105,9 @@ interface PostListingProps { allLanguages: Language[]; siteLanguages: number[]; showCommunity?: boolean; + /** + * Controls whether to show both the body *and* the metadata preview card + */ showBody?: boolean; hideImage?: boolean; enableDownvotes?: boolean; @@ -200,7 +203,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { <> {this.listing()} {this.state.imageExpanded && !this.props.hideImage && this.img} - {post.url && this.state.showBody && post.embed_title && ( + {this.showBody && post.url && post.embed_title && ( <MetadataCard post={post} /> )} {this.showBody && this.body()} @@ -483,10 +486,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> { </h5> {/** - * If there is a URL, or if the post has a body and we were told not to - * show the body, show the MetadataCard/body toggle. + * If there is a URL, an embed title, and we were not told to show the + * body by the parent component, show the MetadataCard/body toggle. */} - {(post.url || (post.body && !this.props.showBody)) && ( + {!this.props.showBody && post.url && post.embed_title && ( <button className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline" data-tippy-content={post.body && mdNoImages.render(post.body)} -- 2.44.1