feat: find and replace relative paths (#14)

* feat: replace relative paths in article content

* feat: use file raw url to get base url

* refactor: update build

* docs: update docs

Author: protiumx

README.md

@@ -70,13 +70,9 @@ license: public-domain
 
 In this article we will learn how to setup with `blogpub`
 
-## Relative images from the repository
+## Relative paths from the repository
 
-![ci-meme.jpg](@/assets/meme.jpg)
-
-## External Images
-
-![meme.jpg](https://sources.com/meme.jpg)
+![ci-meme.jpg](./assets/meme.jpg)
 
 ## Requirements
 
@@ -117,21 +113,22 @@ This is only for Medium
 {{/if}}
 ```
 
-## Relative Images
+## Relative Paths
 
-To use images contained in the same folder of the blog articles use `@/<image_path>`. 
-`@` refers to `https://raw.githubusercontent.com/<owner>/<repo>/<articles_folder>`
+To use any media contained in your repository you can use relative paths. 
+All relative paths will be resolved using the raw url of the markdown down file that 
+is being processed.
 
 Example:
 ```
-![image](@/img1.png)
-<img src="@/img2.jpg" />
+![image](./img1.png)
+<img src="../assets/img2.jpg" />
 ```
 
 Will be parsed as
 ```
 ![image](https://raw.githubusercontent.com/<owner>/<repo>/<articles_folder>/img1.png)
-<img src="https://raw.githubusercontent.com/<owner>/<repo>/<articles_folder>/img2.jpg" />
+<img src="https://raw.githubusercontent.com/<owner>/<repo>/assets/img2.jpg" />
 ```
 
 ## Developing
@@ -164,4 +161,4 @@ Please submit a PR with any contribution. Refer to the list of `TODO's` or open
 - [ ] Support publishing to only 1 platform
 - [ ] Support edition and auto update of articles
 - [ ] Support multiple articles
-- [x] Relative images to github raw server
+- [x] Relative paths to github raw server

build/blogpub.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import Handlebars from 'handlebars';
+import path from 'path';
 import * as core from '@actions/core';
 import { context, getOctokit } from '@actions/github';
 import { AxiosError } from 'axios';
@@ -11,7 +12,9 @@ import { parseArticle } from '$/parser';
 
 type Github = ReturnType<typeof getOctokit>;
 
-async function loadArticleContent(github: Github, folderName: string): Promise<string> {
+async function loadArticleFile(
+  github: Github, folderName: string,
+): Promise<{ rawUrl: string, content: string}> {
   const { owner, repo } = context.repo;
   // NOTE: Pagination returns 30 files by default
   const commit = (
@@ -31,7 +34,7 @@ async function loadArticleContent(github: Github, folderName: string): Promise<s
   const newArticle = mdFiles[0];
   core.debug(`Using ${newArticle.filename!}`);
   const content = await fs.readFile(`./${newArticle.filename!}`, 'utf8');
-  return content;
+  return { rawUrl: newArticle.raw_url!, content };
 }
 
 export async function run() {
@@ -43,18 +46,13 @@ export async function run() {
     const mediumBaseUrl = core.getInput('medium_base_url', { required: false });
     const devtoApiKey = core.getInput('devto_api_key', { required: true });
 
-    const rawGithubUrl = context.serverUrl
-      .replace('//github.com', '//raw.githubusercontent.com');
-
     const github = getOctokit(ghToken);
 
-    const articleContent = await loadArticleContent(github, articlesFolder);
-    const { repo, owner } = context.repo;
-    const baseUrl = `${rawGithubUrl}/${owner}/${repo}/${context.ref.replace('refs/heads/', '')}/${articlesFolder}`;
+    const articleFile = await loadArticleFile(github, articlesFolder);
+    const baseUrl = path.dirname(articleFile.rawUrl);
     /* istanbul ignore next */
     core.debug(`Base URL: ${baseUrl}`);
-    const article = parseArticle(articleContent, baseUrl);
-
+    const article = parseArticle(articleFile.content, `${baseUrl}/`);
     const template = Handlebars.compile(article.content);
 
     /* istanbul ignore next */

src/main.ts

@@ -2,7 +2,7 @@ import { load as loadYaml } from 'js-yaml';
 
 import { Article, ArticleConfig, MediumLicense } from './types';
 
-const RelativeImagesRegex = /!\[.*\]\(@\/.*\)|<img.*src=["'](@)\/.*["']/i;
+const RelativePathRegex = /[\.]{1,2}\//;
 
 function getMetadataIndexes(lines: string[]): number[] {
   const indexes: number[] = [];
@@ -30,8 +30,8 @@ function getArticleTitle(lines: string[]): string | null {
 
 function parseRelativeImages(lines: string[], baseUrl: string) {
   for (let i = 0; i < lines.length; i++) {
-    if (RelativeImagesRegex.test(lines[i])) {
-      lines[i] = lines[i].replace('@', baseUrl);
+    if (RelativePathRegex.test(lines[i])) {
+      lines[i] = lines[i].replace(RelativePathRegex, baseUrl);
     }
   }
 }

src/parser.ts

@@ -24,8 +24,6 @@ jest.mock('$/api/devto');
 jest.mock('$/parser');
 jest.mock('@actions/github', () => ({
   context: {
-    serverUrl: 'https://github.com',
-    ref: 'refs/heads/main',
     repo: {
       owner: 'owner',
       repo: 'repo',
@@ -41,6 +39,17 @@ describe('blogpub', () => {
 
   (getOctokit as jest.Mock).mockReturnValue(octokitMock);
 
+  const fileData = {
+      data: {
+        files: [
+          {
+            filename: 'blogs/blog-01.md',
+            raw_url: 'https://raw.githubusercontent.com/owner/repo/main/blogs/blog-01.md',
+          },
+        ],
+      },
+    };
+
   it('should set failed when fails to get PR info', async () => {
     const err = new Error('github');
     octokitMock.request.mockRejectedValue(err);
@@ -82,15 +91,7 @@ describe('blogpub', () => {
     });
     const err = new Error('fs');
     (promises.readFile as jest.Mock).mockRejectedValue(err);
-    octokitMock.request.mockResolvedValue({
-      data: {
-        files: [
-          {
-            filename: 'blogs/blog-01.md',
-          },
-        ],
-      },
-    });
+    octokitMock.request.mockResolvedValue(fileData);
 
     await run();
 
@@ -109,15 +110,7 @@ describe('blogpub', () => {
     (parseArticle as jest.Mock).mockImplementation(() => {
       throw err;
     });
-    octokitMock.request.mockResolvedValue({
-      data: {
-        files: [
-          {
-            filename: 'blogs/blog-01.md',
-          },
-        ],
-      },
-    });
+    octokitMock.request.mockResolvedValue(fileData);
 
     await run();
 
@@ -149,15 +142,7 @@ describe('blogpub', () => {
       content: 'parsed',
     });
     (medium.createArticle as jest.Mock).mockRejectedValue(err);
-    octokitMock.request.mockResolvedValue({
-      data: {
-        files: [
-          {
-            filename: 'blogs/blog-01.md',
-          },
-        ],
-      },
-    });
+    octokitMock.request.mockResolvedValue(fileData);
 
     await run();
 
@@ -182,15 +167,7 @@ describe('blogpub', () => {
     });
     (devto.createArticle as jest.Mock).mockRejectedValue(new Error(''));
     (medium.createArticle as jest.Mock).mockResolvedValue({ url: 'medium.com/new' });
-    octokitMock.request.mockResolvedValue({
-      data: {
-        files: [
-          {
-            filename: 'blogs/blog-01.md',
-          },
-        ],
-      },
-    });
+    octokitMock.request.mockResolvedValue(fileData);
 
     await run();
 
@@ -225,15 +202,7 @@ describe('blogpub', () => {
     });
     (medium.createArticle as jest.Mock).mockResolvedValue({ url: 'medium.com/new' });
     (devto.createArticle as jest.Mock).mockRejectedValue(err);
-    octokitMock.request.mockResolvedValue({
-      data: {
-        files: [
-          {
-            filename: 'blogs/blog-01.md',
-          },
-        ],
-      },
-    });
+    octokitMock.request.mockResolvedValue(fileData);
 
     await run();
 
@@ -266,15 +235,7 @@ describe('blogpub', () => {
     });
     (medium.createArticle as jest.Mock).mockResolvedValue({ url: 'medium.com/new' });
     (devto.createArticle as jest.Mock).mockResolvedValue({ url: 'dev.to/new' });
-    octokitMock.request.mockResolvedValue({
-      data: {
-        files: [
-          {
-            filename: 'blogs/blog-01.md',
-          },
-        ],
-      },
-    });
+    octokitMock.request.mockResolvedValue(fileData);
 
     await run();
 
@@ -285,6 +246,6 @@ describe('blogpub', () => {
     });
     expect(core.setOutput).toHaveBeenCalledWith('devto_url', 'dev.to/new');
     expect(parseArticle).toHaveBeenCalledWith(
-      'content', 'https://raw.githubusercontent.com/owner/repo/main/blogs');
+      'content', 'https://raw.githubusercontent.com/owner/repo/main/blogs/');
   });
 });

test/main.spec.ts

@@ -82,20 +82,25 @@ published: false
 # Main Title
 some content
 
-![img](@/assets/img.png)
+![img](./assets/img.png)
+![img](../global/img.png)
 
-<img alt="image" src="@/assets/img.jpg" />
+<img alt="image" src="./assets/img.gif" />
 
 ## Description
 `;
-    const parsed = parseArticle(article, 'https://raw.github.com/protiumx/blogpub/main/articles');
+    const parsed = parseArticle(article, 'https://raw.github.com/protiumx/blogpub/main/articles/');
     expect(
       parsed.content.includes(
         '![img](https://raw.github.com/protiumx/blogpub/main/articles/assets/img.png)',
       )).toBeTruthy();
     expect(
       parsed.content.includes(
-        '<img alt="image" src="https://raw.github.com/protiumx/blogpub/main/articles/assets/img.jpg"',
+        '![img](https://raw.github.com/protiumx/blogpub/main/articles/global/img.png)',
+      )).toBeTruthy();
+    expect(
+      parsed.content.includes(
+        '<img alt="image" src="https://raw.github.com/protiumx/blogpub/main/articles/assets/img.gif"',
       )).toBeTruthy();
   });
 });