229 lines
12 KiB
Text
229 lines
12 KiB
Text
<% title @article.title %>
|
|
|
|
<%= render "shared/webcomponents_loader_script" %>
|
|
<%= javascript_packs_with_chunks_tag "clipboardCopy", "webShare", defer: true %>
|
|
|
|
<% cache("content-related-optional-scripts-#{@article.id}-#{@article.updated_at}", expires_in: 30.hours) do %>
|
|
<% if @article.processed_html.include? "ltag_gist-liquid-tag" %>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js"
|
|
integrity="sha256-xOIPU/XvDtRLeDQ3qj9GOKmlbMSqKa6D7ZIS6ygHBSo="
|
|
crossorigin="anonymous" defer></script>
|
|
<script defer>
|
|
var waitingOnPostscribe = setInterval(function () {
|
|
if (typeof (postscribe) === "function") {
|
|
clearInterval(waitingOnPostscribe);
|
|
var els = document.getElementsByClassName("ltag_gist-liquid-tag");
|
|
for (var i = 0; i < els.length; i++) {
|
|
var current = els[i];
|
|
postscribe(current, current.firstElementChild.outerHTML, {
|
|
beforeWrite: function (context) {
|
|
return function (text) {
|
|
if (context.childElementCount > 3) {
|
|
return "";
|
|
}
|
|
return text;
|
|
}
|
|
}(current)
|
|
});
|
|
}
|
|
}
|
|
}, 500)
|
|
</script>
|
|
<% end %>
|
|
|
|
<% if @article.processed_html.include? "runkit-element" %>
|
|
<%= javascript_include_tag "https://embed.runkit.com" %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if internal_navigation? %>
|
|
<link rel="canonical" href="<%= @article.canonical_url.presence || "https://#{ApplicationConfig['APP_DOMAIN']}#{@article.path}" %>" />
|
|
<meta name="description" content="<%= @article.description_and_tags %>">
|
|
<meta name="keywords" content="<%= @article.cached_tag_list %>, software, coding, development, engineering, inclusive, community">
|
|
<% else %>
|
|
<%= content_for :page_meta do %>
|
|
<link rel="canonical" href="<%= @article.canonical_url.presence || "https://#{ApplicationConfig['APP_DOMAIN']}#{@article.path}" %>" />
|
|
<meta name="description" content="<%= @article.description_and_tags %>">
|
|
<meta name="keywords" content="<%= @article.cached_tag_list %>, software, coding, development, engineering, inclusive, community">
|
|
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://dev.to<%= @article.path %>" />
|
|
<meta property="og:title" content="<%= @article.title %>" />
|
|
<meta property="og:description" content="<%= @article.description || "An article from the community" %>" />
|
|
<meta property="og:site_name" content="<%= community_qualified_name %>" />
|
|
<meta name="twitter:site" content="@<%= SiteConfig.social_networks_handle %>">
|
|
<meta name="twitter:creator" content="@<%= @user.twitter_username %>">
|
|
<meta name="twitter:title" content="<%= @article.title %>">
|
|
<meta name="twitter:description" content="<%= @article.description || "An article from the community" %>">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:widgets:new-embed-design" content="on">
|
|
<% if @article.published %>
|
|
<meta property="og:image" content="<%= article_social_image_url(@article) %>" />
|
|
<meta name="twitter:image:src" content="<%= article_social_image_url(@article) %>">
|
|
<% end %>
|
|
<% if !@article.published || (@article.positive_reactions_count < 7 && @article.user.comments_count < 1 && !@article.featured) ||
|
|
@article.featured_number.to_i < 1500000000 || @article.score < -10 %>
|
|
<meta name="googlebot" content="noindex">
|
|
<meta name="googlebot" content="nofollow">
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<div class="home">
|
|
<div
|
|
class="container article"
|
|
id="article-show-container"
|
|
data-author-id="<%= @article.user_id %>"
|
|
data-live="<%= @article.live_now %>"
|
|
data-path="<%= @article.path %>"
|
|
data-published="<%= @article.published? %>">
|
|
<% if @article.video_state == "PROGRESSING" %>
|
|
<h1 style="text-align:center;">⏳ Video Transcoding In Progress ⏳</h1>
|
|
<% end %>
|
|
<article itemscope itemtype="http://schema.org/Article" itemprop="mainEntity">
|
|
<meta itemprop="url" content="https://dev.to<%= @article.path %>">
|
|
<meta itemprop="image" content="<%= article_social_image_url(@article) %>">
|
|
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
|
|
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
|
|
<meta itemprop="url" content="<%= asset_path "android-icon-192x192.png" %>">
|
|
<meta itemprop="width" content="192">
|
|
<meta itemprop="height" content="192">
|
|
</div>
|
|
<meta itemprop="name" content="DEV Community">
|
|
</div>
|
|
<section>
|
|
<% if !@article.published %>
|
|
<a href="<%= @article.path %>/edit" class="unpublished">
|
|
Unpublished Post. This URL is public but secret, so share at your own discretion.
|
|
<em style="display: inline-block;">Click to edit.</em>
|
|
</a>
|
|
<% end %>
|
|
<% if @article.video.present? %>
|
|
<%= render "articles/video_player", meta_tags: true, article: @article %>
|
|
<% elsif @article.main_image.present? %>
|
|
<div class="image image-final" style="background-color:<%= @article.main_image_background_hex_color %>;background-image:url(<%= cloud_cover_url(@article.main_image) %>)">
|
|
</div>
|
|
<% else %>
|
|
<div class="blank-space"></div>
|
|
<% end %>
|
|
</section>
|
|
<header class="title" id="main-title">
|
|
<% if @organization %>
|
|
<a href="<%= @organization.path %>" class="org-branded-title-link">
|
|
<div class="org-branded-title">
|
|
<img src="<%= ProfileImage.new(@organization).get(width: 50) %>" class="org-pic" alt="<%= @organization.name %> profile image"> <%= @organization.name %>
|
|
</div>
|
|
</a>
|
|
<% end %>
|
|
<h1 class="<%= @article.title_length_classification %>" itemprop="name headline">
|
|
<%= @article.title %>
|
|
</h1>
|
|
<h3>
|
|
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
|
|
<meta itemprop="url" content="https://dev.to/<%= @user.username %>">
|
|
<a href="/<%= @user.username %>" class="author">
|
|
<img class="profile-pic" src="<%= ProfileImage.new(@user).get(width: 50) %>" alt="<%= @user.username %> profile image" />
|
|
<span itemprop="name"><%= @user.name %></span>
|
|
</a>
|
|
</span>
|
|
<% if @user.twitter_username.present? %>
|
|
<a href="http://twitter.com/<%= @user.twitter_username %>"><%= image_tag_or_inline_svg_tag "twitter", width: 18, height: 18 %></a>
|
|
<% end %>
|
|
<% if @user.github_username.present? %>
|
|
<a href="http://github.com/<%= @user.github_username %>"><%= image_tag_or_inline_svg_tag "github", width: 18, height: 18 %></a>
|
|
<% end %>
|
|
<% if @article.published_timestamp.present? %>
|
|
<time itemprop="datePublished" datetime="<%= @article.published_timestamp %>"><%= @article.readable_publish_date %></time>
|
|
<% end %>
|
|
<% if @second_user.present? %>
|
|
<em>with <b><a href="<%= @second_user.path %>"><%= @second_user.name %></a></b></em>
|
|
<% end %>
|
|
<% if @third_user.present? %>
|
|
<em> and <b><a href="<%= @third_user.path %>"><%= @third_user.name %></a></b></em>
|
|
<% end %>
|
|
<% if should_show_updated_on?(@article) %>
|
|
<span><em>Updated on <time itemprop="dateModified" datetime="<%= @article.edited_at&.utc&.iso8601 %>"><%= @article.edited_at&.strftime("%b %d, %Y") %></time></em></span>
|
|
<% elsif should_show_crossposted_on?(@article) %>
|
|
<span>
|
|
<em>
|
|
Originally published at
|
|
<a href="<%= @article.canonical_url || @article.feed_source_url %>" style="color:#1395b8"><%= get_host_without_www(@article.canonical_url || @article.feed_source_url) %></a>
|
|
on
|
|
<% if @article.crossposted_at %>
|
|
<time datetime="<%= (@article.originally_published_at || @article.published_at)&.utc&.iso8601 %>"><%= (@article.originally_published_at || @article.published_at)&.strftime("%b %d, %Y") %></time>
|
|
<% end %>
|
|
</em>
|
|
</span>
|
|
<% end %>
|
|
<span class="published-at">・<%= @article.reading_time < 1 ? 1 : @article.reading_time %> min read</span>
|
|
<span class="action-space" id="action-space"></span>
|
|
</h3>
|
|
<% cache("main-article-tags-#{@article.cached_tag_list}", expires_in: 30.hours) do %>
|
|
<div class="tags">
|
|
<% @article.cached_tag_list_array.each do |tag| %>
|
|
<% tag_hash = tag_colors(tag) %>
|
|
<a class="tag" href="/t/<%= tag %>" style="background-color:<%= tag_hash[:background] %>;color:<%= tag_hash[:color] %>">#<%= tag %></a>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</header>
|
|
<% if @article.collection_id %>
|
|
<%= render "articles/collection", position: "top" %>
|
|
<% end %>
|
|
<div class="body" data-article-id="<%= @article.id %>" id="article-body" itemprop="articleBody">
|
|
<%= @article.processed_html.html_safe %>
|
|
</div>
|
|
<% if @article.body_markdown && @article.body_markdown.size > 900 && @article.collection_id %>
|
|
<%= render "articles/collection", position: "bottom" %>
|
|
<% end %>
|
|
<%= render "articles/actions" %>
|
|
</article>
|
|
<% if @article.body_markdown && @article.body_markdown.size > 900 %>
|
|
<% cache("article-about-author-#{@user.id}-#{@user.updated_at}", expires_in: 100.hours) do %>
|
|
<%= render "articles/about_author" %>
|
|
<% end %>
|
|
<% end %>
|
|
<%= render "articles/org_branding", organization: @organization %>
|
|
<%= render "articles/full_comment_area" %>
|
|
</div>
|
|
<% cache("article-bottom-content-#{@article.id}", expires_in: 18.hours) do %>
|
|
<% @classic_article = Suggester::Articles::Classic.new(@article, not_ids: [@article.id]).get.first %>
|
|
<% if @classic_article %>
|
|
<%= render "additional_content_boxes/article_box",
|
|
article: @classic_article,
|
|
classification: "classic",
|
|
classification_text: "Classic DEV Post from #{@classic_article.readable_publish_date}",
|
|
follow_cue: "Follow <a href='#{@classic_article.user.path}'>@#{@classic_article.user.username}</a> to see more of their posts in your feed." %>
|
|
<% end %>
|
|
<div id="additional-content-area" data-article-id="<%= @article.id %>,<%= @classic_article&.id %>"></div>
|
|
<% suggested_articles = ArticleSuggester.new(@article).articles(max: 4) %>
|
|
<%= render "articles/bottom_content", articles: suggested_articles %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% stick_nav_cache_key = "sticky-sidebar-#{@article.id}-#{(@organization || @user).profile_updated_at}-#{(@organization || @user).last_article_at}-#{@variant_number}-#{(@organization || @user).pro?}" %>
|
|
<% cache(stick_nav_cache_key, expires_in: 50.hours) do %>
|
|
<%= render "articles/sticky_nav" %>
|
|
<% end %>
|
|
|
|
<% cache("specific-article-extra-scripts-#{@article.id}-#{@article.updated_at}", expires_in: 24.hours) do %>
|
|
<% if has_vid?(@article) %>
|
|
<%= render "articles/fitvids" %>
|
|
<% end %>
|
|
<% if @article.processed_html.include? 'class="twitter-tweet"' %>
|
|
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
|
<% end %>
|
|
<% if @article.processed_html.include? "instagram-media" %>
|
|
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% cache("article-show-scripts", expires_in: 8.hours) do %>
|
|
<script async>
|
|
<%# we consider these scripts safe for embedding as they come from our code %>
|
|
<%= PodcastTag.script.html_safe %>
|
|
<%= PollTag.script.html_safe %>
|
|
<%= RunkitTag.script.html_safe %>
|
|
<%= TweetTag.script.html_safe %>
|
|
</script>
|
|
<% end %>
|