Допиливаю блоки

projectConfig.json

@@ -49,7 +49,7 @@
     "off-canvas": [],
     "burger": [],
     "progress": [],
-    "media": [],
+    "comment": [],
     "modal": [],
     "close": [],
     "tabs": [],

src/blocks-library.pug

@@ -562,6 +562,15 @@ block content
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/pie-chart/pie-chart.pug
 
+  +block-lib('comment', 'Комментарий', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/comment/readme.md
+    +comment('Джокер', 'img/joker.jpg')
+      p Аватар — не ссылка
+    +comment('Джокер', 'img/joker.jpg', '/', 'admin')
+      p Аватар — ссылка
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/comment/comment.pug
+
 
 
   .burger.blocks-library__menu-toggler(data-toggle="off-canvas")

src/blocks/comment/comment.pug

+//- Все примеси в этом файле должны начинаться c имени блока (comment)
+
+mixin comment(username, avatarURL, authorURL, mods)
+
+  //- Принимает:
+  //-   username  {string} - имя пользователя
+  //-   avatarURL {string} - адрес изображения с аватаром
+  //-   authorURL {string} - адрес изображения с аватаром
+  //-   mods      {string} - список модификаторов
+  //- Вызов:
+        +comment('Джокер', 'img/joker.jpg')
+          p Текст
+        +comment('Джокер', 'img/joker.jpg', '/joker', 'admin')
+          p Текст
+
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' comment--' + modsList[i].trim();
+      }
+    }
+
+  article.comment(class=allMods)&attributes(attributes)
+    if(typeof(authorURL) !== 'undefined' && authorURL)
+      a.comment__avatar-wrap(href=authorURL)
+        img(src=avatarURL, alt=username)
+    else
+      span.comment__avatar-wrap
+        img(src=avatarURL, alt=username)
+    .comment__body
+      b.comment__author= username
+      block

src/blocks/media/media.scss → src/blocks/comment/comment.scss

-// В этом файле должны быть стили для БЭМ-блока media, его элементов,
+// В этом файле должны быть стили для БЭМ-блока comment, его элементов,
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
-.media {
+.comment {
 
   $block-name:                &; // #{$block-name}__element
 
@@ -10,9 +10,16 @@
   margin-top: $line-height;
   margin-bottom: $line-height;
 
-  &__picture {
+  &__avatar-wrap {
     flex-shrink: 0;
     margin-right: 1em;
+
+    img {
+      display: block;
+      width: 60px;
+      height: 60px;
+      object-fit: cover;
+    }
   }
 
   &__body {

src/blocks/media/media.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/media/media.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-<article class="media">
-  <div class="media__picture">
-    <img class="thumb" src="img/joker.jpg" alt="" width="150">
-  </div>
-  <div class="media__body">
-    <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой если рыбного всемогущая выйти за но, то щеке, одна свое снова сбить вопроса? Семь свой, его это. Силуэт!</p>
-  </div>
-</article>
-
--->

src/pug/mixins.pug

@@ -26,3 +26,5 @@ include ../blocks/pagination/pagination.pug
 include ../blocks/breadcrumbs/breadcrumbs.pug
 include ../blocks/progress/progress.pug
 include ../blocks/pie-chart/pie-chart.pug
+include ../blocks/comment/comment.pug
+//- include ../blocks/comments/comments.pug