1{#
2/**
3 * @file
4 * Theme override for comments.
5 *
6 * Available variables:
7 * - author: Comment author. Can be a link or plain text.
8 * - content: The content-related items for the comment display. Use
9 *   {{ content }} to print them all, or print a subset such as
10 *   {{ content.field_example }}. Use the following code to temporarily suppress
11 *   the printing of a given child element:
12 *   @code
13 *   {{ content|without('field_example') }}
14 *   @endcode
15 * - created: Formatted date and time for when the comment was created.
16 *   Preprocess functions can reformat it by calling DateFormatter::format()
17 *   with the desired parameters on the 'comment.created' variable.
18 * - changed: Formatted date and time for when the comment was last changed.
19 *   Preprocess functions can reformat it by calling DateFormatter::format()
20 *   with the desired parameters on the 'comment.changed' variable.
21 * - permalink: Comment permalink.
22 * - submitted: Submission information created from author and created
23 *   during template_preprocess_comment().
24 * - user_picture: The comment author's profile picture.
25 * - status: Comment status. Possible values are:
26 *   unpublished, published, or preview.
27 * - title: Comment title, linked to the comment.
28 * - attributes: HTML attributes for the containing element.
29 *   The attributes.class may contain one or more of the following classes:
30 *   - comment: The current template type; e.g., 'theming hook'.
31 *   - by-anonymous: Comment by an unregistered user.
32 *   - by-{entity-type}-author: Comment by the author of the parent entity,
33 *     eg. by-node-author.
34 *   - preview: When previewing a new or edited comment.
35 *   The following applies only to viewers who are registered users:
36 *   - unpublished: An unpublished comment visible only to administrators.
37 * - title_prefix: Additional output populated by modules, intended to be
38 *   displayed in front of the main title tag that appears in the template.
39 * - title_suffix: Additional output populated by modules, intended to be
40 *   displayed after the main title tag that appears in the template.
41 * - content_attributes: List of classes for the styling of the comment content.
42 * - title_attributes: Same as attributes, except applied to the main title
43 *   tag that appears in the template.
44 * - threaded: A flag indicating whether the comments are threaded or not.
45 *
46 * These variables are provided to give context about the parent comment (if
47 * any):
48 * - parent_comment: Full parent comment entity (if any).
49 * - parent_author: Equivalent to author for the parent comment.
50 * - parent_created: Equivalent to created for the parent comment.
51 * - parent_changed: Equivalent to changed for the parent comment.
52 * - parent_title: Equivalent to title for the parent comment.
53 * - parent_permalink: Equivalent to permalink for the parent comment.
54 * - parent: A text string of parent comment submission information created from
55 *   'parent_author' and 'parent_created' during template_preprocess_comment().
56 *   This information is presented to help screen readers follow lengthy
57 *   discussion threads. You can hide this from sighted users using the class
58 *   visually-hidden.
59 *
60 * These two variables are provided for context:
61 * - comment: Full comment object.
62 * - entity: Entity the comments are attached to.
63 *
64 * @see template_preprocess_comment()
65 */
66#}
67{% if threaded %}
68  {{ attach_library('claro/classy.indented') }}
69{% endif %}
70{%
71  set classes = [
72    'comment',
73    'js-comment',
74    status != 'published' ? status,
75    comment.owner.anonymous ? 'by-anonymous',
76    author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
77  ]
78%}
79<article{{ attributes.addClass(classes) }}>
80  {#
81    Hide the "new" indicator by default, let a piece of JavaScript ask the
82    server which comments are new for the user. Rendering the final "new"
83    indicator here would break the render cache.
84  #}
85  <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
86
87  <footer class="comment__meta">
88    {{ user_picture }}
89    <p class="comment__submitted">{{ submitted }}</p>
90
91    {#
92      Indicate the semantic relationship between parent and child comments for
93      accessibility. The list is difficult to navigate in a screen reader
94      without this information.
95    #}
96    {% if parent %}
97      <p class="parent visually-hidden">{{ parent }}</p>
98    {% endif %}
99
100    {{ permalink }}
101  </footer>
102
103  <div{{ content_attributes.addClass('content') }}>
104    {% if title %}
105      {{ title_prefix }}
106      <h3{{ title_attributes }}>{{ title }}</h3>
107      {{ title_suffix }}
108    {% endif %}
109    {{ content }}
110  </div>
111</article>
112