Проект: Obsidian Imgur Plugin  Публичный пост
14 января 2021  1222
Obsidian Imgur Plugin

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

obsidian-imgur-plugin-demo
obsidian-imgur-plugin-demo

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

Откройте настройки 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 по кнопке, открывая браузер

Связанные посты
8 комментариев 👇
Kirill Gavrilov, Software Engineer автор 11 июля в 14:22

Июль 2021

Релизнул 2.0.0:

  • Теперь можно просто залогиниться в свой аккаунт по кнопке через OAuth! (очень user-friendly, без возни с получением client_id). И все загруженные с этого момента картинки будут отображаться в аккаунте пользователя на Imgur (кому-то не хватало такого ощущения контроля над своими изображениями).
  • Или можно по-старинке продолжить загружать картинки анонимно (скорее всего, лично я продолжу делать именно так)
Статистика
  • количество установок перевалило за 1k
Дальнешее развитие
  • Планирую сделать возможность переносить уже существующие в заметках картинки из локального хранилища в Imgur (есть уже два таких реквеста в issues)
  • еще есть идея сделать поддержку загрузки видео (об этом тоже писал какой-то пользователь, потому как Imgur поддерживает видео, и главная его страница сегодня состоит по большей части именно из видео). Я сначала подумал, что не стоит этим заниматься (ведь Markdown не имеет синтаксиса для встраивания видео). А потом вспомнил, что можно просто использовать html <video> и это будет работать
  • есть также мысли о том, чтобы сделать некий графический конструктор http реквестов (чтобы можно было самому настроиться под любой хостинг изображений). Были запросы пользователей о том, что было бы круто уметь грузить картинки в какие-то места (в качестве примера приводились self-hosted решения)
Сложности, с которыми столкнулся:
  • Не мог прикрутить OAuth ранее, потому что Obsidian не до конца читал данные, приходящие в него через obsidian:// protocol URL
  • еще я не мог понять: стоит ли мне реализовывать access_token refresh. access_token выданные при первичной аутентификации живет месяц (или столько, сколько указано в expires_in в момент его генерации). Я сначала реализовал token refresh, но меня смутила необходимость хардкодить и постить свой client_secret ради этого. А если не постить секреты, то нужно создавать свой сервер авторизации, которому пользователи почему-то должны доверять. Я бы сам не стал пользоваться таким плагином. Пообщавшись с другом, который уже имел опыт работы с OAuth, я отказался от идеи рефрешить токен. Он меня заверил, что перелогиниться раз в месяц - это ок.
  • еще я хотел сделать возможность грузить картинки в "Альбомы" (есть такая сущность в imgur). И иметь возможность создавать новые альбомы прямо из плагина. Но я не нашел API для получения списка уже имеющихся альбомов в Imgur (чему был сильно удивлен). Поэтому я оставил эту идею.
Про код
  • зарефакторил, чтобы было проще расширять плагин. У проекта уже появился один форк, который грузит картинки в self-hosted хранилище
  • обложил проект всякими eslint с Airbnb конфигом, Prettier и гит-хуками. Теперь vscode форматирует все за меня и не дает коммитить код, пока я не решил все проблемы. Это позволило мне переехать в vscode из Intellij, и, я надеюсь, сэкономить на заряде батареи ноутбука 😂 Плагин IntelliJ IDEA Keybindings для vscode в подобном случае - это просто must have.

Отдельно офигел от того, что i++ или for .. of - это моветон с точки зрения Airbnb конфига. Но пока решил не вносить изменения в набор правил и максимально следовать советам линтера

Немного странной кажется идея про

imgur сам удалит картинки, у которых не было хитов, и будет хранить картинки, которые просматриваются

От системы хранения знаний (особенно по Zettelkasten, где даже устаревшую инфомарцию не очень принято удалять) мне наоборот нужно было бы что бы все хранилось максимально долго, а тут какой-то сторонний сервис за меня может решить, что какая-то картинка мне больше не нужна.

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

В любом случае – удачи с развитием, очень нравится Obsidian как раз из-за более удобной работы с медиа-файлами чем в emacs с org-roam, который у меня сейчас основная база знаний, и рад что есть движ вокруг него.

  Развернуть 1 комментарий

imgur сам удалит картинки, у которых не было хитов

На самом деле, это скорее мое предположение, чем проверенная инфа. У меня нет точного ответа на вопрос, удаляются ли на текущий момент картинки с imgur, и как долго они могут прожить без просмотра. Прошу поделиться, если кто-то знает. Но у меня есть опыт работы с HackMD и заметки, лежавшие нетронутыми около года, откуда ни одна моя imgur-картинка не исчезла. Если верить этому старому вопросу на StackExchange, то они вообще не удаляются. Но ресурсы ведь не бесконечны, отсюда и предположение, что когда-нибудь неиспользуемая картинка все же может быть удалена.

Самое главное, что я хотел сказать этим предложением: управление картинками (хранение, удаление) при использовании данного плагина - это забота imgur, а не писателя заметок.

Подмечу, что Obsidian - это не обязательно строгий Zettelkasten. Это в первую очередь хороший MarkDown-редактор с ключевой фичей: возможностью связывать записи :) . Мне картинки чаще нужны для первичных больших заметок (некий inbox). В "знания" для базы знаний они превращаются позднее. И там выясняется, что половина этих картинок не так уж и нужна. А еще какую-то часть лучше бы переписать своими словами, копипаста - это еще не знания. И при использовании imgur-картинок, не нужно будет заботиться о локальном удалении уже ненужных.

Согласен, что могут быть случаи, когда лучше бы изображение сохранилось локально. Но для меня, это 1-2% из всех, сохраняемых мною изображений.
💡Идея для развития плагина: сделать по правому клику действие -> конвертировать в локальный файл. Или наоборот: выгрузить в удаленный сервис и удалить локальную копию.

  Развернуть 1 комментарий

💡Идея для развития плагина: сделать по правому клику действие -> конвертировать в локальный файл. Или наоборот: выгрузить в удаленный сервис и удалить локальную копию.

Это хорошая идея, третий вариант выгрузить в интернет и НЕ удалять локальный файл тоже имеет место, как раз для use case, который я описал. Если записью хочется поделиться или опубликовать.

  Развернуть 1 комментарий

Я выбрал обмидиан для саоей Картотеки, именно, потому что все данные живут у меня. Само хранилище лежит в дропбоксе, но плоская файловая структура позволяет перенести в любое облако.

Так вот я, наоборот, картинки локально пересохраняю, чтобы в случае шатдауна интернета или офылайна видеть все как оно было.

Я даже на форуме предлагал сделать возможность любые файлы к записи аттачить, для мета-инфы о проектах.

Но вероятно кому то такой вариант зайдет. Например я вижу в таком плагине удобный вариант черновика поста. Прям маркдаун переносишь в Клуб и все. Сейчас картинки копировать приходится.

  Развернуть 1 комментарий

Поскольку Obsidian хранит весь контент локально, включая изображения, которые просто засоряют мне папку с заметками.

В Обсидиане есть такая удобная настройка, которая позволяет сохранять все вложения в отдельной папке, что достаточно удобно.

Но на самом деле, мне Обсидиан + Zettelkasten нравится как раз тем, что по папкам ничего не надо организовывать =) С этими ссылками получается самоорганизующаяся система и не надо больше придумывать в какую папку сохранять новую заметку =)
И вообще, папку с заметками открывать нет никакой необходимости, в Обсидиане есть как минимум 3 способа более удобного поиска заметок.

  Развернуть 1 комментарий
Михаил Шварц, Блогер, инвестор, быдлокодер 15 января в 23:49

Удобный плагин, спасибо!

  Развернуть 1 комментарий
Kirill Gavrilov, Software Engineer автор 25 апреля в 22:20

Апрель 2021, немного обновлений:

  • Появились первые issues, потратил сегодня почти целый день на закрытие. Теперь можно грузить и gif'ки (можно даже сразу несколько) через drag-and-drop

  • А еще: на днях некий Santi Younger выложил на YouTube видео, рассказывающее как и зачем стоит использовать плагин. Достаточно подробно рассказал о плюсах и минусах, предварительно задав мне вопросы ранее. Так что видео получилось классным. И я думаю, что оно приведет новых пользователей.

  Развернуть 1 комментарий

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб