上文提到，最近開発された sync-to-xlog という Obsidian プラグインについて、公式メンバーとのコミュニケーションを行い、公式の XLOG プラグインも開発されていることがわかりました。まだかなり原始的なデモ段階であり、アイデアの検証中です。目標はより強力で完全な機能を持ち、編集権限も手に入れることです。
それでは、クローンして実行してみましょう。
公式プラグインから何を学べるか、クローンして実行することでクロスベル / XLOG のシステムデザインや使用方法についてさらに理解できることを期待しています。
使用方法#
より使いやすいログイン認証#
設定ページには、ログインを呼び出すための login ボタンがあり、関連するトークンを取得するために使用できます。これにより、ハッキングすることなく、非常にスムーズな体験が得られます。
標準的な jwt であることがわかり、多くの最適化ポイントも見つかりました。
上の図は SettingsTab です。
web view の情報表示#
左側に Robin Icon が登録されており、クリックすると右側に web-view が展開され、基本情報が表示されます。
説明を見ると、ローカルで編集、アップロード、ダウンロード、XLOG のウェブページを開くことができるようです。
ソースコードの解析#
エントリーファイルから見ると、
- AppPlugin プラグインのコア
- SampleModal
- 設定ページ SettingsTab
- 右下の statusBar の登録
- カスタムアイコン
- すべての web view は手書きで作成されているので、かなり大変です
- api の部分では Class Indexer をメンテナンスしています
- ユーザーのログインは op 認証と email 認証で区別されます
- newbie のトークンは email に属しているのですね！
- siwe のトークンはウォレット操作に属しているので、これが私の認証方法です
- 一致しました
- リボンの画像は固定された svg であり、特別な技術はありません
- 右側の web view をマウントする際には、workspace.revealLeat が使用されているようです
- コマンドの登録。空のモーダルを登録しました
- 設定ページで protocolHandler を登録し、トークンの受け渡しを容易にしています
- マッピングマネージャーをメンテナンスして、ローカル設定とリモートポストを関連付けるためにシンプルなスラッグを使用しています
- metadataCache の関連イベントを監視しようとしています
ここでの webview は手書きで作成されているため、作者に同情します。これはフレームワークを使用するべきです、特にリストが自分で手書きされていることを考えると、さらに同情します... 幸いにも私は既にマスターしています。
公式の実装アイデア#
トークン#
トークンの取得部分は後で確認できますが、結局はトークンを取得するだけであり、swie のトークンと同じ効果があります
XLOG のコンテンツの取得#
ここでは crossbell の sdk を使用していますので、より快適で安全です。
createIndeer の作成時にトークンを持っていない場合、公開された読み取り専用のみ取得できるため、どのように操作するかは疑問です。
サイト情報。indexer.character.get(charId) を使用してホームページの基本情報を取得し、アイコン部分はデフォルトアイコンにフォールバックします。
すべての投稿を取得するには、indexer.note.getMany を使用します。
以上です。特別な技術はありません。
ipfs の表示時には固定のウェブサイトに置き換えます
ファイルのアップロードには sdk を使用していますので、参考になるかもしれません。
価値のあるコードブロック#
// frontmatter の操作
this.plugin.app.fileManager.processFrontMatter
// 画像を ipfs にアップロード
import { ipfsUploadFile } from 'crossbell/ipfs'
export function uploadFile(file: File | Blob) {
return ipfsUploadFile(file)
}
// プロトコルの登録
this.plugin.registerObsidianProtocolHandler('xlog-login', async (data) => {}))
// html の href はこのように書きます
// obsidian://xlog-login?token=xxx&characterId=xx&type=op/
この記事では、sync-to-xlog プラグインを使用して簡単に同期できます！