As mentioned earlier, the "sync-to-xlog" Obsidian plugin has recently been developed. After communicating with the official members, it was discovered that the official XLOG is also maintaining a plugin, which is still in a relatively primitive demo stage and is being verified. The target functionality is more powerful and complete, and even editing permissions have been obtained with a thick-skinned approach.
So let's clone and run it.
I hope I can learn something from the official plugin and see more system designs and usage of Crossbell/XLOG.
User Guide
More User-Friendly Login Authentication
The settings page supplements the login feature to invoke a login page and obtain the relevant token. The experience is great and not hacky.
It is found to be a standard JWT, and many optimization points are also observed.
The above image shows a SettingsTab.
Web View Information Display
A Robin Icon is registered on the left side, and when clicked, a web view expands on the right side to display basic information.
The description suggests local editing, uploading and downloading, and opening XLOG web pages.
Source Code Analysis
From the entry file, the following can be seen:
- AppPlugin: the core plugin
- SampleModal
- SettingsTab: the settings page
- Registration of the statusBar in the lower right corner
- Custom icon
- All web views are handwritten, which should be quite laborious
- The API part maintains a Class Indexer
- User login distinguishes between OP authorization and email authorization
- Newbie's token belongs to email, so that's how it is!
- Siwe's token belongs to wallet operations, which is my authorization scheme here
- It matches up
- The ribbon image is a hardcoded SVG, with no fancy technology involved
- When mounting the web view on the right side, workspace.revealLeat is used, which seems to be the usual defocusing process
- Command registration. A blank modal is registered
- The settings page registers the protocolHandler for easy token transmission, which is good
- Maintains the mapping-manager for local settings and remote post association, using simple slugs for comparison
- Attempts to listen to relevant events of metadataCache
The web view here is handwritten, and I feel sorry for the author. This thing should be done with a framework, especially when I think about how the list is all handwritten for loops, it's even more distressing... Fortunately, I have already mastered it.
Official Implementation Ideas
Token
The part of obtaining the token can be confirmed later. In any case, it's all about getting the token, and it has the same effect as Swie's token.
Getting XLOG Content
Here, the Crossbell SDK is used, which should be more comfortable and secure in theory.
When is the createIndeer created without carrying the token? Then, only publicly readable ones can be obtained, which raises doubts about how to operate it.
Site information. Use indexer.character.get(charId) to obtain basic information on the homepage, and provide a fallback default avatar for the avatar part.
Get all Posts using indexer.note.getMany.
That's it. There's nothing fancy.
When displaying IPFS, the website is hardcoded in the replace.
Uploading files uses the SDK, which can be referenced and learned from.
Valuable Code Blocks
// Manipulating frontmatter
this.plugin.app.fileManager.processFrontMatter
// Upload image to IPFS
import { ipfsUploadFile } from 'crossbell/ipfs'
export function uploadFile(file: File | Blob) {
return ipfsUploadFile(file)
}
// Register protocol
this.plugin.registerObsidianProtocolHandler('xlog-login', async (data) => {}))
// Write HTML href like this
// obsidian://xlog-login?token=xxx&characterId=xx&type=op/
This article easily completes synchronization using the "sync-to-xlog" plugin!