docbrown/app/views/comments/index.html.erb

<% if @root_comment.present? %>
  <% title("#{@root_comment.title} - #{community_name}") %>
<% else %>
  <% title("Discussion of #{@commentable.title} - #{community_name}") %>
<% end %>

<%= content_for :page_meta do %>
  <meta name="description" content="<%= @commentable.description || "An article from the community" %>">
  <%= meta_keywords_article %>

  <meta property="og:type" content="article" />
  <meta property="og:title" content="Discussion of <%= @commentable.title %>" />
  <meta property="og:description" content="<%= @commentable.description || "#{community_name} Comment" %>" />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@<%= SiteConfig.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 || "#{community_name} Comment" %>">

  <% 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="<%= truncate(strip_tags(@root_comment.processed_html), length: 50) %> — <%= community_name %>" />
    <meta name="twitter:title" content="<%= truncate(strip_tags(@root_comment.processed_html), length: 50) %> — <%= community_name %>">
    <meta property="og:image" content="<%= comment_social_image_url(@root_comment) %>" />
    <meta name="twitter:image" content="<%= comment_social_image_url(@root_comment) %>">
  <% 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="[Discussion] <%= @commentable.title %> — <%= community_name %>" />
    <meta name="twitter:title" content="[Discussion] <%= @commentable.title %> — <%= 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 %>

<div class="crayons-layout crayons-layout--limited-l gap-0">
  <% if @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 <%= sanitize_and_decode @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">
            <%= @commentable.is_a?(PodcastEpisode) ? @commentable.podcast.name : @commentable.user.name %>
            <%= "on #{@commentable.published_at.strftime('%B %d, %Y')}" if @commentable.published_at %></span>
          </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 %>">Read full post</a>
              </div>
            <% end %>
          </div>
        </div>
      <% end %>
    </article>
  <% else %>
    <div id="response-templates-data" class="hidden"></div>
    <%= javascript_packs_with_chunks_tag "responseTemplates", defer: true %>
    <header class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary s:mx-2 m:mx-4 -mb-1 z-0">
      <h1 class="crayons-subtitle-1 mb-4">
        <span class="fw-normal color-base-60">Discussion on: </span>
        <%= @commentable.title %>
      </h1>
      <div class="flex">
        <a class="crayons-btn crayons-btn--outlined mr-2" href="<%= @commentable.path %>">View post</a>
        <a class="crayons-btn crayons-btn--outlined mr-2" href="<%= @commentable.path %><%= user_signed_in? ? "/" : "#" %>comments">Full discussion</a>
      </div>
    </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">
          <span class="fw-normal opacity-75">Replies for:</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 %>">

    <% 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).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">
        Some comments have been hidden by the post's author - <a href="/faq#what-does-comment-hidden-by-post-author-mean">find out more</a>
      </p>
    <% end %>
  </section>

  <div class="py-6">
    <%= render "articles/conduct_and_abuse_actions", page: "comments_index" %>
  </div>

  <% if has_vid?(@commentable) %>
    <%= render "articles/fitvids" %>
  <% end %>
</div>

<div class="fullscreen-code js-fullscreen-code"></div>

<script async>
  <%== TweetTag.script %>
  <%== YoutubeTag.script %>
  <%== PodcastTag.script %>
  <%== GistTag.script %>
</script>
<%== TwitterTimelineTag.script %>