docbrown/app/views/articles/_single_story.html.erb

<div class="crayons-story <% if featured == true %>crayons-story--featured<% end %>" data-content-user-id="<%= story.user_id %>">
  <a href="<%= story.path %>" aria-labelledby="article-link-<%= story.id %>" class="crayons-story__hidden-navigation-link"><%= story.title %></a>
  <% if featured == true %>
    <div id="featured-story-marker" data-featured-article="articles-<%= story.id %>"></div>
  <% end %>
  <% if featured == true || (feed_style_preference == "rich" && story.main_image.present?) %>
    <a href="<%= story.path %>" title="<%= story.title %>" aria-label="article"
      style="background-color: <%= story.main_image_background_hex_color %>; background-image: url(<%= cloud_cover_url(story.main_image) %>);"
      class="crayons-story__cover crayons-story__cover__image">
      <span class="hidden"><%= story.title %></span>
    </a>
  <% end %>

  <% if story.video.present? && story.video_thumbnail_url.present? %>
  <a href="<%= story.path %>" class="crayons-story__video" style="background-image:url(<%= story.cloudinary_video_url %>)">
    <span class="crayons-story__video__time">
      <%= story.video_duration_in_minutes %>
    </span>
  </a>
  <% end %>

  <div class="crayons-story__body">
    <div class="crayons-story__top">
      <div class="crayons-story__meta">
        <div class="crayons-story__author-pic">
          <% if story.cached_organization && !@organization_article_index %>
          <a class="crayons-logo crayons-logo--l" href="/<%= story.cached_organization.slug %>">
            <img alt="<%= story.cached_organization.name %> logo" src="<%= story.cached_organization.profile_image_90 %>" class="crayons-logo__image" loading="lazy" />
          </a>
          <% end %>

          <a href="/<%= story.cached_user.username %>" class="crayons-avatar <% if story.cached_organization && !@organization_article_index %> crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted <% else %> crayons-avatar--l <% end %> ">
            <img src="<%= Images::Profile.call(story.cached_user.profile_image_url, length: 90) %>" alt="<%= story.cached_user.username %> profile" class="crayons-avatar__image" loading="lazy" />
          </a>
        </div>
        <div>
          <div>
            <a href="/<%= story.cached_user.username %>" class="crayons-story__secondary fw-medium m:hidden">
              <%= story.cached_user.name %>
            </a>
            <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block">
              <button id="story-author-preview-trigger-<%= story.id %>" aria-controls="story-author-preview-content-<%= story.id %>" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="<%= story.cached_user.name %> profile details">
                <%= story.cached_user.name %>
              </button>
              <div
                id="story-author-preview-content-<%= story.id %>"
                class="profile-preview-card__content crayons-dropdown"
                style="border-top: var(--su-7) solid var(--card-color);"
                data-repositioning-dropdown="true"
                data-testid="profile-preview-card">
                <div class="gap-4 grid">
                  <div class="-mt-4">
                    <a href="/<%= story.cached_user.username %>" class="flex">
                      <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0">
                        <img
                          src="<%= Images::Profile.call(story.cached_user.profile_image_url, length: 90) %>"
                          class="crayons-avatar__image"
                          alt=""
                          loading="lazy" />
                      </span>
                      <span class="crayons-link crayons-subtitle-2 mt-5"><%= story.cached_user.name %></span>
                    </a>
                  </div>
                  <div class="print-hidden">
                    <button
                      class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100"
                      data-info='{"id": <%= story.user_id %>, "className": "User", "style": "full", "name": "<%= story.cached_user.name %>"}'>
                      Follow
                    </button>
                  </div>
                  <div
                    class="author-preview-metadata-container"
                    data-author-id="<%= story.user_id %>"></div>
                </div>
              </div>
            </div>

            <% if story.cached_organization && !@organization_article_index %>
            <span>
              <span class="crayons-story__tertiary fw-normal"> for </span>
              <a href="/<%= story.cached_organization.slug %>" class="crayons-story__secondary fw-medium"><%= story.cached_organization.name %></a>
            </span>
            <% end %>
          </div>
          <a href="<%= story.path %>" class="crayons-story__tertiary fs-xs"><time datetime="<%= story.published_timestamp %>"><%= story.readable_publish_date %></time><span class="time-ago-indicator-initial-placeholder" data-seconds="<%= story.published_at_int %>"></span></a>
        </div>
      </div>

      <% if local_assigns[:pinned] == true %>
        <div
          class="pinned color-accent-brand fw-bold"
          data-testid="pinned-article">
          <%= inline_svg_tag("pin.svg", alt: "", aria_hidden: true, class: "mr-1 align-text-bottom color-accent-brand") %>Pinned <span class="hidden s:inline">post</span>
        </div>
      <% end %>
    </div>

    <div class="crayons-story__indention">
      <h2 class="crayons-story__title">
        <a href="<%= story.path %>" data-preload-image="<%= cloud_cover_url(story.main_image) %>" id="article-link-<%= story.id %>">
          <%= story.title %>
        </a>
      </h2>
      <div class="crayons-story__tags">
        <% flare_tag = FlareTag.new(story, @tag).tag %>
        <% if flare_tag %>
          <a href="<%= URL.tag flare_tag %>" class="crayons-tag" style="background:<%= flare_tag.bg_color_hex %>;color:<%= flare_tag.text_color_hex %>"><span class="crayons-tag__prefix">#</span><%= flare_tag.name %></a>
        <% end %>
        <% tags_to_display = story.cached_tag_list_array
           if flare_tag
             tags_to_display = tags_to_display.reject { |tag| tag == flare_tag.name }
           end %>
        <% tags_to_display.each do |tag| %>
        <a href="/t/<%= tag %>" class="crayons-tag"><span class="crayons-tag__prefix">#</span><%= tag %></a>
        <% end %>
      </div>
      <div class="crayons-story__bottom">
        <div class="crayons-story__details">
          <% if story.public_reactions_count > 0 %>
            <a href="<%= story.path %>" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="<%= story.id %>">
              <%= inline_svg_tag("small-heart.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Reactions") %>
              <%= story.public_reactions_count %>
              <span class="hidden s:inline">&nbsp;<%= story.public_reactions_count == 1 ? "reaction" : "reactions" %></span>
            </a>
          <% end %>
          <% if story.comments_count > 0 %>
            <a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left">
              <%= inline_svg_tag("small-comment.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Comments") %>
              <%= story.comments_count %>
              <span class="hidden s:inline">&nbsp;<%= story.comments_count == 1 ? "comment" : "comments" %></span>
            </a>
          <% else %>
            <a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left">
              <%= inline_svg_tag("small-comment.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Comments") %>
              <span class="hidden s:inline">Add&nbsp;Comment</span>
            </a>
          <% end %>
        </div>
        <div class="crayons-story__save">
          <small class="crayons-story__tertiary fs-xs mr-2">
            <%= story.reading_time < 1 ? 1 : story.reading_time %> min read
          </small>
          <button type="button" id="article-save-button-<%= story.id %>" class="crayons-btn crayons-btn--secondary crayons-btn--s bookmark-button" data-reactable-id="<%= story.id %>" aria-label="Save to reading list" title="Save to reading list">
            <span class="bm-initial">Save</span>
            <span class="bm-success">Saved</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>