From 617bfd52cf621a065a1dd2e20feaf367e67d6924 Mon Sep 17 00:00:00 2001 From: Blokhin Andrew Date: Tue, 5 May 2020 23:01:28 +0300 Subject: [PATCH] Generate tags.json duaring build and use it as a data source in tags.njk --- .eleventy.js | 8 + .../styles/blocks/speeches-by-tags.scss | 90 ++ src/assets/styles/style.scss | 1 + src/events/1.md | 12 +- src/events/10.md | 14 + src/events/11.md | 8 + src/events/12.md | 15 +- src/events/13.md | 24 +- src/events/2.md | 11 +- src/events/3.md | 14 +- src/events/4.md | 10 + src/events/5.md | 17 +- src/events/6.md | 13 + src/events/7.md | 14 +- src/events/8.md | 28 +- src/events/9.md | 22 +- src/index.njk | 2 +- src/tags.json | 1240 +++++++++++++++++ src/tags.njk | 71 + utils/markdown-parser.js | 36 + 20 files changed, 1628 insertions(+), 22 deletions(-) create mode 100644 src/assets/styles/blocks/speeches-by-tags.scss create mode 100644 src/tags.json create mode 100644 src/tags.njk create mode 100644 utils/markdown-parser.js diff --git a/.eleventy.js b/.eleventy.js index 3dc97ae..fac64a5 100644 --- a/.eleventy.js +++ b/.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 * diff --git a/src/assets/styles/blocks/speeches-by-tags.scss b/src/assets/styles/blocks/speeches-by-tags.scss new file mode 100644 index 0000000..e94c501 --- /dev/null +++ b/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); + } +} diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss index 145100f..07b0537 100644 --- a/src/assets/styles/style.scss +++ b/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"; diff --git a/src/events/1.md b/src/events/1.md index 937c82b..f2d6673 100644 --- a/src/events/1.md +++ b/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 --- diff --git a/src/events/4.md b/src/events/4.md index 54e3396..6bf87bc 100644 --- a/src/events/4.md +++ b/src/events/4.md @@ -20,28 +20,38 @@ speeches: company: Evil Martians description: "Рассмотрим все линтеры для CSS. На примере Stylelint и Stylefmt объясним, как правильно использовать линтер в организации коллектива." slides: http://slides.com/ai/stylelint-ru + tags: + - Stylelint - title: Привет, CSS Grid Layout speaker: Макаров Андрей description: CSS Grid Layout – удобный механизм расположения контента по виртуальной сетке slides: https://r3nya.github.io/css-grid/ + tags: + - CSS Grid - title: Автоматическое тестирование front-end приложения speaker: Михаил Ангелов company: Ѣ description: "Рассказ про варианты автоматических тестов SPA приложений Практические примеры unit, integration, end-2-end тестов" slides: https://mikhail-angelov.github.io/presentation-test-front-end/ + tags: + - Tests - title: Что осталось от MeteorJS speaker: Павел Шалаев description: "В процессе своего развития платформа пошла по пути активной интеграции, а не замыкания в себе. Посмотрим, пошло ли это ей на пользу. Удалось ли решить проблемы и требования, предъявляемые профессиональным сообществом." slides: http://slides.com/lawrentiy/historyofmeteorjs#/ + tags: + - Meteor - title: Работа с анимациями в React Native speaker: Шрамко Антон description: "Подходы к анимациям, понимание того как они работают, дополнительные библиотеки по работе с анимациями" slides: http://slides.com/friktor/react-native-animations#/ sourceCode: https://github.com/friktor/react-animations-example-it52-jsnn-4 + tags: + - React Native ---