Загружает картинки из буфера обмена прямо на imgur.com

Как использовать?

Откройте настройки Obsidian и установите в разделе "Third-party plugins". Для работы потребуется получить client id (подробно написано в Readme проекта)

Для чего это?

Чтобы не забивать Obsidian vault, хранящийся на жестком диске (или в вашем облаке), файлами скриншотов.

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

Как появилась идея?

До того, как я из клуба узнал про Zettelkasten и хороший инструмент для него - Obsidian.md, я частенько использовал HackMd.io для разного рода заметок.
Частый кейс: изучаешь что-то новое и выписываешь вещи, на которые хочешь запомнить. В случае просмотра какого-то доклада/лекции, хочется сделать скриншот и вставить его в заметку.

Когда я писал в HackMd, то вставляемая из буфера картинка автоматически загружалась на imgur.com. Удобно, но тогда я не придавал этому особого значения.

А вот после переключения на Obsidian мне стало не хватать этой фичи. Поскольку Obsidian хранит весь контент локально, включая изображения, которые просто засоряют мне папку с заметками. И удалять их не очень удобно: Открыть-> удалить -> подтвердить.

Настолько мне не хватало HackMd-фичи и не хотелось хранить картинки локально, что для загрузок картинок на imgur и последующей их вставки в Obsidian, у меня существовала специальная заметка в HackMd:

И я решил реализовать аналогичную загрузку картинок на imgur в Obsidian, как только появится plugins API.

Что вошло в прототип и сколько времени на него было потрачено?

Чтобы понять, как это можно реализовать, я отправился в репозиторий проекта, которым вдохновалялся: репозиторий HackMd

Там картинка сначала грузится на бекенд HackMd, а затем NodeJs загружает ее на один из file providers, среди которых есть imgur. Client id для imgur api настраивается там однократно на бекенде. Пользователь об этом не думает. В случае же Obsidian, Js выполняется по сути в браузере.

Больше всего времени я потратил на 2 вещи:

• попытки авторизовать Obsidian в imgur через OAuth
• и отключение стандартного поведения Obsidian при Cmd+V

По 2-3 оочень длинных вечера на каждую из проблем.

Какой технологический стек вы использовали? Почему?

• Никаких сторонних зависимостей не потребовалось
• TypeScript, потому что шаблон Obsidian плагина предлагает писать именно на нем
• Fetch API, потому что Obsidian - это electron app с Хромом под капотом
• немного прикоснулся к CodeMirror, потому что именно он используется для работы с текстом в Obsidian

Как вы запускались и искали первых пользователей?

• Скинул ссылку на плагин в Discord-чат Obsidian#plugins. Но там, похоже, в основном девелоперы тусуются
• Сделал PR на GitHub, чтобы плагин начал отображаться в GUI у пользователей
• И вот пишу этот пост в клубе
• UPD: сделал пост на форуме Obsidian.md

С какими самыми неожиданными трудностями пришлось столкнуться?

Значительную часть времени я потратил на то, чтобы разобраться, как я могу полноценно взаимодействовать с imgur API из Electron приложения. Было бы идеально сделать кнопку для OAuth авторизации в настройках плагина для максимально дружелюбной авторизации, но callback url в случае electron app у меня, как я понимаю, нету. Можно ли без callback url - не знаю, не работал ранее с OAuth.

Позже я заметил, что API можно использовать в упрощенном режиме, загружая картинку запросом, использующем только известный client id. И я выбрал этот, более простой путь. Загруженное изображение в итоге не привязывается к аккаунту пользователя, что, на мой взгляд, отличное поведение по-умолчанию. Я бы не хотел видеть скриншоты из Obsidian-заметок при заходе в свой imgur-аккаунт с браузера.

Неожиданная сложность - выключение стандартного поведения приложения при вставке картинки (стандартно картинка добавляется в файловую систему). Я ожидал, что методы preventDefault/stopPropagation должны мне помочь. Но, видимо из-за хитрой работы ивентов в CodeMirror, все это не работает, поэтому пришлось немного грязно подменить стандартный хендлер paste-ивента своим.

Сколько потратили и заработали? Есть идеи как это можно монетизировать?

Потратил только свое время.
Не знаю, может имеет смысл добавить .github/FUNDING.yml :) . Вижу, что другие разработчики плагинов так делают. Но у меня пока нет реквизитов для приема донатов.

Какие планы на будущее?

Ожидаю, что плагин придется еще неоднократно починить, потому что на данный момент:

The Obsidian API is still in early alpha and is subject to change at any time!

А вообще все будет зависеть от того, появятся ли какие-то вменяемые запросы на доработку плагина. И насколько это будет востребовано. Какие варианты развития я могу предположить сейчас:

• может кто-то захочет опцию, чтобы картинки летели в специальный альбом на imgur.com, чтобы потом их можно было просматривать со своего аккаунта. Но для себя я не вижу в этом никакого смысла
• может кто-то захочет, чтобы аплоад картинки происходил также по Drag'n'Drop
• может кто-то решит добавить сюда другой хостинг изображений

Пока что я сделал максимально простую реализацию, и меня она полностью устраивает.

Нужны ли какие-то советы или помощь Клуба?

Буду рад звездочкам на GitHub, если плагин вам полезен.

И рекомендациям по коду. Можно ли без callback url сделать авторизацию Obsidian'а в imgur по кнопке "sign in with imgur", чтобы максимально user-friendly (не копипастить этот client id)?
Вот у меня Deezer.app (клиент для стриминга музыки, аналог Spotify) как-то логинится через гугл OAuth по кнопке, открывая браузер