415 lines
16 KiB
JavaScript
415 lines
16 KiB
JavaScript
/* global timeAgo, filterXSS */
|
|
|
|
/* eslint-disable no-multi-str */
|
|
|
|
function buildArticleHTML(article, currentUserId = null) {
|
|
var tagIcon = `<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg"><path d="M7.784 14l.42-4H4V8h4.415l.525-5h2.011l-.525 5h3.989l.525-5h2.011l-.525 5H20v2h-3.784l-.42 4H20v2h-4.415l-.525 5h-2.011l.525-5H9.585l-.525 5H7.049l.525-5H4v-2h3.784zm2.011 0h3.99l.42-4h-3.99l-.42 4z"/></svg>`;
|
|
if (article && article.class_name === 'Tag') {
|
|
return `<article class="crayons-story">
|
|
<div class="crayons-story__body flex items-start gap-2">
|
|
<span class="radius-default p-2 shrink-0" style="background: ${
|
|
article.bg_color_hex || '#000000'
|
|
}1a; color: ${article.bg_color_hex || '#000'}">
|
|
${tagIcon}
|
|
</span>
|
|
<div>
|
|
<h3 class="crayons-subtitle-2 lh-tight py-2">
|
|
<a href="/t/${article.name}" class="c-link">
|
|
${article.name}
|
|
</a>
|
|
</h3>
|
|
${
|
|
article.short_summary
|
|
? `<div class="truncate-at-3">${article.short_summary}</div>`
|
|
: ''
|
|
}
|
|
</div>
|
|
</div>
|
|
</article>`;
|
|
}
|
|
|
|
if (article && article.class_name === 'PodcastEpisode') {
|
|
return `<article class="crayons-story crayons-podcast-episode mb-2">
|
|
<div class="crayons-story__body flex flex-start">
|
|
<a href="${article.podcast.slug}" class="crayons-podcast-episode__cover">
|
|
<img src="${article.podcast.image_url}" alt="${article.podcast.title}" loading="lazy" />
|
|
</a>
|
|
<div class="pt-2 flex-1">
|
|
<p class="crayons-podcast-episode__author">
|
|
${article.podcast.title}
|
|
</p>
|
|
<h2 class="crayons-podcast-episode__title crayons-story__title mb-0">
|
|
<a href="${article.path}" id="article-link-${article.id}">
|
|
${article.podcast.title}
|
|
</a>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</article>`;
|
|
}
|
|
|
|
if (article && article.class_name === 'Organization') {
|
|
return `<article class="crayons-story">
|
|
<div class="crayons-story__body flex items-start gap-2">
|
|
<a href="${article.slug}" class="crayons-podcast-episode__cover">
|
|
<img src="${article.profile_image.url}" alt="${
|
|
article.name
|
|
}" loading="lazy" />
|
|
</a>
|
|
<div>
|
|
<h3 class="crayons-subtitle-2 lh-tight py-1">
|
|
<a href="${article.slug}" class="c-link">
|
|
${article.name}
|
|
</a>
|
|
</h3>
|
|
<p class="crayons-story__slug-segment">@${article.slug}</p>
|
|
${
|
|
article.summary
|
|
? `<div class="truncate-at-3 top-margin-4">${article.summary}</div>`
|
|
: ''
|
|
}
|
|
</div>
|
|
<div class="print-hidden" style="margin-left: auto">
|
|
<button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"id": "${
|
|
article.id
|
|
}", "className": "Organization", "style": "full", "name": "${
|
|
article.name
|
|
}"}'>Follow</button>
|
|
</div>
|
|
</div>
|
|
</article>`;
|
|
}
|
|
|
|
if (article) {
|
|
var container = document.getElementById('index-container');
|
|
|
|
var flareTag = '';
|
|
var currentTag = '';
|
|
if (container) {
|
|
currentTag = JSON.parse(container.dataset.params).tag;
|
|
}
|
|
if (article.flare_tag && currentTag !== article.flare_tag.name) {
|
|
flareTag = `<a href="/t/${article.flare_tag.name}"
|
|
class="crayons-tag crayons-tag--filled"
|
|
style="--tag-bg: ${article.flare_tag.bg_color_hex}1a; --tag-prefix: ${article.flare_tag.bg_color_hex}; --tag-bg-hover: ${article.flare_tag.bg_color_hex}1a; --tag-prefix-hover: ${article.flare_tag.bg_color_hex};"
|
|
>
|
|
<span class="crayons-tag__prefix">#</span>
|
|
${article.flare_tag.name}
|
|
</a>`;
|
|
}
|
|
|
|
var tagString = '';
|
|
var tagList = article.tag_list || article.cached_tag_list_array || [];
|
|
if (flareTag) {
|
|
tagList = tagList.filter(function (tag) {
|
|
return tag !== article.flare_tag.name;
|
|
});
|
|
tagString += flareTag;
|
|
}
|
|
if (tagList) {
|
|
tagList.forEach(function buildTagString(t) {
|
|
tagString =
|
|
tagString +
|
|
`<a href="/t/${t}" class="crayons-tag crayons-tag--monochrome"><span class="crayons-tag__prefix">#</span>${t}</a>\n`;
|
|
});
|
|
}
|
|
|
|
var commentsDisplay = '';
|
|
var commentsCount = '0';
|
|
if ((article.comments_count || '0') > 0) {
|
|
commentsCount = article.comments_count || '0';
|
|
}
|
|
|
|
var commentsAriaLabelText = `aria-label="Add a comment to post - ${article.title}"`;
|
|
|
|
if (article.class_name !== 'User') {
|
|
commentsDisplay =
|
|
'<a href="' +
|
|
article.path +
|
|
'#comments"' +
|
|
commentsAriaLabelText +
|
|
'class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left "><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"/></svg>';
|
|
if (commentsCount > 0) {
|
|
commentsDisplay +=
|
|
commentsCount +
|
|
'<span class="hidden s:inline"> comments</span></a>';
|
|
} else {
|
|
commentsDisplay +=
|
|
'<span class="hidden s:inline">Add Comment</span></a>';
|
|
}
|
|
}
|
|
|
|
var reactionsCount = article.public_reactions_count;
|
|
var reactionsDisplay = '';
|
|
var reactionsText = reactionsCount === 1 ? 'reaction' : 'reactions';
|
|
var reactionIcons = document.getElementById('reaction-category-resources');
|
|
|
|
if (article.class_name !== 'User' && reactionsCount > 0) {
|
|
var icons = [];
|
|
for (var category of article.public_reaction_categories) {
|
|
var icon = reactionIcons.querySelector(
|
|
`img[data-slug=${category.slug}]`,
|
|
).outerHTML;
|
|
icons = icons.concat(
|
|
`<span class="crayons_icon_container">${icon}</span>`,
|
|
);
|
|
}
|
|
icons.reverse();
|
|
|
|
reactionsDisplay = `<a href="${
|
|
article.path
|
|
}" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="${
|
|
article.id
|
|
}">
|
|
<div class="multiple_reactions_aggregate">
|
|
<span class="multiple_reactions_icons_container" dir="rtl">
|
|
${icons.join('')}
|
|
</span>
|
|
<span class="aggregate_reactions_counter">
|
|
<span class="hidden s:inline">${reactionsCount} ${reactionsText}</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</a>`;
|
|
}
|
|
|
|
var picUrl;
|
|
var profileUsername;
|
|
var userName;
|
|
if (article.class_name === 'PodcastEpisode') {
|
|
picUrl = article.main_image;
|
|
profileUsername = article.slug;
|
|
userName = article.title;
|
|
} else {
|
|
picUrl = article.user.profile_image_90;
|
|
profileUsername = article.user.username;
|
|
userName = filterXSS(article.user.name);
|
|
}
|
|
var orgHeadline = '';
|
|
var forOrganization = '';
|
|
var organizationLogo = '';
|
|
var organizationClasses = 'crayons-avatar--l';
|
|
|
|
if (
|
|
article.organization &&
|
|
!document.getElementById('organization-article-index')
|
|
) {
|
|
organizationLogo =
|
|
'<a href="/' +
|
|
article.organization.slug +
|
|
'" class="crayons-logo crayons-logo--l"><img alt="' +
|
|
article.organization.name +
|
|
' logo" src="' +
|
|
article.organization.profile_image_90 +
|
|
'" class="crayons-logo__image" loading="lazy"/></a>';
|
|
forOrganization =
|
|
'<span><span class="crayons-story__tertiary fw-normal"> for </span><a href="/' +
|
|
article.organization.slug +
|
|
'" class="crayons-story__secondary fw-medium">' +
|
|
article.organization.name +
|
|
'</a></span>';
|
|
organizationClasses =
|
|
'crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted';
|
|
}
|
|
|
|
var timeAgoInWords = '';
|
|
if (article.published_at_int) {
|
|
timeAgoInWords = timeAgo({ oldTimeInSeconds: article.published_at_int });
|
|
}
|
|
|
|
var publishDate = '';
|
|
if (article.readable_publish_date) {
|
|
if (article.published_timestamp) {
|
|
publishDate =
|
|
'<time datetime="' +
|
|
article.published_timestamp +
|
|
'">' +
|
|
article.readable_publish_date +
|
|
' ' +
|
|
timeAgoInWords +
|
|
'</time>';
|
|
} else {
|
|
publishDate =
|
|
'<time>' +
|
|
article.readable_publish_date +
|
|
' ' +
|
|
timeAgoInWords +
|
|
'</time>';
|
|
}
|
|
}
|
|
|
|
// We only show profile preview cards for Posts
|
|
var isArticle = article.class_name === 'Article';
|
|
|
|
// We need to be able to set the data-info hash attribute with escaped characters.
|
|
// NB: Escaping apostrophes with a "/" does not have the desired effect, as we eventually render the name inside a double quoted string ""
|
|
// To avoid complications with single quotes inside double quotes inside single quotes, we instead replace any apostrophe with its encoded value
|
|
var name = userName.replace(/'/g, ''').replace(/[\\"]/g, '\\$&');
|
|
|
|
var previewCardContent = `
|
|
<div id="story-author-preview-content-${article.id}" class="profile-preview-card__content crayons-dropdown p-4 pt-0 branded-7" data-repositioning-dropdown="true" style="border-top-color: var(--card-color);" data-testid="profile-preview-card">
|
|
<div class="gap-4 grid">
|
|
<div class="-mt-4">
|
|
<a href="/${profileUsername}" class="flex">
|
|
<span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0">
|
|
<img src="${picUrl}" class="crayons-avatar__image" alt="" loading="lazy" />
|
|
</span>
|
|
<span class="crayons-link crayons-subtitle-2 mt-5">${userName}</span>
|
|
</a>
|
|
</div>
|
|
<div class="print-hidden">
|
|
<button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"id": ${article.user_id}, "className": "User", "style": "full", "name": "${name}"}'>Follow</button>
|
|
</div>
|
|
<div class="author-preview-metadata-container" data-author-id="${article.user_id}"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var meta = `
|
|
<div class="crayons-story__meta">
|
|
<div class="crayons-story__author-pic">
|
|
${organizationLogo}
|
|
<a href="/${profileUsername}" class="crayons-avatar ${organizationClasses}">
|
|
<img src="${picUrl}" alt="${profileUsername} profile" class="crayons-avatar__image" loading="lazy" />
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<a href="/${profileUsername}" class="crayons-story__secondary fw-medium ${
|
|
isArticle ? 'm:hidden' : ''
|
|
}">${userName}</a>
|
|
${
|
|
isArticle
|
|
? `<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"><button id="story-author-preview-trigger-${article.id}" aria-controls="story-author-preview-content-${article.id}" class="profile-preview-card__trigger fs-s crayons-btn crayons-btn--ghost p-1 -ml-1 -my-2" aria-label="${userName} profile details">${userName}</button>${previewCardContent}</div>`
|
|
: ''
|
|
}
|
|
${forOrganization}
|
|
</div>
|
|
<a href="${
|
|
article.path
|
|
}" class="crayons-story__tertiary fs-xs">${publishDate}</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var bodyTextSnippet = '';
|
|
var searchSnippetHTML = '';
|
|
if (article.highlight && article.highlight.body_text.length > 0) {
|
|
var firstSnippetChar = article.highlight.body_text[0];
|
|
var startingEllipsis = '';
|
|
if (firstSnippetChar.toLowerCase() !== firstSnippetChar.toUpperCase()) {
|
|
startingEllipsis = '…';
|
|
}
|
|
bodyTextSnippet =
|
|
startingEllipsis + article.highlight.body_text.join('...') + '…';
|
|
if (bodyTextSnippet.length > 0) {
|
|
searchSnippetHTML =
|
|
'<div class="crayons-story__snippet mb-1">' +
|
|
bodyTextSnippet +
|
|
'</div>';
|
|
}
|
|
}
|
|
|
|
var readingTimeHTML = '';
|
|
if (article.class_name === 'Article') {
|
|
// we have ` ... || null` for the case article.reading_time is undefined
|
|
readingTimeHTML =
|
|
'<small class="crayons-story__tertiary fs-xs mr-2">' +
|
|
((article.reading_time || null) < 1
|
|
? '1 min'
|
|
: article.reading_time + ' min') +
|
|
' read</small>';
|
|
}
|
|
|
|
var saveButton = '';
|
|
var saveSVG =
|
|
'<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" role="presentation"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z" /></svg>';
|
|
var saveFilledSVG =
|
|
'<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" role="presentation"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"/></svg>';
|
|
// "!=" instead of "!==" used to compare user_id and currentUserId because
|
|
// currentUserId is a String while user_id is an Integer
|
|
if (article.class_name === 'Article' && article.user_id != currentUserId) {
|
|
saveButton = `
|
|
<button
|
|
type="button"
|
|
id="article-save-button-${article.id}"
|
|
class="c-btn c-btn--icon-alone bookmark-button"
|
|
data-reactable-id="${article.id}"
|
|
data-article-author-id="${article.user_id}"
|
|
aria-label="Save post ${article.title} to reading list">
|
|
<span class="bm-initial crayons-icon c-btn__icon">${saveSVG}</span>
|
|
<span class="bm-success crayons-icon c-btn__icon">${saveFilledSVG}</span>
|
|
</button>
|
|
`;
|
|
} else if (article.class_name === 'User') {
|
|
saveButton = `
|
|
<button type="button"
|
|
class="crayons-btn crayons-btn--secondary crayons-btn--icon-left fs-s bookmark-button article-engagement-count engage-button follow-action-button follow-user"
|
|
data-info='{"id": ${article.id},"className":"User", "name": "${userName}"}'
|
|
data-follow-action-button>
|
|
|
|
</button>`;
|
|
}
|
|
|
|
var videoHTML = '';
|
|
if (article.cloudinary_video_url) {
|
|
videoHTML =
|
|
'<a href="' +
|
|
article.path +
|
|
'" class="crayons-story__video" style="background-image:url(' +
|
|
article.cloudinary_video_url +
|
|
')"><div class="crayons-story__video__time">' +
|
|
(article.video_duration_string || article.video_duration_in_minutes) +
|
|
'</div></a>';
|
|
}
|
|
|
|
var navigationLink = `
|
|
<a
|
|
href="${article.path}"
|
|
aria-labelledby="article-link-${article.id}"
|
|
class="crayons-story__hidden-navigation-link"
|
|
>
|
|
${filterXSS(article.title)}
|
|
</a>
|
|
`;
|
|
|
|
return `<article class="crayons-story"
|
|
data-article-path="${article.path}"
|
|
id="article-${article.id}"
|
|
data-content-user-id="${article.user_id}">\
|
|
${navigationLink}\
|
|
<div role="presentation">\
|
|
${videoHTML}\
|
|
<div class="crayons-story__body">\
|
|
<div class="crayons-story__top">\
|
|
${meta}
|
|
</div>\
|
|
<div class="crayons-story__indention">
|
|
<h3 class="crayons-story__title">
|
|
<a href="${article.path}" id="article-link-${article.id}">
|
|
${filterXSS(article.title)}
|
|
</a>
|
|
</h3>\
|
|
<div class="crayons-story__tags">
|
|
${tagString}
|
|
</div>\
|
|
${searchSnippetHTML}\
|
|
<div class="crayons-story__bottom">\
|
|
<div class="crayons-story__details">
|
|
${reactionsDisplay} ${commentsDisplay}
|
|
</div>\
|
|
<div class="crayons-story__save">\
|
|
${readingTimeHTML}\
|
|
${saveButton}
|
|
</div>\
|
|
</div>\
|
|
</div>\
|
|
</div>\
|
|
</div>\
|
|
</article>`;
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
/* eslint-enable no-multi-str */
|