Add comments template

css/avatar.css

@@ -0,0 +1,8 @@
+.avatar {
+  border-radius: 5px;
+  transition: filter var(--transition-md) ease-out;
+}
+
+.avatar:hover {
+  filter: saturate(1.3) contrast(1.3);
+}

css/comment.css

@@ -0,0 +1,64 @@
+.comment__head {
+  display: flex;
+  margin-bottom: var(--space-sm);
+}
+
+.comment__avatar {
+  background-image: var(--windy-svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  margin-right: var(--space-sm);
+  height: 64px;
+  width: 64px;
+}
+
+.comment__metadata {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  margin: var(--space-xs) 0;
+}
+
+.comment__date {
+  font-size: 12px;
+}
+
+.comment__body {
+  margin-bottom: var(--space-sm);
+}
+
+.comment__reply:focus,
+.comment__reply:hover {
+  color: var(--color-light-blue);
+}
+
+.comment__reply-icon {
+  display: inline-block;
+  margin-right: var(--space-xs);
+  vertical-align: middle;
+}
+
+.comment__reply-text {
+  display: inline-block;
+  position: relative;
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.comment__reply-text:after {
+  background-color: var(--color-light-blue);
+  bottom: -1px;
+  content: '';
+  left: 0;
+  height: 2px;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity var(--transition-md) ease-out;
+}
+
+.comment__reply:focus .comment__reply-text:after,
+.comment__reply:hover .comment__reply-text:after {
+  opacity: 1;
+}

css/comments.css

@@ -0,0 +1,20 @@
+.comments__head {
+  border-bottom: 1px solid var(--color-light-grey);
+  margin-bottom: var(--space-md);
+}
+
+.comments__title {
+  margin-bottom: var(--space-sm);
+}
+
+.comments__item {
+  margin-bottom: var(--space-md);
+}
+
+.comments__item--depth-1 {
+  margin-left: var(--space-md);
+}
+
+.comments__item--depth-2 {
+  margin-left: calc(var(--space-md) * 2);
+}

css/icon.css

@@ -4,6 +4,11 @@
   width: 32px;
 }
 
+.icon--extra-small {
+  height: 16px;
+  width: 16px;
+}
+
 .icon--small {
   height: 24px;
   width: 24px;

css/index.css

@@ -10,6 +10,9 @@
 @import "search";
 @import "article";
 @import "footer";
+@import "comments";
+@import "comment";
+@import "avatar";
 
 :root {
   --color-black: #000;
@@ -21,6 +24,7 @@
   --color-facebook: #3e5a98;
   --color-twitter: #1da1f2;
   --color-rss: #ee802f;
+  --space-xs: 10px;
   --space-sm: 20px;
   --space-md: 30px;
   --space-lg: 60px;

theme/comments.php

@@ -0,0 +1,34 @@
+<div class="comments" id="comments">
+  <div class="comments__head">
+    <h2 class="comments__title">
+      <?php
+        if (comments_open()) :
+          if (have_comments()) :
+            echo 'Join the conversation';
+          else:
+            echo 'Leave a comment';
+          endif;
+        else:
+          echo 'Comments are closed';
+        endif;
+      ?>
+    </h2>
+  </div>
+  <div class="comments__body">
+    <ol class="comments__list">
+      <?php
+        wp_list_comments(
+          array(
+            'walker' => new Windycoys_Walker_Comment(),
+            'style' => 'ol',
+          )
+        );
+      ?>
+    </ol>
+  </div>
+  <div class="comments__foot">
+    <?php comment_form(array(
+      'class_form' => 'foo-bar'
+    )) ?>
+  </div>
+</div>

theme/functions.php

@@ -1,6 +1,33 @@
 <?php
 
-class Windycoys_Walker extends Walker_Nav_Menu {
+class Windycoys_Walker_Comment extends Walker_Comment {
+  function start_el(&$output, $comment, $depth = 0, $args = array(), $id = 0) {
+    $id = $comment->comment_ID;
+    $author_email = $comment->comment_author_email;
+    $author = $comment->comment_author;
+    $avatar = get_avatar($comment, 128);
+    $date = get_comment_date('jS F, Y', $id).' at '.get_comment_date('H:i', $id);
+    $content = $comment->comment_content;
+    $comment_depth = $depth > 0 ? ' comments__item--depth-'.$depth : '';
+    $output .= '<li class="comments__item'.$comment_depth.'">';
+    $output .= '<div class="comment">';
+    $output .= '<div class="comment__head">';
+    $output .= '<div class="comment__avatar">'.$avatar.'</div>';
+    $output .= '<div class="comment__metadata">';
+    $output .= '<span class="comment__author">'.$author.'</span>';
+    $output .= '<span class="comment__date">'.$date.'</span>';
+    $output .= '</div></div>';
+    $output .= '<div class="comment__body">'.$content.'</div>';
+    $output .= '<div class="comment__foot">';
+    $output .= '<a class="comment__reply" href="'.get_comment_reply_link().'">';
+    $output .= '<span class="comment__reply-icon">';
+    $output .= '<svg class="icon icon--extra-small"><use href="#icon-reply"></use></svg></span>';
+    $output .= '<span class="comment__reply-text">Reply</span></a>';
+    $output .= '</div></div></li>';
+  }
+}
+
+class Windycoys_Walker_Nav extends Walker_Nav_Menu {
   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
     $title = $item->post_title;
     $uri = get_site_url() . '/' . $item->post_name;
@@ -15,7 +42,7 @@ function windycoys_nav() {
   wp_nav_menu(array(
     'container' => 'ul',
     'menu_class' => 'nav__list nav__list--sub-list',
-    'walker' => new Windycoys_Walker()
+    'walker' => new Windycoys_Walker_Nav()
   ));
 }
 

theme/icons.php

@@ -14,6 +14,9 @@
   <symbol id="icon-hash" viewBox="0 0 448 512">
     <path fill="currentColor" d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"></path>
   </symbol>
+  <symbol id="icon-reply" viewBox="0 0 576 512">
+    <path fill="currentColor" d="M11.093 251.65l175.998 184C211.81 461.494 256 444.239 256 408v-87.84c154.425 1.812 219.063 16.728 181.19 151.091-8.341 29.518 25.447 52.232 49.68 34.51C520.16 481.421 576 426.17 576 331.19c0-171.087-154.548-201.035-320-203.02V40.016c0-36.27-44.216-53.466-68.91-27.65L11.093 196.35c-14.791 15.47-14.791 39.83 0 55.3zm23.127-33.18l176-184C215.149 29.31 224 32.738 224 40v120c157.114 0 320 11.18 320 171.19 0 74.4-40 122.17-76.02 148.51C519.313 297.707 395.396 288 224 288v120c0 7.26-8.847 10.69-13.78 5.53l-176-184a7.978 7.978 0 0 1 0-11.06z"></path>
+  </symbol>
   <symbol id="icon-rss" viewBox="0 0 448 512">
     <path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
     </symbol>

theme/partials/metadata.php

@@ -20,7 +20,7 @@
   </div>
   <?php endif; ?>
   <div class="metadata__comments">
-    <a class="metadata__comments-link" href="<?php the_permalink() ?>">
+    <a class="metadata__comments-link" href="<?php the_permalink() ?>#comments">
       <svg class="icon">
         <use href="#icon-comments"></use>
       </svg>

theme/single.php

@@ -15,13 +15,14 @@
         </span>
       </div>
       <h1 class="article__title">
-        <a href="<?php the_permalink(); ?>">
         <?php the_title(); ?>
-        </a>
       </h1>
       <div class="article__content">
         <?php the_content(__('Continue reading <span class="meta-nav">&raquo;</span>', 'windycoys')); ?>
       </div>
+      <div class="article__comments">
+        <?php comments_template() ?>
+      </div>
     </article>
   </section>
   <section class="page__metadata is-first">