376 lines
20 KiB
Text
376 lines
20 KiB
Text
<%= content_for :page_meta do %>
|
|
<% if @user %>
|
|
<% title "#{@user.name} - DEV" %>
|
|
<link rel="canonical" href="https://dev.to/<%= @user.username %>"/>
|
|
<meta name="description" content="<%= @user.summary %>">
|
|
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://dev.to/<%= @user.username %>" />
|
|
<meta property="og:title" content="<%= @user.name %> — The Practical Dev" />
|
|
<meta property="og:image" content="<%= @user.profile_image_url %>" >
|
|
<meta property="og:description" content="<%= @user.summary %>" />
|
|
<meta property="og:site_name" content="The Practical Dev" />
|
|
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:site" content="@ThePracticalDev">
|
|
<meta name="twitter:creator" content="@<%=@user.twitter_username %>">
|
|
<meta name="twitter:title" content="<%= @user.name %> — The Practical Dev">
|
|
<meta name="twitter:description" content="<%= @user.summary %>">
|
|
<meta name="twitter:image:src" content="<%= @user.profile_image_url %>" >
|
|
<%= auto_discovery_link_tag(:rss, "https://dev.to/feed/#{@user.username}", {title: "The Practical Dev RSS Feed"}) %>
|
|
<% elsif @tag.present? %>
|
|
<% title "#{@tag}#{ " - top this #{params[:timeframe]}" if params[:timeframe].present? } - The DEV Community" %>
|
|
<link rel="canonical" href="https://dev.to/<%= @tag %>"/>
|
|
<meta name="description" content="<%= @tag %> content on dev.to">
|
|
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://dev.to/<%= @tag %>" />
|
|
<meta property="og:title" content="<%= @tag %><%= " - top this #{params[:timeframe]}" if params[:timeframe].present? %> - The DEV Community" />
|
|
<meta property="og:description" content="<%= @tag %> content on dev.to" />
|
|
<meta property="og:site_name" content="The Practical Dev" />
|
|
|
|
<meta name="twitter:site" content="@ThePracticalDev">
|
|
<meta name="twitter:creator" content="@<%=@tag %>">
|
|
<meta name="twitter:title" content="<%= @tag %><%= " - top this #{params[:timeframe]}" if params[:timeframe].present? %> - The DEV Community">
|
|
<meta name="twitter:description" content="<%= @tag %> content on dev.to">
|
|
|
|
<% if @tag_model && @tag_model.social_image.present? %>
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta property="og:image" content="<%= @tag_model.social_image_url %>" >
|
|
<meta name="twitter:image:src" content="<%= @tag_model.social_image_url %>" >
|
|
<% else %>
|
|
<meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/g355ol6qsrg0j2mhngz9.png" >
|
|
<meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/g355ol6qsrg0j2mhngz9.png" >
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<% end %>
|
|
|
|
<% elsif @query.present? %>
|
|
<% title "DEV => Search Results" %>
|
|
<link rel="canonical" href="https://dev.to/search"/>
|
|
<meta name="description" content="Where programmers share ideas and help each other grow.">
|
|
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="DEV => Search Results" />
|
|
<meta property="og:title" content="The Practical Dev" />
|
|
<meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/g355ol6qsrg0j2mhngz9.png" >
|
|
<meta property="og:description" content="Where programmers share ideas and help each other grow." />
|
|
<meta property="og:site_name" content="The DEV Community" />
|
|
|
|
<meta name="twitter:site" content="@ThePracticalDev">
|
|
<meta name="twitter:title" content="DEV => Search Results">
|
|
<meta name="twitter:description" content="Where programmers share ideas, experiences, and help each other grow.">
|
|
<meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/g355ol6qsrg0j2mhngz9.png" >
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<% elsif @podcast_index %>
|
|
<%= render "podcast_episodes/meta" %>
|
|
<% else %>
|
|
<% title "The DEV Community#{ " - top this #{params[:timeframe]}" if params[:timeframe].present? }" %>
|
|
<link rel="canonical" href="https://dev.to<%= request.path %>"/>
|
|
<meta name="description" content="Where programmers share ideas and help each other grow.">
|
|
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://dev.to<%= request.path %>" />
|
|
<meta property="og:title" content="The DEV Community<%= " - top this #{params[:timeframe]}" if params[:timeframe].present? %>" />
|
|
<meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/g355ol6qsrg0j2mhngz9.png" >
|
|
<meta property="og:description" content="Where programmers share ideas and help each other grow." />
|
|
<meta property="og:site_name" content="The DEV Community" />
|
|
|
|
<meta name="twitter:site" content="@ThePracticalDev">
|
|
<meta name="twitter:title" content="The DEV Community<%= " - top this #{params[:timeframe]}" if params[:timeframe].present? %>">
|
|
<meta name="twitter:description" content="Where programmers share ideas, experiences, and help each other grow.">
|
|
<meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/g355ol6qsrg0j2mhngz9.png" >
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<%= auto_discovery_link_tag(:rss, "https://dev.to/feed", {title: "The Practical Dev RSS Feed"}) %>
|
|
<% end %>
|
|
<% end %>
|
|
<% if @user %>
|
|
<style>
|
|
.widget header{
|
|
color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.8) %>;
|
|
}
|
|
.slanty-accent{
|
|
background-color: <%= HexComparer.new([user_colors(@user)[:bg]]).accent %>;
|
|
}
|
|
</style>
|
|
<div class="user-profile-header" style="<%= user_colors_style(@user) %>" itemscope itemtype="http://schema.org/Person" itemprop="mainEntityOfPage">
|
|
<meta itemprop="url" content="https://dev.to/<%=@user.username%>">
|
|
<div class="user-profile-header-container">
|
|
<div class="slanty-accent"></div>
|
|
<div class="profile-pic-wrapper">
|
|
<img class="profile-pic" src="<%= ProfileImage.new(@user).get(320) %>" itemprop="image" alt="<%= @user.username %> profile" style="border-color:<%=user_colors(@user)[:text] %>;background:<%=user_colors(@user)[:text] %>"/>
|
|
</div>
|
|
<div class="profile-details">
|
|
<h1 style="color:<%=user_colors(@user)[:text] %>"><span itemprop="name"><%= @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)[:bg] %>;background-color:<%=user_colors(@user)[:text] %>" data-info='{"id":<%= @user.id%>,"className":"<%= @user.class.name %>"}'> </button>
|
|
</span>
|
|
</h1>
|
|
<p style="color:<%= user_colors(@user)[:text] %>" itemprop="description"><%= @user.summary %></p>
|
|
</div>
|
|
<p class="social <%= "all-three-present" if (@user.twitter_username.present? && @user.github_username.present? && @user.website_url.present?)%> <%= "no-description" if @user.summary.blank? %>">
|
|
<% if @user.twitter_username.present? %>
|
|
<a style="color:<%= user_colors(@user)[:text] %>" href="http://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener"><%= icon("twitter","22") %>
|
|
<span class="social-anchor"><%= @user.twitter_username %></span>
|
|
</a>
|
|
<% end %>
|
|
<% if @user.github_username.present? %>
|
|
<a style="color:<%= user_colors(@user)[:text] %>" href="http://github.com/<%= @user.github_username %>" target="_blank" rel="noopener"><%= icon("github","22") %>
|
|
<span class="social-anchor"><%= @user.github_username %></span>
|
|
</a>
|
|
<% end %>
|
|
<% if @user.website_url.present? %>
|
|
<a style="color:<%= user_colors(@user)[:text] %>" href="<%= @user.website_url %>" target="_blank" rel="noopener">
|
|
<%= icon("link","22") %>
|
|
<span class="social-anchor"><%= beautified_url(@user.website_url)%></span>
|
|
</a>
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% elsif @tag %>
|
|
<style>
|
|
.widget header{
|
|
color: <%= HexComparer.new([@tag_model.bg_color_hex || "#0000000",@tag_model.text_color_hex || "#ffffff"]).brightness(0.8) %>
|
|
}
|
|
.slanty-accent{
|
|
background-color: <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"]).accent %>
|
|
}
|
|
</style>
|
|
<div class="user-profile-header tag-header" style="background-color:<%=@tag_model.bg_color_hex %>;color:<%=@tag_model.text_color_hex %>;">
|
|
<div class="slanty-accent"></div>
|
|
<div class="tag-or-query-header-container">
|
|
<% if @tag_model && @tag_model.pretty_name.present? %>
|
|
<h1> <%= @tag_model.pretty_name %> </h1>
|
|
<% else %>
|
|
<h1> <%= @tag %> </h1>
|
|
<% end %>
|
|
<% if @tag_model %>
|
|
<div class="tag-action-buttons">
|
|
<span class="user-profile-follow-button-wrapper">
|
|
<button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%=@tag_model.bg_color_hex %>;background-color:<%=@tag_model.text_color_hex %>" data-info='{"id":<%= @tag_model.id%>,"className":"Tag"}'> </button>
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% elsif @query %>
|
|
<div id="query-wrapper"></div>
|
|
<% elsif @podcast_index %>
|
|
<% if @podcast %>
|
|
<div class="user-profile-header tag-header podcast-header" style="background:#<%= @podcast.main_color_hex %> url(<%= cl_image_path(@podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png",
|
|
:type=>"fetch",
|
|
:quality => "auto",
|
|
:sign_url => true,
|
|
:flags => "progressive",
|
|
:fetch_format => "jpg") %>);color:white;">
|
|
<div class="tag-or-query-header-container">
|
|
<h1><img class="record" src="<%=cl_image_path(@podcast.image_url,
|
|
:type=>"fetch",
|
|
:crop => "fill",
|
|
:width => 420,
|
|
:height => 420,
|
|
:quality => "auto",
|
|
:sign_url => true,
|
|
:flags => "progressive",
|
|
:fetch_format => "auto",
|
|
:class => "main-image")
|
|
%>"
|
|
alt="<%= @podcast.title %>" /> <%= @podcast.title %></h1>
|
|
</div>
|
|
<%= render "podcast_episodes/subscribe_buttons" %>
|
|
</div>
|
|
<% else %>
|
|
<div class="user-profile-header tag-header">
|
|
<div class="tag-or-query-header-container">
|
|
<h1>Podcasts</h1>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<div class="home <%= "sub-home" if (@user || @tag || @query)%>" id="index-container"
|
|
data-params="<%= params.to_json(only: [:tag,:username,:q]) %>" data-which="<%=@list_of%>"
|
|
data-algolia-tag="<%= @user ? "#{@user.class.name.downcase}_#{@user.id}" : nil || @tag %>"
|
|
data-feed="<%= params[:timeframe] || "base-feed"%>">
|
|
<%= render "articles/sidebar" %>
|
|
<div class="articles-list" id="articles-list">
|
|
<% if @home_page || @tag %>
|
|
<% if @tag_model && @tag_model.supported %>
|
|
<style>
|
|
.nav-chronofiter-link,.narrow-nav-select button {
|
|
color: <%= @tag_model.text_color_hex %> !important;
|
|
}
|
|
.nav-chronofiter-link.selected {
|
|
background: <%= @tag_model.text_color_hex %> !important;
|
|
color: <%= @tag_model.bg_color_hex %> !important;
|
|
box-shadow: 3px 4px 0px <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"], 4).accent %> !important;
|
|
}
|
|
.narrow-nav-menu a.selected {
|
|
color: <%= @tag_model.text_color_hex %> !important;
|
|
background: <%= @tag_model.bg_color_hex %> !important;
|
|
}
|
|
.on-page-nav-controls .separator {
|
|
border-color: <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"], 4).accent %> !important;
|
|
}
|
|
</style>
|
|
<% end %>
|
|
<div class="on-page-nav-controls" id="on-page-nav-controls">
|
|
<div class="on-page-nav-label <%= "sub-home-nav" if (@user || @tag || @query)%>">
|
|
<div class="wide-nav-links">
|
|
<a class="nav-chronofiter-link <%= 'selected' if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %>" href="<%= list_path %>/">
|
|
FEED
|
|
</a>
|
|
<span class="separator"></span>
|
|
<a class="nav-chronofiter-link <%= 'selected' if timeframe_check('week') %>" href="<%= list_path %>/top/week">
|
|
WEEK
|
|
</a>
|
|
<a class="nav-chronofiter-link <%= 'selected' if timeframe_check('month') %>" href="<%= list_path %>/top/month">
|
|
MONTH
|
|
</a>
|
|
<a class="nav-chronofiter-link <%= 'selected' if timeframe_check('year') %>" href="<%= list_path %>/top/year">
|
|
YEAR
|
|
</a>
|
|
<a class="nav-chronofiter-link <%= 'selected' if timeframe_check('infinity') %>" href="<%= list_path %>/top/infinity">
|
|
INIFINITY
|
|
</a>
|
|
<span class="separator"></span>
|
|
<a class="nav-chronofiter-link <%= 'selected' if timeframe_check('latest') %>" href="<%= list_path %>/latest">
|
|
LATEST
|
|
</a>
|
|
</div>
|
|
<div class="narrow-nav-select" aria-label="feed-filter-select">
|
|
<% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %>
|
|
<button id="narrow-feed-butt"><MY DEV FEED></button>
|
|
<% elsif timeframe_check('week') %>
|
|
<button id="narrow-feed-butt"><PAST WEEK></button>
|
|
<% elsif timeframe_check('month') %>
|
|
<button id="narrow-feed-butt"><PAST MONTH></button>
|
|
<% elsif timeframe_check('year') %>
|
|
<button id="narrow-feed-butt"><PAST YEAR></button>
|
|
<% elsif timeframe_check('infinity') %>
|
|
<button id="narrow-feed-butt"><INFINITY></button>
|
|
<% elsif timeframe_check('latest') %>
|
|
<button id="narrow-feed-butt"><LATEST></button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% if @home_page %>
|
|
<button class="on-page-nav-butt on-page-nav-butt-left" id="on-page-nav-butt-left" aria-label="nav-button-left">
|
|
<img src="<%= asset_path 'stack.svg' %>" alt="left-sidebar-nav">
|
|
</button>
|
|
<button class="on-page-nav-butt on-page-nav-butt-right" id="on-page-nav-butt-right" aria-label="nav-button-right">
|
|
<img src="<%= asset_path 'lightning.svg' %>" alt="right-sidebar-nav">
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<% if @user.blank? && @tag.blank? && @featured_story.id %>
|
|
<div id="featured-story-marker"></div>
|
|
<img src="<%=cloud_cover_url(@featured_story.main_image) %>" style="display:none" alt="<%= @featured_story.title %>"/>
|
|
<a href="<%=@featured_story.path%>" id="article-link-<%=@featured_story.id%>" class="index-article-link" aria-label="Main Story">
|
|
<div class="single-article big-article">
|
|
<div class="picture image-final" style="background-color:<%= @featured_story.main_image_background_hex_color %>;background-image:url(<%=cloud_cover_url(@featured_story.main_image)%>)"></div>
|
|
<div class="content-wrapper">
|
|
<h3>
|
|
<%= @featured_story.title %>
|
|
</h3>
|
|
</div>
|
|
<a href="<%= @featured_story.user.path %>" class="featured-profile-button">
|
|
<img class="featured-profile-pic" src="<%= ProfileImage.new(@featured_story.user).get(90) %>" alt="<%= @featured_story.title %>" />
|
|
</a>
|
|
<div class="featured-user-name"><a href="<%= @featured_story.user.path %>"><%= @featured_story.user.name %>・<%= @featured_story.readable_publish_date %></a></div>
|
|
<div class="featured-tags tags">
|
|
<% @featured_story.cached_tag_list_array.each do |tag| %>
|
|
<a href="/t/<%= tag %>"><span class="tag">#<%= tag %></span></a>
|
|
<% end %>
|
|
</div>
|
|
<% if @featured_story.comments_count > 0 %>
|
|
<div class="article-engagement-count comments-count featured-engagement-count">
|
|
<a href="<%=@featured_story.path%>"><img src="<%= asset_path("comments-bubble.png") %>" alt="chat" />
|
|
<span class="engagement-count-number"><%= @featured_story.comments_count %></span>
|
|
</a>
|
|
</div>
|
|
<% end %>
|
|
<% if @featured_story.positive_reactions_count > 0 %>
|
|
<div class="article-engagement-count reactions-count featured-engagement-count" data-reaction-count data-reactable-id="<%= @featured_story.id %>">
|
|
<a href="<%=@featured_story.path%>"><img src="<%= asset_path("reactions-stack.png") %>" alt="heart" /><span id="engagement-count-number-<%= @featured_story.id %>" class="engagement-count-number">
|
|
<%= @featured_story.positive_reactions_count %>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<% end %>
|
|
<button
|
|
class="article-engagement-count bookmark-engage featured-engagement-count"
|
|
data-reactable-id="<%= @featured_story.id %>"
|
|
aria-label="Add to reading list"
|
|
title="Add to reading list" >
|
|
<span class="bm-success"><img src="<%= asset_path("readinglist-button.png") %>" alt="bookmark" /> SAVED</span>
|
|
<span class="bm-initial">SAVE</span>
|
|
</button>
|
|
</div>
|
|
</a>
|
|
<% end %>
|
|
<div class="substories" id="substories">
|
|
<% if @query %>
|
|
<div class="query-results-nothing">
|
|
<div class="query-results-loader"></div>
|
|
<br/>
|
|
</div>
|
|
<% end %>
|
|
<% if params[:view] == "comments" %>
|
|
<%= render "articles/comments_section" %>
|
|
<% elsif (@stories && @stories.any?) || (@comments && @comments.any?) %>
|
|
<%= render "articles/main_stories_feed" %>
|
|
<% elsif @podcast_episodes %>
|
|
<%= render "articles/podcast_episodes_feed" %>
|
|
<% end %>
|
|
</div>
|
|
<div class="loading-articles" id="loading-articles">
|
|
loading...
|
|
</div>
|
|
</div>
|
|
<%= render "articles/sidebar_additional" %>
|
|
</div>
|
|
<% if @query.present? %>
|
|
<%= render "articles/algolia_search" %>
|
|
<% end %>
|
|
|
|
<div class="narrow-nav-menu" id="narrow-nav-menu" aria-label="feed-nav-menu">
|
|
<a href="<%= list_path %>/" class="<%= 'selected' if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %>"><MY DEV FEED></a>
|
|
<a href="<%= list_path %>/top/week" class="<%= 'selected' if timeframe_check('week') %>"><PAST WEEK></a>
|
|
<a href="<%= list_path %>/top/month" class="<%= 'selected' if timeframe_check('month') %>"><PAST MONTH></a>
|
|
<a href="<%= list_path %>/top/year" class="<%= 'selected' if timeframe_check('year') %>"><PAST YEAR></a>
|
|
<a href="<%= list_path %>/top/infinity" class="<%= 'selected' if timeframe_check('infinity') %>"><INFINITY></a>
|
|
<a href="<%= list_path %>/latest" class="<%= 'selected' if timeframe_check('latest') %>"><LATEST></a>
|
|
</div>
|
|
|
|
|
|
<script async>
|
|
var isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
|
|
if (isTouchDevice) {
|
|
function hasClass(el, cls) {
|
|
return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
|
|
}
|
|
var activeLinks = document.getElementsByClassName('active');
|
|
Array.prototype.forEach.call(activeLinks, function(el) { el.classList.remove("active"); });
|
|
|
|
document.getElementById('articles-list').addEventListener('click', function(event) {
|
|
var clickedEl = event.target;
|
|
if (hasClass(clickedEl,"bm-initial") || hasClass(clickedEl,"bm-success")){
|
|
//do nothing
|
|
}
|
|
else if (hasClass(clickedEl.parentNode,"single-article")) {
|
|
clickedEl.parentNode.classList.add('active');
|
|
}
|
|
else if (hasClass(clickedEl.parentNode.parentNode,"single-article")) {
|
|
clickedEl.parentNode.parentNode.classList.add('active');
|
|
}
|
|
else if (hasClass(clickedEl.parentNode.parentNode.parentNode,"single-article")) {
|
|
clickedEl.parentNode.parentNode.parentNode.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
</script>
|