bukatchuk ui

Элементы

Текст статьи

Оформление длинного текста: абзацы, заголовки, списки, ссылки, цитаты, таблицы, код с подсветкой, плееры, буквица. Вариант для текстовой страницы.

prose с версии 0.1.0

Примеры

Статья

Пять минут простоя в пятницу вечером обошлись дороже, чем вся неделя планового обслуживания. Разбираем, как цепочка мелких решений привела к остановке платёжного шлюза.

Что случилось

В 18:42 на ведущем узле кластера закончилось место на диске. Мониторинг прислал предупреждение за сорок минут до этого, но порог был рассчитан на старый объём журналов. Подробности — в разборе инцидента.

Хронология

  1. 18:42 — запись в базу остановилась.
  2. 18:49 — дежурный подтвердил отказ мастера.
  3. 18:57 — реплика повышена до мастера.
  • Порог предупреждения стоял на 90% от объёма диска.
  • Журналы репликации росли быстрее, чем их очищали.

Сбой редко бывает одним событием: это несколько нормальных решений, которые сошлись в одной точке.

# очистка журналов старше семи дней
find /var/log/pg -name '*.log' -mtime +7 -delete

УзелРольДиск
db-1мастер100%
db-2реплика61%
<div class="prose">
  <p><span class="firstcharacter">П</span>ять минут простоя в пятницу вечером обошлись дороже, чем вся неделя планового обслуживания. Разбираем, как цепочка мелких решений привела к остановке платёжного шлюза.</p>
  <h2>Что случилось</h2>
  <p>В 18:42 на ведущем узле кластера закончилось место на диске. Мониторинг прислал предупреждение за сорок минут до этого, но порог был рассчитан на старый объём журналов. Подробности — в <a href="#">разборе инцидента</a>.</p>
  <h3>Хронология</h3>
  <ol>
    <li>18:42 — запись в базу остановилась.</li>
    <li>18:49 — дежурный подтвердил отказ мастера.</li>
    <li>18:57 — реплика повышена до мастера.</li>
  </ol>
  <ul>
    <li>Порог предупреждения стоял на 90% от объёма диска.</li>
    <li>Журналы репликации росли быстрее, чем их очищали.</li>
  </ul>
  <blockquote><p>Сбой редко бывает одним событием: это несколько нормальных решений, которые сошлись в одной точке.</p></blockquote>
  <div class="highlight"><pre><code><span class="c1"># очистка журналов старше семи дней</span>
<span class="k">find</span> /var/log/pg -name <span class="s">'*.log'</span> -mtime +<span class="m">7</span> -delete</code></pre></div>
  <hr>
  <table>
    <thead><tr><th>Узел</th><th>Роль</th><th>Диск</th></tr></thead>
    <tbody>
      <tr><td>db-1</td><td>мастер</td><td>100%</td></tr>
      <tr><td>db-2</td><td>реплика</td><td>61%</td></tr>
    </tbody>
  </table>
</div>
Текстовая страница

Занимаюсь эксплуатацией нагруженных систем с 2007 года: от серверов в стойке до кластеров в облаке.

Чем занимаюсь

  • Строю отказоустойчивую инфраструктуру.
  • Разбираю аварии и пишу о выводах.

Связь

Пишите на mail@example.org.

<div class="prose prose--page">
  <p>Занимаюсь эксплуатацией нагруженных систем с 2007 года: от серверов в стойке до кластеров в облаке.</p>
  <h2>Чем занимаюсь</h2>
  <ul>
    <li>Строю отказоустойчивую инфраструктуру.</li>
    <li>Разбираю аварии и пишу о выводах.</li>
  </ul>
  <h3>Связь</h3>
  <p>Пишите на <a href="mailto:mail@example.org">mail@example.org</a>.</p>
</div>

Установка

bukatchuk-ui add prose

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

Файлы

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

Варианты

КлассНазначение
prose--page