Улучшаем редактор заметок в Forestry

Я уже писал, что использую генератор статических сайтов, а в качестве CMS — сервис Forestry. Сервис позволяет писать тексты в удобном редакторе через браузер, прямо как в WordPress, а потом самостоятельно отправляет изменения в git-репозиторий на GitHub, где всю остальную работу по публикации сайта делает CircleCI. На эту тему у меня уже есть заметка “Автоматизация блога на Hugo с помощью CircleCI”.

Forestry очень удобный сервис, но так как это стартап и всё в нём модно-молодежно, некоторые решения спорные и с ними порой не очень удобно работать, а вариантов настроить “как надо” пока нет. Чтобы вы понимали мою проблему, расскажу и покажу, как всё устроено сейчас.

Редактирование заметки — это 2 колонки, слева поля front matter, справа — содержимое заметки. С первого взгляда красиво, даже почти не к чему придраться, но у меня монитор с диагональю 27" и это почти телевизор в масштабе рабочего места. Даже если предположить, что я смотрю по центру экрана, хотя все мы знаем, что самая рабочая область экрана — это верхний левый угол, то писать основной текст заметки где-то далеко справа самое неудобное, что только можно было придумать.

Есть вариант шаблона, когда только поля по центру, но такие шаблоны для страниц, где всё содержимое исключительно во front matter, а у меня вроде как обычные заметки и написаны они в обычном синтаксисе Markdown.

Решение

Я бы и дальше страдал, если бы не внезапная мысль перед сном о том, что сервис то — обычное приложение в браузере, с HTML и CSS в основе. Значит, его легко исправить своими CSS-правилами. Помните, раньше были популярные оформлялки для Вконтакте и прочих пожирателей времени? Сейчас тот самый случай, когда их стоило бы применить. Это дешево и сердито, зато РАБОТАЕТ!

Для начала нам нужно расширение для браузера, которое сможет эти самые стили сохранить и применить к сайту. Я пользуюсь Google Chrome и выбрал одно из топа в каталоге дополнений — Stylus. Можете использовать его или выбрать подходящее для своего браузера, это особой роли не играет.

Затем нужно разобраться, как устроена страница редактора. Это тоже не проблема, открываем редактор и смотрим структуру страницы.

<div class="main-content">
	<div class="sc-cTjmhe fyLVgw">...</div>
	<div class="sc-imABML fEzRdo">
		<div class="sc-gkFcWv djIbwi">...</div>
		<div class="sc-hUfwpO eLbpNJ">...</div>
	</div>
</div>

Forestry — это модное нынче SPA-приложение, поэтому классы там генерируются кодом, который собирает компоненты воедино, а значит, зацепиться напрямую не получится. К счастью, в CSS есть другие механизмы, которые позволяют добраться до глубоко вложенных объектов, нужна только входная точка. В нашем случае, такой входной точкой будет блок с классом main-content

Внутри класса у нас два блока div, один для шапки с кнопкой “Save”, второй содержит в себе два других блока div, где левый (первый) — поля front matter, правый (второй) — редактор. Очевидно, что самое простое решение это поменять их местами. Для этого нет ничего лучше, чем старый (уже) добрый flex.

Реализация

Для начала нужно добавить новый проект в Stylus. Кликая на иконку дополнения выбираем пункт Manage и попадаем в редактор стилей. Проект нужно как-нибудь назвать, но если кликать иконку на странице заметки в Forestry, Stylus сам сохранит проект с доменом в качестве имени . Важно так же исправить внизу страницы маску для “Applise to” как на картинке, чтобы стили применялись для всех страниц, а не только той, что была в момент нажатия на кнопку. Ну и добавить сами стили.

Первым делом добавим немного flex нашим блокам и заодно поменяем местами вложенные блоки с помощью свойства flex-direction: row-reverse;.

.main-content > div:last-child {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

Но ничего не поменялось. Все из-за того, что у вложенных блоков указано свойство position: fixed;, которое заставляет их игнорировать все правила по автоматическому размещению во flex-блоках. Нужно его сбросить на значение по умолчанию.

.main-content > div:last-child > div {
    position: initial;
}

И можно добавить немного визуальной красоты, убрав лишний отступ слева и сделав сам редактор шире 700px, которых объективно маловато, особенно для заметок с фото.

.main-content > div:last-child > div:last-child {
    left: 0; 
    width: calc(60% - 0px);
}

.main-content > div:last-child > div:last-child .ProseMirror {
    width: 100%;
}

Итог

После добавления кода стилей в Stylus получаем вот такой вот редактор заметок, где основное содержимое, как и положено, слева, а второстепенные поля — справа.

Конечно, заголовок и другие поля тоже важны, но они пишутся чаше всего один раз, а вот над текстом заметки приходится корпеть приличное количество времени и важно, чтобы работать с ним было удобно. Теперь — удобно, а значит, смогу писать полезные заметки чаще и регулярнее. :)

P.S. Этой заметкой решил начать новую рубрику в блоге — #ТехноВторник. Планирую писать каждый вторник технические заметки на тему разработки и технологий, подписывайтесь на RSS и следите за обновлениями.