辛宝Otto

辛宝Otto 的玄酒清谈

北漂前端程序员儿 / 探索新事物 / Web Worker 主播之一/内向话痨
xiaoyuzhou
email

【Technical Perspective on Tinkering with Xlog】A smoother user experience 3: Implementing an Obsidian plugin.

image.png

This article is the third chapter of a series of articles, following [[【Technical Perspective Tinkering xlog】Smoother User Experience 2 In-depth Understanding of xlog Authentication]]. Based on the previous two chapters, this article begins to attempt to create an Obsidian plugin.

This article is expected to be a long-term project, and you can continue to follow this article to get updates. In addition, this article is worth at least 5 coins of appreciation on the xlog platform. Haha, welcome to appreciate.

The experience in this article can be migrated and reused. For example, if you are a user of other note-taking apps, you can refer to the implementation. Of course, if there is a bounty, I don't mind taking the job~

Background

As a loyal user of Obsidian, I record my thoughts and ideas on Obsidian on a daily basis. This means that I need to write articles on Obsidian first, and then copy the content to xlog, paying extra attention to the image part.

If we later edit the content of Obsidian, we also need to keep it consistent. If there is a plugin, I only need to select upload on the note, and it will be synchronized to xlog.

So, let's implement one.

Design Ideas

The overall design ideas are divided into several steps:

  • Technical research, running through the interface
  • Design the Obsidian plugin
  • Implement the Obsidian plugin
  • Package and distribute the Obsidian plugin
  • Promote and try the Obsidian plugin

Technical Research

In the previous section, we implemented the creation and update of articles, and we can easily manage articles using the siwe token. Other operations are not implemented for now.

This part is assumed to be already understood. If not, you can read the content of the previous chapter.

Plugin Design

Here, prior experience in Obsidian development is required. We will skip the details for now. I have maintained a simple Obsidian-vue-starter template, which is more user-friendly for Vue users. Github Repo

We will develop based on the template.

We hope the plugin can be used like this.

The user should enable the plugin settings and correctly add the token/characterID, and there should be a button for connection testing.

Right-clicking on the corresponding note in the list should show "Upload to xlog", and clicking it will trigger the upload operation.

When verifying the upload, check that the front-matter requires the following:

  • Optional tags
  • Optional slug
  • Optional summary
  • Required title
  • Optional noteId, if it exists, it is considered an update

The characterID can be ignored for now as it is a minority requirement.

If the current content contains video/audio/image, limit the file size and prompt whether to upload to xlog or replace it with an IPFS link.

After the file upload is completed, fill in and modify the noteID parameter, and then proceed with the update operation.

Implementing the Plugin

Currently, I will work on this open-source project on GitHub:
https://github.com/Otto-J/sync-to-xlog

The functionality is approaching completion, and several recent articles have been completed using the plugin.

You can visit https://github.com/Otto-J/sync-to-xlog/releases to get the latest version.

Packaging and Distribution

Submitted to the official plugin marketplace for approval and listing.

Promoting and Trying

Strive to obtain official recognition.

Informed the official team.

Recorded a simple video introduction on Bilibili:
Introducing the Obsidian-sync-xlog Plugin I Developed: Easily Sync Obsidian Content to xlog

Will start promoting seriously in the next few days.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.