bukatchuk ui

Блоки

Живая лента событий

Вертикальная лента записей с уровнем и временем, которая плавно прокручивается сама.

log-feed с версии 0.1.0

Примеры

Маршрут «первая неделя»
<div class="logfeed" aria-label="Маршрут «первая неделя»">
  <div class="logfeed__hd"><div>Маршрут «первая неделя» — как выглядит результат семи дней</div><div>day 1 → day 7 / локальный стенд + VPS + облако</div></div>
  <div class="logfeed__body">
    <div class="logfeed__track">
      <div class="logfeed__e"><span class="logfeed__t">DAY 1 · 19:40</span><span class="logfeed__tag logfeed__tag--ok">OK</span><span class="logfeed__m">Рабочее место собрано: терминал, ключи, dotfiles, git настроен под себя</span></div>
      <div class="logfeed__e"><span class="logfeed__t">DAY 1 · 21:05</span><span class="logfeed__tag logfeed__tag--sys">SYS</span><span class="logfeed__m">Локальный стенд поднят — виртуалка, сеть, снапшот «чистое состояние»</span></div>
      <div class="logfeed__e"><span class="logfeed__t">DAY 2 · 22:30</span><span class="logfeed__tag logfeed__tag--warn">WARN</span><span class="logfeed__m">Сервис не поднялся после ребута — разобрано по journalctl, а не переустановкой</span></div>
      <div class="logfeed__e"><span class="logfeed__t">DAY 3 · 19:55</span><span class="logfeed__tag logfeed__tag--ok">OK</span><span class="logfeed__m">VPS арендован, доступ по ключу, пароль по SSH отключён</span></div>
      <div class="logfeed__e"><span class="logfeed__t">DAY 1 · 19:40</span><span class="logfeed__tag logfeed__tag--ok">OK</span><span class="logfeed__m">Рабочее место собрано: терминал, ключи, dotfiles, git настроен под себя</span></div>
      <div class="logfeed__e"><span class="logfeed__t">DAY 1 · 21:05</span><span class="logfeed__tag logfeed__tag--sys">SYS</span><span class="logfeed__m">Локальный стенд поднят — виртуалка, сеть, снапшот «чистое состояние»</span></div>
      <div class="logfeed__e"><span class="logfeed__t">DAY 2 · 22:30</span><span class="logfeed__tag logfeed__tag--warn">WARN</span><span class="logfeed__m">Сервис не поднялся после ребута — разобрано по journalctl, а не переустановкой</span></div>
      <div class="logfeed__e"><span class="logfeed__t">DAY 3 · 19:55</span><span class="logfeed__tag logfeed__tag--ok">OK</span><span class="logfeed__m">VPS арендован, доступ по ключу, пароль по SSH отключён</span></div>
    </div>
  </div>
</div>

Установка

bukatchuk-ui add log-feed

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

ФайлНазначение
log-feed.cssстили
example.htmlобразец разметки, в проект не копируется
log-feed.jekyll.htmlвставка для Jekyll

Варианты

КлассНазначение
logfeed__tag--ok
logfeed__tag--sys
logfeed__tag--warn

Вставка для Jekyll

{%- comment -%}
  Живая лента событий. Параметры: title, subtitle (заголовок ленты), entries — список с полями
  time, tag (OK | SYS | WARN), level (ok | sys | warn), text. Записи выводятся дважды: так прокрутка не имеет шва.
  Пример: {% include ui/log-feed.html title=site.data.log.title subtitle=site.data.log.subtitle entries=site.data.log.entries %}
{%- endcomment -%}
<div class="logfeed" aria-label="{{ include.title }}">
  <div class="logfeed__hd"><div>{{ include.title }}</div><div>{{ include.subtitle }}</div></div>
  <div class="logfeed__body">
    <div class="logfeed__track">
      {%- for n in (1..2) %}{% for e in include.entries %}
      <div class="logfeed__e"><span class="logfeed__t">{{ e.time }}</span><span class="logfeed__tag logfeed__tag--{{ e.level }}">{{ e.tag }}</span><span class="logfeed__m">{{ e.text }}</span></div>
      {%- endfor %}{% endfor %}
    </div>
  </div>
</div>