Generate tags.json duaring build and use it as a data source in tags.njk

.eleventy.js

@@ -1,5 +1,13 @@
+const fs = require('fs');
+const { getSpeechesByTags } = require('./utils/markdown-parser');
 const { ruDateConverter } = require('./utils/filters');
+
 module.exports = function(eleventyConfig) {
+
+  fs.writeFileSync(
+    __dirname + '/src/tags.json',
+    JSON.stringify({ tags: Object.values(getSpeechesByTags()) }, null, 2)
+  );
   /**
    * Add custom watch targets
    *

src/assets/styles/blocks/speeches-by-tags.scss

@@ -0,0 +1,90 @@
+.speeches-by-tags {
+  position: relative;
+
+  @media (max-width: $mobile-max) {
+    width: 100%;
+    padding-top: 15px;
+  }
+}
+
+.speeches-by-tags__list {
+  width: 100%;
+
+  @include reset-list;
+}
+
+.speeches-by-tags__item {
+  margin-bottom: 34px;
+
+  @media (max-width: $mobile-max) {
+    margin-bottom: 20px;
+  }
+}
+
+.speeches-by-tags__title {
+  margin: 0;
+  margin-bottom: 9px;
+
+  @include main-text(26px, 31px, $bold);
+  color: $accent-text-color;
+
+  @media (max-width: $mobile-max) {
+    margin-bottom: 4px;
+
+    @include main-text(18px, 24px, $bold);
+  }
+}
+
+.speeches-by-tags__speeche-details {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.speeches-by-tags__event-link {
+  margin: 0 25px 0px 0;
+
+  @include main-text(18px, 21px, $normal);
+  color: $accent-text-color;
+
+  @media (max-width: $mobile-max) {
+    margin-bottom: 4px;
+
+    @include main-text(12px, 14px, $normal);
+  }
+}
+
+.speeches-by-tags__speaker {
+  margin: 0;
+}
+
+.speeches-by-tags__speaker-name {
+  @include main-text(18px, 21px, $normal);
+  color: $speaker-name-color;
+
+  @media (max-width: $mobile-max) {
+    @include main-text(12px, 14px, $normal);
+  }
+}
+
+.speeches-by-tags__speaker-company {
+  @include additional-text(18px, 21px, $normal);
+  color: $accent-color;
+
+  @media (max-width: $mobile-max) {
+    @include additional-text(12px, 14px, $normal);
+  }
+}
+
+.speeches-by-tags__description {
+  margin: 0;
+
+  @include main-text(14px, 20px, $normal);
+  color: $main-color;
+
+  @media (max-width: $mobile-max) {
+    padding-right: 10px;
+
+    @include main-text(13px, 20px, $normal);
+  }
+}

src/assets/styles/style.scss

@@ -14,3 +14,4 @@
 @import "./blocks/event-navigation.scss";
 @import "./blocks/event-agenda.scss";
 @import "./blocks/event-info.scss";
+@import "./blocks/speeches-by-tags.scss";

src/events/1.md

@@ -21,22 +21,32 @@ speeches:
     timeStart: "15:00"
     sourceCode: https://github.com/d42f/angular2do
     slides: https://docs.google.com/a/kugaevsky.ru/presentation/d/16zK4XFgAUbOXswwzUiG1Ij8lWS0BLttFNuCoiAlOXzk/
+    tags:
+      - Angular
 
   - speaker: 'Андрей Макаров'
     title: 'React.js, intro'
     slides: http://www.slideshare.net/r3nya/reactjs-intro
+    tags:
+      - React
 
   - speaker: 'Николай Кугаевский'
     title: 'Галп для сборки статики / Asset Pipeline with Gulp'
     slides: http://slides.kugaevsky.ru/gulp-assets-pipeline.html#/
+    tags:
+      - Gulp
 
   - speaker: 'Дмитрий Родичев'
     title: 'ExtJS 5'
     slides: http://noroot.github.io/slides/extjs/
+    tags:
+      - ExtJS
 
   - speaker: Павел Шалаев
-    title: Meteor.js или как сделать стартап в одиночку 
+    title: Meteor.js или как сделать стартап в одиночку
     slides: http://slides.com/lawrentiy/meteorintroduce#/
+    tags:
+      - Meteor
 ---
 
 <!-- Настала пора встретиться в коворкинге «Свободная Мастерская» и обсудить самое важное и интересное в мире JavaScript!

src/events/10.md

@@ -14,35 +14,49 @@ eventTags:
   - Angular
   - ESNext
   - AST
+  - Tests
 
 speeches:
   - title: Строим Back-end на node.js, идём в highload
     speaker: Илья Утов
     description: 'В докладе рассмотрим создание масштабируемых, отказоустойчивых server-side проектов на node.js. Поговорим о v8 и чуточку зацепим libuv'
+    tags:
+      - Node
 
   - title: Управление состоянием в Svelte
     speaker: Павел Малышев
     company: MUST Lab
     description: 'Разберемся на примерах как работать с состоянием в приложениях на SvelteJS. Что такое Svelte Store и чем он отличается от Redux.'
+    tags:
+      - Svelte
 
   - title: От чего не спасает Flow
     speaker: Олег Хлевнов
     company: Smartbics
     description: 'Краткий рассказ о случаях бесполезной работы с типами.'
+    tags:
+      - Flow
 
   - title: 'Тестирование Angular фронта: из огня да в полымя'
     speaker: Андрей Ермаков
     company: Тинькофф
+    tags:
+      - Angular
 
   - title: Обзор фич ESNext (ES7, ES8, ES9)
     speaker: Кирилл Новиков
     description: Рассказ про ES 2016/2017/2018/Next
+    tags:
+      - ESNext
 
   - title: Как не писать код самому, делегируем наши проблемы AST
     speaker: Никита Сидоров
     company: Yandex
     description: 'Рассмотрим проблему написания автотестов на обфусицированные React-компоненты и страницы.
   Кратко пробежимся по основам использования AST в реальном проекте на примере автогенерации селекторов для React-компонент, используя библиотеку reselector.'
+    tags:
+      - AST
+      - Tests
 ---
 
 <!-- Привет, друзья!

src/events/11.md

@@ -19,21 +19,29 @@ speeches:
     speaker: Антон Кастрицкий
     company: Yandex
     description: 'Разберём на примерах, как и из чего собираются интерфейсы. Поговорим про тексты, их оформление, доступность и производительность в контексте современных веб-приложений.'
+    tags:
+      - Typography
 
   - title: "Let's kill lifecycle"
     speaker: Александр Шушунов
     company: EPAM Systems
     description: "Не любите lifecycle, а `componentWillReceiveProps` заставляет вас плакать? Let's make React pure again! Я покажу, как lifecycle делает ваш код сложнее и добавляет в него ошибки. Расскажу, как от этого избавиться или хотя бы спрятать."
+    tags:
+      - React
 
   - title: Цена типизации
     speaker: Назим Гафаров
     company: Yandex
     description: 'Типизация обходится дорого. Сегодня ты пишешь дженерики, завтра дженерики от дженериков, а послезавтра программируешь на типах и выносишь из дома вещи ради новой дозы типизации. Я расскажу, как получить преимущества типизации, прилагая минимум усилий или вовсе не используя типизацию. Обозначу условия, при которых типизация окупается. Доклад будет интересен командам, которые присматриваются к TypeScript или Flow, но боятся, что затраты на внедрение превысят выгоду.'
+    tags:
+      - TypeScript
 
   - title: Жизнь после Svelte
     speaker: Павел Малышев
     company: MustLab
     description: 'Что делать, если хочется ещё больше ванилы? Готовы ли веб-стандарты для решения прикладных задач разработки? Есть ли жизнь после Svelte?'
+    tags:
+      - Svelte
 ---
 
 <!-- Привет, друзья!

src/events/12.md

@@ -18,35 +18,46 @@ speeches:
   - title: 'Tensorflow.js - создаем, обучаем и используем нейронную сеть не отходя от браузера'
     speaker: Максим Теричев
     company: Лад
+    tags:
+      - Tensorflow
 
   - title: Modern Ember.js
     speaker: Андрей Фель
     company: RetailNext
     description: 'Обзор основных преимуществ Ember. Дивный новый мир Ember Octane.'
+    tags:
+      - Ember
 
   - title: 'Что даёт нам Webpack: устройство бандла'
     speaker: Андрей Синицын
     description: 'Разберём, что внутри у бандла вебпака, как это собирается, и как это всё можно использовать себе на пользу'
+    tags:
+      - Webpack
 
   - title: 'Как делать крутые компоненты на Angular'
     speaker: Александр Инкин
     company: Тинькофф
     description: 'Принципы построения и особенности Ангуляра, позволяющие создавать удобные, надёжные, гибкие и производительные компоненты.'
+    tags:
+      - Angular
 
   - title: Sagas vs thunks
     speaker: Олег Хлевнов
     company: Smartbics
     description: 'Разбор и сравнение двух популярных способов работы сайд-эффектами в проектах на React'
+    tags:
+      - React
+      - Redux-Saga
 
 ---
 
 <!-- Привет, друзья!
 
-Настало время встретиться вновь и поговорить про самое важное и интересное. :) 
+Настало время встретиться вновь и поговорить про самое важное и интересное. :)
 
 ----
 
-<3 
+<3
 
 Мероприятие проводится при поддержке компании «RetailNext».
 Большое спасибо за помощь с площадкой компании «Лад».

src/events/13.md

@@ -10,39 +10,55 @@ registrationLink: "https://www.it52.info/events/2019-06-29-jsnn-13"
 eventTags:
   - ESlint
   - React
+  - General
+  - Node
 
 speeches:
   - title: Роутер как у сына маминой подруги
     speaker: Павел Малышев
     company: MUST lab
     description: 'Когда мы разрабатываем веб-приложения, мы часто используем маршрутизатор. Каждый фреймворк имеет свой собственный, хотя все они используют одни и те же принципы. Или нет? Действительно ли существующие маршрутизаторы достаточно гибки, чтобы покрыть все кейсы веб-разработки? Или "танцы с бубном" - это неотъемлемая часть работы с маршрутизацией. Давайте ответим на все эти вопросы, сравнив различные маршрутизаторы, попутно разработав свой собственный подход.'
+    tags:
+      - General
 
   - title: Пишем ESLint-правила
     speaker: Леонид Лебедев
     company: Yandex
     description: "Если стандартный набор правил не покрывает все ваши потребности, то нужно начать писать свои. В докладе расскажу зачем создают правила для ESLint, почему мы стали это делать, а также попробуем создать своё правило."
+    tags:
+      - ESlint
 
   - title: Жизнь до Runtime
     speaker: Никита Сидоров
     company: Yandex
     description: "Поговорим о построении графа зависимостей программных модулей в NodeJs приложении: рассмотрим CommonJs и ESM системы модулей, их обратную совместимость и переход от одной к другой. Обсудим, как анализ графа зависимостей может упростить жизнь разработчиков — избавить вас от лишней работы, улучшить аппетит и помочь скинуть лишние 5кг, ведь лето уже на дворе."
+    tags:
+      - General
+      - Node
 
   - title: Стилизация реакт приложений
     speaker: Антон Кастрицкий
     company: Yandex
     description: "Блицдоклад. Рассмотрим самые популярные подходы к стилизации приложений в контексте современного веба. Выделим их плюсы и минусы, а так же поговорим про новый подход, который мы разработали, создавая дизайн систему Яндекс Маркета."
+    tags:
+      - React
 
   - title: Как применить интерактивные карты для визуализации имунного ответа
     speakers:
-      - name: Дарья Завьялова 
+      - name: Дарья Завьялова
         company: НИИ БМТ ПИМУ
-        
+
       - name: Глеб Мялик
         company: Тинькофф
+    tags:
+      - General
+      - ML
 
   - title: "React Memo … Wtf?"
     speaker: Макаров Андрей
     description: Блицдоклад
+    tags:
+      - React
 
 ---
 
@@ -51,8 +67,8 @@ speeches:
 Настало время встретиться вновь и поговорить про самое важное и интересное. :)
 
 Мероприятие проводится при поддержке компании «[Яндекс](https://www.yandex.ru/)».
- 
- 
+
+
 ### Ребята, пожалуйста, возьмите с собой документы (необходимы для охраны БЦ).
 
 ----

src/events/2.md

@@ -17,25 +17,34 @@ speeches:
     speaker: Андрей Макаров
     description: Еще один модный бандлер JS
     slides: http://www.slideshare.net/r3nya/hey-webpack
+    tags:
+      - Webpack
 
   - title: Meteor + React = ?
     speaker: Павел Шалаев
-    description: "Две современные технологии, которые помогают ускорить разработку 
+    description: "Две современные технологии, которые помогают ускорить разработку
       в несколько  раз. Обсудим, какие магические приемы позволяют совместить Meteor и React.
       Попробуем разобраться — белая это магия или черная.
       Также, я расскажу и покажу какой была жизнь с Meteor до появления React."
     slides: https://slides.com/lawrentiy/meteorreact
+    tags:
+      - React
+      - Meteor
 
   - title: 'Meteor: Как собрать приложение из пакетов'
     speaker: Дмитрий Манжасов
     description: 'В докладе будет рассмотрена архитектура Meteor-приложения, состоящего из  одних пакетов (packages), достоинства и недостатки такого подхода. Также будет рассказано о том, как создавать пакеты для Meteor, как писать для них юнит-тесты и как собирать из них готовое приложение'
     slides: http://dim2man.github.io/meteor-build-app-from-packages/
+    tags:
+      - Meteor
 
   - title: React Native
     speaker: Сергей Смышляев
     description: 'Пользователи мобильных приложений ждут от вас нативного внешнего вида и плавной анимации. Однако процесс разработки с помощью нативных иснтрументов iOS/Android идёт непривычно медленно по меркам веб-разработчиков. В данном докладе мы расскажем, как React Native подходит к данным проблемам, чем отличается от других гибридных платформ, и проиллюстрируем процесс разработки в виде live-coding сессии.'
     slides: http://slides.com/sergeysmyshlyaev/deck/#/
     video: https://youtu.be/FLSrZwPYWeg
+    tags:
+      - React Native
 ---
 
 <!-- Зимняя встреча и разговоры о самом интересном и новом в JavaScript – это уже небольшая традиция. :)