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

<% if user_signed_in? %>
  <% @sticky_collection = StickyArticleCollection.new(@article, @organization || @user) %>
  <% @sticky_articles = @sticky_collection.suggested_stickies %>
  <% @user_stickies = @sticky_collection.user_stickies %>
<% end %>

<% @actor = @article.organization || @article.user %>
<style>
  .primary-sticky-nav-author,.primary-sticky-nav-author-element{
    border: 1px solid <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
    box-shadow: 3px 4px 0px <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
  }
  .primary-sticky-nav-author button{
    background-color: <%= user_colors(@actor)[:bg] %> !important;
    color: <%= user_colors(@actor)[:text] %> !important;
    <% if user_colors(@actor)[:bg].downcase == "#ffffff" %>
      border: 1px solid <%= user_colors(@actor)[:text] %> !important;
    <% end %>
  }
  .primary-sticky-nav-author button a{
    background-color: <%= user_colors(@actor)[:bg] %> !important;
    color: <%= user_colors(@actor)[:text] %> !important;
    <% if user_colors(@actor)[:bg].downcase == "#ffffff" %>
      border: 1px solid <%= user_colors(@actor)[:text] %> !important;
    <% end %>
  }
  .sticky-box-connector{
    background: <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
  }
</style>

<div class="primary-sticky-nav" id="article-show-primary-sticky-nav">
  <div class="primary-sticky-nav-element primary-sticky-nav-author">
    <a href="<%= @actor.path %>"><img src="<%= ProfileImage.new(@actor).get(90) %>" class="primary-sticky-nav-author-top-profile-image" /></a>
    <span class="primary-sticky-nav-author-name">
      <a href="<%= @actor.path %>">
        <%= @actor.name %>
      </a>
    </span>
      <div class="primary-sticky-nav-author-summary">
        <% if @actor.tag_line.present? %>
          <%= truncate (@actor.tag_line || @actor.summary || "Posts in this tag"), length: 200 %>
        <% end %>
      </div>
    <div class="primary-sticky-nav-author-follow">
      <%= follow_button(@actor) %>
    </div>
    <% if @actor.class.name == "User" %>
      <%= render "articles/user_metadata" %>
    <% elsif @actor.class.name == "Organization" && @actor.approved_and_filled_out_cta? %>
      <div class="primary-sticky-nav-org-summary">
        <%= @actor.cta_processed_html.html_safe %>
        <a href="<%= @actor.cta_button_url || "LEARN MORE" %>" class="primary-sticky-nav-org-cta-link">
          <%= @actor.cta_button_text.upcase %>
          <span class="primary-sticky-nav-org-cta-link-domain-small"><%= Addressable::URI.parse(@actor.cta_button_url).domain %></span>
        </a>
      </div>
    <% end %>
  </div>
  <% if params[:html_variant_id] %>
    <% @html_variant = HtmlVariant.where(group: "article_show_sidebar_cta", id: params[:html_variant_id].to_i ).first %>
  <% else %>
    <% @html_variant = HtmlVariant.find_for_test(@article.cached_tag_list_array) %>
  <% end %>
  <% if ( params[:html_variant_id] || !user_signed_in? ) && @html_variant %>
    <div class="html-variant-wrapper" id="html-variant-article-show-sidebar" data-variant-id="<%= @html_variant.id %>" >
      <%= @html_variant.html.html_safe %>
    </div>
  <% end %>

  <% if user_signed_in? && @user_stickies && @user_stickies.any? %>
    <% @user_stickies.each_with_index do |article, index| %>
      <div class="primary-sticky-nav-element-wrapper">
        <% if index == 0 %>
          <div class="primary-sticky-nav-title">
            <% if @actor.username.size < 18 %>
              More from <a href="<%= @actor.path %>">@<%= @actor.username %></a>
            <% else %>
              More from<br/><a href="<%= @actor.path %>">@<%= @actor.username %></a>
            <% end %>
          </div>
        <% end %>
        <a class="primary-sticky-nav-element primary-sticky-nav-author-element" href="<%= article.path %>">
          <img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" />
          <%= article.title %>
          <div class="primary-sticky-nav-element-details">
            <% article.decorate.cached_tag_list_array.each do |tag| %>
              <span>#<%= tag %></span>
            <% end %>
          </div>
        </a>
      </div>
    <% end %>
  <% end %>
  <% if user_signed_in? && @sticky_articles %>
    <% @sticky_articles.each_with_index do |article, index| %>
      <div class="primary-sticky-nav-element-wrapper">
        <% if index == 0 %>
          <div class="primary-sticky-nav-title">
            <img src="<%= asset_path "emoji/apple-fire.png"%>"/> Trending on <a href="https://dev.to">dev.to</a>
          </div>
        <% end %>
        <a class="primary-sticky-nav-element" href="<%= article.path %>">
          <img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" />
          <%= article.title %>
          <div class="primary-sticky-nav-element-details">
            <% article.decorate.cached_tag_list_array.each do |tag| %>
              <span>#<%= tag %></span>
            <% end %>
          </div>
        </a>
      </div>
    <% end %>
  <% end %>
</div>