80096f63a7
* Add the preview card to logged out feed initial content * initialise the initial dropdowns added on the logged out feed * minor tweak to selector * flip the follow button and the summary * add minimal preview card to build article HTML * WIP: data fetched an inserted into card on logged out feed * WIP: cards added to logged in feed * create separate profile preview card component * small style tweak, import pack on each page that shows feed cards * rename * tweak some styling issues * make sure follow buttons init in cards * populate all matching metadata placeholders after fetch * don't render full preview card upfront on logged out feed * refactors from PR comments * fix issue in person search results * remove check for article author link that will be superseded by cypress test for preview card * Revert "remove check for article author link that will be superseded by cypress test for preview card" This reverts commit 9b42804ffd0f051891c87293d0b791ed2bb0367f. * Revert "fix issue in person search results" This reverts commit 04941e3520c0895212141193b60f2933faed5ca1. * only show the preview cards on story cards for Posts (not users etc in search results) * correct display on collections view * remove link check that will be replaced by cypress test * tweaks to small issues, add a test for the logged out feed * add tests for logged in home feed, logged out tag index * add search test and tag index logged in test * fixes to preview profile spec * tweak to followauthor spec * add cypress test for preview on series page * use a unique test user for series test * correct the jsdoc comments * tweaks following PR review * allow feed preview cards to reposition * move to separate file from pack
102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
import { h } from 'preact';
|
|
import {
|
|
articlePropTypes,
|
|
organizationPropType,
|
|
} from '../../common-prop-types';
|
|
import { MinimalProfilePreviewCard } from '../../profilePreviewCards/MinimalProfilePreviewCard';
|
|
import { PublishDate } from './PublishDate';
|
|
|
|
export const Meta = ({ article, organization }) => {
|
|
const orgArticleIndexClassAbsent = !document.getElementById(
|
|
'organization-article-index',
|
|
);
|
|
|
|
return (
|
|
<div className="crayons-story__meta">
|
|
<div className="crayons-story__author-pic">
|
|
{organization && orgArticleIndexClassAbsent && (
|
|
<a
|
|
href={`/${organization.slug}`}
|
|
className="crayons-logo crayons-logo--l"
|
|
>
|
|
<img
|
|
alt={`${organization.name} logo`}
|
|
src={organization.profile_image_90}
|
|
className="crayons-logo__image"
|
|
loading="lazy"
|
|
/>
|
|
</a>
|
|
)}
|
|
<a
|
|
href={`/${article.user.username}`}
|
|
className={`crayons-avatar ${
|
|
organization && orgArticleIndexClassAbsent
|
|
? 'crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted'
|
|
: 'crayons-avatar--l'
|
|
}`}
|
|
>
|
|
<img
|
|
src={article.user.profile_image_90}
|
|
alt={`${article.user.username} profile`}
|
|
className="crayons-avatar__image"
|
|
loading="lazy"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<p>
|
|
<a
|
|
href={`/${article.user.username}`}
|
|
className="crayons-story__secondary fw-medium m:hidden"
|
|
>
|
|
{filterXSS(
|
|
article.class_name === 'User'
|
|
? article.user.username
|
|
: article.user.name,
|
|
)}
|
|
</a>
|
|
<MinimalProfilePreviewCard
|
|
triggerId={`story-author-preview-trigger-${article.id}`}
|
|
contentId={`story-author-preview-content-${article.id}`}
|
|
username={article.user.username}
|
|
name={article.user.name}
|
|
profileImage={article.user.profile_image_90}
|
|
userId={article.user_id}
|
|
/>
|
|
{organization &&
|
|
!document.getElementById('organization-article-index') && (
|
|
<span>
|
|
<span className="crayons-story__tertiary fw-normal">
|
|
{' for '}
|
|
</span>
|
|
<a
|
|
href={`/${organization.slug}`}
|
|
className="crayons-story__secondary fw-medium"
|
|
>
|
|
{organization.name}
|
|
</a>
|
|
</span>
|
|
)}
|
|
</p>
|
|
<a href={article.path} className="crayons-story__tertiary fs-xs">
|
|
<PublishDate
|
|
readablePublishDate={article.readable_publish_date}
|
|
publishedTimestap={article.published_timestamp}
|
|
publishedAtInt={article.published_at_int}
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Meta.defaultProps = {
|
|
organization: null,
|
|
};
|
|
|
|
Meta.propTypes = {
|
|
article: articlePropTypes.isRequired,
|
|
organization: organizationPropType,
|
|
};
|
|
|
|
Meta.displayName = 'Meta';
|