feat: add support to relative paths for media content (#12)

* docs: update docs

* feat: support images with relative paths

* feat: use raw user content url to parse relative paths

Author: protiumx

README.md

@@ -63,16 +63,20 @@ Example:
 ---
 title: New Article
 description: Some description
-tags:
-  - test
-  - ci
+tags: test, ci
 license: public-domain
 ---
 # This is my new Article
 
 In this article we will learn how to setup with `blogpub`
 
-![ci-meme.jpg](./meme.jpg)
+## Relative images from the repository
+
+![ci-meme.jpg](@/assets/meme.jpg)
+
+## External Images
+
+![meme.jpg](https://sources.com/meme.jpg)
 
 ## Requirements
 
@@ -113,6 +117,17 @@ This is only for Medium
 {{/if}}
 ```
 
+## Relative Images
+
+To use images contained in the same folder of the blog articles use `@` as source path. `@` will be parsed
+as the URL to the repository/<articles_folder>.
+E.g.
+```
+![image](@/img1.png)
+
+<img src="@/img2.jpg" />
+```
+
 ## Developing
 
 Run tests

src/main.ts

@@ -42,11 +42,20 @@ export async function run() {
     const mediumUserId = core.getInput('medium_user_id', { required: true });
     const mediumBaseUrl = core.getInput('medium_base_url', { required: false });
     const devtoApiKey = core.getInput('devto_api_key', { required: true });
+    
+    // https://docs.github.com/en/actions/learn-github-actions/environment-variables#default-environment-variables
+    const GITHUB_SERVER_URL = process.env['GITHUB_SERVER_URL'] as string;
+    const GITHUB_REPOSITORY = process.env['GITHUB_REPOSITORY'] as string;
+    const GITHUB_REF_NAME = process.env['GITHUB_REF_NAME'] as string;
+
+    const rawGithubUrl = GITHUB_SERVER_URL
+      .replace('//github.com', '//raw.githubusercontent.com');
 
     const github = getOctokit(ghToken);
 
     const articleContent = await loadArticleContent(github, articlesFolder);
-    const article = parseArticle(articleContent);
+    const baseUrl = `${rawGithubUrl}/${GITHUB_REPOSITORY}/${GITHUB_REF_NAME}/${articlesFolder}`;
+    const article = parseArticle(articleContent, baseUrl);
 
     const template = Handlebars.compile(article.content);
 

src/parser.ts

@@ -2,6 +2,8 @@ import { load as loadYaml } from 'js-yaml';
 
 import { Article, ArticleConfig, MediumLicense } from './types';
 
+const RelativeImagesRegex = /!\[.*\]\(@\/.*\)|<img.*src=["'](@)\/.*["']/i;
+
 function getMetadataIndexes(lines: string[]): number[] {
   const indexes: number[] = [];
   for (let i = 0; i < lines.length; i++) {
@@ -26,7 +28,20 @@ function getArticleTitle(lines: string[]): string | null {
   return null;
 }
 
-export function parseArticle(content: string): Article {
+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);
+    }
+  }
+}
+
+/*
+ * Parses an article into an Article object.
+ *
+ * It loads the metadata and parses all the images with `@` relative path.
+ */
+export function parseArticle(content: string, baseUrl: string): Article {
   const lines = content.split('\n');
   const metadataIndexes = getMetadataIndexes(lines);
   if (metadataIndexes.length !== 2) {
@@ -43,6 +58,7 @@ export function parseArticle(content: string): Article {
     config.title = title;
   }
 
+  parseRelativeImages(contentLines, baseUrl);
   config.description ??= '';
   config.license ??= MediumLicense.PublicDomain;
   config.published ??= true;

test/main.spec.ts

@@ -35,6 +35,12 @@ jest.mock('@actions/github', () => ({
 jest.mock('@actions/core');
 
 describe('blogpub', () => {
+  beforeAll(() => {
+    process.env['GITHUB_SERVER_URL'] = 'https://github.com';
+    process.env['GITHUB_REPOSITORY'] = 'protiumx/blogpub';
+    process.env['GITHUB_REF_NAME'] = 'main';
+  });
+
   beforeEach(jest.clearAllMocks);
 
   (getOctokit as jest.Mock).mockReturnValue(octokitMock);
@@ -247,7 +253,6 @@ describe('blogpub', () => {
   it('should upload article to dev.to and set dev.tp url output', async () => {
     const template = jest.fn(() => 'compiled');
     (Handlebars.compile as jest.Mock).mockReturnValue(template);
-
     (core.getInput as jest.Mock).mockImplementation((key: string) => {
       switch (key) {
         case 'articles_folder':
@@ -283,5 +288,7 @@ describe('blogpub', () => {
       content: 'compiled',
     });
     expect(core.setOutput).toHaveBeenCalledWith('devto_url', 'dev.to/new');
+    expect(parseArticle).toHaveBeenCalledWith(
+      'content', 'https://raw.githubusercontent.com/protiumx/blogpub/main/blogs');
   });
 });

test/parser.spec.ts

@@ -5,19 +5,18 @@ describe('parser', () => {
   beforeEach(jest.clearAllMocks);
 
   it('should error when article does not contain metadata', () => {
-    expect(parseArticle.bind(null, '')).toThrowError('Incorrect metadata');
+    expect(parseArticle.bind(null, '', '')).toThrowError('Incorrect metadata');
   });
 
   it('should error when article does not contain a title', () => {
     const article = `
 ---
-tags:
-  - tagOne
+tags: tagOne
 ---
 ## some sub title
 some content
 `;
-    expect(parseArticle.bind(null, article)).toThrowError('Article does not have a title');
+    expect(parseArticle.bind(null, article, '')).toThrowError('Article does not have a title');
   });
 
   it('should get title from article content', () => {
@@ -29,7 +28,7 @@ tags:
 # Main Title
 some content
 `;
-    const parsed = parseArticle(article);
+    const parsed = parseArticle(article, '');
     expect(parsed.config.title).toEqual('Main Title');
   });
 
@@ -40,7 +39,7 @@ title: Metadata Title
 ---
 # Main Title
 some content`;
-    const parsed = parseArticle(article);
+    const parsed = parseArticle(article, '');
     expect(parsed.config.title).toEqual('Metadata Title');
     expect(parsed.config.description).toEqual('');
     expect(parsed.config.license).toEqual(MediumLicense.PublicDomain);
@@ -54,20 +53,50 @@ some content`);
 ---
 title: Metadata Title
 description: New Article
-tags:
-    - one
+tags: one, two
 license: ${MediumLicense.CC40Zero}
 published: false
 ---
 # Main Title
 some content`;
-    const parsed = parseArticle(article);
+    const parsed = parseArticle(article, '');
     expect(parsed.config.title).toEqual('Metadata Title');
     expect(parsed.config.description).toEqual('New Article');
-    expect(parsed.config.tags).toEqual(['one']);
+    expect(parsed.config.tags).toEqual('one, two');
     expect(parsed.config.license).toEqual(MediumLicense.CC40Zero);
     expect(parsed.config.published).toEqual(false);
     expect(parsed.content).toEqual(`# Main Title
 some content`);
   });
+
+
+  it('should parse all images with relative path', () => {
+    const article = `
+---
+title: Some Title
+description: New Article
+tags: one, images
+published: false
+---
+
+# Main Title
+some content
+
+![img](@/assets/img.png)
+
+<img alt="image" src="@/assets/img.jpg" />
+
+## Description
+`;
+    const parsed = parseArticle(article, 'https://raw.github.com/protiumx/blogpub/main/articles');
+    console.info(parsed.content);
+    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"',
+      )).toBeTruthy();
+  });
 });