Reprose – markdown редактор для Github
Презентація редактора, призначеного для редагування markdown файлів з Github
Поточний сайт створено на основі популярного статичного генератора сайтів Jekyll, який вміє брати файли в форматі markdown та обгортає їх в шаблон та зберігає на хостінгу. Переваги та недоліки цього підходу я описував в іншій статі.
Тож я написавши декілька заміток, використовуючи десктопний редактор Zed, подумав, що мені не подобається створювати ручками коміти та хочеться простої форми для публікації. Markdown дуже поширений формат, тому я перевірив різноманітні редактори. Вимоги у мене такі: вбудований доступ до Github, підсвітка синтаксісу Markdown, підтримка Front-Matter для вказання метаінформації: категорій, тегів. Дизай редактора повинен бути нейтральним і не відволікати, а навпаки стимулювати до написання довгописа. Останнє побажання – можливість вставляти зображення, бажано показувати колекцію попередньо доданих. Редактор повинен бути максимально дружнім до стркутури Jekyll репозиторія.
Дуже близьким до того що мені потрібно є GitBook. Він вміє підключатися до репозиторія, знаходити *.md
файли, можно зберігати зміни. Не сподобалося як GitBook ставиться до контенту. Цей сервіс навʼязує свій підхід до роботи з інформацією і, наприклад, заголовок котрий лежав а Front-Matter він переклав в H1. Зображення котрі я вставив кладуться в директорію .gitbook/assets/
та не доступні після збірки Jekyll.
Іншим редактором, котрий зміг виконати частину вимог став Inkdown. Це десктопний редактор, котрий вміє підключатися до Github та зберігати створену статю. Проте інтеграція зроблена топорно і скоріше виконана “для галочки”. Для прикладу, при збереженні потрібно кожен раз вказувати назву файлу. Інша проблема – робота з зображеннями. В Inkdown вставка теж виявилася зламаною.
Останнім, і напевно, найкращим з трьох, є онлайн редактор Prose.io. В ньому гарно зроблена інтеграція з Github, є простий редактор markdown коду з мінімальною підсвіткою. Майже все добре, проте вставка зображень виявилася повністю зламаною. В мене є припущення, що код писався давно і браузери встагли змінитися, що зломало цю функцію.
Я вирішив спробувати написати власний редактор, в якому розівʼю необхідний мені функціонал. Тому я започаткував редактор Reprose, як відсилку до Prose.io, який можно вважати переробкою останнього.
На поточний момент редактор Reprose має функції:
- Авторизація через Github;
- Перегляд репозиторіїв та їх директорій;
- Редагування та збереження markdown файлів;
- Редагування метаінформації Front-Matter.
Які функції планую розвивати:
- Створення нових постів з автоматичною генерацією назви файла з заголовка;
- Можливість відредагувати розширення файлу;
- Можливість видалити файл;
- Завантаження зображень в репозиторій та подальша їх вставка в редактор;
- Можливість перенесення файлу в іншу директорію;
- Редактор YAML та JSON файлів. Бо деякі налаштування для Jekyll зберігаються в YAML, тому буде зручно редагувати їх одразу в Reprose;
- Підсвітка стану запущених чеків в репозиторії, щоб дізнатися чи опубліковано сайт. Для прикладу, Cloudflare Pages та Github Pages працюють через запуск чеків, тому коли чеки будуть завершені можно виводити їх стан, щоб інформувати про завершеність публікації після збереження посту;
- Розширені можливості редагування Front-Metter даних, наприклад, редагування списка тегів;
- Підтримка конфігурації Reprose
.reproserc.yaml
де будe зберігатися список полів Front-Matter з типами, теги, категорії; - Показ селектора зображень перед втавкою;
- API для розширень з можливістю динамічно підключати розширення за посиланням. API повинен бути простим – розширення додає одну або декілька дій. Дії можуть бути додані як кнопка на панелі інструментів, як дія у Spotlight-подібній панелі дій. Дія буде отримувати на вхід інформацію про те де знаходиться курсор, виділений текст, весь текст. Дія повинна повернути в якості результату операцію над текстом, або вставка в тому місці де знаходиться каретка, або повна заміна тексту.
Хочеться, щоб Reprose був на стиці CMS та звичайного редактора. Від CMS можно взяти звʼязність конетнту, щоб в поля вже були підставлені варіанти на вибір, щоб створити статю було просто – клік по кнопці “Create”, клік по “Save” і статя опублікована. Від редактора можно мати скорочення клавіш та механіки, які дають ілюзію що працюєш в десктопному софті. Приклад – панель Spotlight в macOS, Command Palette в Visual Code Studio або SublimeText зможе виконувати роль селектора зображень, або панелі для діалогу з розширеннями, або для запуску дій з розширень.
Reprose повинен включати в собі всі необхідні інструменти для комфортної роботи з Jekyll або Eleventy. Теми, для яких потрібна комфортна робота – minima, Chirpy, Mundana, Hitchens. Потрібно фокусуватися на якісних темах (теми приваблюють користувачів, а нас обирають через зручність роботи з темою) та додавати в систему все, щоб користувачу не потрібно було йти в Github. Потрібно залишатися широкоспеціалізованим редактором для будь якого markdown-based генератора, щоб не опинитися у вузькій ніші Jekyll-сайтів.