#tw_api_jekyll

Всем привет.
Продолжаем работу над сайтом-справочником API на базе Jekyll. В прошлый раз мы вывели на сайт эндпоинты, их краткое (summary) и более развернутое (description) описание, добавили меню слева для навигации по странице, а также некоторые стили.

В этот раз сделаем следующее:

- Выведем на страницу параметры (те, которые в query, path, header или cookie) и отобразим их в виде таблицы. Пока с оговоркой: выведем параметры, которые сразу описаны в объекте в описании эндпоинта. Они еще могут «подтягиваться» по ссылке: рендеринг такого варианта реализуем позже, когда будем рендерить на странице компоненты (Components).
- Сделаем фиксацию, раздельный скролл для меню слева и «основного» содержимого сайта.
- Добавим больше стилей, чтобы сайт стал выглядеть чуть более привлекательно.

Вывод параметров на страницу

Для вывода параметров в файл api_reference.liquid был добавлен фрагмент между {% if operation.parameters %} и {% endif %}.
Внутри фрагмента реализован цикл, который проходится по массиву параметров (если он есть в обрабатываемом эндпоинте) и рендерит их в виде таблицы.
Также в файл /assets/css/style.css добавлены стили для таблицы, для классов (ищите по классу .parameters-table).

Раздельный скролл для меню слева и «основного» содержимого сайта

Чтобы сделать раздельный скролл для меню и «основного» содержимого, в файл /assets/css/style.css были добавлены стили для класса .schema-toc_paths:


.schema-toc_paths {
/* Обеспечивают неподвижность содержимого при скролле основного контента */
position: sticky;
top: 0;
/* Отображает меню поверх других элементов */
z-index: 10;
/* Задает цвет фона для меню */
background-color: #f5eff5;
/* Задаёт высоту элемента равной 100% высоты видимой области окна браузера */
height: 100vh;
/* Отключает горизонтальную прокрутку. В будущем, возможно, изменим этот стиль, чтобы избежать «расползания» колонки меню из-за длинных путей в энпоинтах */
overflow-x: hidden;
/* Включает вертикальную при необходимости: если количество элементов в меню не помещается в видимую область окна браузера */
overflow-y: auto;
}


Добавление новых стилей

Стилей добавлено не очень много (в файле /assets/css/style.css). Отметить из этого всего можно следующие:

1. Сброс и замена стандартных стилей ссылок по всему документу (подчеркивание, цвета и пр.):


a {
text-decoration: none;
color: rgb(72, 71, 71);
}


2. Цвет фона, шрифта и закругление для HTTP-глаголов (POST, GET, PUT, PATCH, DELETE) эндпоинтов в меню и в основном контенте:


... {
background-color:
color: white;
padding: 1px 10px 1px 10px;
border-radius: 10px;
}


Свойства заданы для классов .schema-toc_prefix-get, .schema-toc_prefix-post, .schema-toc_prefix-patch, .schema-toc_prefix-delete, .schema-toc_prefix-put.

3. Чуть более симпатичное отображение путей (название) эндпоинтов в основной секции сайта:


.api-paths_path {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 15px;
opacity: 90%;
}



Готово. Если вы все сделали правильно, ЕЩЕ БОЛЬШЕ содержимого спецификации появится на странице сайта по сравнению с предыдущим этапом. И это будет выглядеть уже более симпатично.

Свериться с результатом, который должен у вас получиться, можно в ветке iteration_5 репозитория, специально подготовленного под текущую серию постов.

И не забываем, про возможность просмотра отрендеренного результата на GitHub Pages.