docbrown/app/assets/javascripts/utilities/buildArticleHTML.js.erb

function buildArticleHTML(article) {
  if (article && article.class_name == "PodcastEpisode") {
    return '<div class="single-article single-article-small-pic single-article-single-podcast">\
      <div class="small-pic">\
       <a href="/'+article.podcast.slug+'" class="small-pic-link-wrapper">\
         <img src="'+article.podcast.image_url+'" alt="'+article.podcast.title+' image">\
       </a>\
       </div>\
       <a href="'+article.path+'" class="small-pic-link-wrapper index-article-link" id="article-link-'+article.id+'">\
        <div class="content">\
         <h3><span class="tag-identifier">podcast</span>'+article.title+'</h3>\
        </div>\
       </a>\
       <h4><a href="/'+article.podcast.slug+'">'+article.podcast.title+'</a></h4>\
       </div>';
  }
  else if (article) {
    var container = document.getElementById("index-container");
    var tagString = ""
    var tagList = article.tag_list || article.cached_tag_list_array
    if(tagList) {
      tagList.forEach(function(t){
      tagString = tagString + '<a href="/t/'+t+'"><span class="tag">#'+t+'</span></a>\n'
      });
    }
    var commentsCountHTML = ""
    if ((article.comments_count || '0') > 0 && article.class_name != "User") {
      commentsCountHTML = '<div class="article-engagement-count comments-count"><a href="'+article.path+'#comments"><img src="<%= asset_path("comments-bubble.png") %>" alt="chat" /><span class="engagement-count-number">'+(article.comments_count || '0')+'</span></a></div>'
    }
    var flareTag = ""
    if (container){
      var currentTag = JSON.parse(container.dataset.params).tag
    }
    if (article.flare_tag && currentTag != article.flare_tag.name) {
      flareTag = "<span class='tag-identifier' style='background:"+article.flare_tag.bg_color_hex+";color:"+article.flare_tag.text_color_hex+"'>#"+article.flare_tag.name+"</span>"
    }
    if (article.class_name == "PodcastEpisode"){
      flareTag = "<span class='tag-identifier'>podcast</span>"
    }
    if (article.class_name == "Comment"){
      flareTag = "<span class='tag-identifier'>comment</span>"
    }
    if (article.class_name == "User"){
      flareTag = "<span class='tag-identifier' style='background:#5874d9;color:white;'>person</span>"
    }
    var rc = article.positive_reactions_count
    var reactionsCountHTML = ''
    if ((rc || '0') > 0 && article.class_name != "User") {
      var reactionsCountHTML = '<div class="article-engagement-count reactions-count"><a href="'+article.path+'"><img src="<%= asset_path("reactions-stack.png") %>" alt="heart" /><span id="engagement-count-number-'+article.id+'" class="engagement-count-number">'+(rc || '0')+'</span></a></div>'
    }
    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 = article.user.name;
    }
    var orgHeadline = "";
    if (article.organization && !document.getElementById("organization-article-index")) {
      orgHeadline = '<div class="article-organization-headline"><a class="org-headline-filler" href="/'+article.organization.slug+'"><img alt="'+article.organization.name+' logo" src="'+article.organization.profile_image_90+'" loading="lazy">'+article.organization.name+'</a></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="search-snippet"><span>' + bodyTextSnippet + '</span></div>'
      }
    }
    var saveButton = '';
    if (article.class_name === "Article") {
      saveButton = '<button type="button" class="article-engagement-count engage-button bookmark-button" data-reactable-id="'+article.id+'">\
                      <span class="bm-initial">SAVE</span>\
                      <span class="bm-success">SAVED</span>\
                    </button>'
    } else if (article.class_name === "User") {
      saveButton = '<button type="button" style="width: 122px" class="article-engagement-count engage-button follow-action-button"\
                       data-info=\'{"id":'+article.id+',"className":"User"}\' data-follow-action-button>\
                       &nbsp;\
                    </button>'
    }

    var publishDate = '';
    if (article.readable_publish_date) {
      if (article.published_timestamp) {
        publishDate = '・' + '<time datetime="'+article.published_timestamp+'">'+article.readable_publish_date+'</time>';
      } else {
        publishDate = '・' + '<time>'+article.readable_publish_date+'</time>';
      }
    }

    var readingTimeHTML = '';
    if (article.class_name === "Article") {
      // we have ` ... || null` for the case article.reading_time is undefined
      readingTimeHTML = '<a href="'+article.path+'" class="article-reading-time">'+ ((article.reading_time || null) < 1 ? '1 min' : article.reading_time + ' min') +' read</a>'
    }

    var videoHTML = '';
    if (article.cloudinary_video_url) {
      videoHTML = '<a href="'+article.path+'" class="single-article-video-preview" style="background-image:url('+article.cloudinary_video_url+')"><div class="single-article-video-duration"><img src="<%= asset_path("video-camera.svg") %>" alt="video camera">'+article.video_duration_in_minutes+'</div></a>'
    }

    var timeAgoInWords = '';
    if (article.published_at_int) {
      timeAgoInWords = timeAgo({ oldTimeInSeconds: article.published_at_int });
    }

    return '<div class="single-article single-article-small-pic" data-content-user-id="'+article.user_id+'">\
      '+videoHTML+'\
      '+orgHeadline+'\
      <div class="small-pic">\
       <a href="/'+profileUsername+'" class="small-pic-link-wrapper">\
         <img src="'+picUrl+'" alt="'+profileUsername+' profile" loading="lazy">\
       </a>\
       </div>\
       <a href="'+article.path+'" class="small-pic-link-wrapper index-article-link" id="article-link-'+article.id+'">\
        <div class="content">\
         <h3>'+flareTag+filterXSS(article.title)+'</h3>\
         '+searchSnippetHTML+'\
        </div>\
       </a>\
       <h4><a href="/'+profileUsername+'">'+filterXSS(userName)+publishDate+timeAgoInWords+'</a></h4>\
       <div class="tags">'+tagString+'</div>\
       '+commentsCountHTML+reactionsCountHTML+readingTimeHTML+'\
       '+saveButton+'</div>';
  }
}