docbrown/app/views/users/_profile_header.html.erb

<style>
  .widget header {
    color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
  }

  <% if user_colors(@user)[:bg].downcase.start_with?("#fff") %>
  .user-profile-follow-button {
    border: 1px solid <%= user_colors(@user)[:text] %> !important;
  }
  <% end %>
</style>

<% unless internal_navigation? || user_signed_in? %>
  <script type="application/ld+json">
    <%= @organization_json_ld.to_json.html_safe %>
  </script>
<% end %>

<div class="user-profile-header" style="<%= user_colors_style(@user) %>">
  <a href="<%= user_url(@user) %>"></a>
  <div class="user-profile-header-container">
    <div class="profile-pic-wrapper">
      <img class="profile-pic" src="<%= ProfileImage.new(@user).get(width: 320) %>" alt="<%= @user.username %> profile" style="border-color:<%= user_colors(@user)[:bg] %>;background:<%= user_colors(@user)[:bg] %>" />
    </div>
    <div class="profile-details">
      <h1 style="color:<%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %>">
        <span><%= sanitize @user.name %></span>
        <span class="user-profile-follow-button-wrapper">
          <button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%= user_colors(@user)[:text] %>;background-color:<%= user_colors(@user)[:bg] %>" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>"}'>&nbsp;</button>
        </span>
      </h1>
      <p class="profile-description">
        <%= sanitize(@user.summary.presence || "404 bio not found") %>
      </p>
      <style>
        .profile-details .social .icon-img path {
          fill: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %> !important;
        }
      </style>
      <p class="social">
        <% if @user.twitter_username.present? %>
          <a href="https://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener me">
            <%= inline_svg_tag("twitter-logo.svg", class: "icon-img", aria: true, title: "Twitter logo") %>
          </a>
        <% end %>
        <% if @user.github_username.present? %>
          <a href="https://github.com/<%= @user.github_username %>" target="_blank" rel="noopener me">
            <%= inline_svg_tag("github-logo.svg", class: "icon-img", aria: true, title: "GitHub logo") %>
          </a>
        <% end %>
        <% if @user.class.name == "User" %>
          <% if @user.mastodon_url.present? %>
            <a href="<%= @user.mastodon_url %>" target="_blank" rel="noopener">
              <%= inline_svg_tag("mastodon-logo.svg", class: "icon-img", aria: true, title: "Mastodon logo") %>
            </a>
          <% end %>
          <% if @user.facebook_url.present? %>
            <a href="<%= @user.facebook_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("facebook-logo.svg", class: "icon-img", aria: true, title: "Facebook logo") %>
            </a>
          <% end %>
          <% if @user.youtube_url.present? %>
            <a href="<%= @user.youtube_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("youtube-logo.svg", class: "icon-img", aria: true, title: "Youtube logo") %>
            </a>
          <% end %>
          <% if @user.linkedin_url.present? %>
            <a href="<%= @user.linkedin_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("linkedin_icon.svg", class: "icon-img", aria: true, title: "LinkedIn logo") %>
            </a>
          <% end %>
          <% if @user.behance_url.present? %>
            <a href="<%= @user.behance_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("behance_icon.svg", class: "icon-img", aria: true, title: "Behance logo") %>
            </a>
          <% end %>
          <% if @user.stackoverflow_url.present? %>
            <a href="<%= @user.stackoverflow_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("stackoverflow-logo.svg", class: "icon-img", aria: true, title: "StackOverflow logo") %>
            </a>
          <% end %>
          <% if @user.dribbble_url.present? %>
            <a href="<%= @user.dribbble_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("dribbble_icon.svg", class: "icon-img", aria: true, title: "Dribbble logo") %>
            </a>
          <% end %>
          <% if @user.medium_url.present? %>
            <a href="<%= @user.medium_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("medium_icon.svg", class: "icon-img", aria: true, title: "Medium logo") %>
            </a>
          <% end %>
          <% if @user.gitlab_url.present? %>
            <a href="<%= @user.gitlab_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("gitlab.svg", class: "icon-img", aria: true, title: "GitLab logo") %>
            </a>
          <% end %>
           <% if @user.instagram_url.present? %>
            <a href="<%= @user.instagram_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("instagram-logo.svg", class: "icon-img", aria: true, title: "Instagram logo") %>
            </a>
          <% end %>
          <% if @user.twitch_url.present? %>
            <a href="<%= @user.twitch_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("twitch-logo.svg", class: "icon-img", aria: true, title: "Twitch logo") %>
            </a>
          <% end %>
          <% if @user.website_url.present? %>
            <a href="<%= @user.website_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("external-link-logo.svg", class: "icon-img", aria: true, title: "external link icon") %>
            </a>
          <% end %>
        <% end %>
      </p>
    </div>
  </div>
  <%= render "articles/user_metadata", context: "profile" %>
</div>