PixivFE/assets/views/blocks/comments.jet.html

{*
    This Jet template block renders a comments section for either illustrations or novels.
    It takes two parameters:
    - data: The data object containing comment information (either Illust or Novel)
    - contentType: A string indicating the type of content ("illust" or "novel")

    The block handles displaying the comment count, whether comments are disabled,
    and renders a list of comments if available.

    Usage:
    {{- yield Comments(data=.Illust, contentType="illust") }}
    or
    {{- yield Comments(data=.Novel, contentType="novel") }}

    NOTE: Ensure that the data object contains the necessary fields for comments.
*}

{{- block Comments(data, contentType) }}
<div class="col-12 col-lg-6">
  <div class="custom-card">
    <div class="custom-card-body bg-charcoal-surface1 p-4 pb-0">
      <!-- TODO: clean this logic up -->
      {{- commentCount := contentType == "illust" ? data.Comments : data.CommentCount }}
      {{- commentDisabled := contentType == "illust" ? data.CommentDisabled : data.CommentOff }}
      {{- if commentCount == 0 }}
      <h2>0 Comments</h2>
      {{- else if commentCount == 1 }}
      <h2>1 Comment</h2>
      {{- else }}
      <h2>{{ commentCount }} Comments</h2>
      {{- end }}
      <!-- NOTE: pb-0 otherwise the last comment will add extra spacing at the end of the card -->
      {{- if commentDisabled == 1 }}
      <p class="mb-4">The creator turned comments off</p>
      {{- else if commentCount == 0 }}
      <p class="mb-4">There are no comments yet</p>
      {{- else }}
      <div class="list-group" id="comments-container">
        {{ range data.CommentsList }}
        <!-- Element for a single comment -->
        <!-- NOTE: py-1 to give each comment a bit more breathing space -->
        <div class="list-group-item border-0 bg-charcoal-surface1 py-1 px-0 mb-4 comment-item">
          <div class="row">
            <!-- Comment author avatar image -->
            <div class="col-auto">
              {* checks whether .AuthorName is empty, indicating a deleted user *}
              {{- if .AuthorName != "" }}
              <a href="/users/{{ .AuthorID }}/bookmarks">
                <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" loading="lazy" style="width: 40px; height: 40px" />
              </a>
              {{- else }}
              <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" loading="lazy" style="width: 40px; height: 40px" />
              {{- end }}
            </div>

            <div class="col px-2">
              <!-- Comment author name and date -->
              <div class="d-md-flex align-items-center mb-2">
                <div class="me-md-2">
                  {{- if .AuthorName != "" }}
                  <a href="/users/{{ .AuthorID }}/bookmarks" class="fw-bold text-body text-decoration-none">
                    {{- .AuthorName }}
                  </a>
                  {{- else }}
                  <p class="fw-bold mb-0">Deleted user</p>
                  {{- end }}
                </div>
                <small class="text-muted">{{ .Date }}</small>
              </div>

              <!-- Stamp or emoji -->
              <!-- TODO: .Stamp occasionally templates in text (which should be part of the main comment text) instead of an image, causing breakage in the layout. See the comment by "Unknown417" on /artworks/107442519 for an example -->
              {{- if .Stamp }}
              <img class="stamp img-fluid rounded object-fit-cover me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" loading="lazy" />
              {{- else }}
              <!-- Comment with emojis -->
              <p class="d-flex flex-wrap align-items-center m-0">{{ raw: parseEmojis(.Context) }}</p>
              {{ end }}
            </div>
          </div>
        </div>
        {{- end }}
        <div class="d-flex justify-content-center">
          <!-- TODO: figure out how to hide the parent div instead of applying mb-4 to the button itself -->
          <button type="button" class="custom-btn-secondary-flex mb-4" id="load-more-btn">Load more</button>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</div>
{{- end }}