This article documents the process of developing the "obsidian-sync-to-xlog" plugin, including the challenges and considerations.
Background
As mentioned earlier, we are synchronizing the content of Obsidian with Xlog. Soon, we will be able to read the notes from Obsidian on Xlog. However, there is an issue to address regarding the images. The images are not linked to the IPFS on Xlog.
Therefore, we need to solve this problem, which has some technical difficulties.
Technical Design
To upload Obsidian image content to IPFS, we need to follow these steps:
- Read the MD content and identify the image resources, noting that there may be local images from Obsidian or remote CDN images.
- Upload the images to IPFS and replace the text, then upload to Xlog.
Do not underestimate these two steps. I have put a lot of effort into handling them, especially since it is my first time developing an Obsidian plugin. It has been quite challenging.
Handling Images
Unlike regular markdown, Obsidian has two ways of displaying image resources:
- The native
![]()image scheme - The built-in
![[]]display scheme
The first one is relatively simple. We can write a regular expression to extract the https? pattern.
It is important to note that using traditional fetch/axios will trigger CORS security verification. However, using obsidian.requestUrl allows us to bypass security policies. These are all pitfalls to be aware of.
The difficult part is the second scheme. We first use regex to match the path and then find the appropriate Obsidian API to read the real path or binary data of the article.
This step is the most troublesome and will be discussed separately.
In this step, once we have found the relevant paths of the images, we can proceed to the next step, which is uploading them to Xlog and obtaining the IPFS address.
Uploading to IPFS
In the first article of this series, we learned that there is an API for uploading images and obtaining the IPFS address. We can simply call this API.
After obtaining the IPFS address, we can overwrite the original text.
Reading Configuration: Whether to Handle IPFS
What if the user does not want to upload images to IPFS in certain situations? Here, we introduce a new setting to determine whether to upload images to IPFS.
With a slight modification to the code to accommodate the setting option, if the button is turned off, the original content is uploaded directly. If it is turned on, the images are uploaded first, followed by the text.
Retrieving OB Image Data
This part is quite challenging. My current approach has some issues, as some images in the top-level directory may not be readable, resulting in the images being ignored.
We can address this small issue later when we have the opportunity. It is a bit difficult.
Outlook
Wishing you a happy day!