Допиливаю компоненты

gulpfile.js

@@ -395,6 +395,7 @@ gulp.task('html', function() {
 gulp.task('pug', function() {
   const pug = require('gulp-pug');
   const htmlbeautify = require('gulp-html-beautify');
+  const replace = require('gulp-replace');
   console.log('---------- сборка Pug');
 
   // Pug-фильтр, выводящий содержимое pug-файла в виде форматированного текста
@@ -425,6 +426,14 @@ gulp.task('pug', function() {
     }))
     .pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(faviconData)).favicon.html_code))
     .pipe(htmlbeautify())
+    // и... привет бьютификатору!
+    .pipe(replace(/^(\s*)(<header.+?>)(.*)(<\/header>)/gm, '$1$2\n$1  $3\n$1$4'))
+    .pipe(replace(/^(\s*)(<footer.+?>)(.*)(<\/footer>)/gm, '$1$2\n$1  $3\n$1$4'))
+    .pipe(replace(/^\s*<section.+>/gm, '\n$&'))
+    .pipe(replace(/^\s*<\/section>/gm, '$&\n'))
+    .pipe(replace(/^\s*<article.+>/gm, '\n$&'))
+    .pipe(replace(/^\s*<\/article>/gm, '$&\n'))
+    .pipe(replace(/\n\n\n/gm, '\n\n'))
     .pipe(gulp.dest(dirs.buildPath));
 });
 

src/blocks-library.pug

@@ -564,13 +564,34 @@ block content
 
   +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 Аватар — ссылка
+    +comment({
+      username: 'Джокер',
+      avatarURL: 'img/joker.jpg',
+      authorURL: '/users/joker',
+      content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+      mods: 'admin',
+    })
+      +comment({
+        username: 'Джокер',
+        content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+      })
+        +comment({
+          username: 'Джокер',
+          content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+        })
+    +comment({
+      username: 'Джокер',
+      content: '<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>',
+    })
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/comment/comment.pug
 
+  //- +block-lib('embed-responsive', 'Адаптирующийся медиаконтент', false)
+  //-   include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/embed-responsive/readme.md
+  //-   div 111
+  //-   +block-lib-code()
+  //-     include:show-code(first-line="//- Pug-файл этого блока:") blocks/embed-responsive/embed-responsive.pug
+
 
 
   .burger.blocks-library__menu-toggler(data-toggle="off-canvas")

src/blocks/comment/comment.pug

 //- Все примеси в этом файле должны начинаться c имени блока (comment)
 
-mixin comment(username, avatarURL, authorURL, mods)
+mixin comment(props)
 
   //- Принимает:
+  //-   props  {object}
   //-     username  {string} - имя пользователя
   //-     avatarURL {string} - адрес изображения с аватаром
   //-     authorURL {string} - адрес изображения с аватаром
+  //-     content   {string} - html текста коммента
   //-     mods      {string} - список модификаторов
   //- Вызов:
-        +comment('Джокер', 'img/joker.jpg')
-          p Текст
-        +comment('Джокер', 'img/joker.jpg', '/joker', 'admin')
-          p Текст
+        +comment({
+          username: 'Джокер',
+          avatarURL: 'img/joker.jpg',
+          authorURL: '/users/joker',
+          mods: 'admin',
+        })
 
   -
     // список модификаторов
     var allMods = '';
-    if(typeof(mods) !== 'undefined' && mods) {
-      var modsList = mods.split(',');
+    if(typeof(props.mods) !== 'undefined' && props.mods) {
+      var modsList = props.mods.split(',');
       for (var i = 0; i < modsList.length; i++) {
         allMods = allMods + ' comment--' + modsList[i].trim();
       }
     }
+    if(typeof(props.username) === 'undefined') props.username = 'anonymous';
+    if(typeof(props.avatarURL) === 'undefined') props.avatarURL = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"%3E%3Ccircle r="50%25" cx="50%25" cy="50%25" fill="#ccc"/%3E%3C/svg%3E';
 
   article.comment(class=allMods)&attributes(attributes)
-    if(typeof(authorURL) !== 'undefined' && authorURL)
-      a.comment__avatar-wrap(href=authorURL)
-        img(src=avatarURL, alt=username)
+    .comment__inner
+      if(typeof(props.authorURL) !== 'undefined' && props.authorURL)
+        a.comment__avatar-wrap(href=props.authorURL)
+          img(src=props.avatarURL, alt=props.username)
       else
         span.comment__avatar-wrap
-        img(src=avatarURL, alt=username)
-    .comment__body
-      b.comment__author= username
+          img(src=props.avatarURL, alt=props.username)
+      .comment__text
+        header.comment__header #[b.comment__author= props.username] #[time.comment__date(datetime='2017-04-25T05:45') 25.04.2017 в 05:45]
+        .comment__body!= props.content
+        footer.comment__footer #[a.comment__reply(href='') Reply] #[a.comment__reply(href='') Admin]
     block

src/blocks/comment/comment.scss

@@ -6,10 +6,21 @@
 
   $block-name:                &; // #{$block-name}__element
 
-  display: flex;
   margin-top: $line-height;
   margin-bottom: $line-height;
 
+  & & {
+    padding-left: calc(60px + 1em);
+  }
+
+  & & & & {
+    padding-left: 0;
+  }
+
+  &__inner {
+    display: flex;
+  }
+
   &__avatar-wrap {
     flex-shrink: 0;
     margin-right: 1em;
@@ -22,11 +33,15 @@
     }
   }
 
-  &__body {
+  &__text {
     flex-grow: 1;
 
     *:first-child {
       margin-top: 0;
     }
   }
+
+  &__header {}
+
+  &__footer {}
 }

src/pug/layout.pug

@@ -28,12 +28,12 @@ html(class="no-js  page", lang="ru")
         div.page__inner
           div.page__content
             block header
-              div header
+              header.page-header «шапка»
             block content
-              div content
+              div содержимое страницы
           div.page__footer-wrapper
             block footer
-              div подвал
+              footer.page-footer «подвал»
 
       div.off-canvas__overlay(data-toggle="off-canvas")