Добавляем блок asciinema в django-wagtail

@, в [Django, Заметки]

Asciinema записывает и воспроизводит терминальные сессии. А wagtail просто прекрасен! TLDR: pip install wagtail-asciinema.

Всю статику и/или rest-логику я обычно запихиваю в приложение с названием frontend. Туда же отправляется всё устанавливаемое через npm/bower. 

Официальных пакетов bower/npm для asciinema я не нашёл, поэтому качаем сие чудо руками.

Имхо, удобнее всего использовать для хранения json'ов с записанными сессиями asciinema rec обычные документы wagtail'а.

from wagtail.wagtailcore import blocks
from wagtail.wagtaildocs.blocks import DocumentChooserBlock

class AsciinemaBlock(blocks.StructBlock):
    FONT_SIZE = Choices(
        ('small', _('small')),
        ('medium', _('medium')),
        ('big', _('big')),
    )
    THEME = Choices(
        ('asciinema',) * 2,
        ('tango',) * 2,
        ('solarized-dark',) * 2,
        ('solarized-light',) * 2,
        ('monokai',) * 2,
    )

    title = blocks.CharBlock(required=False)
    poster = blocks.CharBlock(required=False, default='npt:0:0', help_text=_('npt:2:34 || data:text/plain,Poster text'))
    document = DocumentChooserBlock(required=True)
    font_size = blocks.ChoiceBlock(FONT_SIZE, default=FONT_SIZE.small)
    theme = blocks.ChoiceBlock(THEME, default=THEME.monokai)
    speed = blocks.IntegerBlock(default=1, min_value=1)
    start_at = blocks.CharBlock(default='0', help_text=_('123, mm:ss, hh:mm:ss'))
    cols = blocks.IntegerBlock(default=0, min_value=0, max_value=1024)
    rows = blocks.IntegerBlock(default=5, min_value=0, max_value=1024)
    loop = blocks.BooleanBlock(default=False, required=False)
    preload = blocks.BooleanBlock(default=False, required=False)
    autoplay = blocks.BooleanBlock(default=False, required=False)

    class Meta:
        icon = 'media'
        template = 'blog/blocks/asciinema_block.html'

Шаблон для блока полностью повторяет мануал asciinema.

<asciinema-player
    {% if value.loop %}loop="1"{% endif %}
    {% if value.autoplay %}autoplay="1"{% endif %}
    {% if value.preload %}preload="1"{% endif %}
    {% if value.poster %}poster="{{ value.poster }}"{% endif %}
    {% if value.cols %}cols="{{ value.cols }}"{% endif %}
    {% if value.rows %}rows="{{ value.rows }}"{% endif %}
    src="{{ value.document.url }}"
    font-size="{{ value.font_size }}"
    speed="{{ value.speed }}"
    start-at="{{ value.start_at }}"
    theme="{{ value.theme }}">
</asciinema-player>

Поскольку плеер этот толстый, а нужен он на странице далеко не всегда, то дабы не травмировать браузер юзера, напишем метод ArticlePage, определяющий наличие в StreamField нашего блока:

@property
def has_asciinema(self):
    for stream_child in self.content:
        if stream_child.block.name == 'asciinema':
            return True
    return False

Ну и добавим запчасти в шаблон страницы:

{% block extra_js %}
  {% if self.has_asciinema %}
    <script src="{{ STATIC_URL }}frontend/asciinema/v2.4.1/asciinema-player.js"></script>
  {% endif %}
{% endblock %}
{% block extra_css %}
  {% if self.has_asciinema %}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}frontend/asciinema/v2.4.1/asciinema-player.css">
  {% endif %}
{% endblock %}

Ну и добавляем в наш StreamBlock что-то из серии asciinema = AsciinemaBlock(classname='full').

Ссылка на github. Установка:

$ pip install wagtail-asciinema
night-crawler
Просмотров: 181
blog comments powered by Disqus