1a417174c3
* move current profile card content to shared view, create profile preview card shared view * article page: show link in small screens, button with preview card in larger * initialize the hover and click functionality * tweak class names * make sure modals sit at highest elevation level * add cypress tests * add a test to make sure mobile view unaffected * make sure follow buttons initialized in test before asserting on them
235 lines
12 KiB
Text
235 lines
12 KiB
Text
<% title @article.title_with_query_preamble(user_signed_in?) %>
|
|
|
|
<%= render "shared/payment_pointer", user: @article.user %>
|
|
|
|
<style>
|
|
.html-variant-wrapper { display: none}
|
|
</style>
|
|
|
|
<%= render "shared/webcomponents_loader_script" %>
|
|
<% if user_signed_in? %>
|
|
<%= javascript_packs_with_chunks_tag "clipboardCopy", "webShare", "articlePage", "articleModerationTools", "commentDropdowns", defer: true %>
|
|
<% else %>
|
|
<%= javascript_packs_with_chunks_tag "clipboardCopy", "webShare", "articlePage", "commentDropdowns", defer: true %>
|
|
<% end %>
|
|
|
|
<% cache("content-related-optional-scripts-#{@article.id}-#{@article.updated_at}-#{internal_navigation?}-#{user_signed_in?}", expires_in: 30.hours) do %>
|
|
<% unless internal_navigation? || user_signed_in? %>
|
|
<script type="application/ld+json">
|
|
<%= @article_json_ld.to_json.html_safe %>
|
|
</script>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if internal_navigation? %>
|
|
<!-- You may be seeing the canonical URL in the body for human inspection -->
|
|
<!-- This is because of navigation via InstantClick, instantclick.io -->
|
|
<!-- However, the crawled version of the page has the canonical in the head. -->
|
|
<!-- This is confirmed by the canonical url inspector. See https://github.com/forem/forem/issues/9509#issuecomment-732259221. -->
|
|
<link rel="canonical" href="<%= @article.canonical_url.presence || app_url(@article.path) %>" />
|
|
<meta name="description" content="<%= @article.description_and_tags %>">
|
|
<%= meta_keywords_article(@article.cached_tag_list) %>
|
|
<% else %>
|
|
<%= content_for :page_meta do %>
|
|
<link rel="canonical" href="<%= @article.canonical_url.presence || app_url(@article.path) %>" />
|
|
<meta name="description" content="<%= @article.description_and_tags %>">
|
|
<%= meta_keywords_article(@article.cached_tag_list) %>
|
|
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="<%= article_url(@article) %>" />
|
|
<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_name %>" />
|
|
<meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
|
|
<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">
|
|
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
|
|
<% 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.score < 5 &&
|
|
@article.user.comments_count < 1 &&
|
|
!@article.featured &&
|
|
@article.processed_html.exclude?("<code>")) ||
|
|
@article.featured_number.to_i < 1500000000 ||
|
|
@article.score < -1 %>
|
|
<meta name="robots" content="noindex">
|
|
<meta name="robots" content="nofollow">
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<div class="crayons-layout crayons-layout--3-cols crayons-layout--article">
|
|
<aside class="crayons-layout__sidebar-left" aria-label="Article actions">
|
|
<%= render "articles/actions" %>
|
|
</aside>
|
|
|
|
<main id="main-content" class="crayons-layout__content grid gap-4">
|
|
<div class="article-wrapper">
|
|
<% if !@article.published %>
|
|
<div class="crayons-notice crayons-notice--danger mb-4" aria-live="polite">
|
|
<strong>Unpublished Post.</strong> This URL is public but secret, so share at your own discretion.
|
|
<% if user_signed_in? %>
|
|
<a id="author-click-to-edit" href="<%= @article.path %>/edit" class="fw-bold" display="none">Click to edit</a>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if @article.video_state == "PROGRESSING" %>
|
|
<div class="crayons-notice crayons-notice--warning mb-4" aria-live="polite">⏳ Video Transcoding In Progress ⏳</div>
|
|
<% end %>
|
|
|
|
<article class="crayons-card crayons-article mb-4"
|
|
id="article-show-container"
|
|
data-article-id="<%= @article.id %>"
|
|
data-author-id="<%= @article.user_id %>"
|
|
data-path="<%= @article.path %>"
|
|
data-published="<%= @article.published? %>"
|
|
data-pin-path="<%= stories_feed_pinned_article_path %>"
|
|
data-pinned-article-id="<%= @pinned_article_id %>"
|
|
<%= @article.pinned? ? "data-pinned" : " " %>>
|
|
<header class="crayons-article__header" id="main-title">
|
|
<% if @article.video.present? %>
|
|
<%= render "articles/video_player", meta_tags: true, article: @article %>
|
|
<% elsif @article.main_image.present? %>
|
|
<div class="crayons-article__cover">
|
|
<img src="<%= cloud_cover_url(@article.main_image) %>" width="1000" height="420" style="background-color:<%= @article.main_image_background_hex_color %>;" class="crayons-article__cover__image" alt="Cover image for <%= sanitize_and_decode @article.title %>">
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="crayons-article__header__meta">
|
|
<% if @organization %>
|
|
<a href="<%= @organization.path %>" class="flex items-center mb-4 fs-l fw-medium crayons-link">
|
|
<span class="crayons-logo crayons-logo--l mr-3">
|
|
<img src="<%= Images::Profile.call(@organization.profile_image_url, length: 50) %>" class="crayons-logo__image" alt="<%= @organization.name %> profile image">
|
|
</span>
|
|
<%= @organization.name %>
|
|
</a>
|
|
<% end %>
|
|
<h1 class="fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 <%= @article.title_length_classification %>">
|
|
<% if @article.search_optimized_title_preamble.present? && !user_signed_in? %>
|
|
<span class="fs-xl color-base-70 block"><%= @article.search_optimized_title_preamble %></span>
|
|
<% end %>
|
|
<%= sanitize_and_decode @article.title %>
|
|
</h1>
|
|
|
|
<% cache("main-article-tags-#{@article.cached_tag_list}", expires_in: 30.hours) do %>
|
|
<div class="mb-4 spec__tags">
|
|
<% @article.cached_tag_list_array.each do |tag| %>
|
|
<% tag_hash = tag_colors(tag) %>
|
|
<a class="crayons-tag mr-1" href="/t/<%= tag %>" style="background-color:<%= tag_hash[:background] %>;color:<%= tag_hash[:color] %>"><span class="crayons-tag__prefix">#</span><%= tag %></a>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="crayons-article__subheader">
|
|
<a href="/<%= @user.username %>" class="flex items-center mr-2 mb-4 s:mb-0 fw-medium crayons-link">
|
|
<span class="crayons-avatar crayons-avatar--l mr-2"><img class="crayons-avatar__image" src="<%= Images::Profile.call(@user.profile_image_url, length: 50) %>" alt="" /></span>
|
|
<span class="block m:hidden"><%= @user.name %></span>
|
|
</a>
|
|
<div class="profile-preview-card relative mr-4 mb-4 s:mb-0 fw-medium">
|
|
<button id="profile-preview-trigger" class="profile-preview-card__trigger px-0 crayons-btn crayons-btn--ghost hidden m:block" aria-label="<%= @user.name %> profile details"><%= @user.name %></button>
|
|
<%= render "/shared/profile_preview_card", actor: @user, id: "profile-preview-content" %>
|
|
</div>
|
|
|
|
<span class="fs-s mb-4 s:mb-0">
|
|
<% if @article.published_timestamp.present? %>
|
|
<%= local_date(@article.published_timestamp, show_year: @article.displayable_published_at.year != Time.current.year) %>
|
|
<% end %>
|
|
<% if @article.co_author_ids.present? %>
|
|
<em>with <%= @article.co_author_name_and_path.html_safe %></em>
|
|
<% end %>
|
|
|
|
<% if should_show_crossposted_on?(@article) %>
|
|
<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>
|
|
<% if @article.crossposted_at %>
|
|
on
|
|
<%= local_date(@article.originally_published_at || @article.published_at, show_year: (@article.originally_published_at || @article.published_at).year != Time.current.year) %>
|
|
<% end %>
|
|
</em>
|
|
<% end %>
|
|
<% if should_show_updated_on?(@article) %>
|
|
・<em>Updated on <%= local_date(@article.edited_at, show_year: @article.edited_at.year != Time.current.year) %></em>
|
|
<% end %>
|
|
|
|
<span class="mr-4">・<%= @article.reading_time < 1 ? 1 : @article.reading_time %> min read</span>
|
|
</span>
|
|
<span id="action-space" class="mb-4 s:mb-0"></span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="crayons-article__main">
|
|
<% if @collection %>
|
|
<%= render "articles/collection",
|
|
rendered_article: @article,
|
|
collection: @collection,
|
|
articles: @collection_articles %>
|
|
<% end %>
|
|
|
|
<div class="crayons-article__body text-styles spec__body" data-article-id="<%= @article.id %>" id="article-body">
|
|
<%= @article.processed_html.html_safe %>
|
|
</div>
|
|
|
|
<% if @article.long_markdown? && @collection %>
|
|
<%= render "articles/collection",
|
|
rendered_article: @article,
|
|
collection: @collection,
|
|
articles: @collection_articles %>
|
|
<% end %>
|
|
</div>
|
|
<%= render "articles/full_comment_area" %>
|
|
|
|
</article>
|
|
|
|
<% cache("article-bottom-content-#{@article.id}-#{user_signed_in?}-#{(@organization || @user).latest_article_updated_at}", expires_in: 18.hours) do %>
|
|
<% suggested_articles = Articles::Suggest.call(@article, max: 4) %>
|
|
<%= render "articles/bottom_content", articles: suggested_articles %>
|
|
<% end %>
|
|
</div>
|
|
</main>
|
|
|
|
<aside class="crayons-layout__sidebar-right" aria-label="Right sidebar navigation">
|
|
<% stick_nav_cache_key = "sticky-sidebar-#{@article.id}-#{(@organization || @user).profile_updated_at}-#{(@organization || @user).latest_article_updated_at}" %>
|
|
<% cache(stick_nav_cache_key, expires_in: 50.hours) do %>
|
|
<%= render "articles/sticky_nav" %>
|
|
<% end %>
|
|
</aside>
|
|
</div>
|
|
|
|
<% 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"') ||
|
|
@article.processed_html.include?("ltag_twitter_timeline-liquid-tag") %>
|
|
<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 %>
|
|
|
|
<div class="mod-actions-menu print-hidden"></div>
|
|
<div id="mod-actions-menu-btn-area" class="print-hidden"></div>
|
|
<div data-testid="flag-user-modal-container" class="flag-user-modal-container hidden"></div>
|
|
|
|
<div class="fullscreen-code js-fullscreen-code"></div>
|
|
|
|
<% 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 %>
|
|
<%== PollTag.script %>
|
|
<%== RunkitTag.script %>
|
|
<%== TweetTag.script %>
|
|
<%== UserSubscriptionTag.script %>
|
|
</script>
|
|
<% end %>
|