18877f6f1b
* Apply overflow-wrap fallback everywhere we use anywhere value * fix some more non breaking spaces layout issues * user with org sidebar * comment index header
178 lines
8.5 KiB
Text
178 lines
8.5 KiB
Text
<%= javascript_packs_with_chunks_tag "postCommentsPage", defer: true %>
|
|
<% if @root_comment.present? %>
|
|
<% title(@root_comment.title.to_s) %>
|
|
<% else %>
|
|
<% title(t("views.comments.meta.title_root", title: @commentable.title)) %>
|
|
<% end %>
|
|
|
|
<% if @commentable %>
|
|
<%= content_for :page_meta do %>
|
|
<meta name="description" content="<%= @commentable.description || t("views.comments.meta.description") %>">
|
|
<%= meta_keywords_article %>
|
|
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:title" content="<%= t("views.comments.meta.og.title", title: @commentable.title) %>" />
|
|
<meta property="og:description" content="<%= @commentable.description || t("views.comments.meta.og.description", site: community_name) %>" />
|
|
<meta property="og:site_name" content="<%= community_name %>" />
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
|
|
<meta name="twitter:creator" content="@<%= @user.twitter_username %>">
|
|
<meta name="twitter:title" content="<%= @commentable.title %>">
|
|
<meta name="twitter:description" content="<%= @commentable.description || t("views.comments.meta.og.description", site: community_name) %>">
|
|
|
|
<% if @root_comment.present? %>
|
|
<link rel="canonical" href="<%= app_url(@root_comment.path) %>" />
|
|
<meta property="og:url" content="<%= app_url(@root_comment.path) %>" />
|
|
<meta property="og:title" content="<%= t("views.comments.meta.og.title_rel", root: truncate(strip_tags(@root_comment.processed_html), length: 50), site: community_name) %>" />
|
|
<meta name="twitter:title" content="<%= t("views.comments.meta.og.title_rel", root: truncate(strip_tags(@root_comment.processed_html), length: 50), site: community_name) %>">
|
|
<meta property="og:image" content="<%= comment_social_image_url(@root_comment) %>" />
|
|
<meta name="twitter:image" content="<%= comment_social_image_url(@root_comment) %>">
|
|
<% if @root_comment.score < 0 || @commentable.score < 0 %>
|
|
<meta name="googlebot" content="noindex">
|
|
<meta name="googlebot" content="nofollow">
|
|
<% end %>
|
|
<% else %>
|
|
<link rel="canonical" href="<%= app_url("#{@commentable.path}/comments") %>" />
|
|
<meta property="og:url" content="<%= app_url("#{@commentable.path}/comments") %>" />
|
|
<meta property="og:title" content="<%= t("views.comments.meta.og.title_root", title: @commentable.title, site: community_name) %>" />
|
|
<meta name="twitter:title" content="<%= t("views.comments.meta.og.title_root", title: @commentable.title, site: community_name) %>">
|
|
<% if @commentable.class.name == "Article" && @commentable.published %>
|
|
<meta property="og:image" content="<%= article_social_image_url(@commentable) %>" />
|
|
<meta name="twitter:image" content="<%= article_social_image_url(@commentable) %>">
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%= javascript_packs_with_chunks_tag "commentDropdowns", "followButtons", defer: true %>
|
|
|
|
<div class="crayons-layout crayons-layout--limited-l gap-0" data-follow-button-container="true">
|
|
<% if @commentable && @commentable.class.name == "Article" %>
|
|
<%= render "shared/payment_pointer", user: @commentable.user %>
|
|
<span id="comment-article-indicator" data-article-id="<%= @commentable.id %>"></span>
|
|
<% end %>
|
|
|
|
<% unless @root_comment %>
|
|
<article class="crayons-article crayons-card crayons-card--secondary s:mx-2 m:mx-4 -mb-1 z-0">
|
|
<header class="crayons-article__header">
|
|
<% if @commentable.respond_to?(:main_image) && @commentable.main_image.present? %>
|
|
<div class="crayons-article__cover">
|
|
<img src="<%= cloud_cover_url(@commentable.main_image) %>" width="1000" height="420" style="background-color:<%= @commentable.main_image_background_hex_color %>;" class="crayons-article__cover__image" alt="Cover image for <%= @commentable.title %>">
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="crayons-article__header__meta">
|
|
<h1 class="fs-2xl s:fs-3xl l:fs-4xl fw-bold s:fw-heavy lh-tight mb-1">
|
|
<%= @commentable.title %>
|
|
</h1>
|
|
<p class="color-base-60">
|
|
<%= t("views.comments.parent.metadata_html",
|
|
name: @commentable.is_a?(PodcastEpisode) ? @commentable.podcast.name : @commentable.user.name,
|
|
on: tag.span(@commentable.published_at ? t("views.comments.parent.date", date: @commentable.published_at.strftime(t("time.formats.comment"))) : "", class: %w[published-at])) %>
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<% if @commentable.processed_html.present? %>
|
|
<div class="crayons-article__main">
|
|
<div class="crayons-article__body text-styles -mt-1 m:-mt-2">
|
|
<% if @commentable.processed_html.size < 350 %>
|
|
<%= sanitize_rendered_markdown(@commentable.processed_html) %>
|
|
<% else %>
|
|
<%= truncate(sanitize(@commentable.processed_html, tags: []), length: 150) %>
|
|
<div class="pt-6">
|
|
<a class="crayons-btn crayons-btn--outlined" href="<%= @commentable.path %>"><%= t("views.comments.parent.read") %></a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</article>
|
|
<% else %>
|
|
<div id="response-templates-data" class="hidden"></div>
|
|
<%= javascript_packs_with_chunks_tag "responseTemplates", "commentsDisplay", defer: true %>
|
|
<header class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary crayons-layout__content s:mx-2 m:mx-4 -mb-1 z-0">
|
|
<% if @commentable %>
|
|
<h1 class="crayons-subtitle-1 mb-4">
|
|
<%= t("views.comments.parent.subtitle_html",
|
|
start: tag("span", { class: %w[fw-normal color-base-60] }, true),
|
|
end: "</span>".html_safe,
|
|
title: tag.span(@commentable.title)) %>
|
|
</h1>
|
|
<div class="flex">
|
|
<a class="crayons-btn crayons-btn--outlined mr-2" href="<%= @commentable.path %>"><%= t("views.comments.parent.view") %></a>
|
|
</div>
|
|
<% else %>
|
|
<%= t("views.comments.orphan.deleted") %>
|
|
<% end %>
|
|
</header>
|
|
<% end %>
|
|
|
|
<% if @root_comment.present? && (@root_comment.depth > 0 && parent = @root_comment.parent) %>
|
|
<div class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary s:mx-1 m:mx-2 -mb-2 z-0">
|
|
<h2 class="crayons-subtitle-2 pb-2">
|
|
<a href="<%= parent.path %>" class="crayons-link">
|
|
<%= t("views.comments.parent.reply_html",
|
|
start: tag("span", { class: %w[fw-normal opacity-75] }, true),
|
|
end: "</span>".html_safe,
|
|
title: tag.span(parent.title(150))) %>
|
|
</a>
|
|
</h2>
|
|
</div>
|
|
<% end %>
|
|
|
|
<section
|
|
class="crayons-card text-padding min-w-0 z-elevate"
|
|
id="comments-container"
|
|
data-commentable-id="<%= @commentable&.id %>"
|
|
data-commentable-type="<%= @commentable&.class&.name %>"
|
|
data-commentable-author-id="<%= @commentable&.user_id %>"
|
|
data-commentable-co-author-ids="<%= @commentable&.co_author_ids&.join(",") %>">
|
|
|
|
<% unless @root_comment %>
|
|
<%= render "form",
|
|
commentable: @commentable,
|
|
commentable_type: "Article" %>
|
|
<% end %>
|
|
|
|
<div class="comments" id="comment-trees-container">
|
|
<% if @root_comment.present? %>
|
|
<% cache ["comment_root-view-root_#{user_signed_in?}", @root_comment] do %>
|
|
<%= tree_for(@root_comment, @root_comment.subtree.includes(user: %i[setting profile]).arrange[@root_comment], @commentable) %>
|
|
<% end %>
|
|
<% else %>
|
|
<% Comment.tree_for(@commentable).each do |comment, sub_comments| %>
|
|
<% cache ["comment_root_#{user_signed_in?}", comment] do %>
|
|
<%= tree_for(comment, sub_comments, @commentable) %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if @commentable&.any_comments_hidden %>
|
|
<p class="mb-2 pt-6 fs-s align-center color-base-60">
|
|
<%= t("views.comments.hidden.text_html", info: link_to(t("views.comments.hidden.info"), "/faq#what-does-comment-hidden-by-post-author-mean")) %>
|
|
</p>
|
|
<% end %>
|
|
</section>
|
|
|
|
<div class="py-6">
|
|
<%= render "articles/conduct_and_abuse_actions", page: "comments_index" %>
|
|
</div>
|
|
|
|
<% if @commentable && has_vid?(@commentable) %>
|
|
<%= render "articles/fitvids" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="fullscreen-code js-fullscreen-code"></div>
|
|
|
|
<script>
|
|
<%== TweetTag.script %>
|
|
<%== YoutubeTag.script %>
|
|
<%== PodcastTag.script %>
|
|
<%== GistTag.script %>
|
|
<%== RunkitTag.script %>
|
|
</script>
|
|
<%== TwitterTimelineTag.script %>
|
|
|
|
<%= render "comments/hide_comments_modal" %>
|