Change about me scripts

.editorconfig

@@ -9,5 +9,8 @@ indent_size = 4
 [*.{html,twig,yml}]
 indent_size = 2
 
+[gulpfile.js]
+indent_size = 2
+
 [Makefile]
 indent_style = tab

gulpfile.js

@@ -9,6 +9,10 @@ const SASS_SOURCE_PATH = './source/_assets/**/*.scss';
 const SASS_DEST_PATH = `./output_${ENV}`;
 const SASS_FILE_NAME = 'app.css';
 
+const SCRIPT_SOURCE_PATH = './source/_assets/**/*.js';
+const SCRIPT_DEST_PATH = `./output_${ENV}`;
+const SCRIPT_FILE_NAME = 'app.js';
+
 const SASS_OPTIONS = {
   outputStyle: ENV === 'prod' ? 'compressed' : 'expanded',
 };
@@ -24,6 +28,10 @@ gulp.task('build', function () {
     .pipe(concat(SASS_FILE_NAME))
     .pipe(gulp.dest(SASS_DEST_PATH))
   ;
+  gulp.src(SCRIPT_SOURCE_PATH)
+    .pipe(concat(SCRIPT_FILE_NAME))
+    .pipe(gulp.dest(SCRIPT_DEST_PATH))
+  ;
 });
 
 // gulp.task('build:watch', function () {

source/_assets/about-me.js

@@ -0,0 +1,36 @@
+(function() {
+    'use strict';
+
+    var notes = [
+        'Любимый фильм "Три идиота".',
+        'Люблю кататься на велосипеде.',
+        'Люблю читать фантастические книги.',
+        'Люблю шоколад.',
+        'На день рождения ко мне можно прийти без подарка.',
+        'Не люблю пьяных людей.',
+        'Предпочитаю ходить в кино на 2D-сеансы.',
+        'Проехал на велосипеде 200 километров за день.',
+        'Работаю программистом.',
+        'Хотел бы побывать в горах.',
+    ];
+
+    function selectRandomNote() {
+        return notes[Math.floor(Math.random() * notes.length)];
+    }
+
+    function updateNode() {
+        document.getElementById('about-me-note').innerHTML = selectRandomNote();        
+    }
+
+    function onKnowBetter(event) {
+        event.preventDefault();
+        if (window.yaCounter41913764) {
+            window.yaCounter41913764.hit(location.href);
+        }
+        updateNode();
+    }
+
+    window.addEventListener('DOMContentLoaded', updateNode);
+    document.getElementById('know-better').addEventListener('click', onKnowBetter);
+
+}());

source/_layouts/default.html.twig

@@ -18,6 +18,6 @@
     {% block content %}{% endblock %}
   </main>
   {% include 'counters.twig' %}
-  <script src="/static/app.js?v={{ date().timestamp }}"></script>
+  <script src="/app.js?v={{ date().timestamp }}"></script>
 </body>
 </html>

source/about/me.html.twig

@@ -15,30 +15,11 @@ title: Обо мне
           <a href="/">На главную</a>
         </li>
         <li class="about-me__link">
-          <a href="">Узнать чуть лучше</a>
+          <a id="know-better" href="#">Узнать чуть лучше</a>
         </li>
       </ul>
 
     </div>
   </section>
 
-  <script type="text/javascript">
-    window.addEventListener('DOMContentLoaded', function() {
-      var notes = [
-        'Любимый фильм "Три идиота".',
-        'Люблю кататься на велосипеде.',
-        'Люблю читать фантастические книги.',
-        'Люблю шоколад.',
-        'На день рождения ко мне можно прийти без подарка.',
-        'Не люблю пьяных людей.',
-        'Предпочитаю ходить в кино на 2D-сеансы.',
-        'Проехал на велосипеде 200 километров за день.',
-        'Работаю программистом.',
-        'Хотел бы побывать в горах.',
-      ];
-      var note = notes[Math.floor(Math.random() * notes.length)];
-      document.getElementById('about-me-note').innerHTML = note;
-    });
-  </script>
-
 {% endblock %}