feat: Add relative_url filter support for Jekyll image paths (#407)

- Add isEnableRelativeUrl setting to JekyllSettings
- Add UI toggle for relative_url filter in settings
- Update ResourceLinkConverter to handle relative_url filter
- Add comprehensive tests for relative_url functionality

This change allows proper image path handling when Jekyll baseurl is configured,
particularly useful for GitHub Pages deployments.

src/ResourceLinkConverter.ts

@@ -55,10 +55,15 @@ export class ResourceLinkConverter implements Converter {
                       width: string | undefined,
                       height: string | undefined,
                       space: string | undefined,
-                      caption: string | undefined) =>
-      `![image](/${this.relativeResourcePath}/${sanitizedFileName}/${contents.replace(/\s/g, '-')}.${suffix})`
-      + `${convertImageSize(width, height)}`
-      + `${convertImageCaption(caption)}`;
+                      caption: string | undefined) => {
+      const imagePath = `/${this.relativeResourcePath}/${sanitizedFileName}/${contents.replace(/\s/g, '-')}.${suffix}`;
+      const imageUrl = this.liquidFilterOptions.useRelativeUrl
+        ? `{{ "${imagePath}" | relative_url }}`
+        : imagePath;
+      return `![image](${imageUrl})`
+        + `${convertImageSize(width, height)}`
+        + `${convertImageCaption(caption)}`;
+    };
 
     return input.replace(ObsidianRegex.ATTACHMENT_LINK, replacer);
   }

src/jekyll/settings/JekyllSettings.ts

@@ -11,10 +11,12 @@ export default class JekyllSettings implements O2PluginSettings {
   private _isEnableBanner: boolean;
   private _isEnableCurlyBraceConvertMode: boolean;
   private _isEnableUpdateFrontmatterTimeOnEdit: boolean;
+  private _isEnableRelativeUrl: boolean;
 
   constructor() {
     this._jekyllPath = '';
     this._jekyllRelativeResourcePath = 'assets/img';
+    this._isEnableRelativeUrl = false;
   }
 
   get jekyllPath(): string {
@@ -57,6 +59,14 @@ export default class JekyllSettings implements O2PluginSettings {
     this._isEnableUpdateFrontmatterTimeOnEdit = value;
   }
 
+  get isEnableRelativeUrl(): boolean {
+    return this._isEnableRelativeUrl;
+  }
+
+  set isEnableRelativeUrl(value: boolean) {
+    this._isEnableRelativeUrl = value;
+  }
+
   targetPath(): string {
     return `${this._jekyllPath}/_posts`;
   }

src/settings.ts

@@ -61,6 +61,7 @@ export class O2SettingTab extends PluginSettingTab {
     this.containerEl.createEl('h5', {
       text: 'Liquid Filter',
     });
+    this.addJekyllRelativeUrlSetting();
 
     // docusaurus settings
     this.containerEl.createEl('h3', {
@@ -232,4 +233,17 @@ export class O2SettingTab extends PluginSettingTab {
           await this.plugin.saveSettings();
         }));
   }
+
+  private addJekyllRelativeUrlSetting() {
+    const jekyllSetting = this.plugin.jekyll as JekyllSettings;
+    new Setting(this.containerEl)
+      .setName('Enable relative URL for images')
+      .setDesc('Use Jekyll\'s relative_url filter for image paths. Required when using baseurl.')
+      .addToggle(toggle => toggle
+        .setValue(jekyllSetting.isEnableRelativeUrl)
+        .onChange(async (value) => {
+          jekyllSetting.isEnableRelativeUrl = value;
+          await this.plugin.saveSettings();
+        }));
+  }
 }

src/tests/ResourceLinkConverter.test.ts

@@ -133,20 +133,31 @@ _This is a test image._
 
 });
 
-describe('liquid filter', () => {
-  it('should enable a relative_url', () => {
-    const converter = new ResourceLinkConverter(
-      '2023-01-01-post-mock',
-      'assets',
-      'test',
-      'attachments',
-      'assets',
-      { useRelativeUrl: true },
-    );
+describe('liquid filter with relative_url', () => {
+  const converter = new ResourceLinkConverter(
+    '2023-01-01-post-mock',
+    'assets',
+    'test',
+    'attachments',
+    'assets',
+    { useRelativeUrl: true },
+  );
 
+  it('should wrap image path with relative_url filter', () => {
     const context = `![[test.png]]`;
     const result = converter.convert(context);
-
     expect(result).toEqual(`![image]({{ "/assets/2023-01-01-post-mock/test.png" | relative_url }})`);
   });
+
+  it('should handle images with size specifications', () => {
+    const context = `![[test.png|100x200]]`;
+    const result = converter.convert(context);
+    expect(result).toEqual(`![image]({{ "/assets/2023-01-01-post-mock/test.png" | relative_url }}){: width="100" height="200" }`);
+  });
+
+  it('should handle images with captions', () => {
+    const context = `![[test.png]]\n_Image caption_`;
+    const result = converter.convert(context);
+    expect(result).toEqual(`![image]({{ "/assets/2023-01-01-post-mock/test.png" | relative_url }})\n_Image caption_`);
+  });
 });