bukatchuk ui

Блоки

Лента публикаций

Чёрная бегущая лента в виде журнала: дата, цветной тег, заголовок. Две дорожки в разные стороны.

log с версии 0.1.0

Примеры

Лента публикаций
<div class="log" aria-label="Лента публикаций">
  <div class="log__head">
    <div class="log__title">Лента публикаций</div>
    <div class="log__status">148 публикаций · 37 тегов</div>
  </div>
  <div class="log__body">
    <div class="log__track">
      <a class="log__entry" href="#"><span class="log__time">12.10.2026</span><span class="log__tag log__tag--0">postgresql</span><span class="log__msg">Почему реплика отстаёт на ровном месте</span></a>
      <a class="log__entry" href="#"><span class="log__time">03.10.2026</span><span class="log__tag log__tag--1">мониторинг</span><span class="log__msg">Алерты, которые будят зря</span></a>
      <a class="log__entry" href="#"><span class="log__time">21.09.2026</span><span class="log__tag log__tag--2">backup</span><span class="log__msg">Восстановление проверяют, а не надеются</span></a>
      <span class="log__dup" aria-hidden="true">
        <a class="log__entry" href="#"><span class="log__time">12.10.2026</span><span class="log__tag log__tag--0">postgresql</span><span class="log__msg">Почему реплика отстаёт на ровном месте</span></a>
        <a class="log__entry" href="#"><span class="log__time">03.10.2026</span><span class="log__tag log__tag--1">мониторинг</span><span class="log__msg">Алерты, которые будят зря</span></a>
        <a class="log__entry" href="#"><span class="log__time">21.09.2026</span><span class="log__tag log__tag--2">backup</span><span class="log__msg">Восстановление проверяют, а не надеются</span></a>
      </span>
    </div>
    <div class="log__track log__track--reverse">
      <a class="log__entry" href="#"><span class="log__time">14.09.2026</span><span class="log__tag log__tag--1">nginx</span><span class="log__msg">Тайм-ауты апстрима: что на самом деле значат цифры</span></a>
      <a class="log__entry" href="#"><span class="log__time">02.09.2026</span><span class="log__tag log__tag--0">linux</span><span class="log__msg">Память, которой нет, и которая есть</span></a>
      <span class="log__dup" aria-hidden="true">
        <a class="log__entry" href="#"><span class="log__time">14.09.2026</span><span class="log__tag log__tag--1">nginx</span><span class="log__msg">Тайм-ауты апстрима: что на самом деле значат цифры</span></a>
        <a class="log__entry" href="#"><span class="log__time">02.09.2026</span><span class="log__tag log__tag--0">linux</span><span class="log__msg">Память, которой нет, и которая есть</span></a>
      </span>
    </div>
  </div>
</div>

Установка

bukatchuk-ui add log

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

Файлы

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

Вставка для Jekyll

{%- comment -%}
  Бегущая лента публикаций. Параметры: posts (список постов, уже без скрытых), title (заголовок ленты),
  status (строка справа), limit (записей на дорожку, по умолчанию 12).
  Каждая дорожка выводится дважды подряд — так прокрутка замыкается без шва.
{%- endcomment -%}
{%- assign per_track = include.limit | default: 12 -%}
{%- capture log_a %}{% for p in include.posts limit: per_track %}{% assign t = p.tags.first | default: p.category | default: "blog" %}{% assign k = t.size | modulo: 3 %}<a class="log__entry" href="{{ p.url | relative_url }}"><span class="log__time">{{ p.date | date: "%d.%m.%Y" }}</span><span class="log__tag log__tag--{{ k }}">{{ t }}</span><span class="log__msg">{{ p.title | escape }}</span></a>{% endfor %}{% endcapture -%}
{%- capture log_b %}{% for p in include.posts limit: per_track offset: per_track %}{% assign t = p.tags.first | default: p.category | default: "blog" %}{% assign k = t.size | modulo: 3 %}<a class="log__entry" href="{{ p.url | relative_url }}"><span class="log__time">{{ p.date | date: "%d.%m.%Y" }}</span><span class="log__tag log__tag--{{ k }}">{{ t }}</span><span class="log__msg">{{ p.title | escape }}</span></a>{% endfor %}{% endcapture -%}
<div class="log" aria-label="{{ include.title | default: 'Лента публикаций' }}">
  <div class="log__head">
    <div class="log__title">{{ include.title | default: 'Лента публикаций' }}</div>
    <div class="log__status">{{ include.status }}</div>
  </div>
  <div class="log__body">
    <div class="log__track">{{ log_a }}<span aria-hidden="true" class="log__dup">{{ log_a }}</span></div>
    <div class="log__track log__track--reverse">{{ log_b }}<span aria-hidden="true" class="log__dup">{{ log_b }}</span></div>
  </div>
</div>