Телефонный виджет для переписок и система заметок на базе гита (gitea)
В тексте использование набора разрозненных инструментов не по прямому назначению, а для:
Когда возникла необходимость в VPN я решил арендовать под это дело отдельный VPS сервер. Мощности были взяты с небольшим запасом для разных экспериментов и личных мини проектов. Обычно для небольших веб приложений я использовал github pages, но у него есть очевидные минусы: некоторые вещи не хочется светить в паблике, иногда нужен полноценный сервер, а не простая статичная html страница. Для сервера были попытки использовать яндекс облако (есть бесплатные лимиты), но разбираться с инфраструктурой лямбд, апи гэтвэев, s3 хранилищ и прочим оказалось довольно накладно, особенно когда что то надо поправить раз в месяц, а то и раз в год.
Исходя из этих предпосылок после настройки VPN на сервере, туда же был поставлен gitea. Ресурсов gitea жрёт минимум, ставится и настраивается элементарно. Вначале я хотел попробовать использовать встроенный вики движок как простую альтернативу github pages. Гит сервер мне всё равно был нужен, а монструозные cms ставить совсем не хотелось (из соображений простоты и ресурсов VPS). Немного поигравшись с вики и поняв, что функционала простых md файлов мне не достаточно (да и js цеплять туда проблематично), я вернулся к html + js страничкам. Что бы это было похоже на github pages, я доставил на сервер nginx и настроил гит хуки для деплоя статики. Теперь у меня имелся git сервер с веб мордой для быстрого редактирования и создания файлов. И простейший автодеплой по коммиту. Чем не простейшая cms, да ещё и с версионированием контента? А ещё я хотел предоставлять контролируемый доступ другим пользователям до файлов репозитория.
У gitea кроме функционала собственно гита (с веб редактором) и вышеупомянутого вики движка есть ещё и трекер задач. Тут видим стандартный функционал: у задач можно назначать исполнителя, дату выполнения, писать комментарии, цеплять изображения, объединять задачи в проекты с выводом на канбан доску (всё примерно как в gitlab). В качестве младшего сотрудника в gitea была добавлена жена и заведён небольшой список семейных дел (планов) на длинные выходные. В целом всё тоже самое можно сделать в trello или гугл документах, но тут точно не выносим семейное в чужое облако со случайным доступом. На практике, именно как инструмент для todo списков или планирования, канбан доска не слишком себя оправдала, но это больше вопрос к практике использования, а не инструменту.
Канбан доска
Теперь стоит сделать небольшой шаг в сторону и объяснять, какие записи (заметки) я использую в повседневной жизни. Система ведения заметок ещё в процессе формирования, но пока получается так:
Оперативные заметки — бумажный блокнот, заметки в телефоне, отдельный гугл документ.
Список дел на сегодня или ближайшие пару дней — снова бумажный блокнот.
Напоминалки — календарь в телефоне.
Совместные семейные дела или планы — гугл документы с совместным доступом.
Записи по личным проектам или какие то долговременные записи — локальная система для ведения заметок (mindforger) + бэкап в яндекс диск.
Для ведения заметок я выбрал достаточно минималистичный mindforger который не умеет в облака, в синхронизацию и не имеет мобильного клиента. Тут gitea пригодилась для доступа до заметок на мобильном устройстве.
В какой то момент ещё зародилась идея перекидываться цифровыми записками с женой, но не просто смсками или сообщениями в мессенджере, а так, чтобы текст был постоянно на главном экране телефона. Идеально для небольших напоминаний или намёков второй половине. Гугление вывело на замечательную программу widgetify. Работает она предельно просто — на экран телефона помещает виджет, внутри которого отображается скриншот любого сайта. Есть минимально необходимые настройки: урл, частота обновления виджета, авторизация, разные http настройки. Виджет умеет в push уведомления, но так как работает со скринами сайта, то уведомления срабатывают на процент разницы предыдущего и текущего скриншота. Такой подход в целом работает, но с нюансами — то страница не подгрузится полностью, то фоновое изображение по какой то причине отрендерится чуть по другому и даст ложное уведомление. Но для отправки небольшого текста на экран телефона работает приемлемо.
Итоговое решение выглядит следующим образом. Имеется три основные html страницы с минимальным содержимым и стилями:
Шаблон виджета — html обёртка, стили, js. Эта страница отдаётся как статика через nginx, а в директорию статики попадает через гит хук.
И две отдельных html файлов куда вписывается текст сообщений, иногда с минимальным оформлением. Эти части снаружи уже доступны только через gitea api с использованием api токена.
Редактирование заметок собственно через веб интерфейс в gitea.
В widgetify прописывается адрес основной странички, через url передается api токен (но можно настроить и авторизацию по кукам). А страница виджета уже через api подгружает нужный текст сообщения. С апи фокус в том, что личные сообщения точно не светятся наружу без авторизации или апи токена. Для редактирования сообщений собственно используется веб редактор gitea. Из минусов — автодополнение редактора ломается и глючит в мобильных браузерах вплоть до поломки функционала редактирования текста. Тут спасает простое «набрать где то ещё → скопировать → вставить в gitea».
В процессе использования такого виджета последовательно добавлялись улучшения:
Файл readme.md для инструкции, как этим пользоваться и быстрыми ссылками на редактирования нужного файла. Если жена долго ищет куда нажать, что бы набрать текст «люблю тебя», то текст сообщения рискует очень быстро превратиться во что то другое.
Чтение документации gitea вывело на раздел кастомизации. Оказалось, что можно поменять главную страницу gitea и убрать оттуда все программистские штуки и оставить ссылку на редактирования файла.
И последнее на данный момент улучшение — была добавлена поддержка парсинга markdown разметки через js библиотеку.
Дашбоард с быстрыми ссылками
Обдумываю добавить внешний html (или markdown) редактор для полноценной поддержки мобильных браузеров. Либо добавить уже свою серверную часть, вместо использования gitea. Но это уже дополнительные трудозатраты с минимальным выхлопом.
А используется это следующим образом:
На главном экране телефона выводится виджет widgetify.
В телефоне же имеется иконка быстрого доступа до gitea, на главное странице которой есть разные ссылки, включая ссылку на открытие редактирования файла с текстом.
Набирается или вставляется из буфера обмена текст записки.
Сохраняем файл (git commit!).
Приложение widgetify в течении нескольких минут идёт за обновлениями, обнаруживает изменения текста и показывает уведомление. Либо новый текст просто будет виден на главном экране телефона по факту взятия телефона в руки.
Все счастливы.
Виджет на экране телефона. Текст снизу и сверху меняется местами для каждого пользователя.
Таким образом имея VPS с минимальным софтом на борту получилось реализовать:
Доступ до личных заметок с мобильного устройства (mindforger + git + gitea).
Статические веб страницы с редактированием контента из веб интерфейса (gitea + nginx + git hooks).
Приватный аналог trello (gitea).
Отправку коротких сообщений на экран телефон (gitea + nginx + widgetify).
Аналог pastebin и github gists с настраиваемым уровнем доступа (gitea).
Полезные ссылки:
