106 lines
5.6 KiB
Text
106 lines
5.6 KiB
Text
<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>
|
|
<div class="user-profile-header" style="<%= user_colors_style(@user) %>" itemscope itemtype="http://schema.org/Person" itemprop="mainEntity">
|
|
<meta itemprop="url" content="https://dev.to/<%= @user.username %>">
|
|
<div class="user-profile-header-container">
|
|
<div class="profile-pic-wrapper">
|
|
<img class="profile-pic" src="<%= ProfileImage.new(@user).get(width: 320) %>" itemprop="image" 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 itemprop="name"><%= 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 %>"}'> </button>
|
|
</span>
|
|
</h1>
|
|
<p class="profile-description" itemprop="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.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>
|