Introduction

The Telescope is the open source project that maintains by Seneca College. The Telescope is an open source web servce and client application gathers all blog posts from variety of platforms such as WordPress, Medium, Dev Community, and many others and presenting as timeline.

Issue

The issue is one of blog post contain many lines of <p><br><p> at the end of blog post. This numerous of line break tag that wrap with paragraph tag interrupt view other blog posts.

Fix

The issue is very simple to fix. In the

remove-empty-paragraphs.js
const cleanWhiteSpace = require('clean-whitespace');

module.exports = function (dom) {
  if (!(dom && dom.window && dom.window.document)) {
    return;
  }

  dom.window.document.querySelectorAll('p').forEach((p) => {
    p.innerHTML = cleanWhiteSpace(p.innerHTML);
    const paragraphInnerHTML = p.innerHTML;
    if(!paragraphInnerHTML.replace(/ /gm,'').trim()) {
      p.remove();
    }
  });
};

The logic already has been made for the &nbsp non-breaking space. Therefore simply add one more condition || paragraphInnerHTML.trim() === '<br>' that catch if the <p> contains only <br> tag for remove the

tag.

challenge

The issue supposed to be easily resolved. However there is two things that I have faced the challenge.

1. The remove-empty-paragraph.js is never called
2. Since (1) challenge exists, I do not know my logic is correct.

The reason that remove-empty-paragraph.js is not called is actually function never get called. I think the empty &nbsp treats as edge case so I think the code was missing. Therefore I have create the code for invoking the function
The second challenge has been resolved with the advice from David who is instructor of this course. His advice is create unit test case for testing my logic is whether pass or fail. Therefore I have created

test('should remove <p><br></p> (line break)', () => {
    const htmlData = toDom('<div><p><br></p></div>');
    removeEmptyParagraphs(htmlData);
    const expectedHtml = '<div></div>';
    expect(htmlData.window.document.body.innerHTML).toEqual(expectedHtml);

The output is pass! My logic is correct but I do not see the any change on the Telescope running in local. I have no idea why my change does not reflect to the Telescope. So I have asked this issue to our Telescope Slack channel. Thankfully Josue and Duc Bui Manh helped to resolve this issue. They suggested me to delete old redis-data and re-run the application that also update database to fetch the blog posts. It takes while the elasticSearch crawls the all the blog posts but finally I have the expected result.

Conclusion

During the time in Hacktoberfest, I have contributed 4 small projects. It is such a good experience to contribute to large open source project Telescope.

Link

PR