docbrown/app/views/users/_profile_header.html.erb
Julianna Tetreault fd9fdebc0b
[deploy] Migrate from Schema.org to JSON-LD (#6956)
* Add JSON-LD in place of schema.org in _video_player.html.erb

* Remove unnecessary tags around JSON-LD to clean up templates

* Fix indenatation and remove extra elements from show.html.erb and _profile_header.html.erb

* Remove empty line from articles/show.html.erb

* Clean up JSON-LD commas across erb templates

* Revert articleBody changes, adjust nesting, and remove extra quote

* Add application/ld+json to allowed_types in .erb-lint.yml

This addition makes it so that the no verify flag is no longer required

* Add additional data for Articles, Users, and Orgs to better SEO

* Add additional data to JSON-LD structures
*Add sameAs data to articles/show.html.erb
*Add sameAs data to users/show.html.erb
*Make adjustments to VideoObject data in _video_player
*Make adjustments to Org in _profile_header
*Add removed erb back to all erb templates

* Refactor code to fix syntax Google syntax errors
* Add missing double quotes to values
* Remove unnecessary meta tags from _video_player.html.erb
* Add additional key-value pairs to data structures
* General code clean up

* Clean up existing data structures
  *Remove useless meta tag and replace with a tag
  *Small refactor to users/show.html.erb data

* Extract user json-ld out of users/show.html.erb
  *Move json-ld logic to stories_controller
  *Use user_json_ld variable in place of entire data structure
  *Set user_json_ld as a before_action in the controller

* Add specs around JSON-LD data in templates
  *Add request spec for users/show.html.erb
  *Add request spec for articles/show.html.erb
  *Add request spec for _video_player.html.erb
  *Add request spec for _profile_header.html.erb
  *WIP: Fix pending specs for all templates

* Remove useless meta tags from users/show and _profile_header.html.erb

* Add additional test coverage to users/show.html.erb
  *Add additional tests to user_show_spec
  *Ensure that all tests pass
  *Small refactor to users/show.html.erb JSON data structure

* Add additional test coverage around JSON-LD data
  *Add more robust tests to template specs
  *Remove unnecessary comments from specs
  *Uncomment pending specs

* Adjust modified date to be more readable in article specs

* Refactor spec to be more readable and update GitHub username test

* Remove meta erb from articles/show.html.erb

* Remove meta data from _video_player.html.erb

* Clean up useless codeand whitespace for final review

* Extract users/show data structure from template into StoriesController
  * Remove JSON-LD object from users/show.html.erb
  * Place JSON-LD for users/show.html.erb in StoriesController
  * Store user_json_ld in set_json_ld method in StoriesController
  * Call user_json_ld variable in script tag in users/show
  * Clean up trailing commas and refactor articles/show.html.erb
  * Remove redundant user/profile_header_spec.rb

* Remove unnecessary code from _profile_header and articles/show
  * Remove Organization from articles/show.html.erb
  * Remove unnecessary comments from _profile_header.html.erb

* Extract user_json_ld into separate methods to fix Code Climate failures

* Rename user_profile_details and user_same_as methods to be more explicit

* Refactored user_json_ld methods to use symbols instead of strings
  * Use symbols to fetch keys from a hash instead of strings
  * Changed user_url in data structure

* Removal of erb tags and general clean up

* Revert schema changes

* Remove unnecessary quotation marks
2020-04-15 15:03:05 -04:00

121 lines
5.8 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>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<%= user_url(@user) %>"
},
"url": "<%= user_url(@user) %>",
"image": "<%= ProfileImage.new(@user).get(width: 320) %>",
"name": "<%= sanitize @user.name %>",
"description": "<%= sanitize(@user.summary.presence || "404 bio not found") %>"
}
</script>
<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.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>