jekyller-postgres-all-in-one-dataprovider

jekyller-postgres-all-in-one-dataprovider

В этом репозитории находится Jekyller - генератор слайдов в корпоративном стиле Яндекса для Shower из разметки на языке Markdown.

презентация

Оглавление

Установка

Jekyll Shower работает в GitHub Pages и для его использования не нужно ничего устанавливать на свой компьютер.

  • Форкните этот репозиторий
  • Внесите необходимые изменения: укажите информацию о презентации и добавьте свой контент для слайдов. Это можно делать через web-интерфейс GitHub.
  • Сделайте Commit и Push своих изменений. GitHub автоматически запустит генерацию слайдов и через несколько минут презентация будет доступна на GitHub Pages по адресу: github.yandex-team.ru/pages/<ваш-логин>/jekyller.

Слайды на GitHub Pages будут доступны без какой-либо авторизации — любой, у кого есть доступ к внутренней сети, сможет их увидеть.

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

Использование

Для создания презентации с помощью Jekyller вам потребуется изменить два файла в этом репозитории: указать информацию о презентации в файле _config.yml и добавить свой контент в файл index.md.

Откройте _config.yml Здесь вы можете изменить основной шаблон презентации: название и авторов презентации, соотношение сторон для слайдов — default_ratio (доступны варианты 4x3, 16x9, 16x10) и язык для логотипа Яндекса — presentation:lang (ru, en).

Для работы со слайдами откройте файл index.md. На основе этого файла и будут сгенерированы слайды. По умолчанию в файле находится контент-заглушка с оформлением слайдов разных типов, используйте его в качестве примера. Также обращайте внимание на пояснения в комментариях.

Добавление слайдов

Чтобы добавить в презентацию новый слайд, начните редактировать файл index.md. Выберите место для нового слайда и вставьте заголовок второго уровня с помощью символов ##:

## Название слайда

Текст заголовка будет использоваться как название слайда.

CSS-классы

Вы можете назначать элементам презентации произвольные CSS-классы. Для этого укажите название класса на следующей строке после элемента:

<!-- картинка справа-->
![](themes/yandex2/images/image-right.svg)
{:.image-right}

Вы также можете указать несколько классов через пробел:

## Название слайда
{:.images .two}

В текущей теме презентации уже определено несколько классов, которые можно использовать для оформления слайдов. Примеры таких классов можно увидеть в файле index.md.

Описать новые CSS-классы можно в верхней части файла index.md.

Изображения

Чтобы создать слайд с изображениеми, выберите один из примеров в файле index.md. При этом старайтесь, чтобы размеры изображений соответствовали размерам, указанным на изображениях-заглушках.

Вы можете использовать пиктограммы (небольшие схематические изображения размером 240x200 пикселей) — есть несколько примеров слайдов с классом icons. Сами пиктограммы можно брать из библиотеки пиктограмм Яндекса.

Также вы можете выбрать фотографии из библиотеки изображений Яндекса или на фотостоке istockphoto.com. Чтобы получить изображение с фотостока, пришлите нам ссылку на presentation@ — и мы купим его для вас.

Последовательное появление элементов слайда

Если вы хотите, чтобы элементы слайда (например, строки списка) появлялись по очереди, используйте CSS-класс next. Отмеченные им элементы будут появляться по очереди, в том же порядке, в котором они расположены в файле index.md.

Пример разметки для последовательности картинок:

![](image-1.svg)
{:.next}

![](image-2.svg)
{:.next}

![](image-3.svg)
{:.next}

Пример разметки для последовательности строк списка:

1. {:.next}Нумерованный список
2. {:.next}Нумерованный список
3. {:.next}Нумерованный список

Размеры и позиционирование элементов

Если необходимо задать размеры для элементов, указывайте значения в пикселях. При масштабировании слайдов элементы будут масштабироваться автоматически. Ширина слайда по умолчанию равна 1920px.

Если нужно разместить элемент в нестандартном месте (например, прижать к правому или нижнему краю слайда), используйте абсолютное позиционирование.

По умолчанию стили для слайдов написаны так, чтобы контент был выровнен по сетке с шагом 30px. При выборе размеров и положения элементов старайтесь, чтобы они тоже соответствовали сетке.

Чтобы включить отображение сетки на слайде, добавьте для него css класс grid:

## Название слайда
{:.grid}

Дополнительно

Как сохранить презентацию в PDF

Чтобы получить презентацию в формате PDF, используйте любой браузер на основе Chromium. Откройте страницу для просмотра слайдов в режиме списка слайдов (не в режиме просмотра отдельного слайда) и выведите её на печать. В качестве принтера выберите Сохранить как PDF.

Как перенести презентацию на внешний GitHub

Иногда презентацию нужно показывать с компьютера, не подключенного к внутренней сети Яндекса. Вы можете перенести презентацию на внешний GitHub и она будет доступна с любого компьютера, на котором есть интернет.

  1. Создайте новый пустой репозиторий на github.com
  2. Клонируйте репозиторий своей презентации, указав ключ --bare
    git clone https://github.yandex-team.ru/[owner]/[repo-name].git --bare
    
  3. Добавьте в локальную копию репозитория ссылку на созданный пустой репозиторий.
    cd [repo-name].git
    git remote add public https://github.com/[owner]/[repo-name].git
    
  4. Выполните Push во внешний репозиторий с ключом --mirror
    git push public --mirror
    

Материалы для презентаций

Полная библиотека материалов для презентаций от лица Яндекса — примеры оформления слайдов с графиками, диаграммами, таблицами, картами, схемами, гаджетами, пиктограммы, иллюстрации и фотографии — находится по адресу patterns.yandex-team.ru/presentations.

Контакты

Если у вас возникли вопросы, напишите нам на рассылку presentation@.

Если вы хотите, чтобы мы проверили вашу презентацию, отправьте её на prescheck@.